@mixin glyphicon-light {
font-family: 'Glyphicons Halflings';
text-decoration: none !important;
- color: var(--mainForegroundColor) !important;
+ color: pvar(--mainForegroundColor) !important;
+ font-display: swap;
+}
+
+my-edit-button,
+my-delete-button,
+my-button {
+ height: max-content;
+}
+
+// focus box-shadow for primeng
+.ui-inputtext:enabled:focus:not(.ui-state-error) {
+ box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest) !important;
}
// data table customizations
p-table {
.ui-table-caption {
border: none !important;
- background-color: #fff !important;
+ background-color: pvar(--mainBackgroundColor) !important;
.caption {
height: 40px;
- display: flex;
+ width: 100%;
+ display: inline-flex;
align-items: center;
+
+ .input-group-text {
+ background-color: transparent;
+ }
}
}
th {
- background-color: #fff !important;
+ background-color: pvar(--mainBackgroundColor) !important;
outline: 0;
}
td, th {
font-family: $main-fonts;
font-size: 15px !important;
- color: var(--mainForegroundColor) !important;
+ color: pvar(--mainForegroundColor) !important;
}
td {
padding-left: 15px !important;
- &:not(.action-cell) {
+ &:not(.action-cell):not(.expand-cell) {
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
tr {
outline: 0;
- background-color: var(--mainBackgroundColor) !important;
+ background-color: pvar(--mainBackgroundColor) !important;
height: 46px;
&.ui-state-highlight {
- background-color: var(--submenuColor) !important;
+ background-color: pvar(--submenuColor) !important;
td, td > a {
- color: var(--mainForegroundColor) !important;
+ color: pvar(--mainForegroundColor) !important;
}
}
}
.ui-table-tbody {
tr {
&:hover {
- background-color: var(--submenuColor) !important;
- }
-
- &:not(:hover) {
- .action-cell * {
- display: none !important;
- }
+ background-color: pvar(--submenuColor) !important;
}
td {
&:last-child td {
border-bottom: none !important;
}
+
+ &:focus + tr > td,
+ &:focus > td {
+ box-shadow: none !important;
+ }
}
.expander {
th {
border: none !important;
border-bottom: 1px solid !important;
- border-color: var(--submenuColor) !important;
+ border-color: pvar(--submenuColor) !important;
text-align: left !important;
padding: 5px 0 5px 15px !important;
font-weight: $font-semibold !important;
- color: var(--mainForegroundColor) !important;
+ color: pvar(--mainForegroundColor) !important;
&.ui-sortable-column:hover {
- background-color: var(--submenuColor) !important;
+ background-color: pvar(--submenuColor) !important;
border: 1px solid !important;
- border-color: var(--submenuColor) !important;
+ border-color: pvar(--submenuColor) !important;
border-width: 0 1px !important;
&:first-child {
}
&.ui-state-highlight {
- background-color: var(--submenuColor) !important;
+ background-color: pvar(--submenuColor) !important;
.pi {
@extend .glyphicon;
font-size: 11px !important;
top: 0 !important;
- &.pi-sort-up {
+ &.pi-sort-amount-up-alt {
@extend .glyphicon-triangle-top;
+
+ color: pvar(--mainForegroundColor) !important;
}
- &.pi-sort-down {
+ &.pi-sort-amount-down {
@extend .glyphicon-triangle-bottom;
+
+ color: pvar(--mainForegroundColor) !important;
}
}
}
padding: 0 !important;
text-align: center;
- my-edit-button + my-delete-button {
+ .dropdown-root,
+ my-edit-button,
+ my-delete-button,
+ my-button {
+ display: inline-block !important;
margin-left: 5px;
+
+ :first-child {
+ margin-left: 0
+ }
}
}
p-paginator {
.ui-paginator-bottom {
- background-color: var(--mainBackgroundColor) !important;
+ background-color: pvar(--mainBackgroundColor) !important;
position: relative;
border: none;
border-top: 1px solid !important;
- border-color: var(--submenuColor) !important;
+ border-color: pvar(--submenuColor) !important;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
+ .ui-dropdown {
+ position: absolute;
+ top: 3px;
+ left: 0;
+
+ &.ui-state-focus {
+ box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
+ }
+
+ .ui-dropdown-label {
+ color: pvar(--inputPlaceholderColor);
+ }
+ }
+
+ .ui-paginator-current {
+ position: absolute;
+ right: 0;
+ color: pvar(--inputPlaceholderColor);
+ }
+
.ui-paginator-first,
.ui-paginator-prev,
.ui-paginator-next,
font-size: 13px;
top: -1px;
+ &.focus-within,
+ &:focus {
+ box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
+ }
+
&.ui-state-disabled:hover {
background-color: #fff !important;
}
.ui-paginator-pages {
height: auto !important;
+ .ui-paginator-page {
+ &.focus-within,
+ &:focus {
+ box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest) !important;
+ }
+ }
+
a {
- color: #000 !important;
+ color: pvar(--mainForegroundColor) !important;
font-weight: $font-semibold !important;
margin: 0 5px !important;
outline: 0 !important;
&.ui-state-active {
&, &:hover, &:active, &:focus {
color: #fff !important;
- background-color: var(--mainColor) !important;
+ background-color: pvar(--mainColor) !important;
}
}
}
}
}
+// overflow data table
+@mixin overflow-datatable ($table-min-width, $horizontal-margins, $mobile-paginator: true) {
+ p-table {
+ .ui-table-wrapper {
+ overflow-x: auto;
+ max-width: calc(100vw - #{$horizontal-margins * 2});
+
+ table {
+ min-width: $table-min-width;
+ }
+ }
+
+ @if $mobile-paginator {
+ p-paginator .ui-paginator-bottom {
+ display: block;
+
+ .ui-paginator-current {
+ position: relative;
+ display: block;
+ }
+
+ a, .ui-paginator-pages {
+ vertical-align: middle;
+ }
+ }
+ }
+ }
+}
+
+// multiselect customizations
+p-multiselect {
+ .ui-multiselect {
+ border-color: #C6C6C6;
+
+ &:not(.ui-state-disabled) {
+ &:hover {
+ border-color: #C6C6C6;
+ }
+
+ &:focus,
+ &.ui-state-focus {
+ box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
+ }
+ }
+ }
+
+ .ui-multiselect-label {
+ font-size: 15px !important;
+ padding: 4px 30px 4px 12px !important;
+
+ $width: 338px;
+ width: $width !important;
+
+ @media screen and (max-width: $width) {
+ width: 100% !important;
+ }
+ }
+
+ .pi.pi-chevron-down {
+ margin-left: 0 !important;
+
+ &::after {
+ @include select-arrow-down;
+
+ right: 0;
+ margin-top: 6px;
+ }
+ }
+
+ .ui-chkbox-icon {
+ //position: absolute !important;
+ width: 18px;
+ height: 18px;
+ //left: 0;
+
+ //&::after {
+ // left: -2px !important;
+ //}
+ }
+
+ .ui-multiselect-panel .ui-multiselect-items .ui-multiselect-item.ui-state-highlight {
+ background-color: pvar(--mainColorLighter);
+ }
+
+ .ui-inputtext:enabled:focus:not(.ui-state-error) {
+ border-color: pvar(--mainColorLighter) !important;
+ box-shadow: none;
+ }
+}
+
// PrimeNG calendar tweaks
p-calendar .ui-datepicker {
a {
@extend .glyphicon-chevron-right;
@include glyphicon-light;
+ color: #000 !important;
text-align: right;
.pi.pi-chevron-right {
@extend .glyphicon-chevron-left;
@include glyphicon-light;
+ color: #000 !important;
text-align: left;
.pi.pi-chevron-left {
.pi.pi-chevron-up {
@extend .glyphicon-chevron-up;
@include glyphicon-light;
+
+ color: #000 !important;
}
.pi.pi-chevron-down {
@extend .glyphicon-chevron-down;
@include glyphicon-light;
+
+ color: #000 !important;
}
}
}
+p-tablecheckbox:hover div .ui-chkbox-box {
+ box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2);
+}
-.ui-chkbox-box {
- &.ui-state-active {
- border-color: var(--mainColor) !important;
- background-color: var(--mainColor) !important;
- }
+.ui-chkbox {
- .ui-chkbox-icon {
- position: relative;
- overflow: visible !important;
+ &, .ui-chkbox-box {
+ width: 18px !important;
+ height: 18px !important;
+ }
- &:after {
- content: '';
- position: absolute;
- top: 1px;
- left: 7px;
- width: 5px;
- height: 13px;
- opacity: 0;
- transform: rotate(45deg) scale(0);
- border-right: 2px solid var(--mainBackgroundColor);
- border-bottom: 2px solid var(--mainBackgroundColor);
+ .ui-chkbox-box {
+ &.ui-state-active {
+ border-color: pvar(--mainColor) !important;
+ background-color: pvar(--mainColor) !important;
}
- &.pi-check:after {
- opacity: 1;
- transform: rotate(45deg) scale(1);
+ .ui-chkbox-icon {
+ position: relative;
+ overflow: visible !important;
+
+ &:after {
+ content: '';
+ position: absolute;
+ top: 1px;
+ left: 6px;
+ width: 5px;
+ height: 12px;
+ opacity: 0;
+ transform: rotate(45deg) scale(0);
+ border-right: 2px solid pvar(--mainBackgroundColor);
+ border-bottom: 2px solid pvar(--mainBackgroundColor);
+ }
+
+ &.pi-check:after {
+ opacity: 1;
+ transform: rotate(45deg) scale(1);
+ }
}
}
}
p-inputswitch {
+ height: 26px;
+
.ui-inputswitch-checked .ui-inputswitch-slider {
- background-color: var(--mainColor) !important;
+ background-color: pvar(--mainColor) !important;
+ }
+
+ &.small {
+ height: 20px;
+
+ .ui-inputswitch {
+ width: 2.5em !important;
+ height: 1.45em !important;
+
+ .ui-inputswitch-slider::before {
+ height: 1em !important;
+ width: 1em !important;
+ }
+ }
+
+ .ui-inputswitch-checked .ui-inputswitch-slider::before {
+ transform: translateX(1em) !important;
+ }
}
}
p-toast {
+ .ui-toast {
+ z-index: z(notification) !important;
+
+ .ui-toast-close-icon {
+ font-family: "Glyphicons Halflings";
+ opacity: 0;
+
+ &:after {
+ content: "\e014";
+ }
+ }
+
+ &:hover .ui-toast-close-icon {
+ opacity: .3;
+ }
+ }
+
.ui-toast-message {
font-family: $main-fonts;
-
- &.ui-toast-message-success {
- color: #fff !important;
- background-color: #8BC34A !important;
+ background-color: pvar(--mainBackgroundColor) !important;
+ color: pvar(--mainForegroundColor) !important;
+ border-radius: 5px;
+ box-sizing: border-box;
+ border: 1px solid #EBEEF5 !important;
+ box-shadow: 0 2px 12px 0 rgba(0, 0 , 0, .1);
+ overflow: hidden;
+
+ &.ui-toast-message-success .glyphicon {
+ color: #8BC34A !important;
}
- &.ui-toast-message-error {
- color: #fff !important;
- background-color: #F44336 !important;
+ &.ui-toast-message-error .glyphicon {
+ color: #F44336 !important;
}
- &.ui-toast-message-info {
- color: #fff !important;
- background-color: #03A9F4 !important;
+ &.ui-toast-message-warn .glyphicon {
+ color: #F1680D !important;
}
- &.ui-toast-message-info {
- color: #fff !important;
- background-color: #03A9F4 !important;
+ &.ui-toast-message-info .glyphicon {
+ color: #03A9F4 !important;
}
.notification-block {
display: flex;
+ align-items: center;
+ padding: 5px;
.message {
+ flex-grow: 1;
+
h3 {
font-size: 21px;
}
p {
font-size: 15px;
+ margin-bottom: 0;
}
}
.glyphicon {
font-size: 32px;
- margin-top: 15px;
margin-right: 5px;
}
}
}
}
+
+.ui-widget {
+ font-family: $main-fonts !important;
+}
projects / github / Chocobozzz / PeerTube.git / blobdiff