aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass/application.scss
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2020-06-09 09:33:28 +0200
committerGitHub <noreply@github.com>2020-06-09 09:33:28 +0200
commite66883b37ae0796256b3aba550670a2d76cfc98a (patch)
tree3cce3c78e9f9f327470f0370a1b4065fe7e0009e /client/src/sass/application.scss
parent6ad971d5f5e9ea2adfc58bd83ba1790efa4a8d12 (diff)
downloadPeerTube-e66883b37ae0796256b3aba550670a2d76cfc98a.tar.gz
PeerTube-e66883b37ae0796256b3aba550670a2d76cfc98a.tar.zst
PeerTube-e66883b37ae0796256b3aba550670a2d76cfc98a.zip
`fitWidth` for `video-miniature`, fluid grid (#2830)
* Fluid abstract video list * normalize timestamp display on miniatures * use grid for abstract-video-list - refactor scss function var to pvar to avoid overriding css variables - move fluid-grid margins to adapt-margin-content-width mixin for maintainability - fix video-miniature-name margin-top on small screen * move sceenratio function in a mixin * display no miniature avatar in channel videos view
Diffstat (limited to 'client/src/sass/application.scss')
-rw-r--r--client/src/sass/application.scss24
1 files changed, 12 insertions, 12 deletions
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 16e7ea5ca..d5763527e 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -47,21 +47,21 @@ body {
47 47
48 --actionButtonColor: #{$grey-foreground-color}; 48 --actionButtonColor: #{$grey-foreground-color};
49 --supportButtonBackgroundColor: #{transparent}; 49 --supportButtonBackgroundColor: #{transparent};
50 --supportButtonColor: #{var(--actionButtonColor)}; 50 --supportButtonColor: #{pvar(--actionButtonColor)};
51 --supportButtonHeartColor: #{$support-button-heart}; 51 --supportButtonHeartColor: #{$support-button-heart};
52 52
53 --activatedActionButtonColor: #{$activated-action-button-color}; 53 --activatedActionButtonColor: #{$activated-action-button-color};
54 54
55 font-family: $main-fonts; 55 font-family: $main-fonts;
56 font-weight: $font-regular; 56 font-weight: $font-regular;
57 color: var(--mainForegroundColor); 57 color: pvar(--mainForegroundColor);
58 background-color: var(--mainBackgroundColor); 58 background-color: pvar(--mainBackgroundColor);
59 font-size: 14px; 59 font-size: 14px;
60} 60}
61 61
62::selection { 62::selection {
63 color: var(--mainBackgroundColor); 63 color: pvar(--mainBackgroundColor);
64 background-color: var(--mainHoverColor); 64 background-color: pvar(--mainHoverColor);
65} 65}
66 66
67#incompatible-browser { 67#incompatible-browser {
@@ -78,12 +78,12 @@ strong {
78 78
79input.readonly { 79input.readonly {
80 /* Force blank on readonly inputs */ 80 /* Force blank on readonly inputs */
81 background-color: var(--inputBackgroundColor) !important; 81 background-color: pvar(--inputBackgroundColor) !important;
82} 82}
83 83
84input, textarea { 84input, textarea {
85 outline: none; 85 outline: none;
86 color: var(--mainForegroundColor); 86 color: pvar(--mainForegroundColor);
87} 87}
88 88
89label { 89label {
@@ -128,7 +128,7 @@ label {
128 } 128 }
129 129
130 .sub-menu { 130 .sub-menu {
131 background-color: var(--submenuColor); 131 background-color: pvar(--submenuColor);
132 width: 100%; 132 width: 100%;
133 height: 81px; 133 height: 81px;
134 margin-bottom: $sub-menu-margin-bottom; 134 margin-bottom: $sub-menu-margin-bottom;
@@ -166,7 +166,7 @@ label {
166} 166}
167 167
168.title-page { 168.title-page {
169 color: var(--mainForegroundColor); 169 color: pvar(--mainForegroundColor);
170 font-size: 16px; 170 font-size: 16px;
171 display: inline-block; 171 display: inline-block;
172 margin-right: 55px; 172 margin-right: 55px;
@@ -180,7 +180,7 @@ label {
180 180
181 &.active { 181 &.active {
182 font-weight: $font-bold; 182 font-weight: $font-bold;
183 border-bottom: 2px solid var(--mainColor); 183 border-bottom: 2px solid pvar(--mainColor);
184 } 184 }
185 185
186 &.title-page-single { 186 &.title-page-single {
@@ -188,7 +188,7 @@ label {
188 } 188 }
189 189
190 &:hover, &:active, &:focus { 190 &:hover, &:active, &:focus {
191 color: var(--mainForegroundColor); 191 color: pvar(--mainForegroundColor);
192 } 192 }
193 193
194 @media screen and (max-width: $mobile-view) { 194 @media screen and (max-width: $mobile-view) {
@@ -220,7 +220,7 @@ label {
220 @include disable-default-a-behaviour; 220 @include disable-default-a-behaviour;
221 221
222 font-size: 16px; 222 font-size: 16px;
223 color: var(--mainForegroundColor); 223 color: pvar(--mainForegroundColor);
224 padding: 5px 15px; 224 padding: 5px 15px;
225 border-radius: 0.25rem; 225 border-radius: 0.25rem;
226 226