Fix grey color theme
This commit is contained in:
parent
5f57df5462
commit
c123027fd9
|
@ -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));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
|
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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};
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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),
|
||||||
|
|
Loading…
Reference in New Issue