aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass/primeng-custom.scss
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2019-02-06 12:26:58 +0100
committerChocobozzz <me@florianbigard.com>2019-02-06 12:26:58 +0100
commit73471b1a52f242e86364ffb077ea6cadb3b07ae2 (patch)
tree43dbb7748e281f8d80f15326f489cdea10ec857d /client/src/sass/primeng-custom.scss
parentc22419dd265c0c7185bf4197a1cb286eb3d8ebc0 (diff)
parentf5305c04aae14467d6f957b713c5a902275cbb89 (diff)
downloadPeerTube-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.scss180
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
14p-table { 14p-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 { 314p-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
320p-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}