mirror of https://github.com/Chocobozzz/PeerTube
Cleanup CSS variables
Chocobozzz
parent
5ae397a7ed
commit
614d1351c9
|
|
@ -45,6 +45,6 @@
|
|||
}
|
||||
|
||||
.section-title {
|
||||
color: var(--fg);
|
||||
color: pvar(--fg);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@
|
|||
@use '_miniature' as *;
|
||||
|
||||
.root {
|
||||
--myFontSize: 1rem;
|
||||
--myGreyFontSize: 1rem;
|
||||
--co-font-size: 1rem;
|
||||
--co-secondary-font-size: 1rem;
|
||||
}
|
||||
|
||||
.section-label {
|
||||
|
|
@ -44,7 +44,7 @@ my-copy-button {
|
|||
}
|
||||
|
||||
.account-avatar-row {
|
||||
@include avatar-row-responsive(2rem, var(--myGreyFontSize));
|
||||
@include avatar-row-responsive(2rem, var(--co-secondary-font-size));
|
||||
}
|
||||
|
||||
.actor-display-name {
|
||||
|
|
@ -101,8 +101,8 @@ my-copy-button {
|
|||
|
||||
@media screen and (max-width: $mobile-view) {
|
||||
.root {
|
||||
--myFontSize: 14px;
|
||||
--myGreyFontSize: 13px;
|
||||
--co-font-size: 14px;
|
||||
--co-secondary-font-size: 13px;
|
||||
}
|
||||
|
||||
.links {
|
||||
|
|
|
|||
|
|
@ -1,22 +1,6 @@
|
|||
@use '_variables' as *;
|
||||
@use '_mixins' as *;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
|
||||
@include disable-default-a-behaviour;
|
||||
|
||||
&,
|
||||
&:hover {
|
||||
color: pvar(--fg);
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 80%;
|
||||
color: pvar(--secondary-750);
|
||||
}
|
||||
}
|
||||
|
||||
.action-cell {
|
||||
my-button:first-child {
|
||||
@include margin-right(10px);
|
||||
|
|
|
|||
|
|
@ -2,21 +2,9 @@
|
|||
@use '_mixins' as *;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
|
||||
@include disable-default-a-behaviour;
|
||||
|
||||
&,
|
||||
&:hover {
|
||||
color: pvar(--fg);
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 80%;
|
||||
color: pvar(--secondary-750);
|
||||
}
|
||||
}
|
||||
|
||||
my-delete-button {
|
||||
max-width: 130px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,21 +2,9 @@
|
|||
@use '_mixins' as *;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
|
||||
@include disable-default-a-behaviour;
|
||||
|
||||
&,
|
||||
&:hover {
|
||||
color: pvar(--fg);
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 80%;
|
||||
color: pvar(--secondary-750);
|
||||
}
|
||||
}
|
||||
|
||||
.expansion-block {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ my-select-custom-value {
|
|||
> a,
|
||||
> div {
|
||||
padding: 20px;
|
||||
background: pvar(--secondary-400);
|
||||
background: pvar(--bg-secondary-400);
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
|
|
@ -72,7 +72,7 @@ my-select-custom-value {
|
|||
|
||||
.dashboard-label {
|
||||
font-size: 90%;
|
||||
color: pvar(--main-fg-400);
|
||||
color: pvar(--fg-300);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
|
||||
.plugin {
|
||||
margin: 15px 0;
|
||||
background-color: pvar(--secondary-400);
|
||||
background-color: pvar(--bg-secondary-400);
|
||||
}
|
||||
|
||||
.first-row {
|
||||
|
|
@ -25,10 +25,10 @@
|
|||
@include margin-left(10px);
|
||||
|
||||
my-global-icon {
|
||||
color: pvar(--main-fg-500);
|
||||
color: pvar(--fg-400);
|
||||
|
||||
&[iconName=npm] {
|
||||
@include fill-svg-color(pvar(--main-fg-500));
|
||||
@include fill-svg-color(pvar(--fg-400));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -92,7 +92,7 @@
|
|||
my-copy-button {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
background: pvar(--secondary-300);
|
||||
background: pvar(--bg-secondary-300);
|
||||
}
|
||||
|
||||
@include on-small-main-col {
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ my-edit-button {
|
|||
|
||||
.video-channel-name {
|
||||
font-size: 14px;
|
||||
color: pvar(--main-fg-400);
|
||||
color: pvar(--fg-300);
|
||||
|
||||
@include margin-left(5px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
|
||||
label {
|
||||
margin: 0 0 0 5px;
|
||||
color: var(--main-fg-500);
|
||||
color: pvar(--fg-400);
|
||||
font-weight: $font-semibold;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@ my-video-playlist-miniature {
|
|||
}
|
||||
|
||||
.playlist-info {
|
||||
width: calc(100% + (2 * var(--x-margin-content)));
|
||||
width: calc(100% + (2 * pvar(--x-margin-content)));
|
||||
padding-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -86,7 +86,7 @@
|
|||
}
|
||||
|
||||
.video-channel-name {
|
||||
color: pvar(--main-fg-400);
|
||||
color: pvar(--fg-300);
|
||||
}
|
||||
|
||||
// Use the same breakpoints as in video-miniature
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ header {
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
// Better than border color for aliasing
|
||||
box-shadow: 0 0 0 1px var(--primary);
|
||||
box-shadow: 0 0 0 1px pvar(--primary);
|
||||
overflow: hidden;
|
||||
|
||||
my-global-icon {
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
height: fit-content;
|
||||
min-height: 100px;
|
||||
min-width: 200px;
|
||||
background-color: pvar(--secondary-400);
|
||||
background-color: pvar(--bg-secondary-400);
|
||||
margin-bottom: 15px;
|
||||
|
||||
@include margin-right(15px);
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ type ChartBuilderResult = {
|
|||
type Card = { label: string, value: string | number, moreInfo?: string, help?: string }
|
||||
|
||||
ChartJSDefaults.backgroundColor = getComputedStyle(document.body).getPropertyValue('--bg')
|
||||
ChartJSDefaults.borderColor = getComputedStyle(document.body).getPropertyValue('--secondary-350')
|
||||
ChartJSDefaults.borderColor = getComputedStyle(document.body).getPropertyValue('--bg-secondary-350')
|
||||
ChartJSDefaults.color = getComputedStyle(document.body).getPropertyValue('--fg')
|
||||
|
||||
@Component({
|
||||
|
|
|
|||
|
|
@ -4,11 +4,11 @@
|
|||
@use '_miniature' as *;
|
||||
|
||||
.root {
|
||||
--myGlobalTopPadding: 60px;
|
||||
--myChannelImgMargin: 30px;
|
||||
--myFontSize: 16px;
|
||||
--myChannelHandleFontSize: 16px;
|
||||
--myOwnerHandleFontSize: 14px;
|
||||
--co-global-top-padding: 60px;
|
||||
--co-channel-img-margin: 30px;
|
||||
--co-font-size: 16px;
|
||||
--co-channel-handle-font-size: 16px;
|
||||
--co-owner-handle-font-size: 14px;
|
||||
}
|
||||
|
||||
.section-label {
|
||||
|
|
@ -35,8 +35,8 @@
|
|||
grid-template-rows: auto auto;
|
||||
|
||||
background-color: pvar(--channel-bg);
|
||||
padding-top: var(--myGlobalTopPadding);
|
||||
font-size: var(--myFontSize);
|
||||
padding-top: var(--co-global-top-padding);
|
||||
font-size: var(--co-font-size);
|
||||
|
||||
// Use the same margin as the videos grid
|
||||
@include grid-videos-miniature-margins(false, 15px);
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
}
|
||||
|
||||
.channel-avatar-row {
|
||||
@include avatar-row-responsive(var(--myChannelImgMargin), var(--myChannelHandleFontSize));
|
||||
@include avatar-row-responsive(var(--co-channel-img-margin), var(--co-channel-handle-font-size));
|
||||
}
|
||||
|
||||
.support-button {
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
.channel-description {
|
||||
grid-column: 1;
|
||||
word-break: break-word;
|
||||
padding-bottom: var(--myGlobalTopPadding);
|
||||
padding-bottom: var(--co-global-top-padding);
|
||||
}
|
||||
|
||||
.show-more {
|
||||
|
|
@ -100,7 +100,7 @@
|
|||
background-color: pvar(--bg);
|
||||
padding: 30px;
|
||||
width: 300px;
|
||||
font-size: var(--myFontSize);
|
||||
font-size: var(--co-font-size);
|
||||
|
||||
.avatar-row {
|
||||
display: flex;
|
||||
|
|
@ -120,8 +120,8 @@
|
|||
}
|
||||
|
||||
.actor-handle {
|
||||
font-size: var(--myOwnerHandleFontSize);
|
||||
color: pvar(--main-fg-400);
|
||||
font-size: var(--co-owner-handle-font-size);
|
||||
color: pvar(--fg-300);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -156,8 +156,8 @@ my-copy-button {
|
|||
|
||||
@media screen and (max-width: 1100px) {
|
||||
.root {
|
||||
--myGlobalTopPadding: 45px;
|
||||
--myChannelImgMargin: 15px;
|
||||
--co-global-top-padding: 45px;
|
||||
--co-channel-img-margin: 15px;
|
||||
}
|
||||
|
||||
.channel-info {
|
||||
|
|
@ -194,7 +194,7 @@ my-copy-button {
|
|||
display: block;
|
||||
width: 100%;
|
||||
border-bottom: 2px solid $separator-border-color;
|
||||
padding: var(--myGlobalTopPadding) 45px;
|
||||
padding: var(--co-global-top-padding) 45px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
|
|
@ -234,10 +234,10 @@ my-copy-button {
|
|||
|
||||
@media screen and (max-width: $mobile-view) {
|
||||
.root {
|
||||
--myGlobalTopPadding: 15px;
|
||||
--myFontSize: 14px;
|
||||
--myChannelHandleFontSize: 13px;
|
||||
--myOwnerHandleFontSize: 13px;
|
||||
--co-global-top-padding: 15px;
|
||||
--co-font-size: 14px;
|
||||
--co-channel-handle-font-size: 13px;
|
||||
--co-owner-handle-font-size: 13px;
|
||||
}
|
||||
|
||||
.links {
|
||||
|
|
|
|||
|
|
@ -83,7 +83,7 @@ h2 {
|
|||
}
|
||||
|
||||
.description {
|
||||
color: pvar(--main-fg-400);
|
||||
color: pvar(--fg-300);
|
||||
margin-top: 5px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
|
||||
&.active,
|
||||
&:hover {
|
||||
background: pvar(--secondary-300);
|
||||
background: pvar(--bg-secondary-300);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@ my-timestamp-input {
|
|||
|
||||
.message-submit {
|
||||
display: inline-block;
|
||||
color: pvar(--main-fg-400);
|
||||
color: pvar(--fg-300);
|
||||
|
||||
@include margin-right(25px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
|
||||
.first-step-block {
|
||||
.torrent-or-magnet {
|
||||
@include divider($color: pvar(--secondary-750), $background: pvar(--secondary-400));
|
||||
@include divider($color: pvar(--secondary-icon-color), $background: pvar(--bg-secondary-400));
|
||||
|
||||
&[data-content] {
|
||||
margin: 1.5rem 0;
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ $width-size: 275px;
|
|||
.upload-icon {
|
||||
width: 90px;
|
||||
margin-bottom: 25px;
|
||||
color: pvar(--main-fg-400);
|
||||
color: pvar(--fg-300);
|
||||
}
|
||||
|
||||
.peertube-select-container {
|
||||
|
|
|
|||
|
|
@ -41,21 +41,21 @@ $nav-link-height: 40px;
|
|||
padding-top: 20px;
|
||||
}
|
||||
|
||||
::ng-deep .video-add-nav {
|
||||
:host ::ng-deep .video-add-nav {
|
||||
@include peertube-nav-tabs($border-width, $border-type, $border-color, $nav-link-height);
|
||||
|
||||
a.nav-link {
|
||||
&.active {
|
||||
background-color: pvar(--secondary-400) !important;
|
||||
background-color: pvar(--bg-secondary-400) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep .upload-video-container {
|
||||
:host ::ng-deep .upload-video-container {
|
||||
border: $border-width $border-type $border-color;
|
||||
border-top: transparent;
|
||||
|
||||
background-color: pvar(--secondary-400);
|
||||
background-color: pvar(--bg-secondary-400);
|
||||
border-bottom-left-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
padding: 4px 10px;
|
||||
white-space: nowrap;
|
||||
background-color: transparent !important;
|
||||
color: pvar(--main-fg-400);
|
||||
color: pvar(--fg-300);
|
||||
text-transform: uppercase;
|
||||
|
||||
@include peertube-button;
|
||||
|
|
@ -92,7 +92,7 @@
|
|||
background-color: #909090;
|
||||
|
||||
&.liked {
|
||||
background-color: pvar(--main-fg-500);
|
||||
background-color: pvar(--fg-400);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,5 +11,5 @@
|
|||
}
|
||||
|
||||
.activated {
|
||||
color: pvar(--main-fg-500) !important;
|
||||
color: pvar(--fg-400) !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
|
||||
.highlighted-comment {
|
||||
display: inline-block;
|
||||
background-color: pvar(--secondary-350);
|
||||
background-color: pvar(--bg-secondary-350);
|
||||
color: pvar(--fg);
|
||||
padding: 0 5px;
|
||||
font-size: 13px;
|
||||
|
|
@ -78,13 +78,13 @@
|
|||
}
|
||||
|
||||
.comment-account-fid {
|
||||
color: pvar(--main-fg-400);
|
||||
color: pvar(--fg-300);
|
||||
}
|
||||
}
|
||||
|
||||
.comment-date {
|
||||
font-size: 90%;
|
||||
color: pvar(--main-fg-400);
|
||||
color: pvar(--fg-300);
|
||||
text-decoration: none;
|
||||
|
||||
@include margin-left(5px);
|
||||
|
|
@ -116,7 +116,7 @@
|
|||
}
|
||||
|
||||
&.comment-html-deleted {
|
||||
color: pvar(--main-fg-400);
|
||||
color: pvar(--fg-300);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -127,7 +127,7 @@
|
|||
|
||||
::ng-deep .dropdown-toggle,
|
||||
.comment-action-reply {
|
||||
color: pvar(--main-fg-400);
|
||||
color: pvar(--fg-300);
|
||||
cursor: pointer;
|
||||
|
||||
@include margin-right(10px);
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
.attribute-label {
|
||||
min-width: 142px;
|
||||
display: inline-block;
|
||||
color: pvar(--main-fg-400);
|
||||
color: pvar(--fg-300);
|
||||
font-weight: $font-bold;
|
||||
|
||||
@include padding-right(5px);
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
.video-info-description-more {
|
||||
cursor: pointer;
|
||||
font-weight: $font-semibold;
|
||||
color: pvar(--main-fg-400);
|
||||
color: pvar(--fg-300);
|
||||
margin-top: 1rem;
|
||||
|
||||
@include font-size(14px);
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
border-bottom: 1px solid $separator-border-color;
|
||||
|
||||
.widget-header {
|
||||
background-color: pvar(--secondary-400);
|
||||
background-color: pvar(--bg-secondary-400);
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
.segment {
|
||||
&.active,
|
||||
&:hover {
|
||||
background: pvar(--secondary-300);
|
||||
background: pvar(--bg-secondary-300);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
.playlist {
|
||||
.playlist-by-index {
|
||||
color: pvar(--main-fg-400);
|
||||
color: pvar(--fg-300);
|
||||
display: flex;
|
||||
|
||||
.playlist-by {
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ $video-max-height: calc(100vh - #{$header-height} - #{$theater-bottom-space});
|
|||
}
|
||||
|
||||
::ng-deep .video-js {
|
||||
--player-height: #{$video-max-height};
|
||||
--co-player-height: #{$video-max-height};
|
||||
}
|
||||
|
||||
.player-widget-component ::ng-deep .widget-root {
|
||||
|
|
@ -62,16 +62,16 @@ $video-max-height: calc(100vh - #{$header-height} - #{$theater-bottom-space});
|
|||
}
|
||||
|
||||
::ng-deep .video-js {
|
||||
--player-height: #{$video-default-height};
|
||||
--player-portrait-mode: 0;
|
||||
--co-player-height: #{$video-default-height};
|
||||
--co-player-portrait-mode: 0;
|
||||
// Default player ratio, redefined by the player to automatically adapt player size
|
||||
--player-ratio: #{math.div(16, 9)};
|
||||
--co-player-ratio: #{math.div(16, 9)};
|
||||
|
||||
width: 100%;
|
||||
height: var(--player-height);
|
||||
height: var(--co-player-height);
|
||||
|
||||
// Can be recalculated by the player depending on video ratio
|
||||
max-width: calc(var(--player-height) * var(--player-ratio));
|
||||
max-width: calc(var(--co-player-height) * var(--co-player-ratio));
|
||||
|
||||
// VideoJS create an inner video player
|
||||
video {
|
||||
|
|
@ -253,8 +253,8 @@ my-video-comments {
|
|||
|
||||
.remote-server-down,
|
||||
::ng-deep .video-js {
|
||||
--player-portrait-mode: 1;
|
||||
--player-height: calc(100vw / var(--player-ratio)) !important;
|
||||
--co-player-portrait-mode: 1;
|
||||
--co-player-height: calc(100vw / var(--co-player-ratio)) !important;
|
||||
|
||||
max-height: calc(100vh - #{$header-height} - #{$player-portrait-bottom-space});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -181,8 +181,8 @@ export class ThemeService {
|
|||
|
||||
const toProcess = [
|
||||
{ prefix: 'primary', invertIfDark: false },
|
||||
{ prefix: 'secondary', invertIfDark: true },
|
||||
{ prefix: 'main-fg', invertIfDark: true }
|
||||
{ prefix: 'bg-secondary', invertIfDark: true },
|
||||
{ prefix: 'fg', invertIfDark: true }
|
||||
]
|
||||
|
||||
for (const { prefix, invertIfDark } of toProcess) {
|
||||
|
|
|
|||
|
|
@ -2,6 +2,10 @@
|
|||
@use '_variables' as *;
|
||||
@use '_mixins' as *;
|
||||
|
||||
.root {
|
||||
background-color: pvar(--bg);
|
||||
}
|
||||
|
||||
.peertube-title {
|
||||
font-size: 24px;
|
||||
font-weight: $font-bold;
|
||||
|
|
@ -70,7 +74,7 @@
|
|||
}
|
||||
|
||||
.username {
|
||||
color: pvar(--main-fg-400);
|
||||
color: pvar(--fg-300);
|
||||
}
|
||||
|
||||
> .dropdown-toggle {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
@use '_mixins' as *;
|
||||
|
||||
.menu-container {
|
||||
--menuXPadding: 1.5rem;
|
||||
--co-menu-x-padding: 1.5rem;
|
||||
|
||||
z-index: z(menu);
|
||||
width: calc(#{$menu-width} - 2rem);
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
@include margin-left(2rem);
|
||||
|
||||
&.collapsed {
|
||||
--menuXPadding: 0.25rem;
|
||||
--co-menu-x-padding: 0.25rem;
|
||||
|
||||
width: auto;
|
||||
|
||||
|
|
@ -30,11 +30,11 @@
|
|||
}
|
||||
|
||||
.toggle-menu {
|
||||
color: pvar(--secondary-750);
|
||||
color: pvar-fallback(--menu-fg, --fg-200);
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 100%;
|
||||
background-color: pvar(--secondary-450);
|
||||
background-color: pvar-fallback(--menu-bg, --bg-secondary-500);
|
||||
|
||||
@include button-with-icon(20px, 0, 0, 1px);
|
||||
|
||||
|
|
@ -89,7 +89,7 @@
|
|||
padding-top: 1.5rem;
|
||||
padding-bottom: 1.5rem;
|
||||
border-radius: 14px;
|
||||
background-color: pvar(--secondary-400);
|
||||
background-color: pvar-fallback(--menu-bg, --bg-secondary-400);
|
||||
}
|
||||
|
||||
.menu-link,
|
||||
|
|
@ -97,8 +97,8 @@
|
|||
.block-title,
|
||||
.about .description,
|
||||
.about my-button {
|
||||
@include padding-left(var(--menuXPadding));
|
||||
@include padding-right(var(--menuXPadding));
|
||||
@include padding-left(var(--co-menu-x-padding));
|
||||
@include padding-right(var(--co-menu-x-padding));
|
||||
}
|
||||
|
||||
.menu-block,
|
||||
|
|
@ -107,8 +107,7 @@
|
|||
content: '';
|
||||
display: block;
|
||||
height: 2px;
|
||||
background: pvar(--secondary-450);
|
||||
margin: 1rem var(--menuXPadding);
|
||||
margin: 1rem var(--co-menu-x-padding);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -136,6 +135,7 @@
|
|||
|
||||
.block-title {
|
||||
font-weight: $font-bold;
|
||||
color: pvar-fallback(--menu-fg, --fg-350);
|
||||
font-size: 14px;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
|
@ -144,7 +144,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
color: pvar(--main-fg-450);
|
||||
color: pvar-fallback(--menu-fg, --fg-400);
|
||||
white-space: normal;
|
||||
word-break: break-word;
|
||||
transition: background-color .1s ease-in-out;
|
||||
|
|
@ -156,11 +156,11 @@
|
|||
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
background-color: pvar(--secondary-500);
|
||||
background-color: pvar-fallback(--menu-fg, --bg-secondary-500);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: pvar(--secondary-600);
|
||||
background-color: pvar-fallback(--menu-fg, --bg-secondary-600);
|
||||
}
|
||||
|
||||
my-global-icon {
|
||||
|
|
@ -169,7 +169,7 @@
|
|||
line-height: 22px;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
color: pvar(--secondary-750);
|
||||
color: pvar-fallback(--menu-fg, --secondary-icon-color);
|
||||
|
||||
+ *:not(.visually-hidden) {
|
||||
@include margin-left(12px);
|
||||
|
|
@ -184,6 +184,6 @@
|
|||
.about {
|
||||
.description {
|
||||
font-size: 14px;
|
||||
color: pvar(--main-fg-300);
|
||||
color: pvar-fallback(--menu-fg, --fg-200)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
.account-flagged-handle,
|
||||
.video-owner {
|
||||
font-size: 11px;
|
||||
color: var(--main-fg-400);
|
||||
color: pvar(--fg-300);
|
||||
}
|
||||
|
||||
.abuse-messages {
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ textarea {
|
|||
max-width: 60%;
|
||||
|
||||
.author {
|
||||
color: var(--main-fg-400);
|
||||
color: pvar(--fg-300);
|
||||
font-size: 14px;
|
||||
padding: 0 0 3px 10px;
|
||||
}
|
||||
|
|
@ -41,23 +41,23 @@ textarea {
|
|||
.bubble {
|
||||
border-radius: 10px;
|
||||
padding: 5px 10px;
|
||||
color: var(--fg);
|
||||
background-color: var(--secondary-400);
|
||||
color: pvar(--fg);
|
||||
background-color: pvar(--bg-secondary-400);
|
||||
|
||||
.date {
|
||||
font-size: 13px;
|
||||
color: var(--main-fg-400);
|
||||
color: pvar(--fg-300);
|
||||
}
|
||||
}
|
||||
|
||||
&.by-me {
|
||||
|
||||
.bubble {
|
||||
color: var(--on-primary);
|
||||
background-color: var(--primary-400);
|
||||
color: pvar(--on-primary);
|
||||
background-color: pvar(--primary-400);
|
||||
|
||||
.date {
|
||||
color: var(--on-primary);
|
||||
color: pvar(--on-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
.actor-info-username {
|
||||
position: relative;
|
||||
font-size: 14px;
|
||||
color: pvar(--main-fg-400);
|
||||
color: pvar(--fg-300);
|
||||
}
|
||||
|
||||
.actor-info-followers {
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
}
|
||||
|
||||
.banner-placeholder {
|
||||
background-color: pvar(--secondary-350);
|
||||
background-color: pvar(--bg-secondary-350);
|
||||
}
|
||||
|
||||
.actor-img-edit-container {
|
||||
|
|
|
|||
|
|
@ -3,10 +3,10 @@
|
|||
|
||||
.avatar {
|
||||
// Defined in component
|
||||
width: var(--avatarSize);
|
||||
height: var(--avatarSize);
|
||||
min-width: var(--avatarSize);
|
||||
min-height: var(--avatarSize);
|
||||
width: var(--co-avatar-size);
|
||||
height: var(--co-avatar-size);
|
||||
min-width: var(--co-avatar-size);
|
||||
min-height: var(--co-avatar-size);
|
||||
|
||||
&.account {
|
||||
object-fit: cover;
|
||||
|
|
@ -28,7 +28,8 @@ a:hover {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: var(--initialFontSize);
|
||||
// Defined in component
|
||||
font-size: var(--co-font-size);
|
||||
|
||||
&.blue {
|
||||
background-color: #009FD4;
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@ export class ActorAvatarComponent implements OnInit, OnChanges {
|
|||
|
||||
private buildClasses () {
|
||||
let avatarSize = '100%'
|
||||
let initialFontSize = '22px'
|
||||
let fontSize = '22px'
|
||||
|
||||
this.classes = [ 'avatar' ]
|
||||
|
||||
|
|
@ -77,11 +77,11 @@ export class ActorAvatarComponent implements OnInit, OnChanges {
|
|||
avatarSize = `${this.size}px`
|
||||
|
||||
if (this.size <= 18) {
|
||||
initialFontSize = '13px'
|
||||
fontSize = '13px'
|
||||
} else if (this.size >= 100) {
|
||||
initialFontSize = '40px'
|
||||
fontSize = '40px'
|
||||
} else if (this.size >= 120) {
|
||||
initialFontSize = '46px'
|
||||
fontSize = '46px'
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -98,8 +98,8 @@ export class ActorAvatarComponent implements OnInit, OnChanges {
|
|||
}
|
||||
|
||||
const elStyle = (this.el.nativeElement as HTMLElement).style
|
||||
elStyle.setProperty('--avatarSize', avatarSize)
|
||||
elStyle.setProperty('--initialFontSize', initialFontSize)
|
||||
elStyle.setProperty('--co-avatar-size', avatarSize)
|
||||
elStyle.setProperty('--co-font-size', fontSize)
|
||||
}
|
||||
|
||||
private buildDefaultAvatarUrl () {
|
||||
|
|
|
|||
|
|
@ -52,6 +52,6 @@
|
|||
|
||||
.video-label {
|
||||
font-size: 12px;
|
||||
color: pvar(--main-fg-400);
|
||||
color: pvar(--fg-300);
|
||||
margin: 15px 0 5px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ $input-border-radius: 3px;
|
|||
flex-direction: column;
|
||||
|
||||
textarea {
|
||||
background-color: pvar(--secondary-350);
|
||||
background-color: pvar(--bg-secondary-350);
|
||||
|
||||
font-family: monospace;
|
||||
font-size: 13px;
|
||||
|
|
@ -120,7 +120,7 @@ $input-border-radius: 3px;
|
|||
overflow-y: auto;
|
||||
word-wrap: break-word;
|
||||
|
||||
scrollbar-color: pvar(--main-fg-400) pvar(--bg);
|
||||
scrollbar-color: pvar(--fg-300) pvar(--bg);
|
||||
}
|
||||
|
||||
textarea,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<div class="root flex-column">
|
||||
<div class="d-flex">
|
||||
<div class="d-flex align-items-center">
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
</ng-template>
|
||||
</my-help>
|
||||
|
||||
<div *ngIf="recommended" class="recommended" i18n>Recommended</div>
|
||||
<div *ngIf="recommended" class="ms-2 pt-badge badge-secondary" i18n>Recommended</div>
|
||||
</div>
|
||||
|
||||
<div class="ms-4 d-flex flex-column">
|
||||
|
|
|
|||
|
|
@ -28,20 +28,8 @@
|
|||
.wrapper:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.recommended {
|
||||
align-self: baseline;
|
||||
display: inline-block;
|
||||
padding: 4px 6px;
|
||||
cursor: default;
|
||||
border-radius: 3px;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
font-weight: 500;
|
||||
color: pvar(--secondary-750);
|
||||
background-color: rgba(217, 225, 232, .1);
|
||||
border: 1px solid rgba(217, 225, 232, .5);
|
||||
|
||||
@include margin-left(.5rem);
|
||||
}
|
||||
|
||||
.pt-badge {
|
||||
height: fit-content;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
::ng-deep {
|
||||
:host ::ng-deep {
|
||||
svg {
|
||||
vertical-align: bottom;
|
||||
width: inherit;
|
||||
|
|
|
|||
|
|
@ -6,11 +6,11 @@
|
|||
width: 17px;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
color: pvar(--main-fg-500);
|
||||
color: pvar(--fg-400);
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep {
|
||||
:host ::ng-deep {
|
||||
.help-popover {
|
||||
min-width: 200px;
|
||||
max-width: 300px;
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
@use '_mixins' as *;
|
||||
|
||||
.progress-container {
|
||||
background-color: pvar(--secondary-350);
|
||||
background-color: pvar(--bg-secondary-350);
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
height: 2rem;
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
|
||||
span {
|
||||
position: absolute;
|
||||
color: pvar(--main-fg-500);
|
||||
color: pvar(--fg-400);
|
||||
line-height: 2rem;
|
||||
margin: 0 12px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,11 +3,11 @@
|
|||
|
||||
.root {
|
||||
width: 100%;
|
||||
border-bottom: 1px solid pvar(--main-fg-300);
|
||||
border-bottom: 1px solid pvar(--fg-200);
|
||||
}
|
||||
|
||||
.x-menu-entry {
|
||||
color: pvar(--secondary-750);
|
||||
color: pvar(--fg-100);
|
||||
display: inline-block;
|
||||
font-weight: $font-bold;
|
||||
white-space: nowrap;
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ my-action-dropdown.show {
|
|||
|
||||
.table-comment-link,
|
||||
.table-account-link {
|
||||
color: var(--fg);
|
||||
color: pvar(--fg);
|
||||
|
||||
@include disable-outline;
|
||||
|
||||
|
|
|
|||
|
|
@ -2,17 +2,5 @@
|
|||
@use '_mixins' as *;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
|
||||
@include disable-default-a-behaviour;
|
||||
|
||||
&,
|
||||
&:hover {
|
||||
color: pvar(--fg);
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 80%;
|
||||
color: pvar(--secondary-750);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -36,10 +36,6 @@
|
|||
border-radius: 2px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: pvar(--secondary-750);
|
||||
}
|
||||
|
||||
.table-video-image-label {
|
||||
position: absolute;
|
||||
border-radius: 3px;
|
||||
|
|
@ -62,7 +58,7 @@
|
|||
line-height: 1rem;
|
||||
|
||||
div + div {
|
||||
color: var(--main-fg-400);
|
||||
color: pvar(--fg-300);
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -53,10 +53,10 @@
|
|||
|
||||
.live-overlay {
|
||||
font-weight: $font-bold;
|
||||
color: pvar(--secondary-300);
|
||||
color: #F4F4F5;
|
||||
|
||||
&.live-streaming {
|
||||
color: pvar(--secondary-300);
|
||||
color: #F4F4F5;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
|
|
@ -96,6 +96,6 @@
|
|||
width: 22px;
|
||||
height: 22px;
|
||||
|
||||
color: pvar(--secondary-300);
|
||||
color: #F4F4F5;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
> span:first-child {
|
||||
min-width: 142px;
|
||||
display: inline-block;
|
||||
color: pvar(--main-fg-400);
|
||||
color: pvar(--fg-300);
|
||||
font-weight: $font-bold;
|
||||
|
||||
@include padding-right(5px);
|
||||
|
|
|
|||
|
|
@ -7,6 +7,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
::ng-deep .icon-playlist-add {
|
||||
:host ::ng-deep .icon-playlist-add {
|
||||
left: 2px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@use '_variables' as *;
|
||||
@use '_mixins' as *;
|
||||
|
||||
$filters-background: pvar(--secondary-400);
|
||||
$filters-background: pvar(--bg-secondary-400);
|
||||
|
||||
.root {
|
||||
margin-bottom: 45px;
|
||||
|
|
@ -42,7 +42,7 @@ $filters-background: pvar(--secondary-400);
|
|||
}
|
||||
|
||||
.filters-summary {
|
||||
color: pvar(--main-fg-300);
|
||||
color: pvar(--fg-200);
|
||||
}
|
||||
|
||||
.filters-toggle {
|
||||
|
|
|
|||
|
|
@ -5,13 +5,13 @@
|
|||
$more-button-width: 40px;
|
||||
|
||||
.video-miniature {
|
||||
--fs-small: 0.75rem;
|
||||
--fs-medium: 0.875rem;
|
||||
--fs-big: 1rem;
|
||||
--co-fs-small: 0.75rem;
|
||||
--co-fs-medium: 0.875rem;
|
||||
--co-fs-big: 1rem;
|
||||
}
|
||||
|
||||
.video-name {
|
||||
font-size: var(--fs-big);
|
||||
font-size: var(--co-fs-big);
|
||||
|
||||
@include miniature-name;
|
||||
}
|
||||
|
|
@ -25,28 +25,28 @@ $more-button-width: 40px;
|
|||
.owner {
|
||||
display: flex;
|
||||
position: relative;
|
||||
font-size: var(--fs-medium);
|
||||
font-size: var(--co-fs-medium);
|
||||
}
|
||||
|
||||
.date-and-views,
|
||||
.video-info-privacy,
|
||||
.badges {
|
||||
font-size: var(--fs-small);
|
||||
font-size: var(--co-fs-small);
|
||||
}
|
||||
|
||||
.date-and-views {
|
||||
color: pvar(--main-fg-300);
|
||||
color: pvar(--fg-200);
|
||||
}
|
||||
|
||||
.owner-label {
|
||||
display: block;
|
||||
color: pvar(--main-fg-400);
|
||||
color: pvar(--fg-300);
|
||||
|
||||
@include disable-default-a-behaviour;
|
||||
@include ellipsis;
|
||||
|
||||
&:hover {
|
||||
color: pvar(--main-fg-600);
|
||||
color: pvar(--fg);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -166,20 +166,20 @@ $more-button-width: 40px;
|
|||
}
|
||||
|
||||
.video-miniature.display-as-row {
|
||||
--fs-small: 0.875rem;
|
||||
--fs-medium: 1rem;
|
||||
--fs-big: 1.25rem;
|
||||
--co-fs-small: 0.875rem;
|
||||
--co-fs-medium: 1rem;
|
||||
--co-fs-big: 1.25rem;
|
||||
|
||||
--rowThumbnailWidth: #{$video-thumbnail-width};
|
||||
--rowThumbnailHeight: #{$video-thumbnail-height};
|
||||
--co-row-thumbnail-width: #{$video-thumbnail-width};
|
||||
--co-row-thumbnail-height: #{$video-thumbnail-height};
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
my-video-thumbnail {
|
||||
min-width: var(--rowThumbnailWidth);
|
||||
max-width: var(--rowThumbnailWidth);
|
||||
height: var(--rowThumbnailHeight);
|
||||
min-width: var(--co-row-thumbnail-width);
|
||||
max-width: var(--co-row-thumbnail-width);
|
||||
height: var(--co-row-thumbnail-height);
|
||||
|
||||
@include margin-right(1rem);
|
||||
}
|
||||
|
|
@ -223,14 +223,14 @@ $more-button-width: 40px;
|
|||
|
||||
@include on-small-main-col {
|
||||
.video-miniature.display-as-row {
|
||||
--rowThumbnailWidth: #{$video-thumbnail-medium-width};
|
||||
--rowThumbnailHeight: #{$video-thumbnail-medium-height};
|
||||
--co-row-thumbnail-width: #{$video-thumbnail-medium-width};
|
||||
--co-row-thumbnail-height: #{$video-thumbnail-medium-height};
|
||||
}
|
||||
}
|
||||
|
||||
@include on-mobile-main-col {
|
||||
.video-miniature.display-as-row {
|
||||
--rowThumbnailWidth: #{$video-thumbnail-small-width};
|
||||
--rowThumbnailHeight: #{$video-thumbnail-small-height};
|
||||
--co-row-thumbnail-width: #{$video-thumbnail-small-width};
|
||||
--co-row-thumbnail-height: #{$video-thumbnail-small-height};
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -108,7 +108,7 @@ my-timestamp-input {
|
|||
|
||||
.header-label {
|
||||
font-size: 13px;
|
||||
color: pvar(--main-fg-400);
|
||||
color: pvar(--fg-300);
|
||||
padding-left: 2px;
|
||||
|
||||
&:nth-child(1) {
|
||||
|
|
|
|||
|
|
@ -51,14 +51,14 @@ my-video-thumbnail,
|
|||
|
||||
.position {
|
||||
font-weight: $font-semibold;
|
||||
color: pvar(--main-fg-400);
|
||||
color: pvar(--fg-300);
|
||||
min-width: 25px;
|
||||
|
||||
my-global-icon {
|
||||
width: 17px;
|
||||
position: relative;
|
||||
left: -2px;
|
||||
color: pvar(--main-fg-400);
|
||||
color: pvar(--fg-300);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -85,7 +85,7 @@ my-video-thumbnail,
|
|||
}
|
||||
|
||||
my-global-icon {
|
||||
color: pvar(--main-fg-400);
|
||||
color: pvar(--fg-300);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -139,7 +139,7 @@ my-video-thumbnail,
|
|||
|
||||
.video-info-owner,
|
||||
.video-info-timestamp {
|
||||
color: pvar(--main-fg-400);
|
||||
color: pvar(--fg-300);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@
|
|||
|
||||
.by {
|
||||
display: block;
|
||||
color: pvar(--main-fg-400);
|
||||
color: pvar(--fg-300);
|
||||
|
||||
@include disable-default-a-behaviour;
|
||||
}
|
||||
|
|
@ -70,7 +70,7 @@
|
|||
|
||||
.description {
|
||||
margin-top: 10px;
|
||||
color: pvar(--main-fg-400);
|
||||
color: pvar(--fg-300);
|
||||
|
||||
@include peertube-word-wrap;
|
||||
}
|
||||
|
|
@ -92,8 +92,8 @@
|
|||
}
|
||||
|
||||
.miniature.display-as-row {
|
||||
--rowThumbnailWidth: #{$video-thumbnail-width};
|
||||
--rowThumbnailHeight: #{$video-thumbnail-height};
|
||||
--co-row-thumbnail-width: #{$video-thumbnail-width};
|
||||
--co-row-thumbnail-height: #{$video-thumbnail-height};
|
||||
|
||||
display: flex;
|
||||
|
||||
|
|
@ -102,9 +102,9 @@
|
|||
}
|
||||
|
||||
.miniature-thumbnail {
|
||||
min-width: var(--rowThumbnailWidth);
|
||||
max-width: var(--rowThumbnailWidth);
|
||||
height: var(--rowThumbnailHeight);
|
||||
min-width: var(--co-row-thumbnail-width);
|
||||
max-width: var(--co-row-thumbnail-width);
|
||||
height: var(--co-row-thumbnail-height);
|
||||
|
||||
@include margin-right(1rem);
|
||||
}
|
||||
|
|
@ -112,14 +112,14 @@
|
|||
|
||||
@include on-small-main-col {
|
||||
.miniature.display-as-row {
|
||||
--rowThumbnailWidth: #{$video-thumbnail-medium-width};
|
||||
--rowThumbnailHeight: #{$video-thumbnail-medium-height};
|
||||
--co-row-thumbnail-width: #{$video-thumbnail-medium-width};
|
||||
--co-row-thumbnail-height: #{$video-thumbnail-medium-height};
|
||||
}
|
||||
}
|
||||
|
||||
@include on-mobile-main-col {
|
||||
.miniature.display-as-row {
|
||||
--rowThumbnailWidth: #{$video-thumbnail-small-width};
|
||||
--rowThumbnailHeight: #{$video-thumbnail-small-height};
|
||||
--co-row-thumbnail-width: #{$video-thumbnail-small-width};
|
||||
--co-row-thumbnail-height: #{$video-thumbnail-small-height};
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@
|
|||
|
||||
.from-date {
|
||||
font-size: 0.85em;
|
||||
color: pvar(--main-fg-400);
|
||||
color: pvar(--fg-300);
|
||||
min-width: 70px;
|
||||
text-align: end;
|
||||
|
||||
|
|
|
|||
|
|
@ -18,24 +18,20 @@ input[type="search"]::-webkit-search-results-button,
|
|||
input[type="search"]::-webkit-search-results-decoration { display: none; }
|
||||
|
||||
body {
|
||||
/*** theme ***/
|
||||
// now beware sass requires interpolation
|
||||
// for css custom properties #{$var}
|
||||
|
||||
--menuBackgroundColor: #{$menu-background};
|
||||
--menuForegroundColor: #{$menu-color};
|
||||
|
||||
// Create a theme system using CSS variables
|
||||
|
||||
// Fallback from old theme
|
||||
--primary: var(--primary);
|
||||
--secondary: var(--greyBackgroundColor);
|
||||
--main-fg: var(--fg);
|
||||
--main-fg-500: var(--greyForegroundColor, 0); // 0 means undefined
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// New theme with fallback
|
||||
--fg: var(--mainForegroundColor, #{pvar(--main-fg-600)});
|
||||
--bg: var(--mainBackgroundColor, #{pvar(--secondary-300)});
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
--menu-bg: var(--menuBackgroundColor);
|
||||
--menu-fg: var(--menuForegroundColor);
|
||||
|
||||
--fg: var(--mainForegroundColor, #000);
|
||||
--fg-300: var(--greyForegroundColor, 0); // 0 means undefined
|
||||
|
||||
--bg: var(--mainBackgroundColor, #fff);
|
||||
--bg-secondary: var(--greyBackgroundColor, #E5E5E5);
|
||||
|
||||
--primary: var(--mainColor, hsl(24, 90%, 45%));
|
||||
--on-primary: #{pvar(--fg)};
|
||||
|
||||
--red: #{$red};
|
||||
|
|
@ -44,16 +40,16 @@ body {
|
|||
--green: #{$green};
|
||||
|
||||
--input-fg: var(--inputForegroundColor, #{pvar(--fg)});
|
||||
--input-bg: var(--inputBackgroundColor, #{pvar(--secondary-400)});
|
||||
--input-placeholder: var(--inputPlaceholderColor, #{pvar(--secondary-750)});
|
||||
--input-border-color: var(--inputBorderColor, #{pvar(--secondary-500)});
|
||||
--input-bg: var(--inputBackgroundColor, #{pvar(--bg-secondary-400)});
|
||||
--input-placeholder: var(--inputPlaceholderColor, #{pvar(--fg-50)});
|
||||
--input-border-color: var(--inputBorderColor, #{pvar(--bg-secondary-500)});
|
||||
|
||||
--textarea-fg: var(--textareaForegroundColor, #{pvar(--input-fg)});
|
||||
--textarea-bg: var(--textareaBackgroundColor, #{pvar(--input-bg)});
|
||||
|
||||
--channel-bg: var(--channelBackgroundColor, #{pvar(--primary-50)});
|
||||
|
||||
--support-btn-fg: var(--supportButtonColor, #{pvar(--main-fg-400)});
|
||||
--support-btn-fg: var(--supportButtonColor, #{pvar(--fg-300)});
|
||||
--support-btn-bg: var(--supportButtonBackgroundColor, transparent);
|
||||
--support-btn-heart-bg: var(--supportButtonHeartColor, #{$support-button-heart});
|
||||
|
||||
|
|
@ -61,23 +57,36 @@ body {
|
|||
--x-videos-margin-content: 2rem;
|
||||
--main-col-width: calc(100vw - #{$menu-width});
|
||||
|
||||
--secondary-icon-color: #{pvar(--fg-50)};
|
||||
--secondary-fg: #{pvar(--fg-50)};
|
||||
|
||||
// Light theme
|
||||
&[data-pt-theme=peertube-core-light],
|
||||
&[data-pt-theme=default] {
|
||||
--is-dark: 0;
|
||||
|
||||
--primary: #F2690D;
|
||||
--main-fg: hsl(0 14% 12%);
|
||||
--secondary: hsl(0 10% 76%);
|
||||
|
||||
--fg: hsl(0 14% 2%);
|
||||
|
||||
--bg: hsl(0 10% 96%);
|
||||
--bg-secondary: hsl(0 10% 76%);
|
||||
|
||||
--secondary-icon-color: #8F7676;
|
||||
--input-placeholder: #8F7676;
|
||||
}
|
||||
|
||||
// Brown
|
||||
&[data-pt-theme=peertube-core-dark] {
|
||||
--is-dark: 1;
|
||||
|
||||
--primary: #FD9C50;
|
||||
--main-fg: hsl(0 10% 86%);
|
||||
--secondary: hsl(0 14% 22%);
|
||||
--bg: #{pvar(--secondary-350)};
|
||||
--on-primary: #{pvar(--secondary-600)};
|
||||
--on-primary: #111;
|
||||
|
||||
--fg: hsl(0 10% 96%);
|
||||
|
||||
--bg: hsl(0 14% 7%);
|
||||
--bg-secondary: hsl(0 14% 22%);
|
||||
}
|
||||
|
||||
& {
|
||||
|
|
@ -147,8 +156,8 @@ label {
|
|||
}
|
||||
|
||||
code {
|
||||
background-color: pvar(--secondary-350);
|
||||
color: pvar(--main-fg-500);
|
||||
background-color: pvar(--bg-secondary-350);
|
||||
color: pvar(--fg-400);
|
||||
border-radius: 3px;
|
||||
padding: .2em .4em;
|
||||
margin: auto .4em;
|
||||
|
|
@ -174,7 +183,7 @@ code {
|
|||
}
|
||||
|
||||
.sub-menu {
|
||||
background-color: pvar(--secondary-400);
|
||||
background-color: pvar(--bg-secondary-400);
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -232,8 +241,9 @@ my-global-icon[iconName=external-link] {
|
|||
margin: 0 0.3em;
|
||||
width: 0.9em;
|
||||
height: 0.9em;
|
||||
line-height: 0.9em;
|
||||
display: inline-block;
|
||||
color: pvar(--secondary-750);
|
||||
color: pvar(--secondary-icon-color);
|
||||
position: relative;
|
||||
top: -0.1em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ body {
|
|||
}
|
||||
|
||||
.btn-outline-secondary {
|
||||
--bs-btn-color: #{pvar(--main-fg-400)};
|
||||
--bs-btn-color: #{pvar(--fg-300)};
|
||||
}
|
||||
|
||||
.btn {
|
||||
|
|
@ -75,7 +75,7 @@ body {
|
|||
// ---------------------------------------------------------------------------
|
||||
|
||||
.dropdown-menu {
|
||||
--bs-dropdown-link-hover-bg: #{pvar(--secondary-350)};
|
||||
--bs-dropdown-link-hover-bg: #{pvar(--bg-secondary-350)};
|
||||
--bs-dropdown-link-color: #{pvar(--fg)};
|
||||
--bs-dropdown-border-color: #{pvar(--input-border-color)};
|
||||
|
||||
|
|
|
|||
|
|
@ -64,9 +64,9 @@
|
|||
padding: 0;
|
||||
border: 0 !important;
|
||||
text-decoration: underline;
|
||||
color: pvar(--main-fg-500);
|
||||
color: pvar(--fg-400);
|
||||
|
||||
&:hover {
|
||||
color: pvar(--main-fg-200);
|
||||
color: pvar(--fg-100);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -99,11 +99,11 @@
|
|||
// ---------------------------------------------------------------------------
|
||||
|
||||
.chip {
|
||||
--avatarSize: 1.2rem;
|
||||
--chip-avatar-size: 1.2rem;
|
||||
|
||||
display: inline-flex;
|
||||
color: pvar(--fg);
|
||||
height: var(--avatarSize);
|
||||
height: var(--chip-avatar-size);
|
||||
max-width: 320px;
|
||||
overflow: hidden;
|
||||
text-decoration: none;
|
||||
|
|
@ -114,14 +114,14 @@
|
|||
|
||||
my-actor-avatar {
|
||||
border-radius: 5rem;
|
||||
width: var(--avatarSize);
|
||||
height: var(--avatarSize);
|
||||
width: var(--chip-avatar-size);
|
||||
height: var(--chip-avatar-size);
|
||||
|
||||
@include margin-right(0.5rem);
|
||||
}
|
||||
|
||||
&.two-lines {
|
||||
--avatarSize: 2rem;
|
||||
--chip-avatar-size: 2rem;
|
||||
|
||||
font-size: 14px;
|
||||
line-height: 1rem;
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@
|
|||
|
||||
.actor-handle,
|
||||
.actor-counters {
|
||||
color: pvar(--main-fg-400);
|
||||
color: pvar(--fg-300);
|
||||
|
||||
@include font-size($actor-handle-font-size);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
|
||||
.actor-name {
|
||||
font-size: 14px;
|
||||
color: pvar(--main-fg-400);
|
||||
color: pvar(--fg-300);
|
||||
|
||||
@include margin-left(5px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
|
||||
&.badge-secondary {
|
||||
color: pvar(--bg);
|
||||
background-color: pvar(--main-fg-400);
|
||||
background-color: pvar(--fg-300);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -45,18 +45,18 @@ $input-focus-border-color: #ced4da;
|
|||
$input-focus-box-shadow: 0 0 0 0.25rem pvar(--primary-100);
|
||||
|
||||
$input-group-addon-color: pvar(--fg);
|
||||
$input-group-addon-bg: pvar(--secondary-350);
|
||||
$input-group-addon-bg: pvar(--bg-secondary-350);
|
||||
|
||||
$nav-pills-link-active-bg: pvar(--secondary-350);
|
||||
$nav-pills-link-active-bg: pvar(--bg-secondary-350);
|
||||
$nav-pills-link-active-color: pvar(--fg);
|
||||
$nav-link-transition: none;
|
||||
|
||||
$dropdown-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
|
||||
$dropdown-border-radius: 3px;
|
||||
$dropdown-link-active-color: pvar(--fg);
|
||||
$dropdown-link-active-bg: pvar(--secondary-300);
|
||||
$dropdown-link-active-bg: pvar(--bg-secondary-300);
|
||||
$dropdown-link-hover-color: pvar(--fg);
|
||||
$dropdown-link-hover-bg: pvar(--secondary-300);
|
||||
$dropdown-link-hover-bg: pvar(--bg-secondary-300);
|
||||
$dropdown-color: pvar(--fg);
|
||||
$dropdown-bg: pvar(--bg);
|
||||
|
||||
|
|
|
|||
|
|
@ -108,7 +108,7 @@
|
|||
@mixin static-thumbnail-overlay {
|
||||
display: inline-block;
|
||||
background-color: rgba(17, 17, 17, 0.8);
|
||||
color: pvar(--secondary-400);
|
||||
color: #E9DFDF;
|
||||
}
|
||||
|
||||
// Use margin by default, or padding if $margin is false
|
||||
|
|
@ -134,14 +134,14 @@
|
|||
@media screen and (min-width: $mobile-view) {
|
||||
.videos,
|
||||
.playlists {
|
||||
--miniatureMinWidth: #{$video-thumbnail-width - 25px};
|
||||
--miniatureMaxWidth: #{$video-thumbnail-width};
|
||||
--co-miniature-min-width: #{$video-thumbnail-width - 25px};
|
||||
--co-miniature-max-width: #{$video-thumbnail-width};
|
||||
|
||||
display: grid;
|
||||
column-gap: 30px;
|
||||
grid-template-columns: repeat(
|
||||
auto-fill,
|
||||
minmax(var(--miniatureMinWidth), 1fr)
|
||||
minmax(var(--co-miniature-min-width), 1fr)
|
||||
);
|
||||
|
||||
@if ($rows-limit != 0) {
|
||||
|
|
@ -158,8 +158,8 @@
|
|||
my-video-miniature,
|
||||
my-video-playlist-miniature {
|
||||
display: block;
|
||||
min-width: var(--miniatureMinWidth);
|
||||
max-width: var(--miniatureMaxWidth);
|
||||
min-width: var(--co-miniature-min-width);
|
||||
max-width: var(--co-miniature-max-width);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
}
|
||||
|
||||
@mixin muted {
|
||||
color: pvar(--main-fg-400) !important;
|
||||
color: pvar(--fg-300) !important;
|
||||
}
|
||||
|
||||
@mixin fade-text ($fade-after, $background-color) {
|
||||
|
|
@ -103,7 +103,7 @@
|
|||
}
|
||||
|
||||
&[readonly] {
|
||||
color: pvar(--main-fg-400);
|
||||
color: pvar(--fg-300);
|
||||
}
|
||||
|
||||
&:focus,
|
||||
|
|
@ -167,15 +167,15 @@
|
|||
& {
|
||||
color: pvar(--fg);
|
||||
background-color: transparent;
|
||||
border: 1px solid pvar(--secondary-500);
|
||||
border: 1px solid pvar(--bg-secondary-500);
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:focus-visible {
|
||||
color: pvar(--fg);
|
||||
background-color: pvar(--secondary-450);
|
||||
border-color: pvar(--secondary-500);
|
||||
background-color: pvar(--bg-secondary-450);
|
||||
border-color: pvar(--bg-secondary-500);
|
||||
}
|
||||
|
||||
// Override bootstrap
|
||||
|
|
@ -183,13 +183,13 @@
|
|||
&.btn:focus-visible,
|
||||
&.btn.show {
|
||||
color: pvar(--fg) !important;
|
||||
background-color: pvar(--secondary-450) !important;
|
||||
border-color: pvar(--secondary-500) !important;
|
||||
background-color: pvar(--bg-secondary-450) !important;
|
||||
border-color: pvar(--bg-secondary-500) !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: pvar(--fg);
|
||||
background-color: pvar(--secondary-450);
|
||||
background-color: pvar(--bg-secondary-450);
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
|
|
@ -198,18 +198,18 @@
|
|||
}
|
||||
|
||||
my-global-icon {
|
||||
color: pvar(--secondary-750);
|
||||
color: pvar(--secondary-icon-color);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin tertiary-button {
|
||||
color: pvar(--main-fg-300);
|
||||
color: pvar(--fg-200);
|
||||
background-color: transparent;
|
||||
border: 1px solid transparent;
|
||||
|
||||
&:hover {
|
||||
color: pvar(--main-fg-300);
|
||||
background-color: pvar(--secondary-400);
|
||||
color: pvar(--fg-200);
|
||||
background-color: pvar(--bg-secondary-400);
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
|
|
@ -217,20 +217,20 @@
|
|||
}
|
||||
|
||||
&:active {
|
||||
background-color: pvar(--secondary-450);
|
||||
background-color: pvar(--bg-secondary-450);
|
||||
}
|
||||
|
||||
&.show {
|
||||
border-color: pvar(--main-fg-300);
|
||||
border-color: pvar(--fg-200);
|
||||
}
|
||||
|
||||
// Override bootstrap
|
||||
&.btn:active {
|
||||
background-color: pvar(--secondary-200) !important;
|
||||
background-color: pvar(--bg-secondary-200) !important;
|
||||
}
|
||||
|
||||
&.btn.show {
|
||||
border-color: pvar(--main-fg-300) !important;
|
||||
border-color: pvar(--fg-200) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -406,7 +406,7 @@
|
|||
position: absolute;
|
||||
pointer-events: none;
|
||||
border: 5px solid rgba(0, 0, 0, 0);
|
||||
border-top-color: pvar(--secondary);
|
||||
border-top-color: pvar(--bg-secondary-500);
|
||||
margin-top: -2px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
|
@ -563,7 +563,7 @@
|
|||
}
|
||||
|
||||
@mixin actor-counters ($separator-margin: 10px) {
|
||||
color: pvar(--main-fg-400);
|
||||
color: pvar(--fg-300);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
|
|
@ -617,7 +617,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@mixin divider($color: pvar(--secondary-400), $background: pvar(--bg)) {
|
||||
@mixin divider($color: pvar(--bg-secondary-400), $background: pvar(--bg)) {
|
||||
width: 95%;
|
||||
border-top: .05rem solid $color;
|
||||
height: .05rem;
|
||||
|
|
@ -724,7 +724,7 @@
|
|||
border-top: #{math.div($height, 2)} solid transparent;
|
||||
border-bottom: #{math.div($height, 2)} solid transparent;
|
||||
|
||||
border-left: $width solid pvar(--secondary-300);
|
||||
border-left: $width solid pvar(--bg-secondary-300);
|
||||
}
|
||||
|
||||
@mixin on-small-main-col () {
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ $white: #fff;
|
|||
|
||||
$button-font-size: 1rem;
|
||||
|
||||
$header-height: 84px;
|
||||
$header-height: 94px;
|
||||
|
||||
$menu-background: #221A1A;
|
||||
$menu-color: #E9DFDF;
|
||||
|
|
@ -63,8 +63,6 @@ $player-portrait-bottom-space: 50px;
|
|||
$sub-menu-margin-bottom: 30px;
|
||||
$sub-menu-margin-bottom-small-view: 10px;
|
||||
|
||||
$activated-action-button-color: hsl(210, 11%, 15%);
|
||||
|
||||
$focus-box-shadow-form: 0 0 0 .2rem;
|
||||
$form-input-font-size: 16px;
|
||||
|
||||
|
|
@ -109,22 +107,27 @@ $variables: (
|
|||
--support-btn-fg: var(--support-btn-fg),
|
||||
--support-btn-heart-bg: var(--support-btn-heart-bg),
|
||||
|
||||
--main-fg: var(--main-fg),
|
||||
--main-fg-800: var(--main-fg-800),
|
||||
--main-fg-750: var(--main-fg-750),
|
||||
--main-fg-700: var(--main-fg-700),
|
||||
--main-fg-650: var(--main-fg-650),
|
||||
--main-fg-600: var(--main-fg-600),
|
||||
--main-fg-550: var(--main-fg-550),
|
||||
--main-fg-500: var(--main-fg-500),
|
||||
--main-fg-450: var(--main-fg-450),
|
||||
--main-fg-400: var(--main-fg-400),
|
||||
--main-fg-350: var(--main-fg-350),
|
||||
--main-fg-300: var(--main-fg-300),
|
||||
--main-fg-250: var(--main-fg-250),
|
||||
--main-fg-200: var(--main-fg-200),
|
||||
--main-fg-150: var(--main-fg-150),
|
||||
--main-fg-100: var(--main-fg-100),
|
||||
--secondary-icon-color: var(--secondary-icon-color),
|
||||
|
||||
--fg-500: var(--fg-500),
|
||||
--fg-450: var(--fg-450),
|
||||
--fg-400: var(--fg-400),
|
||||
--fg-350: var(--fg-350),
|
||||
--fg-300: var(--fg-300),
|
||||
--fg-250: var(--fg-250),
|
||||
--fg-200: var(--fg-200),
|
||||
--fg-150: var(--fg-150),
|
||||
--fg-100: var(--fg-100),
|
||||
--fg-50: var(--fg-50),
|
||||
|
||||
--bg-secondary-600: var(--bg-secondary-600),
|
||||
--bg-secondary-500: var(--bg-secondary-500),
|
||||
--bg-secondary-450: var(--bg-secondary-450),
|
||||
--bg-secondary-400: var(--bg-secondary-400),
|
||||
--bg-secondary-350: var(--bg-secondary-350),
|
||||
--bg-secondary-300: var(--bg-secondary-300),
|
||||
--bg-secondary-250: var(--bg-secondary-250),
|
||||
--bg-secondary-200: var(--bg-secondary-200),
|
||||
|
||||
--on-primary: var(--on-primary),
|
||||
|
||||
|
|
@ -146,22 +149,9 @@ $variables: (
|
|||
--primary-100: var(--primary-100),
|
||||
--primary-50: var(--primary-50),
|
||||
|
||||
--secondary: var(--secondary),
|
||||
--secondary-800: var(--secondary-800),
|
||||
--secondary-750: var(--secondary-750),
|
||||
--secondary-700: var(--secondary-700),
|
||||
--secondary-650: var(--secondary-650),
|
||||
--secondary-600: var(--secondary-600),
|
||||
--secondary-550: var(--secondary-550),
|
||||
--secondary-500: var(--secondary-500),
|
||||
--secondary-450: var(--secondary-450),
|
||||
--secondary-400: var(--secondary-400),
|
||||
--secondary-350: var(--secondary-350),
|
||||
--secondary-300: var(--secondary-300),
|
||||
--secondary-250: var(--secondary-250),
|
||||
--secondary-200: var(--secondary-200),
|
||||
--secondary-150: var(--secondary-150),
|
||||
--secondary-100: var(--secondary-100)
|
||||
// Optional variables
|
||||
--menu-fg: var(--menu-fg),
|
||||
--menu-bg: var(--menu-bg)
|
||||
);
|
||||
|
||||
// SASS type check our CSS variables
|
||||
|
|
@ -173,6 +163,14 @@ $variables: (
|
|||
}
|
||||
}
|
||||
|
||||
@function pvar-fallback($variable, $fallback) {
|
||||
@if map.has-key($variables, $variable) and map.has-key($variables, $fallback) {
|
||||
@return var($variable, map.get($variables, $fallback));
|
||||
} @else {
|
||||
@error 'ERROR: Variable #{$variable} does not exist';
|
||||
}
|
||||
}
|
||||
|
||||
/*** z-index groups ***/
|
||||
|
||||
$zindex: (
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
.video-js.vjs-peertube-skin {
|
||||
|
||||
.peertube-dock {
|
||||
--avatarSize: 48px;
|
||||
--dock-avatar-size: 48px;
|
||||
|
||||
transition: opacity 0.1s;
|
||||
|
||||
|
|
@ -28,10 +28,10 @@
|
|||
.peertube-dock-avatar {
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
min-width: var(--avatarSize);
|
||||
min-height: var(--avatarSize);
|
||||
max-height: var(--avatarSize);
|
||||
max-height: var(--avatarSize);
|
||||
min-width: var(--dock-avatar-size);
|
||||
min-height: var(--dock-avatar-size);
|
||||
max-height: var(--dock-avatar-size);
|
||||
max-height: var(--dock-avatar-size);
|
||||
}
|
||||
|
||||
.peertube-dock-title-description {
|
||||
|
|
@ -70,7 +70,7 @@
|
|||
|
||||
.video-js.vjs-peertube-skin.vjs-size-750 {
|
||||
.peertube-dock-avatar {
|
||||
--avatarSize: 40px;
|
||||
--dock-avatar-size: 40px;
|
||||
}
|
||||
|
||||
.peertube-dock {
|
||||
|
|
@ -85,7 +85,7 @@
|
|||
|
||||
.video-js.vjs-peertube-skin.vjs-size-570 {
|
||||
.peertube-dock-avatar {
|
||||
--avatarSize: 35px;
|
||||
--dock-avatar-size: 35px;
|
||||
}
|
||||
|
||||
.peertube-dock {
|
||||
|
|
@ -95,7 +95,7 @@
|
|||
|
||||
.video-js.vjs-peertube-skin.vjs-size-350 {
|
||||
.peertube-dock-avatar {
|
||||
--avatarSize: 30px;
|
||||
--dock-avatar-size: 30px;
|
||||
}
|
||||
|
||||
.peertube-dock {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ $height: 40px;
|
|||
right: 0;
|
||||
height: $height;
|
||||
color: pvar(--on-primary);
|
||||
background-color: var(--primary-50);
|
||||
background-color: pvar(--primary-50);
|
||||
text-align: center;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@ body {
|
|||
|
||||
&:focus-visible,
|
||||
&:hover {
|
||||
background-color: var(--primary, #696969);
|
||||
background-color: pvar(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ body .p-paginator .p-paginator-first,
|
|||
body .p-paginator .p-paginator-prev,
|
||||
body .p-paginator .p-paginator-next,
|
||||
body .p-paginator .p-paginator-last {
|
||||
color: pvar(--main-fg-400);
|
||||
color: pvar(--fg-300);
|
||||
height: 2.286em;
|
||||
min-width: 2.286em;
|
||||
border: 0 none;
|
||||
|
|
@ -89,7 +89,7 @@ body .p-paginator .p-paginator-current {
|
|||
line-height: 2.286em;
|
||||
}
|
||||
body .p-paginator .p-dropdown .p-dropdown-trigger, body .p-paginator .p-dropdown .p-dropdown-label {
|
||||
color: pvar(--main-fg-400);
|
||||
color: pvar(--fg-300);
|
||||
}
|
||||
body .p-paginator .p-dropdown:hover .p-dropdown-trigger, body .p-paginator .p-dropdown:hover .p-dropdown-label {
|
||||
color: #333333;
|
||||
|
|
@ -116,7 +116,7 @@ body .p-paginator .p-paginator-pages {
|
|||
padding: 0;
|
||||
}
|
||||
body .p-paginator .p-paginator-pages .p-paginator-page {
|
||||
color: pvar(--main-fg-400);
|
||||
color: pvar(--fg-300);
|
||||
height: 2.286em;
|
||||
min-width: 2.286em;
|
||||
border: 0 none;
|
||||
|
|
@ -180,10 +180,10 @@ body .p-dropdown .p-dropdown-trigger {
|
|||
width: 2rem;
|
||||
border-top-right-radius: 6px;
|
||||
border-bottom-right-radius: 6px;
|
||||
color: pvar(--main-fg-400);
|
||||
color: pvar(--fg-300);
|
||||
}
|
||||
body .p-dropdown .p-dropdown-clear-icon {
|
||||
color: pvar(--main-fg-400);
|
||||
color: pvar(--fg-300);
|
||||
right: 2rem;
|
||||
}
|
||||
body .p-dropdown.p-dropdown-clearable .p-dropdown-label {
|
||||
|
|
@ -484,7 +484,7 @@ body p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
|
|||
.p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
box-shadow: 0 0 0 0.25rem var(--primary-100);
|
||||
box-shadow: 0 0 0 0.25rem pvar(--primary-100);
|
||||
}
|
||||
.p-chips .p-chips-multiple-container {
|
||||
padding: 3px 15px;
|
||||
|
|
@ -521,7 +521,7 @@ p-chips.p-chips-clearable .p-inputtext {
|
|||
padding-right: 1.429rem;
|
||||
}
|
||||
p-chips.p-chips-clearable .p-chips-clear-icon {
|
||||
color: pvar(--main-fg-400);
|
||||
color: pvar(--fg-300);
|
||||
right: 0.429rem;
|
||||
}
|
||||
|
||||
|
|
@ -540,7 +540,7 @@ p-chips.p-chips-clearable .p-chips-clear-icon {
|
|||
.p-multiselect:not(.p-disabled).p-focus {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
box-shadow: 0 0 0 0.25rem var(--primary-100);
|
||||
box-shadow: 0 0 0 0.25rem pvar(--primary-100);
|
||||
}
|
||||
.p-multiselect .p-multiselect-label {
|
||||
padding: 4px 15px;
|
||||
|
|
@ -584,7 +584,7 @@ p-chips.p-chips-clearable .p-chips-clear-icon {
|
|||
padding-right: 1.429rem;
|
||||
}
|
||||
.p-multiselect-clearable .p-multiselect-clear-icon {
|
||||
color: pvar(--main-fg-400);
|
||||
color: pvar(--fg-300);
|
||||
right: 2.357rem;
|
||||
}
|
||||
|
||||
|
|
@ -609,7 +609,7 @@ p-chips.p-chips-clearable .p-chips-clear-icon {
|
|||
}
|
||||
.p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon {
|
||||
right: 0.429rem;
|
||||
color: pvar(--main-fg-400);
|
||||
color: pvar(--fg-300);
|
||||
}
|
||||
.p-multiselect-panel .p-multiselect-header .p-checkbox {
|
||||
margin-right: 0.5rem;
|
||||
|
|
@ -618,7 +618,7 @@ p-chips.p-chips-clearable .p-chips-clear-icon {
|
|||
margin-left: 0.5rem;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
color: pvar(--main-fg-400);
|
||||
color: pvar(--fg-300);
|
||||
border: 0 none;
|
||||
background: transparent;
|
||||
border-radius: 50%;
|
||||
|
|
@ -713,7 +713,7 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
|
|||
.p-inputtext:enabled:focus {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
box-shadow: 0 0 0 0.25rem var(--primary-100);
|
||||
box-shadow: 0 0 0 0.25rem pvar(--primary-100);
|
||||
}
|
||||
.p-inputtext.ng-dirty.ng-invalid {
|
||||
border-color: pvar(--red);
|
||||
|
|
@ -806,7 +806,7 @@ p-table {
|
|||
height: 46px;
|
||||
|
||||
&.p-highlight {
|
||||
background-color: pvar(--secondary-400) !important;
|
||||
background-color: pvar(--bg-secondary-400) !important;
|
||||
|
||||
td, td > a {
|
||||
color: pvar(--fg) !important;
|
||||
|
|
@ -821,7 +821,7 @@ p-table {
|
|||
.p-datatable-tbody {
|
||||
tr {
|
||||
&:hover {
|
||||
background-color: pvar(--secondary-400) !important;
|
||||
background-color: pvar(--bg-secondary-400) !important;
|
||||
}
|
||||
|
||||
td {
|
||||
|
|
@ -859,13 +859,13 @@ p-table {
|
|||
|
||||
border: none !important;
|
||||
border-bottom: 1px solid !important;
|
||||
border-color: pvar(--secondary-400) !important;
|
||||
border-color: pvar(--bg-secondary-400) !important;
|
||||
text-align: start !important;
|
||||
font-weight: $font-semibold !important;
|
||||
color: pvar(--fg) !important;
|
||||
|
||||
&.p-sortable-column:hover {
|
||||
background-color: pvar(--secondary-400) !important;
|
||||
background-color: pvar(--bg-secondary-400) !important;
|
||||
}
|
||||
|
||||
&.p-sortable-column:focus-visible {
|
||||
|
|
@ -873,7 +873,7 @@ p-table {
|
|||
}
|
||||
|
||||
&.p-highlight {
|
||||
background-color: pvar(--secondary-400) !important;
|
||||
background-color: pvar(--bg-secondary-400) !important;
|
||||
|
||||
.pi-sort-amount-up-alt,
|
||||
.pi-sort-amount-down {
|
||||
|
|
@ -915,7 +915,7 @@ p-table {
|
|||
position: relative;
|
||||
border: none;
|
||||
border-top: 1px solid !important;
|
||||
border-color: pvar(--secondary-400) !important;
|
||||
border-color: pvar(--bg-secondary-400) !important;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
@ -933,7 +933,7 @@ p-table {
|
|||
}
|
||||
|
||||
.p-label {
|
||||
color: pvar(--main-fg-400);
|
||||
color: pvar(--fg-300);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -944,7 +944,7 @@ p-table {
|
|||
}
|
||||
|
||||
.p-paginator-current {
|
||||
color: pvar(--main-fg-400);
|
||||
color: pvar(--fg-300);
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
|
|
@ -1088,7 +1088,7 @@ p-toast {
|
|||
min-width: 200px;
|
||||
|
||||
.p-toast-icon-close {
|
||||
color: pvar(--main-fg-400);
|
||||
color: pvar(--fg-300);
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue