projects
/
oweals
/
peertube.git
/ blobdiff
commit
grep
author
committer
pickaxe
?
search:
re
summary
|
shortlog
|
log
|
commit
|
commitdiff
|
tree
raw
|
inline
| side by side
`fitWidth` for `video-miniature`, fluid grid (#2830)
[oweals/peertube.git]
/
client
/
src
/
sass
/
primeng-custom.scss
diff --git
a/client/src/sass/primeng-custom.scss
b/client/src/sass/primeng-custom.scss
index 33483533e3c66a67a3eecfb39c0ea65206c6d14b..a9a950dc08375fa1a25905e354cc1bc91a3dcbba 100644
(file)
--- a/
client/src/sass/primeng-custom.scss
+++ b/
client/src/sass/primeng-custom.scss
@@
-7,7
+7,7
@@
@mixin glyphicon-light {
font-family: 'Glyphicons Halflings';
text-decoration: none !important;
@mixin glyphicon-light {
font-family: 'Glyphicons Halflings';
text-decoration: none !important;
- color: var(--mainForegroundColor) !important;
+ color:
p
var(--mainForegroundColor) !important;
font-display: swap;
}
font-display: swap;
}
@@
-19,14
+19,14
@@
my-button {
// focus box-shadow for primeng
.ui-inputtext:enabled:focus:not(.ui-state-error) {
// focus box-shadow for primeng
.ui-inputtext:enabled:focus:not(.ui-state-error) {
- box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest) !important;
+ box-shadow: #{$focus-box-shadow-form}
p
var(--mainColorLightest) !important;
}
// data table customizations
p-table {
.ui-table-caption {
border: none !important;
}
// data table customizations
p-table {
.ui-table-caption {
border: none !important;
- background-color: var(--mainBackgroundColor) !important;
+ background-color:
p
var(--mainBackgroundColor) !important;
.caption {
height: 40px;
.caption {
height: 40px;
@@
-41,14
+41,14
@@
p-table {
}
th {
}
th {
- background-color: var(--mainBackgroundColor) !important;
+ background-color:
p
var(--mainBackgroundColor) !important;
outline: 0;
}
td, th {
font-family: $main-fonts;
font-size: 15px !important;
outline: 0;
}
td, th {
font-family: $main-fonts;
font-size: 15px !important;
- color: var(--mainForegroundColor) !important;
+ color:
p
var(--mainForegroundColor) !important;
}
td {
}
td {
@@
-63,14
+63,14
@@
p-table {
tr {
outline: 0;
tr {
outline: 0;
- background-color: var(--mainBackgroundColor) !important;
+ background-color:
p
var(--mainBackgroundColor) !important;
height: 46px;
&.ui-state-highlight {
height: 46px;
&.ui-state-highlight {
- background-color: var(--submenuColor) !important;
+ background-color:
p
var(--submenuColor) !important;
td, td > a {
td, td > a {
- color: var(--mainForegroundColor) !important;
+ color:
p
var(--mainForegroundColor) !important;
}
}
}
}
}
}
@@
-78,7
+78,7
@@
p-table {
.ui-table-tbody {
tr {
&:hover {
.ui-table-tbody {
tr {
&:hover {
- background-color: var(--submenuColor) !important;
+ background-color:
p
var(--submenuColor) !important;
.action-cell {
.dropdown-root,
.action-cell {
.dropdown-root,
@@
-113,16
+113,16
@@
p-table {
th {
border: none !important;
border-bottom: 1px solid !important;
th {
border: none !important;
border-bottom: 1px solid !important;
- border-color: var(--submenuColor) !important;
+ border-color:
p
var(--submenuColor) !important;
text-align: left !important;
padding: 5px 0 5px 15px !important;
font-weight: $font-semibold !important;
text-align: left !important;
padding: 5px 0 5px 15px !important;
font-weight: $font-semibold !important;
- color: var(--mainForegroundColor) !important;
+ color:
p
var(--mainForegroundColor) !important;
&.ui-sortable-column:hover {
&.ui-sortable-column:hover {
- background-color: var(--submenuColor) !important;
+ background-color:
p
var(--submenuColor) !important;
border: 1px solid !important;
border: 1px solid !important;
- border-color: var(--submenuColor) !important;
+ border-color:
p
var(--submenuColor) !important;
border-width: 0 1px !important;
&:first-child {
border-width: 0 1px !important;
&:first-child {
@@
-131,7
+131,7
@@
p-table {
}
&.ui-state-highlight {
}
&.ui-state-highlight {
- background-color: var(--submenuColor) !important;
+ background-color:
p
var(--submenuColor) !important;
.pi {
@extend .glyphicon;
.pi {
@extend .glyphicon;
@@
-143,13
+143,13
@@
p-table {
&.pi-sort-amount-up-alt {
@extend .glyphicon-triangle-top;
&.pi-sort-amount-up-alt {
@extend .glyphicon-triangle-top;
- color: var(--mainForegroundColor) !important;
+ color:
p
var(--mainForegroundColor) !important;
}
&.pi-sort-amount-down {
@extend .glyphicon-triangle-bottom;
}
&.pi-sort-amount-down {
@extend .glyphicon-triangle-bottom;
- color: var(--mainForegroundColor) !important;
+ color:
p
var(--mainForegroundColor) !important;
}
}
}
}
}
}
@@
-184,11
+184,11
@@
p-table {
p-paginator {
.ui-paginator-bottom {
p-paginator {
.ui-paginator-bottom {
- background-color: var(--mainBackgroundColor) !important;
+ background-color:
p
var(--mainBackgroundColor) !important;
position: relative;
border: none;
border-top: 1px solid !important;
position: relative;
border: none;
border-top: 1px solid !important;
- border-color: var(--submenuColor) !important;
+ border-color:
p
var(--submenuColor) !important;
height: 40px;
display: flex;
justify-content: center;
height: 40px;
display: flex;
justify-content: center;
@@
-200,18
+200,18
@@
p-table {
left: 0;
&.ui-state-focus {
left: 0;
&.ui-state-focus {
- box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
+ box-shadow: #{$focus-box-shadow-form}
p
var(--mainColorLightest);
}
.ui-dropdown-label {
}
.ui-dropdown-label {
- color: var(--inputPlaceholderColor);
+ color:
p
var(--inputPlaceholderColor);
}
}
.ui-paginator-current {
position: absolute;
right: 0;
}
}
.ui-paginator-current {
position: absolute;
right: 0;
- color: var(--inputPlaceholderColor);
+ color:
p
var(--inputPlaceholderColor);
}
.ui-paginator-first,
}
.ui-paginator-first,
@@
-227,7
+227,7
@@
p-table {
&.focus-within,
&:focus {
&.focus-within,
&:focus {
- box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
+ box-shadow: #{$focus-box-shadow-form}
p
var(--mainColorLightest);
}
&.ui-state-disabled:hover {
}
&.ui-state-disabled:hover {
@@
-261,12
+261,12
@@
p-table {
.ui-paginator-page {
&.focus-within,
&:focus {
.ui-paginator-page {
&.focus-within,
&:focus {
- box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest) !important;
+ box-shadow: #{$focus-box-shadow-form}
p
var(--mainColorLightest) !important;
}
}
a {
}
}
a {
- color: var(--mainForegroundColor) !important;
+ color:
p
var(--mainForegroundColor) !important;
font-weight: $font-semibold !important;
margin: 0 5px !important;
outline: 0 !important;
font-weight: $font-semibold !important;
margin: 0 5px !important;
outline: 0 !important;
@@
-278,7
+278,7
@@
p-table {
&.ui-state-active {
&, &:hover, &:active, &:focus {
color: #fff !important;
&.ui-state-active {
&, &:hover, &:active, &:focus {
color: #fff !important;
- background-color: var(--mainColor) !important;
+ background-color:
p
var(--mainColor) !important;
}
}
}
}
}
}
@@
-328,7
+328,7
@@
p-multiselect {
&:focus,
&.ui-state-focus {
&:focus,
&.ui-state-focus {
- box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
+ box-shadow: #{$focus-box-shadow-form}
p
var(--mainColorLightest);
}
}
}
}
}
}
@@
-368,11
+368,11
@@
p-multiselect {
}
.ui-multiselect-panel .ui-multiselect-items .ui-multiselect-item.ui-state-highlight {
}
.ui-multiselect-panel .ui-multiselect-items .ui-multiselect-item.ui-state-highlight {
- background-color: var(--mainColorLighter);
+ background-color:
p
var(--mainColorLighter);
}
.ui-inputtext:enabled:focus:not(.ui-state-error) {
}
.ui-inputtext:enabled:focus:not(.ui-state-error) {
- border-color: var(--mainColorLighter) !important;
+ border-color:
p
var(--mainColorLighter) !important;
box-shadow: none;
}
}
box-shadow: none;
}
}
@@
-445,8
+445,8
@@
p-tablecheckbox:hover div .ui-chkbox-box {
.ui-chkbox-box {
&.ui-state-active {
.ui-chkbox-box {
&.ui-state-active {
- border-color: var(--mainColor) !important;
- background-color: var(--mainColor) !important;
+ border-color:
p
var(--mainColor) !important;
+ background-color:
p
var(--mainColor) !important;
}
.ui-chkbox-icon {
}
.ui-chkbox-icon {
@@
-462,8
+462,8
@@
p-tablecheckbox:hover div .ui-chkbox-box {
height: 12px;
opacity: 0;
transform: rotate(45deg) scale(0);
height: 12px;
opacity: 0;
transform: rotate(45deg) scale(0);
- border-right: 2px solid var(--mainBackgroundColor);
- border-bottom: 2px solid var(--mainBackgroundColor);
+ border-right: 2px solid
p
var(--mainBackgroundColor);
+ border-bottom: 2px solid
p
var(--mainBackgroundColor);
}
&.pi-check:after {
}
&.pi-check:after {
@@
-478,7
+478,7
@@
p-inputswitch {
height: 26px;
.ui-inputswitch-checked .ui-inputswitch-slider {
height: 26px;
.ui-inputswitch-checked .ui-inputswitch-slider {
- background-color: var(--mainColor) !important;
+ background-color:
p
var(--mainColor) !important;
}
&.small {
}
&.small {
@@
-520,7
+520,8
@@
p-toast {
.ui-toast-message {
font-family: $main-fonts;
.ui-toast-message {
font-family: $main-fonts;
- background-color: var(--mainBackgroundColor) !important;
+ background-color: pvar(--mainBackgroundColor) !important;
+ color: pvar(--mainForegroundColor) !important;
border-radius: 5px;
box-sizing: border-box;
border: 1px solid #EBEEF5 !important;
border-radius: 5px;
box-sizing: border-box;
border: 1px solid #EBEEF5 !important;