aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass/primeng-custom.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/primeng-custom.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/primeng-custom.scss')
-rw-r--r--client/src/sass/primeng-custom.scss70
1 files changed, 35 insertions, 35 deletions
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index 056b88fc1..a9a950dc0 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -7,7 +7,7 @@
7@mixin glyphicon-light { 7@mixin glyphicon-light {
8 font-family: 'Glyphicons Halflings'; 8 font-family: 'Glyphicons Halflings';
9 text-decoration: none !important; 9 text-decoration: none !important;
10 color: var(--mainForegroundColor) !important; 10 color: pvar(--mainForegroundColor) !important;
11 font-display: swap; 11 font-display: swap;
12} 12}
13 13
@@ -19,14 +19,14 @@ my-button {
19 19
20// focus box-shadow for primeng 20// focus box-shadow for primeng
21.ui-inputtext:enabled:focus:not(.ui-state-error) { 21.ui-inputtext:enabled:focus:not(.ui-state-error) {
22 box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest) !important; 22 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest) !important;
23} 23}
24 24
25// data table customizations 25// data table customizations
26p-table { 26p-table {
27 .ui-table-caption { 27 .ui-table-caption {
28 border: none !important; 28 border: none !important;
29 background-color: var(--mainBackgroundColor) !important; 29 background-color: pvar(--mainBackgroundColor) !important;
30 30
31 .caption { 31 .caption {
32 height: 40px; 32 height: 40px;
@@ -41,14 +41,14 @@ p-table {
41 } 41 }
42 42
43 th { 43 th {
44 background-color: var(--mainBackgroundColor) !important; 44 background-color: pvar(--mainBackgroundColor) !important;
45 outline: 0; 45 outline: 0;
46 } 46 }
47 47
48 td, th { 48 td, th {
49 font-family: $main-fonts; 49 font-family: $main-fonts;
50 font-size: 15px !important; 50 font-size: 15px !important;
51 color: var(--mainForegroundColor) !important; 51 color: pvar(--mainForegroundColor) !important;
52 } 52 }
53 53
54 td { 54 td {
@@ -63,14 +63,14 @@ p-table {
63 63
64 tr { 64 tr {
65 outline: 0; 65 outline: 0;
66 background-color: var(--mainBackgroundColor) !important; 66 background-color: pvar(--mainBackgroundColor) !important;
67 height: 46px; 67 height: 46px;
68 68
69 &.ui-state-highlight { 69 &.ui-state-highlight {
70 background-color: var(--submenuColor) !important; 70 background-color: pvar(--submenuColor) !important;
71 71
72 td, td > a { 72 td, td > a {
73 color: var(--mainForegroundColor) !important; 73 color: pvar(--mainForegroundColor) !important;
74 } 74 }
75 } 75 }
76 } 76 }
@@ -78,7 +78,7 @@ p-table {
78 .ui-table-tbody { 78 .ui-table-tbody {
79 tr { 79 tr {
80 &:hover { 80 &:hover {
81 background-color: var(--submenuColor) !important; 81 background-color: pvar(--submenuColor) !important;
82 82
83 .action-cell { 83 .action-cell {
84 .dropdown-root, 84 .dropdown-root,
@@ -113,16 +113,16 @@ p-table {
113 th { 113 th {
114 border: none !important; 114 border: none !important;
115 border-bottom: 1px solid !important; 115 border-bottom: 1px solid !important;
116 border-color: var(--submenuColor) !important; 116 border-color: pvar(--submenuColor) !important;
117 text-align: left !important; 117 text-align: left !important;
118 padding: 5px 0 5px 15px !important; 118 padding: 5px 0 5px 15px !important;
119 font-weight: $font-semibold !important; 119 font-weight: $font-semibold !important;
120 color: var(--mainForegroundColor) !important; 120 color: pvar(--mainForegroundColor) !important;
121 121
122 &.ui-sortable-column:hover { 122 &.ui-sortable-column:hover {
123 background-color: var(--submenuColor) !important; 123 background-color: pvar(--submenuColor) !important;
124 border: 1px solid !important; 124 border: 1px solid !important;
125 border-color: var(--submenuColor) !important; 125 border-color: pvar(--submenuColor) !important;
126 border-width: 0 1px !important; 126 border-width: 0 1px !important;
127 127
128 &:first-child { 128 &:first-child {
@@ -131,7 +131,7 @@ p-table {
131 } 131 }
132 132
133 &.ui-state-highlight { 133 &.ui-state-highlight {
134 background-color: var(--submenuColor) !important; 134 background-color: pvar(--submenuColor) !important;
135 135
136 .pi { 136 .pi {
137 @extend .glyphicon; 137 @extend .glyphicon;
@@ -143,13 +143,13 @@ p-table {
143 &.pi-sort-amount-up-alt { 143 &.pi-sort-amount-up-alt {
144 @extend .glyphicon-triangle-top; 144 @extend .glyphicon-triangle-top;
145 145
146 color: var(--mainForegroundColor) !important; 146 color: pvar(--mainForegroundColor) !important;
147 } 147 }
148 148
149 &.pi-sort-amount-down { 149 &.pi-sort-amount-down {
150 @extend .glyphicon-triangle-bottom; 150 @extend .glyphicon-triangle-bottom;
151 151
152 color: var(--mainForegroundColor) !important; 152 color: pvar(--mainForegroundColor) !important;
153 } 153 }
154 } 154 }
155 } 155 }
@@ -184,11 +184,11 @@ p-table {
184 184
185 p-paginator { 185 p-paginator {
186 .ui-paginator-bottom { 186 .ui-paginator-bottom {
187 background-color: var(--mainBackgroundColor) !important; 187 background-color: pvar(--mainBackgroundColor) !important;
188 position: relative; 188 position: relative;
189 border: none; 189 border: none;
190 border-top: 1px solid !important; 190 border-top: 1px solid !important;
191 border-color: var(--submenuColor) !important; 191 border-color: pvar(--submenuColor) !important;
192 height: 40px; 192 height: 40px;
193 display: flex; 193 display: flex;
194 justify-content: center; 194 justify-content: center;
@@ -200,18 +200,18 @@ p-table {
200 left: 0; 200 left: 0;
201 201
202 &.ui-state-focus { 202 &.ui-state-focus {
203 box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest); 203 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
204 } 204 }
205 205
206 .ui-dropdown-label { 206 .ui-dropdown-label {
207 color: var(--inputPlaceholderColor); 207 color: pvar(--inputPlaceholderColor);
208 } 208 }
209 } 209 }
210 210
211 .ui-paginator-current { 211 .ui-paginator-current {
212 position: absolute; 212 position: absolute;
213 right: 0; 213 right: 0;
214 color: var(--inputPlaceholderColor); 214 color: pvar(--inputPlaceholderColor);
215 } 215 }
216 216
217 .ui-paginator-first, 217 .ui-paginator-first,
@@ -227,7 +227,7 @@ p-table {
227 227
228 &.focus-within, 228 &.focus-within,
229 &:focus { 229 &:focus {
230 box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest); 230 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
231 } 231 }
232 232
233 &.ui-state-disabled:hover { 233 &.ui-state-disabled:hover {
@@ -261,12 +261,12 @@ p-table {
261 .ui-paginator-page { 261 .ui-paginator-page {
262 &.focus-within, 262 &.focus-within,
263 &:focus { 263 &:focus {
264 box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest) !important; 264 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest) !important;
265 } 265 }
266 } 266 }
267 267
268 a { 268 a {
269 color: var(--mainForegroundColor) !important; 269 color: pvar(--mainForegroundColor) !important;
270 font-weight: $font-semibold !important; 270 font-weight: $font-semibold !important;
271 margin: 0 5px !important; 271 margin: 0 5px !important;
272 outline: 0 !important; 272 outline: 0 !important;
@@ -278,7 +278,7 @@ p-table {
278 &.ui-state-active { 278 &.ui-state-active {
279 &, &:hover, &:active, &:focus { 279 &, &:hover, &:active, &:focus {
280 color: #fff !important; 280 color: #fff !important;
281 background-color: var(--mainColor) !important; 281 background-color: pvar(--mainColor) !important;
282 } 282 }
283 } 283 }
284 } 284 }
@@ -328,7 +328,7 @@ p-multiselect {
328 328
329 &:focus, 329 &:focus,
330 &.ui-state-focus { 330 &.ui-state-focus {
331 box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest); 331 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
332 } 332 }
333 } 333 }
334 } 334 }
@@ -368,11 +368,11 @@ p-multiselect {
368 } 368 }
369 369
370 .ui-multiselect-panel .ui-multiselect-items .ui-multiselect-item.ui-state-highlight { 370 .ui-multiselect-panel .ui-multiselect-items .ui-multiselect-item.ui-state-highlight {
371 background-color: var(--mainColorLighter); 371 background-color: pvar(--mainColorLighter);
372 } 372 }
373 373
374 .ui-inputtext:enabled:focus:not(.ui-state-error) { 374 .ui-inputtext:enabled:focus:not(.ui-state-error) {
375 border-color: var(--mainColorLighter) !important; 375 border-color: pvar(--mainColorLighter) !important;
376 box-shadow: none; 376 box-shadow: none;
377 } 377 }
378} 378}
@@ -445,8 +445,8 @@ p-tablecheckbox:hover div .ui-chkbox-box {
445 445
446 .ui-chkbox-box { 446 .ui-chkbox-box {
447 &.ui-state-active { 447 &.ui-state-active {
448 border-color: var(--mainColor) !important; 448 border-color: pvar(--mainColor) !important;
449 background-color: var(--mainColor) !important; 449 background-color: pvar(--mainColor) !important;
450 } 450 }
451 451
452 .ui-chkbox-icon { 452 .ui-chkbox-icon {
@@ -462,8 +462,8 @@ p-tablecheckbox:hover div .ui-chkbox-box {
462 height: 12px; 462 height: 12px;
463 opacity: 0; 463 opacity: 0;
464 transform: rotate(45deg) scale(0); 464 transform: rotate(45deg) scale(0);
465 border-right: 2px solid var(--mainBackgroundColor); 465 border-right: 2px solid pvar(--mainBackgroundColor);
466 border-bottom: 2px solid var(--mainBackgroundColor); 466 border-bottom: 2px solid pvar(--mainBackgroundColor);
467 } 467 }
468 468
469 &.pi-check:after { 469 &.pi-check:after {
@@ -478,7 +478,7 @@ p-inputswitch {
478 height: 26px; 478 height: 26px;
479 479
480 .ui-inputswitch-checked .ui-inputswitch-slider { 480 .ui-inputswitch-checked .ui-inputswitch-slider {
481 background-color: var(--mainColor) !important; 481 background-color: pvar(--mainColor) !important;
482 } 482 }
483 483
484 &.small { 484 &.small {
@@ -520,8 +520,8 @@ p-toast {
520 520
521 .ui-toast-message { 521 .ui-toast-message {
522 font-family: $main-fonts; 522 font-family: $main-fonts;
523 background-color: var(--mainBackgroundColor) !important; 523 background-color: pvar(--mainBackgroundColor) !important;
524 color: var(--mainForegroundColor) !important; 524 color: pvar(--mainForegroundColor) !important;
525 border-radius: 5px; 525 border-radius: 5px;
526 box-sizing: border-box; 526 box-sizing: border-box;
527 border: 1px solid #EBEEF5 !important; 527 border: 1px solid #EBEEF5 !important;