diff options
Diffstat (limited to 'client/src/sass/application.scss')
-rw-r--r-- | client/src/sass/application.scss | 47 |
1 files changed, 21 insertions, 26 deletions
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss index 5dacdd73b..560414e90 100644 --- a/client/src/sass/application.scss +++ b/client/src/sass/application.scss | |||
@@ -1,5 +1,6 @@ | |||
1 | $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; | 1 | $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; |
2 | 2 | ||
3 | @import '_bootstrap-variables'; | ||
3 | @import '_variables'; | 4 | @import '_variables'; |
4 | @import '_mixins'; | 5 | @import '_mixins'; |
5 | 6 | ||
@@ -32,7 +33,7 @@ body { | |||
32 | --menuForegroundColor: #{$menu-color}; | 33 | --menuForegroundColor: #{$menu-color}; |
33 | --submenuColor: #{$sub-menu-color}; | 34 | --submenuColor: #{$sub-menu-color}; |
34 | 35 | ||
35 | --inputColor: #{$input-background-color}; | 36 | --inputBackgroundColor: #{$input-background-color}; |
36 | --inputPlaceholderColor: #{$input-placeholder-color}; | 37 | --inputPlaceholderColor: #{$input-placeholder-color}; |
37 | 38 | ||
38 | --actionButtonColor: #{$grey-foreground-color}; | 39 | --actionButtonColor: #{$grey-foreground-color}; |
@@ -47,6 +48,11 @@ body { | |||
47 | font-size: 14px; | 48 | font-size: 14px; |
48 | } | 49 | } |
49 | 50 | ||
51 | ::selection { | ||
52 | color: var(--mainBackgroundColor); | ||
53 | background-color: var(--mainHoverColor); | ||
54 | } | ||
55 | |||
50 | #incompatible-browser { | 56 | #incompatible-browser { |
51 | display: none; | 57 | display: none; |
52 | text-align: center; | 58 | text-align: center; |
@@ -61,7 +67,7 @@ strong { | |||
61 | 67 | ||
62 | input.readonly { | 68 | input.readonly { |
63 | /* Force blank on readonly inputs */ | 69 | /* Force blank on readonly inputs */ |
64 | background-color: var(--inputColor) !important; | 70 | background-color: var(--inputBackgroundColor) !important; |
65 | } | 71 | } |
66 | 72 | ||
67 | input, textarea { | 73 | input, textarea { |
@@ -162,7 +168,7 @@ label { | |||
162 | color: var(--mainForegroundColor); | 168 | color: var(--mainForegroundColor); |
163 | } | 169 | } |
164 | 170 | ||
165 | @media screen and (max-width: 500px) { | 171 | @media screen and (max-width: $mobile-view) { |
166 | margin-right: 15px; | 172 | margin-right: 15px; |
167 | } | 173 | } |
168 | } | 174 | } |
@@ -202,26 +208,6 @@ label { | |||
202 | to { transform: scale(1) rotate(360deg);} | 208 | to { transform: scale(1) rotate(360deg);} |
203 | } | 209 | } |
204 | 210 | ||
205 | .orange-button { | ||
206 | @include peertube-button; | ||
207 | @include orange-button; | ||
208 | } | ||
209 | |||
210 | .orange-button-link { | ||
211 | @include peertube-button-link; | ||
212 | @include orange-button; | ||
213 | } | ||
214 | |||
215 | .grey-button { | ||
216 | @include peertube-button; | ||
217 | @include grey-button; | ||
218 | } | ||
219 | |||
220 | .grey-button-link { | ||
221 | @include peertube-button-link; | ||
222 | @include grey-button; | ||
223 | } | ||
224 | |||
225 | // In tables, don't have a hover different background | 211 | // In tables, don't have a hover different background |
226 | table { | 212 | table { |
227 | .action-button-edit, .action-button-delete { | 213 | .action-button-edit, .action-button-delete { |
@@ -240,7 +226,16 @@ table { | |||
240 | font-weight: $font-semibold; | 226 | font-weight: $font-semibold; |
241 | } | 227 | } |
242 | 228 | ||
243 | @media screen and (max-width: 1600px) { | 229 | .dropdown-item { |
230 | @include dropdown-with-icon-item; | ||
231 | |||
232 | my-global-icon { | ||
233 | width: 22px; | ||
234 | height: 22px; | ||
235 | } | ||
236 | } | ||
237 | |||
238 | @media screen and (max-width: #{map-get($grid-breakpoints, xxl)}) { | ||
244 | .main-col { | 239 | .main-col { |
245 | &.expanded { | 240 | &.expanded { |
246 | .margin-content { | 241 | .margin-content { |
@@ -251,7 +246,7 @@ table { | |||
251 | } | 246 | } |
252 | } | 247 | } |
253 | 248 | ||
254 | @media screen and (max-width: 900px) { | 249 | @media screen and (max-width: #{map-get($grid-breakpoints, lg)}) { |
255 | .main-col { | 250 | .main-col { |
256 | &.expanded { | 251 | &.expanded { |
257 | .margin-content { | 252 | .margin-content { |
@@ -263,7 +258,7 @@ table { | |||
263 | padding-left: 50px; | 258 | padding-left: 50px; |
264 | 259 | ||
265 | .title-page { | 260 | .title-page { |
266 | font-size: 15px; | 261 | font-size: 17px; |
267 | } | 262 | } |
268 | } | 263 | } |
269 | } | 264 | } |