aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass/include
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2020-07-15 11:15:50 +0200
committerRigel Kent <par@rigelk.eu>2020-07-29 18:15:53 +0200
commit654a188f80fc1f089aa14837084664c908fe27d2 (patch)
tree63855915278c1a3aeb1509c09a7a2f5ee6977893 /client/src/sass/include
parent292c17b894e430d61f9197fb6fa245f5f9c6fa7c (diff)
downloadPeerTube-654a188f80fc1f089aa14837084664c908fe27d2.tar.gz
PeerTube-654a188f80fc1f089aa14837084664c908fe27d2.tar.zst
PeerTube-654a188f80fc1f089aa14837084664c908fe27d2.zip
allow sorting notifications
Diffstat (limited to 'client/src/sass/include')
-rw-r--r--client/src/sass/include/_mixins.scss69
1 files changed, 69 insertions, 0 deletions
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 3471d694c..2de5ce7f1 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -356,6 +356,17 @@
356 color: #000; 356 color: #000;
357 } 357 }
358 } 358 }
359
360 &.peertube-select-button {
361 @include grey-button;
362
363 select,
364 option {
365 font-weight: $font-semibold;
366 color: pvar(--greyForegroundColor);
367 border: none;
368 }
369 }
359} 370}
360 371
361// Thanks: https://codepen.io/triss90/pen/XNEdRe/ 372// Thanks: https://codepen.io/triss90/pen/XNEdRe/
@@ -454,6 +465,49 @@
454 } 465 }
455} 466}
456 467
468@mixin table-badge {
469 border-radius: 2px;
470 padding: 1/4em 1/2em;
471 text-transform: uppercase;
472 font-weight: $font-bold;
473 font-size: 12px;
474 letter-spacing: 1/3px;
475
476 &.badge-banned,
477 &.badge-red {
478 background-color: #ffcdd2;
479 color: #c63737;
480 }
481
482 &.badge-banned {
483 text-decoration: line-through;
484 }
485
486 &.badge-yellow {
487 background-color: #feedaf;
488 color: #8a5340;
489 }
490
491 &.badge-brown {
492 background-color: #ffd8b2;
493 color: #805b36;
494 }
495
496 &.badge-green {
497 background-color: #c8e6c9;
498 color: #256029;
499 }
500
501 &.badge-blue {
502 background-color: #b3e5fc;
503 color: #23547b;
504 }
505
506 &.badge-purple {
507 background-color: #eccfff;
508 color: #694382;
509 }
510}
457 511
458@mixin avatar ($size) { 512@mixin avatar ($size) {
459 object-fit: cover; 513 object-fit: cover;
@@ -638,6 +692,7 @@
638 overflow: hidden; 692 overflow: hidden;
639 font-size: 0.75rem; 693 font-size: 0.75rem;
640 border-radius: 0.25rem; 694 border-radius: 0.25rem;
695 color: gray;
641 696
642 .progress-bar { 697 .progress-bar {
643 color: pvar(--mainBackgroundColor); 698 color: pvar(--mainBackgroundColor);
@@ -648,11 +703,25 @@
648 text-align: center; 703 text-align: center;
649 white-space: nowrap; 704 white-space: nowrap;
650 transition: width 0.6s ease; 705 transition: width 0.6s ease;
706 isolation: isolate;
707
708 &:after {
709 content: attr(valuenow-formatted);
710 position: absolute;
711 margin-left: .2rem;
712 mix-blend-mode: screen;
713 color: gray;
714 }
651 715
652 &.secondary { 716 &.secondary {
653 background-color: pvar(--secondaryColor); 717 background-color: pvar(--secondaryColor);
654 } 718 }
655 } 719 }
720
721 .progress-bar + span {
722 position: relative;
723 top: -1px;
724 }
656} 725}
657 726
658@mixin breadcrumb { 727@mixin breadcrumb {