forks
/
peertube
1
0
Fork 0
Code Releases Activity

add theming via css custom properties 

and a bonus dark color theme toggle
This commit is contained in:
Rigel Kent 2018-09-04 01:28:04 +02:00 committed by Rigel Kent
parent 3b766e181c
commit 9a0fc8409c
25 changed files with 140 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
View File

@ -10,7 +10,7 @@ a.video-channel {
display: inline-block;
text-align: center;
color: #000;
color: var(--mainForegroundColor);
margin: 10px 30px;
img {

2
client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
View File

@ -28,7 +28,7 @@ input[type=submit] {
.inner-form-title {
text-transform: uppercase;
color: $orange-color;
color: var(--mainColor);
font-weight: $font-bold;
font-size: 13px;
margin-top: 30px;

2
client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.scss
View File

@ -19,7 +19,7 @@
width: fit-content;
display: flex;
align-items: baseline;
color: #000;
color: var(--mainForegroundColor);
.video-channel-display-name {
font-weight: $font-semibold;

2
client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss
View File

@ -29,7 +29,7 @@
width: fit-content;
display: flex;
align-items: baseline;
color: #000;
color: var(--mainForegroundColor);
.video-channel-display-name {
font-weight: $font-semibold;

2
client/src/app/+my-account/my-account-videos/my-account-videos.component.scss
View File

@ -59,7 +59,7 @@
.video-info-name {
@include disable-default-a-behaviour;
color: #000;
color: var(--mainForegroundColor);
display: block;
width: fit-content;
font-size: 16px;

2
client/src/app/app.component.html
View File

@ -14,7 +14,7 @@
</a>
</div>
<div class="header-right">
<div class="header-right" [ngClass]="{ 'border-bottom': isMenuDisplayed === false }">
<my-header></my-header>
</div>
</div>

7
client/src/app/app.component.scss
View File

@ -7,6 +7,7 @@
.sub-header-container {
margin-top: $header-height;
background-color: var(--mainBackgroundColor);
}
.header {
@ -14,7 +15,7 @@
position: fixed;
top: 0;
width: 100%;
background-color: $bg-color;
background-color: var(--mainBackgroundColor);
z-index: 1000;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
display: flex;
@ -31,7 +32,8 @@
@include icon(24px);
&.icon-menu {
background-image: url('../assets/images/header/menu.svg');
background-color: var(--mainForegroundColor);
mask-image: url('../assets/images/header/menu.svg');
margin: 0 18px 0 20px;
}
}
@ -83,7 +85,6 @@
}
footer {
border-top: 1px solid $footer-border-color;
padding: 10px 0;
font-size: 11px;
margin-top: $footer-margin;

5
client/src/app/header/header.component.scss
View File

@ -8,7 +8,7 @@
padding-right: 40px; // For the search icon
&::placeholder {
color: #000;
color: var(--inputPlaceholderColor);
}
&:focus::placeholder {
@ -28,7 +28,8 @@
@include icon(25px);
height: 21px;
background-image: url('../../assets/images/header/search.svg');
background-color: var(--mainForegroundColor);
mask: url('../../assets/images/header/search.svg') no-repeat 50% 50%;
// yolo
position: absolute;

2
client/src/app/login/login.component.scss
View File

@ -18,7 +18,7 @@ input[type=submit] {
}
.create-an-account, .forgot-password-button {
color: #000;
color: var(--mainForegroundColor);
cursor: pointer;
&:hover {

3
client/src/app/menu/menu.component.html
View File

@ -87,6 +87,9 @@
<span class="language">
<span (click)="openLanguageChooser()" i18n-title title="Change the language" class="icon icon-language"></span>
</span>
<span class="color-palette">
<span (click)="toggleDarkTheme()" i18n-title title="Toggle dark interface" class="icon icon-moonsun"></span>
</span>
</div>
</menu>
</div>

16
client/src/app/menu/menu.component.scss
View File

@ -9,7 +9,7 @@
}
menu {
background-color: $black-background;
background-color: $menu-background;
margin: 0;
padding: 0;
height: 100%;
@ -190,10 +190,10 @@ menu {
}
.footer {
margin-bottom: 15px;
padding-bottom: 15px;
padding-left: $menu-left-padding;
.language {
.language, .color-palette {
display: inline-block;
color: $menu-bottom-color;
cursor: pointer;
@ -213,6 +213,16 @@ menu {
background-image: url('../../assets/images/menu/language.png');
}
&.icon-moonsun {
margin-left: 10px;
position: relative;
top: -1px;
width: 24px;
height: 24px;
background-image: url('../../assets/images/menu/moonsun.svg');
}
&:hover {
opacity: 1;
}

24
client/src/app/menu/menu.component.ts
View File

@ -22,6 +22,8 @@ export class MenuComponent implements OnInit {
[UserRight.MANAGE_VIDEO_ABUSES]: '/admin/video-abuses',
[UserRight.MANAGE_VIDEO_BLACKLIST]: '/admin/video-blacklist'
}
private theme = document.querySelector('body')
private previousTheme = { }
constructor (
private authService: AuthService,
@ -51,6 +53,13 @@ export class MenuComponent implements OnInit {
}
}
)
// initialise the alternative theme with dark theme colors
this.previousTheme['mainBackgroundColor'] = '#111111'
this.previousTheme['mainForegroundColor'] = '#fff'
this.previousTheme['submenuColor'] = 'rgb(32,32,32)'
this.previousTheme['inputColor'] = 'gray'
this.previousTheme['inputPlaceholderColor'] = '#fff'
}
isRegistrationAllowed () {
@ -96,6 +105,21 @@ export class MenuComponent implements OnInit {
this.languageChooserModal.show()
}
toggleDarkTheme () {
// switch properties
this.switchProperty('mainBackgroundColor')
this.switchProperty('mainForegroundColor')
this.switchProperty('submenuColor')
this.switchProperty('inputColor')
this.switchProperty('inputPlaceholderColor')
}
private switchProperty (property, newValue?) {
const propertyOldvalue = window.getComputedStyle(this.theme).getPropertyValue('--' + property)
this.theme.style.setProperty('--' + property, (newValue) ? newValue : this.previousTheme[property])
this.previousTheme[property] = propertyOldvalue
}
private computeIsUserHasAdminAccess () {
const right = this.getFirstAdminRightAvailable()

4
client/src/app/search/search.component.scss
View File

@ -67,7 +67,7 @@
.video-info-name {
@include disable-default-a-behaviour;
color: #000;
color: var(--mainForegroundColor);
display: block;
width: fit-content;
font-size: 18px;
@ -113,7 +113,7 @@
display: flex;
align-items: baseline;
color: #000;
color: var(--mainForegroundColor);
width: fit-content;
.video-channel-display-name {

1
client/src/app/shared/misc/help.component.scss
View File

@ -7,7 +7,6 @@
position: relative;
top: -2px;
background-image: url('../../../assets/images/global/help.svg');
background-color: #fff;
border: none;
margin: 5px;
}

3
client/src/app/shared/video/video-feed.component.scss
View File

@ -12,7 +12,8 @@
&.icon-syndication {
position: relative;
top: -2px;
background-image: url('../../../assets/images/global/syndication.svg');
background-color: var(--mainForegroundColor);
mask-image: url('../../../assets/images/global/syndication.svg');
}
}
}

2
client/src/app/shared/video/video-miniature.component.scss
View File

@ -22,7 +22,7 @@
transition: color 0.2s;
font-size: 16px;
font-weight: $font-semibold;
color: $fg-color;
color: var(--mainForegroundColor);
margin-top: 5px;
margin-bottom: 5px;

9
client/src/app/videos/+video-edit/video-add.component.scss
View File

@ -5,8 +5,6 @@ $border-width: 3px;
$border-type: solid;
$border-color: #EAEAEA;
$background-color: #F7F7F7;
/deep/ .root-tabset.video-add-tabset {
&.hide-nav .nav {
display: none !important;
@ -24,7 +22,6 @@ $background-color: #F7F7F7;
a.nav-link {
@include disable-default-a-behaviour;
color: #000;
height: 40px !important;
padding: 0 30px !important;
font-size: 15px;
@ -32,10 +29,10 @@ $background-color: #F7F7F7;
&.active {
border: $border-width $border-type $border-color;
border-bottom: none;
background-color: $background-color !important;
background-color: var(--mainBackgroundColor) !important;
span {
border-bottom: 2px solid #F1680D;
border-bottom: 2px solid var(--mainColor);
font-weight: $font-bold;
}
}
@ -46,7 +43,7 @@ $background-color: #F7F7F7;
border: $border-width $border-type $border-color;
border-top: none;
background-color: $background-color;
background-color: var(--mainBackgroundColor);
border-radius: 3px;
width: 100%;
min-height: 440px;

2
client/src/app/videos/+video-watch/comment/video-comment.component.scss
View File

@ -35,7 +35,7 @@
.comment-account {
@include disable-default-a-behaviour;
color: #000;
color: var(--mainForegroundColor);
font-weight: $font-bold;
}

10
client/src/app/videos/+video-watch/video-watch.component.scss
View File

@ -111,7 +111,7 @@
a {
@include disable-default-a-behaviour;
color: #000;
color: var(--mainForegroundColor);
&:hover {
opacity: 0.8;
@ -137,7 +137,7 @@
display: inline;
align-items: center;
font-size: 13px;
color: #000;
color: var(--mainForegroundColor);
span:hover {
opacity: 0.8;
@ -342,7 +342,7 @@
a.video-attribute-value {
@include disable-default-a-behaviour;
color: #000;
color: var(--mainForegroundColor);
&:hover {
opacity: 0.9;
@ -413,7 +413,7 @@
a {
@include disable-default-a-behaviour;
color: $orange-color;
color: var(--mainColor);
transition: color 0.3s;
&:hover {
@ -422,7 +422,7 @@
}
.privacy-concerns-okay {
background-color: $orange-color;
background-color: var(--mainColor);
padding: 5px 8px 5px 7px;
margin-left: auto;
border-radius: 3px;

2
client/src/app/videos/video-list/video-overview.component.scss
View File

@ -21,7 +21,7 @@
a {
@include disable-default-a-behaviour;
color: #000;
color: var(--mainForegroundColor);
}
}

1
client/src/assets/images/menu/moonsun.svg Normal file
View File

@ -0,0 +1 @@
<svg height="300px" width="300px" fill="#fff" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 100 100" x="0px" y="0px"><title>Artboard 633</title><circle cx="50" cy="6" r="4"/><circle cx="50" cy="94" r="4"/><circle cx="6" cy="50" r="4"/><circle cx="94" cy="50" r="4"/><circle cx="18" cy="18" r="4"/><circle cx="82" cy="82" r="4"/><circle cx="18" cy="82" r="4"/><circle cx="82" cy="18" r="4"/><path d="M82,50A32,32,0,1,0,50,82,32,32,0,0,0,82,50ZM50,26a23.67,23.67,0,0,1,5.87.76c4.36,9.93.57,19-4.66,24.29s-14.4,9.24-24.45,4.83A23.75,23.75,0,0,1,26,50,24,24,0,0,1,50,26Zm0,48a23.94,23.94,0,0,1-18.26-8.47,29.38,29.38,0,0,0,3.74.26,30.07,30.07,0,0,0,21.41-9.11,29.82,29.82,0,0,0,8.61-25A24,24,0,0,1,50,74Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 731 B

21
client/src/sass/application.scss
View File

@ -21,7 +21,7 @@ $assets-path: '../assets/';
body {
font-family: $main-fonts;
font-weight: $font-regular;
color: #000;
color: var(--mainForegroundColor);
font-size: 14px;
}
@ -83,7 +83,7 @@ label {
}
.sub-menu {
background-color: #F7F7F7;
background-color: var(--submenuColor);
width: 100%;
height: 81px;
margin-bottom: 30px;
@ -110,7 +110,7 @@ label {
}
.title-page {
color: #000;
color: var(--mainForegroundColor);
font-size: 16px;
display: inline-block;
margin-right: 55px;
@ -118,14 +118,14 @@ label {
@include disable-default-a-behaviour;
&.active, &.title-page-single {
border-bottom: 2px solid $orange-color;
border-bottom: 2px solid var(--mainColor);
font-weight: $font-bold;
margin-top: 30px;
margin-bottom: 25px;
}
&:hover, &:active, &:focus {
color: #000;
color: var(--mainForegroundColor);
}
@media screen and (max-width: 500px) {
@ -146,13 +146,14 @@ label {
@include disable-default-a-behaviour;
font-size: 16px;
color: #000;
color: var(--mainForegroundColor);
padding: 5px 15px;
border-radius: 0.25rem;
&.active {
font-weight: $font-semibold;
background-color: #f0f0f0;
color: #000;
}
}
}
@ -188,6 +189,10 @@ label {
}
.modal {
.modal-content {
background-color: var(--mainBackgroundColor);
}
.modal-header {
border-bottom: none;
margin-bottom: 5px;
@ -249,7 +254,7 @@ label {
a {
@include disable-default-a-behaviour;
color: #000;
color: var(--mainForegroundColor);
}
}
@ -259,7 +264,7 @@ ngb-tabset.bootstrap {
&, & a {
@include disable-default-a-behaviour;
color: #000 !important;
color: var(--mainForegroundColor) !important;
}
}
}

27
client/src/sass/include/_mixins.scss
View File

@ -58,11 +58,15 @@
display: inline-block;
height: $button-height;
width: $width;
background: #fff;
background: var(--inputColor);
border: 1px solid #C6C6C6;
border-radius: 3px;
padding-left: 15px;
padding-right: 15px;
&::placeholder {
color: var(--inputPlaceholderColor);
}
}
@mixin peertube-input-group($width) {
@ -73,6 +77,7 @@
.input-group-text{
font-size: 14px;
color: gray;
}
}
@ -87,12 +92,12 @@
@mixin orange-button {
&, &:active, &:focus {
color: #fff;
background-color: $orange-color;
background-color: var(--mainColor);
}
&:hover {
color: #fff;
background-color: $orange-hoover-color;
background-color: var(--mainHoverColor);
}
&[disabled], &.disabled {
@ -181,7 +186,7 @@
width: $width;
border-radius: 3px;
overflow: hidden;
background: #fff;
background: var(--inputColor);
position: relative;
font-size: 15px;
@ -278,7 +283,7 @@
position: relative;
width: 18px;
height: 18px;
border: $border-width solid #000;
border: $border-width solid var(--mainForegroundColor);
border-radius: 3px;
vertical-align: middle;
cursor: pointer;
@ -292,14 +297,14 @@
height: 12px;
opacity: 0;
transform: rotate(45deg) scale(0);
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
border-right: 2px solid var(--mainForegroundColor);
border-bottom: 2px solid var(--mainForegroundColor);
}
}
&:checked + span {
border-color: transparent;
background: $orange-color;
background: var(--mainColor);
animation: jelly 0.6s ease;
&:after {
@ -357,7 +362,7 @@
@mixin in-content-small-title {
text-transform: uppercase;
color: $orange-color;
color: var(--mainColor);
font-weight: $font-bold;
font-size: 13px;
}
@ -365,10 +370,10 @@
@mixin actor-owner {
@include disable-default-a-behaviour;
display: block;
display: inline-table;
font-size: 13px;
margin-top: 4px;
color: #000;
color: var(--mainForegroundColor);
span:hover {
opacity: 0.8;

42
client/src/sass/include/_variables.scss
View File

@ -8,8 +8,6 @@ $grey-hoover-color: #EFEFEF;;
$orange-color: #F1680D;
$orange-hoover-color: #F97D46;
$black-background: #000;
$grey-background: #f6f2f2;
$bg-color: #fff;
$fg-color: #000;
@ -27,11 +25,14 @@ $header-height: 50px;
$header-border-color: #e9eff6;
$search-input-width: 375px;
$menu-background: #000;
$menu-color: #fff;
$menu-bottom-color: #C6C6C6;
$menu-width: 240px;
$menu-left-padding: 26px;
$sub-menu-color: #F7F7F7;
$footer-height: 30px;
$footer-margin: 30px;
@ -41,3 +42,40 @@ $video-thumbnail-height: 110px;
$video-thumbnail-width: 200px;
$theater-bottom-space: 85px;
$input-color: $bg-color;
$input-placeholder-color: #898989;
/*** theme ***/
body {
// now beware node-sass requires interpolation
// for css custom properties #{$var}
--mainColor: #{$orange-color};
--mainHoverColor: #{$orange-hoover-color};
--mainBackgroundColor: #{$bg-color};
--mainForegroundColor: #{$fg-color};
--submenuColor: #{$sub-menu-color};
--inputColor: #{$input-color};
--inputPlaceholderColor: #{$input-placeholder-color};
}
/*** map theme ***/
// pass variables into a sass map,
// to be warned of non-existing variables
$variables: (
--mainColor: var(--mainColor),
--mainHoverColor: var(--mainHoverColor),
--mainBackgroundColor: var(--mainBackgroundColor),
--mainForegroundColor: var(--mainForegroundColor),
--submenuColor: var(--submenuColor),
--inputColor: var(--inputColor),
--inputPlaceholderColor: var(--inputPlaceholderColor)
);
/*** theme helper ***/
@function var($variable) {
@return map-get($variables, $variable);
}

2
client/src/sass/primeng-custom.scss
View File

@ -167,7 +167,7 @@ p-table {
&.ui-state-active {
&, &:hover, &:active, &:focus {
color: #fff !important;
background-color: $orange-color !important;
background-color: var(--mainColor) !important;
}
}
}