aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/sass')
-rw-r--r--client/src/sass/application.scss26
-rw-r--r--client/src/sass/bootstrap.scss4
-rw-r--r--client/src/sass/include/_icons.scss58
-rw-r--r--client/src/sass/include/_mixins.scss39
-rw-r--r--client/src/sass/player/settings-menu.scss1
-rw-r--r--client/src/sass/primeng-custom.scss126
6 files changed, 136 insertions, 118 deletions
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 2ad1af23a..2aa743cf1 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -1,19 +1,15 @@
1$icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
2
3@use 'sass:math'; 1@use 'sass:math';
4 2
5@use '_variables' as *; 3@use '_variables' as *;
6@use '_mixins' as *; 4@use '_mixins' as *;
5@use '_icons' as *;
7 6
8@use '_fonts'; 7@use '_fonts';
9 8
10@use './classes'; 9@use './classes';
11
12@use './custom-markup'; 10@use './custom-markup';
13
14@use './ng-select'; 11@use './ng-select';
15 12
16// Needs an import because we extends glyphicon icons in primeng
17@import './bootstrap'; 13@import './bootstrap';
18@import './primeng-custom'; 14@import './primeng-custom';
19 15
@@ -316,15 +312,27 @@ my-global-icon[iconName=external-link] {
316} 312}
317 313
318.chevron-down { 314.chevron-down {
319 @include chevron-down(0.55rem, 0.20em); 315 @include chevron-down(0.55rem, 0.15rem);
320 316
321 margin: 0 5px; 317 margin: 0 8px;
322} 318}
323 319
324.chevron-up { 320.chevron-up {
325 @include chevron-up(0.55rem, 0.20em); 321 @include chevron-up(0.55rem, 0.15rem);
322
323 margin: 0 8px;
324}
325
326.chevron-right {
327 @include chevron-right(0.55rem, 0.15rem);
328
329 margin: 0 8px;
330}
331
332.chevron-left {
333 @include chevron-left(0.55rem, 0.15rem);
326 334
327 margin: 0 5px; 335 margin: 0 8px;
328} 336}
329 337
330/* offsetTop for scrollToAnchor */ 338/* offsetTop for scrollToAnchor */
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index 03b2e8b15..4d2fcf5b3 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -1,5 +1,3 @@
1$icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
2
3@use '_variables' as *; 1@use '_variables' as *;
4@use '_mixins' as *; 2@use '_mixins' as *;
5 3
@@ -31,8 +29,6 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
31@import '~bootstrap/scss/helpers'; 29@import '~bootstrap/scss/helpers';
32@import '~bootstrap/scss/utilities/api'; 30@import '~bootstrap/scss/utilities/api';
33 31
34@import '~@neos21/bootstrap3-glyphicons/assets/stylesheets/bootstrap3-glyphicons';
35
36.flex-auto { 32.flex-auto {
37 flex: auto; 33 flex: auto;
38} 34}
diff --git a/client/src/sass/include/_icons.scss b/client/src/sass/include/_icons.scss
new file mode 100644
index 000000000..5d8a312db
--- /dev/null
+++ b/client/src/sass/include/_icons.scss
@@ -0,0 +1,58 @@
1@use '_variables' as *;
2
3@mixin chevron ($size, $border-width) {
4 border-style: solid;
5 border-width: $border-width $border-width 0 0;
6 content: '';
7 display: inline-block;
8 transform: rotate(-45deg);
9 height: $size;
10 width: $size;
11 position: relative;
12}
13
14@mixin chevron-right ($size, $border-width) {
15 @include chevron($size, $border-width);
16
17 left: 0;
18 transform: rotate(45deg);
19}
20
21@mixin chevron-down ($size, $border-width) {
22 @include chevron($size, $border-width);
23
24 bottom: 0.15em;
25 transform: rotate(135deg);
26}
27
28@mixin chevron-up ($size, $border-width) {
29 @include chevron($size, $border-width);
30
31 top: 0.15em;
32 transform: rotate(-45deg);
33}
34
35@mixin chevron-left ($size, $border-width) {
36 @include chevron($size, $border-width);
37
38 left: 0.25em;
39 transform: rotate(-135deg);
40}
41
42// ---------------------------------------------------------------------------
43
44@mixin arrow-up ($size) {
45 width: 0;
46 height: 0;
47 border-left: $size solid transparent;
48 border-right: $size solid transparent;
49 border-bottom: $size solid pvar(--mainForegroundColor);
50}
51
52@mixin arrow-down ($size) {
53 width: 0;
54 height: 0;
55 border-left: $size solid transparent;
56 border-right: $size solid transparent;
57 border-top: $size solid pvar(--mainForegroundColor);
58}
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index da216b00f..22c3b2a2f 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -562,45 +562,6 @@
562 } 562 }
563} 563}
564 564
565@mixin chevron ($size, $border-width) {
566 border-style: solid;
567 border-width: $border-width $border-width 0 0;
568 content: '';
569 display: inline-block;
570 transform: rotate(-45deg);
571 height: $size;
572 width: $size;
573 position: relative;
574}
575
576@mixin chevron-right ($size, $border-width) {
577 @include chevron($size, $border-width);
578
579 left: 0;
580 transform: rotate(45deg);
581}
582
583@mixin chevron-down ($size, $border-width) {
584 @include chevron($size, $border-width);
585
586 bottom: 0.15em;
587 transform: rotate(135deg);
588}
589
590@mixin chevron-up ($size, $border-width) {
591 @include chevron($size, $border-width);
592
593 top: 0.15em;
594 transform: rotate(-45deg);
595}
596
597@mixin chevron-left ($size, $border-width) {
598 @include chevron($size, $border-width);
599
600 left: 0.25em;
601 transform: rotate(-135deg);
602}
603
604@mixin in-content-small-title { 565@mixin in-content-small-title {
605 text-transform: uppercase; 566 text-transform: uppercase;
606 color: pvar(--mainColor); 567 color: pvar(--mainColor);
diff --git a/client/src/sass/player/settings-menu.scss b/client/src/sass/player/settings-menu.scss
index 8aa2c2ac3..d2346c126 100644
--- a/client/src/sass/player/settings-menu.scss
+++ b/client/src/sass/player/settings-menu.scss
@@ -1,5 +1,6 @@
1@use '_variables' as *; 1@use '_variables' as *;
2@use '_mixins' as *; 2@use '_mixins' as *;
3@use '_icons' as *;
3@use './_player-variables' as *; 4@use './_player-variables' as *;
4 5
5$setting-transition-duration: 0.15s; 6$setting-transition-duration: 0.15s;
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index ef117ae34..f5d7c7b00 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -1,5 +1,6 @@
1@use '_variables' as *; 1@use '_variables' as *;
2@use '_mixins' as *; 2@use '_mixins' as *;
3@use '_icons' as *;
3 4
4/* stylelint-disable */ 5/* stylelint-disable */
5@import '~primeng/resources/primeng.css'; 6@import '~primeng/resources/primeng.css';
@@ -495,14 +496,9 @@ body p-selectbutton.ng-dirty.ng-invalid .p-button {
495 border: 1px solid #a80000; 496 border: 1px solid #a80000;
496} 497}
497 498
498// data table customizations 499// ---------------------------------------------------------------------------
499 500// PeerTube customizations
500@mixin glyphicon-light { 501// ---------------------------------------------------------------------------
501 font-family: 'Glyphicons Halflings';
502 text-decoration: none !important;
503 color: pvar(--mainForegroundColor) !important;
504 font-display: swap;
505}
506 502
507p-table { 503p-table {
508 .p-datatable-header { 504 .p-datatable-header {
@@ -618,24 +614,20 @@ p-table {
618 &.p-highlight { 614 &.p-highlight {
619 background-color: pvar(--submenuBackgroundColor) !important; 615 background-color: pvar(--submenuBackgroundColor) !important;
620 616
621 .pi { 617 .pi-sort-amount-up-alt,
622 @extend .glyphicon !optional; 618 .pi-sort-amount-down {
623 619 display: inline-block;
624 color: #000 !important; 620 position: relative;
625 font-size: 11px !important; 621 top: -1px;
626 top: 0 !important; 622 color: pvar(--mainForegroundColor) !important;
627 623 }
628 &.pi-sort-amount-up-alt {
629 @extend .glyphicon-triangle-top !optional;
630
631 color: pvar(--mainForegroundColor) !important;
632 }
633 624
634 &.pi-sort-amount-down { 625 .pi-sort-amount-up-alt {
635 @extend .glyphicon-triangle-bottom !optional; 626 @include arrow-up(5px);
627 }
636 628
637 color: pvar(--mainForegroundColor) !important; 629 .pi-sort-amount-down {
638 } 630 @include arrow-down(5px);
639 } 631 }
640 } 632 }
641 } 633 }
@@ -693,12 +685,10 @@ p-table {
693 .p-paginator-prev, 685 .p-paginator-prev,
694 .p-paginator-next, 686 .p-paginator-next,
695 .p-paginator-last { 687 .p-paginator-last {
696 @include glyphicon-light;
697 padding: 5px 2px; 688 padding: 5px 2px;
698 height: auto; 689 height: 100%;
699 outline: none; 690 outline: none;
700 font-size: 13px; 691 color: pvar(--mainForegroundColor);
701 top: -1px;
702 692
703 &.focus-within, 693 &.focus-within,
704 &:focus { 694 &:focus {
@@ -710,23 +700,37 @@ p-table {
710 } 700 }
711 701
712 &.p-paginator-first { 702 &.p-paginator-first {
713 @extend .glyphicon-step-backward !optional; 703 .p-paginator-icon {
704 width: 18px;
705 height: 18px;
706 background: url('../assets/images/feather/skip-back.svg') no-repeat;
707 background-size: contain;
708 }
714 } 709 }
715 710
716 &.p-paginator-prev { 711 &.p-paginator-prev {
717 @extend .glyphicon-chevron-left !optional; 712 .p-paginator-icon {
713 @extend .chevron-left !optional;
714 }
718 715
719 @include margin-right(10px); 716 @include margin-right(10px);
720 } 717 }
721 718
722 &.p-paginator-next { 719 &.p-paginator-next {
723 @extend .glyphicon-chevron-right !optional; 720 .p-paginator-icon {
721 @extend .chevron-right !optional;
722 }
724 723
725 @include margin-left(10px); 724 @include margin-left(10px);
726 } 725 }
727 726
728 &.p-paginator-last { 727 &.p-paginator-last {
729 @extend .glyphicon-step-forward !optional; 728 .p-paginator-icon {
729 width: 18px;
730 height: 18px;
731 background: url('../assets/images/feather/skip-forward.svg') no-repeat;
732 background-size: contain;
733 }
730 } 734 }
731 } 735 }
732 736
@@ -810,8 +814,7 @@ p-calendar .p-datepicker {
810 } 814 }
811 815
812 .p-datepicker-next { 816 .p-datepicker-next {
813 @extend .glyphicon-chevron-right !optional; 817 @extend .chevron-right !optional;
814 @include glyphicon-light;
815 818
816 color: #000 !important; 819 color: #000 !important;
817 text-align: end; 820 text-align: end;
@@ -822,8 +825,7 @@ p-calendar .p-datepicker {
822 } 825 }
823 826
824 .p-datepicker-prev { 827 .p-datepicker-prev {
825 @extend .glyphicon-chevron-left !optional; 828 @extend .chevron-left !optional;
826 @include glyphicon-light;
827 829
828 color: #000 !important; 830 color: #000 !important;
829 text-align: start; 831 text-align: start;
@@ -837,15 +839,13 @@ p-calendar .p-datepicker {
837 .p-timepicker { 839 .p-timepicker {
838 840
839 .pi.pi-chevron-up { 841 .pi.pi-chevron-up {
840 @extend .glyphicon-chevron-up !optional; 842 @extend .chevron-up !optional;
841 @include glyphicon-light;
842 843
843 color: #000 !important; 844 color: #000 !important;
844 } 845 }
845 846
846 .pi.pi-chevron-down { 847 .pi.pi-chevron-down {
847 @extend .glyphicon-chevron-down !optional; 848 @extend .chevron-down !optional;
848 @include glyphicon-light;
849 849
850 color: #000 !important; 850 color: #000 !important;
851 } 851 }
@@ -901,15 +901,14 @@ p-toast {
901 min-width: 200px; 901 min-width: 200px;
902 902
903 .p-toast-icon-close { 903 .p-toast-icon-close {
904 font-family: "Glyphicons Halflings";
905 opacity: 0; 904 opacity: 0;
906 position: absolute; 905 position: absolute;
907 right: 5px; 906 right: 5px;
908 top: 5px; 907 top: 5px;
909 908 width: 18px;
910 &:after { 909 height: 18px;
911 content: "\e014"; 910 background: url('../assets/images/feather/x.svg') no-repeat;
912 } 911 background-size: contain;
913 } 912 }
914 913
915 &:hover .p-toast-icon-close { 914 &:hover .p-toast-icon-close {
@@ -927,22 +926,6 @@ p-toast {
927 box-shadow: 0 2px 12px 0 rgba(0, 0 , 0, .1); 926 box-shadow: 0 2px 12px 0 rgba(0, 0 , 0, .1);
928 overflow: hidden; 927 overflow: hidden;
929 928
930 &.p-toast-message-success my-global-icon {
931 color: #8BC34A !important;
932 }
933
934 &.p-toast-message-error my-global-icon {
935 color: #F44336 !important;
936 }
937
938 &.p-toast-message-warn my-global-icon {
939 color: #F1680D !important;
940 }
941
942 &.p-toast-message-info my-global-icon {
943 color: #03A9F4 !important;
944 }
945
946 .notification-block { 929 .notification-block {
947 display: flex; 930 display: flex;
948 align-items: center; 931 align-items: center;
@@ -962,13 +945,24 @@ p-toast {
962 margin-bottom: 0; 945 margin-bottom: 0;
963 } 946 }
964 } 947 }
965
966 .glyphicon {
967 font-size: 32px;
968 @include margin-right(5px);
969 }
970 } 948 }
971 } 949 }
950
951 .p-toast-message-success my-global-icon {
952 color: #8BC34A !important;
953 }
954
955 .p-toast-message-error my-global-icon {
956 color: #F44336 !important;
957 }
958
959 .p-toast-message-warn my-global-icon {
960 color: #F1680D !important;
961 }
962
963 .p-toast-message-info my-global-icon {
964 color: #03A9F4 !important;
965 }
972} 966}
973 967
974.p-selectbutton { 968.p-selectbutton {