diff options
author | Chocobozzz <me@florianbigard.com> | 2019-02-06 12:26:58 +0100 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2019-02-06 12:26:58 +0100 |
commit | 73471b1a52f242e86364ffb077ea6cadb3b07ae2 (patch) | |
tree | 43dbb7748e281f8d80f15326f489cdea10ec857d /client/src/sass/primeng-custom.scss | |
parent | c22419dd265c0c7185bf4197a1cb286eb3d8ebc0 (diff) | |
parent | f5305c04aae14467d6f957b713c5a902275cbb89 (diff) | |
download | PeerTube-73471b1a52f242e86364ffb077ea6cadb3b07ae2.tar.gz PeerTube-73471b1a52f242e86364ffb077ea6cadb3b07ae2.tar.zst PeerTube-73471b1a52f242e86364ffb077ea6cadb3b07ae2.zip |
Merge branch 'release/v1.2.0'
Diffstat (limited to 'client/src/sass/primeng-custom.scss')
-rw-r--r-- | client/src/sass/primeng-custom.scss | 180 |
1 files changed, 148 insertions, 32 deletions
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss index 0568de4e2..6e502b028 100644 --- a/client/src/sass/primeng-custom.scss +++ b/client/src/sass/primeng-custom.scss | |||
@@ -2,7 +2,7 @@ | |||
2 | @import '_mixins'; | 2 | @import '_mixins'; |
3 | 3 | ||
4 | @import '~primeng/resources/primeng.css'; | 4 | @import '~primeng/resources/primeng.css'; |
5 | @import '~primeng/resources/themes/bootstrap/theme.css'; | 5 | @import '~primeng/resources/themes/nova-light/theme.css'; |
6 | 6 | ||
7 | @mixin glyphicon-light { | 7 | @mixin glyphicon-light { |
8 | font-family: 'Glyphicons Halflings'; | 8 | font-family: 'Glyphicons Halflings'; |
@@ -12,10 +12,9 @@ | |||
12 | 12 | ||
13 | // data table customizations | 13 | // data table customizations |
14 | p-table { | 14 | p-table { |
15 | font-size: 15px !important; | ||
16 | |||
17 | .ui-table-caption { | 15 | .ui-table-caption { |
18 | border: none; | 16 | border: none !important; |
17 | background-color: var(--mainBackgroundColor) !important; | ||
19 | 18 | ||
20 | .caption { | 19 | .caption { |
21 | height: 40px; | 20 | height: 40px; |
@@ -24,6 +23,17 @@ p-table { | |||
24 | } | 23 | } |
25 | } | 24 | } |
26 | 25 | ||
26 | th { | ||
27 | background-color: var(--mainBackgroundColor) !important; | ||
28 | outline: 0; | ||
29 | } | ||
30 | |||
31 | td, th { | ||
32 | font-family: $main-fonts; | ||
33 | font-size: 15px !important; | ||
34 | color: var(--mainForegroundColor) !important; | ||
35 | } | ||
36 | |||
27 | td { | 37 | td { |
28 | padding-left: 15px !important; | 38 | padding-left: 15px !important; |
29 | 39 | ||
@@ -35,12 +45,16 @@ p-table { | |||
35 | } | 45 | } |
36 | 46 | ||
37 | tr { | 47 | tr { |
48 | outline: 0; | ||
38 | background-color: var(--mainBackgroundColor) !important; | 49 | background-color: var(--mainBackgroundColor) !important; |
39 | height: 46px; | 50 | height: 46px; |
40 | 51 | ||
41 | &.ui-state-highlight { | 52 | &.ui-state-highlight { |
42 | background-color:var(--submenuColor) !important; | 53 | background-color: var(--submenuColor) !important; |
43 | color:var(--mainForegroundColor) !important; | 54 | |
55 | td, td > a { | ||
56 | color: var(--mainForegroundColor) !important; | ||
57 | } | ||
44 | } | 58 | } |
45 | } | 59 | } |
46 | 60 | ||
@@ -56,6 +70,10 @@ p-table { | |||
56 | } | 70 | } |
57 | } | 71 | } |
58 | 72 | ||
73 | td { | ||
74 | border: none !important; | ||
75 | } | ||
76 | |||
59 | &:first-child td { | 77 | &:first-child td { |
60 | border-top: none !important; | 78 | border-top: none !important; |
61 | } | 79 | } |
@@ -93,21 +111,25 @@ p-table { | |||
93 | } | 111 | } |
94 | 112 | ||
95 | &.ui-state-highlight { | 113 | &.ui-state-highlight { |
96 | background-color:var(--submenuColor) !important; | 114 | background-color: var(--submenuColor) !important; |
97 | 115 | ||
98 | .pi { | 116 | .pi { |
99 | @extend .glyphicon; | 117 | @extend .glyphicon; |
100 | 118 | ||
101 | color: #000; | 119 | color: #000 !important; |
102 | font-size: 11px; | 120 | font-size: 11px !important; |
103 | top: 0; | 121 | top: 0 !important; |
104 | 122 | ||
105 | &.pi-sort-up { | 123 | &.pi-sort-up { |
106 | @extend .glyphicon-triangle-top; | 124 | @extend .glyphicon-triangle-top; |
125 | |||
126 | color: var(--mainForegroundColor) !important; | ||
107 | } | 127 | } |
108 | 128 | ||
109 | &.pi-sort-down { | 129 | &.pi-sort-down { |
110 | @extend .glyphicon-triangle-bottom; | 130 | @extend .glyphicon-triangle-bottom; |
131 | |||
132 | color: var(--mainForegroundColor) !important; | ||
111 | } | 133 | } |
112 | } | 134 | } |
113 | } | 135 | } |
@@ -175,13 +197,14 @@ p-table { | |||
175 | height: auto !important; | 197 | height: auto !important; |
176 | 198 | ||
177 | a { | 199 | a { |
178 | color: #000 !important; | 200 | color: var(--mainForegroundColor) !important; |
179 | font-weight: $font-semibold !important; | 201 | font-weight: $font-semibold !important; |
180 | margin: 0 10px !important; | 202 | margin: 0 5px !important; |
181 | outline: 0 !important; | 203 | outline: 0 !important; |
182 | border-radius: 3px !important; | 204 | border-radius: 3px !important; |
183 | padding: 5px 2px !important; | 205 | padding: 5px 2px !important; |
184 | height: auto !important; | 206 | height: auto !important; |
207 | line-height: initial !important; | ||
185 | 208 | ||
186 | &.ui-state-active { | 209 | &.ui-state-active { |
187 | &, &:hover, &:active, &:focus { | 210 | &, &:hover, &:active, &:focus { |
@@ -210,11 +233,25 @@ p-calendar .ui-datepicker { | |||
210 | .ui-datepicker-next { | 233 | .ui-datepicker-next { |
211 | @extend .glyphicon-chevron-right; | 234 | @extend .glyphicon-chevron-right; |
212 | @include glyphicon-light; | 235 | @include glyphicon-light; |
236 | |||
237 | color: #000 !important; | ||
238 | text-align: right; | ||
239 | |||
240 | .pi.pi-chevron-right { | ||
241 | display: none !important; | ||
242 | } | ||
213 | } | 243 | } |
214 | 244 | ||
215 | .ui-datepicker-prev { | 245 | .ui-datepicker-prev { |
216 | @extend .glyphicon-chevron-left; | 246 | @extend .glyphicon-chevron-left; |
217 | @include glyphicon-light; | 247 | @include glyphicon-light; |
248 | |||
249 | color: #000 !important; | ||
250 | text-align: left; | ||
251 | |||
252 | .pi.pi-chevron-left { | ||
253 | display: none !important; | ||
254 | } | ||
218 | } | 255 | } |
219 | } | 256 | } |
220 | 257 | ||
@@ -223,39 +260,118 @@ p-calendar .ui-datepicker { | |||
223 | .pi.pi-chevron-up { | 260 | .pi.pi-chevron-up { |
224 | @extend .glyphicon-chevron-up; | 261 | @extend .glyphicon-chevron-up; |
225 | @include glyphicon-light; | 262 | @include glyphicon-light; |
263 | |||
264 | color: #000 !important; | ||
226 | } | 265 | } |
227 | 266 | ||
228 | .pi.pi-chevron-down { | 267 | .pi.pi-chevron-down { |
229 | @extend .glyphicon-chevron-down; | 268 | @extend .glyphicon-chevron-down; |
230 | @include glyphicon-light; | 269 | @include glyphicon-light; |
270 | |||
271 | color: #000 !important; | ||
272 | } | ||
273 | } | ||
274 | } | ||
275 | |||
276 | .ui-chkbox { | ||
277 | |||
278 | &, .ui-chkbox-box { | ||
279 | width: 18px !important; | ||
280 | height: 18px !important; | ||
281 | } | ||
282 | |||
283 | .ui-chkbox-box { | ||
284 | &.ui-state-active { | ||
285 | border-color: var(--mainColor) !important; | ||
286 | background-color: var(--mainColor) !important; | ||
287 | } | ||
288 | |||
289 | .ui-chkbox-icon { | ||
290 | position: relative; | ||
291 | overflow: visible !important; | ||
292 | |||
293 | &:after { | ||
294 | content: ''; | ||
295 | position: absolute; | ||
296 | top: 1px; | ||
297 | left: 6px; | ||
298 | width: 5px; | ||
299 | height: 12px; | ||
300 | opacity: 0; | ||
301 | transform: rotate(45deg) scale(0); | ||
302 | border-right: 2px solid var(--mainBackgroundColor); | ||
303 | border-bottom: 2px solid var(--mainBackgroundColor); | ||
304 | } | ||
305 | |||
306 | &.pi-check:after { | ||
307 | opacity: 1; | ||
308 | transform: rotate(45deg) scale(1); | ||
309 | } | ||
231 | } | 310 | } |
232 | } | 311 | } |
233 | } | 312 | } |
234 | 313 | ||
235 | .ui-chkbox-box { | 314 | p-inputswitch { |
236 | &.ui-state-active { | 315 | .ui-inputswitch-checked .ui-inputswitch-slider { |
237 | border-color: var(--mainColor) !important; | ||
238 | background-color: var(--mainColor) !important; | 316 | background-color: var(--mainColor) !important; |
239 | } | 317 | } |
318 | } | ||
319 | |||
320 | p-toast { | ||
321 | .ui-toast { | ||
322 | // Modal is 10005 | ||
323 | z-index: 10010 !important; | ||
324 | } | ||
325 | |||
326 | .ui-toast-message { | ||
327 | font-family: $main-fonts; | ||
328 | |||
329 | &.ui-toast-message-success { | ||
330 | color: #fff !important; | ||
331 | background-color: #8BC34A !important; | ||
332 | } | ||
333 | |||
334 | &.ui-toast-message-error { | ||
335 | color: #fff !important; | ||
336 | background-color: #F44336 !important; | ||
337 | } | ||
240 | 338 | ||
241 | .ui-chkbox-icon { | 339 | &.ui-toast-message-info { |
242 | position: relative; | 340 | color: #fff !important; |
243 | 341 | background-color: #03A9F4 !important; | |
244 | &:after { | ||
245 | content: ''; | ||
246 | position: absolute; | ||
247 | left: 5px; | ||
248 | width: 5px; | ||
249 | height: 12px; | ||
250 | opacity: 0; | ||
251 | transform: rotate(45deg) scale(0); | ||
252 | border-right: 2px solid var(--mainBackgroundColor); | ||
253 | border-bottom: 2px solid var(--mainBackgroundColor); | ||
254 | } | 342 | } |
255 | 343 | ||
256 | &.pi-check:after { | 344 | &.ui-toast-message-info { |
257 | opacity: 1; | 345 | color: #fff !important; |
258 | transform: rotate(45deg) scale(1); | 346 | background-color: #03A9F4 !important; |
347 | } | ||
348 | |||
349 | .notification-block { | ||
350 | display: flex; | ||
351 | align-items: center; | ||
352 | padding: 5px; | ||
353 | |||
354 | .message { | ||
355 | flex-grow: 1; | ||
356 | |||
357 | h3 { | ||
358 | font-size: 21px; | ||
359 | } | ||
360 | |||
361 | p { | ||
362 | font-size: 15px; | ||
363 | margin-bottom: 0; | ||
364 | } | ||
365 | } | ||
366 | |||
367 | .glyphicon { | ||
368 | font-size: 32px; | ||
369 | margin-right: 5px; | ||
370 | } | ||
259 | } | 371 | } |
260 | } | 372 | } |
261 | } \ No newline at end of file | 373 | } |
374 | |||
375 | .ui-widget { | ||
376 | font-family: $main-fonts !important; | ||
377 | } | ||