aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2023-05-25 15:49:17 +0200
committerChocobozzz <me@florianbigard.com>2023-05-25 15:58:53 +0200
commit0a1aaf2d11578d90fba89066510126392041c398 (patch)
treeac5616a96a877f6951b5c27f5d7d95eff0fd24cf /client/src
parentffc424259ebe5d670136d6c6183f3d65632655a5 (diff)
downloadPeerTube-0a1aaf2d11578d90fba89066510126392041c398.tar.gz
PeerTube-0a1aaf2d11578d90fba89066510126392041c398.tar.zst
PeerTube-0a1aaf2d11578d90fba89066510126392041c398.zip
Fix primeng table pagination style
Diffstat (limited to 'client/src')
-rw-r--r--client/src/sass/primeng-custom.scss93
1 files changed, 41 insertions, 52 deletions
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index cf55bad79..620df3cb8 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -88,9 +88,6 @@ body .p-paginator .p-paginator-current {
88 min-width: 2.286em; 88 min-width: 2.286em;
89 line-height: 2.286em; 89 line-height: 2.286em;
90} 90}
91body .p-paginator .p-dropdown {
92 border: 0 none;
93}
94body .p-paginator .p-dropdown .p-dropdown-trigger, body .p-paginator .p-dropdown .p-dropdown-label { 91body .p-paginator .p-dropdown .p-dropdown-trigger, body .p-paginator .p-dropdown .p-dropdown-label {
95 color: #848484; 92 color: #848484;
96} 93}
@@ -152,6 +149,7 @@ body .p-dropdown {
152 background: #ffffff; 149 background: #ffffff;
153 border: 1px solid #a6a6a6; 150 border: 1px solid #a6a6a6;
154 transition: border-color 0.2s, box-shadow 0.2s; 151 transition: border-color 0.2s, box-shadow 0.2s;
152 border-radius: 6px;
155} 153}
156body .p-dropdown:not(.p-disabled):hover { 154body .p-dropdown:not(.p-disabled):hover {
157 border-color: #212121; 155 border-color: #212121;
@@ -162,28 +160,41 @@ body .p-dropdown:not(.p-disabled).p-focus {
162 box-shadow: 0 0 0 0.2em pvar(--mainColorLightest); 160 box-shadow: 0 0 0 0.2em pvar(--mainColorLightest);
163 border-color: pvar(--mainColor); 161 border-color: pvar(--mainColor);
164} 162}
163body .p-dropdown.p-dropdown-clearable .p-dropdown-label {
164 @include padding-right(0);
165}
165body .p-dropdown .p-dropdown-label { 166body .p-dropdown .p-dropdown-label {
166 @include padding-right(2em); 167 background: transparent;
168 border: 0 none;
167} 169}
170body .p-dropdown .p-dropdown-label.p-placeholder {
171 color: #6c757d;
172}
173body .p-dropdown .p-dropdown-label:enabled:focus {
174 outline: 0 none;
175 box-shadow: none;
176}
177
168body .p-dropdown .p-dropdown-trigger { 178body .p-dropdown .p-dropdown-trigger {
169 background-color: #ffffff; 179 background-color: transparent;
170 width: 2em; 180 width: 2rem;
171 line-height: 2em; 181 border-top-right-radius: 6px;
172 text-align: center; 182 border-bottom-right-radius: 6px;
173 padding: 0;
174 color: #848484; 183 color: #848484;
175} 184}
176body .p-dropdown .p-dropdown-clear-icon { 185body .p-dropdown .p-dropdown-clear-icon {
177 color: #848484; 186 color: #848484;
187 right: 2rem;
178} 188}
179body .p-dropdown.p-dropdown-clearable .p-dropdown-label { 189body .p-dropdown.p-dropdown-clearable .p-dropdown-label {
180 @include padding-right(4em); 190 @include padding-right(4em);
181} 191}
182body .p-dropdown-panel { 192body .p-dropdown-panel {
183 padding: 0;
184 border: 1px solid #c8c8c8;
185 background-color: #ffffff; 193 background-color: #ffffff;
186 box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); 194 box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
195 border: 0 none;
196 border-radius: 6px;
197 box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
187} 198}
188body .p-dropdown-panel .p-dropdown-filter-container { 199body .p-dropdown-panel .p-dropdown-filter-container {
189 padding: 0.429em 0.857em 0.429em 0.857em; 200 padding: 0.429em 0.857em 0.429em 0.857em;
@@ -611,10 +622,12 @@ p-table {
611 justify-content: center; 622 justify-content: center;
612 align-items: center; 623 align-items: center;
613 624
614 .p-dropdown { 625 p-dropdown {
615 position: absolute; 626 .p-dropdown {
616 top: 10px; 627 @include padding-left(0.5rem);
617 left: 0; 628
629 align-items: center;
630 }
618 631
619 &.p-focus { 632 &.p-focus {
620 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest); 633 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
@@ -632,15 +645,16 @@ p-table {
632 } 645 }
633 646
634 .p-paginator-current { 647 .p-paginator-current {
635 position: absolute;
636 right: 0;
637 color: pvar(--inputPlaceholderColor); 648 color: pvar(--inputPlaceholderColor);
638 overflow: visible; 649 overflow: visible;
650 }
639 651
640 @media screen and (max-width: $small-view) { 652 .p-paginator-first {
641 left: 0; 653 margin-left: auto;
642 top: 40px; 654 }
643 } 655
656 .p-paginator-last {
657 margin-right: auto;
644 } 658 }
645 659
646 .p-paginator-first, 660 .p-paginator-first,
@@ -661,38 +675,17 @@ p-table {
661 background-color: #fff !important; 675 background-color: #fff !important;
662 } 676 }
663 677
664 &.p-paginator-first { 678 .p-paginator-icon {
665 .p-paginator-icon { 679 width: 18px;
666 width: 18px; 680 height: 18px;
667 height: 18px;
668 background: url('../assets/images/feather/skip-back.svg') no-repeat;
669 background-size: contain;
670 }
671 } 681 }
672 682
673 &.p-paginator-prev { 683 &.p-paginator-prev {
674 @include margin-right(10px); 684 @include margin-right(10px);
675
676 .p-paginator-icon {
677 @include chevron-left-default;
678 }
679 } 685 }
680 686
681 &.p-paginator-next { 687 &.p-paginator-next {
682 @include margin-left(10px); 688 @include margin-left(10px);
683
684 .p-paginator-icon {
685 @include chevron-right-default;
686 }
687 }
688
689 &.p-paginator-last {
690 .p-paginator-icon {
691 width: 18px;
692 height: 18px;
693 background: url('../assets/images/feather/skip-forward.svg') no-repeat;
694 background-size: contain;
695 }
696 } 689 }
697 } 690 }
698 691
@@ -742,19 +735,15 @@ p-table {
742 } 735 }
743 } 736 }
744 737
745 @media screen and (max-width: #{breakpoint(lg)}) { 738 @media screen and (max-width: $small-view) {
746 // Prevent overflow
747 p-paginator { 739 p-paginator {
748 .p-paginator-current, 740 .p-paginator-current {
749 .p-dropdown { 741 display: none !important;
750 top: 0;
751 margin-top: 30px;
752 } 742 }
753 } 743 }
754 } 744 }
755 745
756 @media screen and (max-width: $mobile-view) { 746 @media screen and (max-width: $mobile-view) {
757 // Prevent overflow
758 p-paginator { 747 p-paginator {
759 .p-paginator-pages > .p-paginator-page:not(.p-highlight) { 748 .p-paginator-pages > .p-paginator-page:not(.p-highlight) {
760 display: none; 749 display: none;