Fix grey color theme

This commit is contained in:
Chocobozzz 2020-05-22 11:21:55 +02:00
parent 5f57df5462
commit c123027fd9
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
15 changed files with 32 additions and 28 deletions

View File

@ -23,12 +23,12 @@
.plugin-icon { .plugin-icon {
margin-left: 10px; margin-left: 10px;
my-global-icon { my-global-icon {
@include apply-svg-color($grey-foreground-color); @include apply-svg-color(var(--greyForegroundColor));
&[iconName="npm"] { &[iconName="npm"] {
@include fill-svg-color($grey-foreground-color); @include fill-svg-color(var(--greyForegroundColor));
} }
} }
} }

View File

@ -44,7 +44,7 @@
.from-date { .from-date {
font-size: 0.85em; font-size: 0.85em;
color: $grey-foreground-color; color: var(--greyForegroundColor);
padding-left: 5px; padding-left: 5px;
min-width: 70px; min-width: 70px;
text-align: right; text-align: right;

View File

@ -68,7 +68,7 @@
.timestamp-info { .timestamp-info {
font-size: 0.9em; font-size: 0.9em;
color: $grey-foreground-color; color: var(--greyForegroundColor);
margin-left: 5px; margin-left: 5px;
} }
} }

View File

@ -58,11 +58,11 @@ my-video-thumbnail,
.position { .position {
font-weight: $font-semibold; font-weight: $font-semibold;
margin-right: 10px; margin-right: 10px;
color: $grey-foreground-color; color: var(--greyForegroundColor);
min-width: 25px; min-width: 25px;
my-global-icon { my-global-icon {
@include apply-svg-color($grey-foreground-color); @include apply-svg-color(var(--greyForegroundColor));
width: 17px; width: 17px;
position: relative; position: relative;
@ -81,7 +81,7 @@ my-video-thumbnail,
} }
.video-info-account, .video-info-timestamp { .video-info-account, .video-info-timestamp {
color: $grey-foreground-color; color: var(--greyForegroundColor);
} }
} }
} }
@ -109,7 +109,7 @@ my-video-thumbnail,
} }
.icon-more { .icon-more {
@include apply-svg-color($grey-foreground-color); @include apply-svg-color(var(--greyForegroundColor));
display: flex; display: flex;

View File

@ -53,7 +53,7 @@
@include disable-default-a-behaviour; @include disable-default-a-behaviour;
display: block; display: block;
color: $grey-foreground-color; color: var(--greyForegroundColor);
} }
.privacy-date { .privacy-date {
@ -72,7 +72,7 @@
.video-info-description { .video-info-description {
margin-top: 10px; margin-top: 10px;
color: $grey-foreground-color; color: var(--greyForegroundColor);
} }
} }
} }

View File

@ -41,7 +41,7 @@
min-width: 142px; min-width: 142px;
padding-right: 5px; padding-right: 5px;
display: inline-block; display: inline-block;
color: $grey-foreground-color; color: var(--greyForegroundColor);
font-weight: $font-bold; font-weight: $font-bold;
} }

View File

@ -36,7 +36,7 @@ $more-margin-right: 15px;
display: block; display: block;
font-size: 13px; font-size: 13px;
color: $grey-foreground-color; color: var(--greyForegroundColor);
&:hover { &:hover {
color: $grey-foreground-hover-color; color: $grey-foreground-hover-color;

View File

@ -122,7 +122,7 @@ my-peertube-checkbox {
display: inline-block; display: inline-block;
margin-right: 25px; margin-right: 25px;
color: $grey-foreground-color; color: var(--greyForegroundColor);
font-size: 15px; font-size: 15px;
} }

View File

@ -80,7 +80,7 @@
.comment-date { .comment-date {
font-size: 90%; font-size: 90%;
color: $grey-foreground-color; color: var(--greyForegroundColor);
margin-left: 5px; margin-left: 5px;
text-decoration: none; text-decoration: none;
} }
@ -108,7 +108,7 @@
} }
&.comment-html-deleted { &.comment-html-deleted {
color: $grey-foreground-color; color: var(--greyForegroundColor);
margin-bottom: 1rem; margin-bottom: 1rem;
} }
} }
@ -120,7 +120,7 @@
::ng-deep .dropdown-toggle, ::ng-deep .dropdown-toggle,
.comment-action-reply, .comment-action-reply,
.comment-action-delete { .comment-action-delete {
color: $grey-foreground-color; color: var(--greyForegroundColor);
cursor: pointer; cursor: pointer;
margin-right: 10px; margin-right: 10px;

View File

@ -22,7 +22,7 @@
} }
.playlist-by-index { .playlist-by-index {
color: $grey-foreground-color; color: var(--greyForegroundColor);
display: flex; display: flex;
.playlist-by { .playlist-by {

View File

@ -356,7 +356,7 @@ $video-info-margin-left: 44px;
.video-info-description-more { .video-info-description-more {
cursor: pointer; cursor: pointer;
font-weight: $font-semibold; font-weight: $font-semibold;
color: $grey-foreground-color; color: var(--greyForegroundColor);
font-size: 14px; font-size: 14px;
.glyphicon { .glyphicon {
@ -379,7 +379,7 @@ $video-info-margin-left: 44px;
min-width: 142px; min-width: 142px;
padding-right: 5px; padding-right: 5px;
display: inline-block; display: inline-block;
color: $grey-foreground-color; color: var(--greyForegroundColor);
font-weight: $font-bold; font-weight: $font-bold;
} }

View File

@ -31,6 +31,8 @@ body {
--mainForegroundColor: #{$fg-color}; --mainForegroundColor: #{$fg-color};
--secondaryColor: #{$secondary-color}; --secondaryColor: #{$secondary-color};
--greyForegroundColor: #{$grey-foreground-color};
--menuBackgroundColor: #{$menu-background}; --menuBackgroundColor: #{$menu-background};
--menuForegroundColor: #{$menu-color}; --menuForegroundColor: #{$menu-color};
--submenuColor: #{$sub-menu-color}; --submenuColor: #{$sub-menu-color};

View File

@ -187,7 +187,7 @@ $play-overlay-width: 18px;
} }
.followers { .followers {
color: $grey-foreground-color; color: var(--greyForegroundColor);
font-weight: normal; font-weight: normal;
font-size: 14px; font-size: 14px;
margin-left: 10px; margin-left: 10px;
@ -203,7 +203,7 @@ $play-overlay-width: 18px;
display: inline-block; display: inline-block;
font-size: 16px; font-size: 16px;
text-transform: uppercase; text-transform: uppercase;
color: $grey-foreground-color; color: var(--greyForegroundColor);
margin-bottom: 10px; margin-bottom: 10px;
font-weight: $font-semibold; font-weight: $font-semibold;
text-decoration: none; text-decoration: none;

View File

@ -156,7 +156,7 @@
@mixin tertiary-button { @mixin tertiary-button {
@include button-focus($grey-button-outline-color); @include button-focus($grey-button-outline-color);
color: $grey-foreground-color; color: var(--greyForegroundColor);
background-color: transparent; background-color: transparent;
&[disabled], &.disabled { &[disabled], &.disabled {
@ -173,11 +173,11 @@
&, &:active, &:focus { &, &:active, &:focus {
background-color: $grey-background-color; background-color: $grey-background-color;
color: $grey-foreground-color; color: var(--greyForegroundColor);
} }
&:hover, &:active, &:focus, &[disabled], &.disabled { &:hover, &:active, &:focus, &[disabled], &.disabled {
color: $grey-foreground-color; color: var(--greyForegroundColor);
background-color: $grey-background-hover-color; background-color: $grey-background-hover-color;
} }
@ -186,7 +186,7 @@
} }
my-global-icon { my-global-icon {
@include apply-svg-color($grey-foreground-color) @include apply-svg-color(var(--greyForegroundColor))
} }
} }
@ -769,7 +769,7 @@
vertical-align: middle !important; vertical-align: middle !important;
path { path {
fill: $grey-foreground-color !important; fill: var(--greyForegroundColor) !important;
} }
} }

View File

@ -91,6 +91,8 @@ $variables: (
--mainForegroundColor: var(--mainForegroundColor), --mainForegroundColor: var(--mainForegroundColor),
--secondaryColor: var(--secondaryColor), --secondaryColor: var(--secondaryColor),
--greyForegroundColor: var(--greyForegroundColor),
--menuBackgroundColor: var(--menuBackgroundColor), --menuBackgroundColor: var(--menuBackgroundColor),
--menuForegroundColor: var(--menuForegroundColor), --menuForegroundColor: var(--menuForegroundColor),
--submenuColor: var(--submenuColor), --submenuColor: var(--submenuColor),