OpenCloud
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube
1
0
Fork 0
Code Issues Releases Wiki Activity

add theming via css custom properties 

and a bonus dark color theme toggle
pull/1018/head
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; display: inline-block;
text-align: center; text-align: center;
color: #000; color: var(--mainForegroundColor);
margin: 10px 30px; margin: 10px 30px;
img { 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 { .inner-form-title {
text-transform: uppercase; text-transform: uppercase;
color: $orange-color; color: var(--mainColor);
font-weight: $font-bold; font-weight: $font-bold;
font-size: 13px; font-size: 13px;
margin-top: 30px; 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; width: fit-content;
display: flex; display: flex;
align-items: baseline; align-items: baseline;
color: #000; color: var(--mainForegroundColor);
.video-channel-display-name { .video-channel-display-name {
font-weight: $font-semibold; 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; width: fit-content;
display: flex; display: flex;
align-items: baseline; align-items: baseline;
color: #000; color: var(--mainForegroundColor);
.video-channel-display-name { .video-channel-display-name {
font-weight: $font-semibold; 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 { .video-info-name {
@include disable-default-a-behaviour; @include disable-default-a-behaviour;
color: #000; color: var(--mainForegroundColor);
display: block; display: block;
width: fit-content; width: fit-content;
font-size: 16px; font-size: 16px;

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

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

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

@ -7,6 +7,7 @@
.sub-header-container { .sub-header-container {
margin-top: $header-height; margin-top: $header-height;
background-color: var(--mainBackgroundColor);
} }
.header { .header {
@ -14,7 +15,7 @@
position: fixed; position: fixed;
top: 0; top: 0;
width: 100%; width: 100%;
background-color: $bg-color; background-color: var(--mainBackgroundColor);
z-index: 1000; z-index: 1000;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
display: flex; display: flex;
@ -31,7 +32,8 @@
@include icon(24px); @include icon(24px);
&.icon-menu { &.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; margin: 0 18px 0 20px;
} }
} }
@ -83,7 +85,6 @@
} }
footer { footer {
border-top: 1px solid $footer-border-color;
padding: 10px 0; padding: 10px 0;
font-size: 11px; font-size: 11px;
margin-top: $footer-margin; 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 padding-right: 40px; // For the search icon
&::placeholder { &::placeholder {
color: #000; color: var(--inputPlaceholderColor);
} }
&:focus::placeholder { &:focus::placeholder {
@ -28,7 +28,8 @@
@include icon(25px); @include icon(25px);
height: 21px; 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 // yolo
position: absolute; 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 { .create-an-account, .forgot-password-button {
color: #000; color: var(--mainForegroundColor);
cursor: pointer; cursor: pointer;
&:hover { &:hover {

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

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

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

@ -9,7 +9,7 @@
} }
menu { menu {
background-color: $black-background; background-color: $menu-background;
margin: 0; margin: 0;
padding: 0; padding: 0;
height: 100%; height: 100%;
@ -190,10 +190,10 @@ menu {
} }
.footer { .footer {
margin-bottom: 15px; padding-bottom: 15px;
padding-left: $menu-left-padding; padding-left: $menu-left-padding;
.language { .language, .color-palette {
display: inline-block; display: inline-block;
color: $menu-bottom-color; color: $menu-bottom-color;
cursor: pointer; cursor: pointer;
@ -213,6 +213,16 @@ menu {
background-image: url('../../assets/images/menu/language.png'); 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 { &:hover {
opacity: 1; 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_ABUSES]: '/admin/video-abuses',
[UserRight.MANAGE_VIDEO_BLACKLIST]: '/admin/video-blacklist' [UserRight.MANAGE_VIDEO_BLACKLIST]: '/admin/video-blacklist'
} }
private theme = document.querySelector('body')
private previousTheme = { }
constructor ( constructor (
private authService: AuthService, 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 () { isRegistrationAllowed () {
@ -96,6 +105,21 @@ export class MenuComponent implements OnInit {
this.languageChooserModal.show() 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 () { private computeIsUserHasAdminAccess () {
const right = this.getFirstAdminRightAvailable() const right = this.getFirstAdminRightAvailable()

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

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

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

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

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

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

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

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

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

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

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

@ -21,7 +21,7 @@
a { a {
@include disable-default-a-behaviour; @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 { body {
font-family: $main-fonts; font-family: $main-fonts;
font-weight: $font-regular; font-weight: $font-regular;
color: #000; color: var(--mainForegroundColor);
font-size: 14px; font-size: 14px;
} }
@ -83,7 +83,7 @@ label {
} }
.sub-menu { .sub-menu {
background-color: #F7F7F7; background-color: var(--submenuColor);
width: 100%; width: 100%;
height: 81px; height: 81px;
margin-bottom: 30px; margin-bottom: 30px;
@ -110,7 +110,7 @@ label {
} }
.title-page { .title-page {
color: #000; color: var(--mainForegroundColor);
font-size: 16px; font-size: 16px;
display: inline-block; display: inline-block;
margin-right: 55px; margin-right: 55px;
@ -118,14 +118,14 @@ label {
@include disable-default-a-behaviour; @include disable-default-a-behaviour;
&.active, &.title-page-single { &.active, &.title-page-single {
border-bottom: 2px solid $orange-color; border-bottom: 2px solid var(--mainColor);
font-weight: $font-bold; font-weight: $font-bold;
margin-top: 30px; margin-top: 30px;
margin-bottom: 25px; margin-bottom: 25px;
} }
&:hover, &:active, &:focus { &:hover, &:active, &:focus {
color: #000; color: var(--mainForegroundColor);
} }
@media screen and (max-width: 500px) { @media screen and (max-width: 500px) {
@ -146,13 +146,14 @@ label {
@include disable-default-a-behaviour; @include disable-default-a-behaviour;
font-size: 16px; font-size: 16px;
color: #000; color: var(--mainForegroundColor);
padding: 5px 15px; padding: 5px 15px;
border-radius: 0.25rem; border-radius: 0.25rem;
&.active { &.active {
font-weight: $font-semibold; font-weight: $font-semibold;
background-color: #f0f0f0; background-color: #f0f0f0;
color: #000;
} }
} }
} }
@ -188,6 +189,10 @@ label {
} }
.modal { .modal {
.modal-content {
background-color: var(--mainBackgroundColor);
}
.modal-header { .modal-header {
border-bottom: none; border-bottom: none;
margin-bottom: 5px; margin-bottom: 5px;
@ -249,7 +254,7 @@ label {
a { a {
@include disable-default-a-behaviour; @include disable-default-a-behaviour;
color: #000; color: var(--mainForegroundColor);
} }
} }
@ -259,7 +264,7 @@ ngb-tabset.bootstrap {
&, & a { &, & a {
@include disable-default-a-behaviour; @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; display: inline-block;
height: $button-height; height: $button-height;
width: $width; width: $width;
background: #fff; background: var(--inputColor);
border: 1px solid #C6C6C6; border: 1px solid #C6C6C6;
border-radius: 3px; border-radius: 3px;
padding-left: 15px; padding-left: 15px;
padding-right: 15px; padding-right: 15px;
&::placeholder {
color: var(--inputPlaceholderColor);
}
} }
@mixin peertube-input-group($width) { @mixin peertube-input-group($width) {
@ -73,6 +77,7 @@
.input-group-text{ .input-group-text{
font-size: 14px; font-size: 14px;
color: gray;
} }
} }
@ -87,12 +92,12 @@
@mixin orange-button { @mixin orange-button {
&, &:active, &:focus { &, &:active, &:focus {
color: #fff; color: #fff;
background-color: $orange-color; background-color: var(--mainColor);
} }
&:hover { &:hover {
color: #fff; color: #fff;
background-color: $orange-hoover-color; background-color: var(--mainHoverColor);
} }
&[disabled], &.disabled { &[disabled], &.disabled {
@ -181,7 +186,7 @@
width: $width; width: $width;
border-radius: 3px; border-radius: 3px;
overflow: hidden; overflow: hidden;
background: #fff; background: var(--inputColor);
position: relative; position: relative;
font-size: 15px; font-size: 15px;
@ -278,7 +283,7 @@
position: relative; position: relative;
width: 18px; width: 18px;
height: 18px; height: 18px;
border: $border-width solid #000; border: $border-width solid var(--mainForegroundColor);
border-radius: 3px; border-radius: 3px;
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -292,14 +297,14 @@
height: 12px; height: 12px;
opacity: 0; opacity: 0;
transform: rotate(45deg) scale(0); transform: rotate(45deg) scale(0);
border-right: 2px solid #fff; border-right: 2px solid var(--mainForegroundColor);
border-bottom: 2px solid #fff; border-bottom: 2px solid var(--mainForegroundColor);
} }
} }
&:checked + span { &:checked + span {
border-color: transparent; border-color: transparent;
background: $orange-color; background: var(--mainColor);
animation: jelly 0.6s ease; animation: jelly 0.6s ease;
&:after { &:after {
@ -357,7 +362,7 @@
@mixin in-content-small-title { @mixin in-content-small-title {
text-transform: uppercase; text-transform: uppercase;
color: $orange-color; color: var(--mainColor);
font-weight: $font-bold; font-weight: $font-bold;
font-size: 13px; font-size: 13px;
} }
@ -365,10 +370,10 @@
@mixin actor-owner { @mixin actor-owner {
@include disable-default-a-behaviour; @include disable-default-a-behaviour;
display: block; display: inline-table;
font-size: 13px; font-size: 13px;
margin-top: 4px; margin-top: 4px;
color: #000; color: var(--mainForegroundColor);
span:hover { span:hover {
opacity: 0.8; opacity: 0.8;

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

@ -8,8 +8,6 @@ $grey-hoover-color: #EFEFEF;;
$orange-color: #F1680D; $orange-color: #F1680D;
$orange-hoover-color: #F97D46; $orange-hoover-color: #F97D46;
$black-background: #000;
$grey-background: #f6f2f2;
$bg-color: #fff; $bg-color: #fff;
$fg-color: #000; $fg-color: #000;
@ -27,11 +25,14 @@ $header-height: 50px;
$header-border-color: #e9eff6; $header-border-color: #e9eff6;
$search-input-width: 375px; $search-input-width: 375px;
$menu-background: #000;
$menu-color: #fff; $menu-color: #fff;
$menu-bottom-color: #C6C6C6; $menu-bottom-color: #C6C6C6;
$menu-width: 240px; $menu-width: 240px;
$menu-left-padding: 26px; $menu-left-padding: 26px;
$sub-menu-color: #F7F7F7;
$footer-height: 30px; $footer-height: 30px;
$footer-margin: 30px; $footer-margin: 30px;
@ -41,3 +42,40 @@ $video-thumbnail-height: 110px;
$video-thumbnail-width: 200px; $video-thumbnail-width: 200px;
$theater-bottom-space: 85px; $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 { &.ui-state-active {
&, &:hover, &:active, &:focus { &, &:hover, &:active, &:focus {
color: #fff !important; color: #fff !important;
background-color: $orange-color !important; background-color: var(--mainColor) !important;
} }
} }
} }