mirror of
https://github.com/FreeTubeApp/FreeTube
synced 2024-11-23 02:16:10 +01:00
Merge pull request #35 from Airradda/linkcolor
Add "Black" theme, hyperlink coloring, and instance menu coloring
This commit is contained in:
commit
06a9e400a3
@ -21,11 +21,13 @@ export default Vue.extend({
|
||||
currentSecColor: '',
|
||||
baseThemeNames: [
|
||||
'Light',
|
||||
'Dark'
|
||||
'Dark',
|
||||
'Black'
|
||||
],
|
||||
baseThemeValues: [
|
||||
'light',
|
||||
'dark'
|
||||
'dark',
|
||||
'black'
|
||||
],
|
||||
colorNames: [
|
||||
'Red',
|
||||
|
@ -6,12 +6,15 @@
|
||||
--primary-shadow-color: rgba(232, 232, 232, 1);
|
||||
--title-color: #3f7ac6;
|
||||
--bg-color: #f1f1f1;
|
||||
--link-color: var(--accent-color);
|
||||
--link-visited-color: var(--accent-color-visited);
|
||||
--card-bg-color: #FFFFFF;
|
||||
--secondary-card-bg-color: #eeeeee;
|
||||
--side-nav-color: #FFFFFF;
|
||||
--side-nav-hover-color: #e0e0e0;
|
||||
--side-nav-active-color: #757575;
|
||||
--search-bar-color: #f5f5f5;
|
||||
--instance-menu-color: var(--search-bar-color);
|
||||
--logo-icon: url("~../../_icons/iconColorSmall.png");
|
||||
--logo-text: url("~../../_icons/textColorSmall.png");
|
||||
}
|
||||
@ -25,16 +28,39 @@
|
||||
--primary-shadow-color: rgba(0, 0, 0, 0.75);
|
||||
--title-color: #EEEEEE;
|
||||
--bg-color: #212121;
|
||||
--link-color: var(--accent-color);
|
||||
--link-visited-color: var(--accent-color-visited);
|
||||
--card-bg-color: #303030;
|
||||
--secondary-card-bg-color: rgba(0, 0, 0, 0.75);
|
||||
--side-nav-color: #262626;
|
||||
--side-nav-hover-color: #212121;
|
||||
--side-nav-active-color: #303030;
|
||||
--search-bar-color: #262626;
|
||||
--instance-menu-color: var(--search-bar-color);
|
||||
--logo-icon: url("~../../_icons/iconColorSmall.png");
|
||||
--logo-text: url("~../../_icons/textColorSmall.png");
|
||||
}
|
||||
|
||||
.black {
|
||||
--primary-text-color: #EEEEEE;
|
||||
--secondary-text-color: #ddd;
|
||||
--tertiary-text-color: #EEEEEE;
|
||||
--primary-input-color: rgba(0, 0, 0, 0.50);
|
||||
--primary-shadow-color: rgba(0, 0, 0, 0.75);
|
||||
--title-color: #EEEEEEE;
|
||||
--bg-color: #000000;
|
||||
--link-color: var(--accent-color);
|
||||
--link-visited-color: var(--accent-color-visited);
|
||||
--card-bg-color: #000000;
|
||||
--secondary-card-bg-color: rgba(0, 0, 0, 0.75);
|
||||
--side-nav-color: #000000;
|
||||
--side-nav-hover-color: #212121;
|
||||
--side-nav-active-color: #303030;
|
||||
--search-bar-color: #262626;
|
||||
--instance-menu-color: var(--search-bar-color);
|
||||
--logo-icon: url("~../../_icons/iconColorSmall.png");
|
||||
--logo-text: url("~../../_icons/textColorSmall.png");
|
||||
}
|
||||
|
||||
.gray {
|
||||
--primary-text-color: #EEEEEE;
|
||||
@ -203,6 +229,7 @@
|
||||
--accent-color-hover: #e53935;
|
||||
--accent-color-active: #c62828;
|
||||
--accent-color-light: #ef9a9a;
|
||||
--accent-color-visited: #b71c1c;
|
||||
--text-with-accent-color: #FFFFFF;
|
||||
--accent-color-opacity1: rgba(244,67,54,0.04);
|
||||
--accent-color-opacity2: rgba(244,67,54,0.12);
|
||||
@ -215,6 +242,7 @@
|
||||
--accent-color-hover: #D81B60;
|
||||
--accent-color-active: #AD1457;
|
||||
--accent-color-light: #F48FB1;
|
||||
--accent-color-visited: #880E4F;
|
||||
--text-with-accent-color: #FFFFFF;
|
||||
--accent-color-opacity1: rgba(233,30,99,0.04);
|
||||
--accent-color-opacity2: rgba(233,30,99,0.12);
|
||||
@ -227,6 +255,7 @@
|
||||
--accent-color-hover: #8E24AA;
|
||||
--accent-color-active: #6A1B9A;
|
||||
--accent-color-light: #CE93D8;
|
||||
--accent-color-visited: #4A148C;
|
||||
--text-with-accent-color: #FFFFFF;
|
||||
--accent-color-opacity1: rgba(156,39,176,0.04);
|
||||
--accent-color-opacity2: rgba(156,39,176,0.12);
|
||||
@ -239,6 +268,7 @@
|
||||
--accent-color-hover: #5E35B1;
|
||||
--accent-color-active: #4527A0;
|
||||
--accent-color-light: #B39DDB;
|
||||
--accent-color-visited: #311B92;
|
||||
--text-with-accent-color: #FFFFFF;
|
||||
--accent-color-opacity1: rgba(103,58,183,0.04);
|
||||
--accent-color-opacity2: rgba(103,58,183,0.12);
|
||||
@ -251,6 +281,7 @@
|
||||
--accent-color-hover: #3949AB;
|
||||
--accent-color-active: #283593;
|
||||
--accent-color-light: #9FA8DA;
|
||||
--accent-color-visited: #1A237E;
|
||||
--text-with-accent-color: #FFFFFF;
|
||||
--accent-color-opacity1: rgba(63,81,181,0.04);
|
||||
--accent-color-opacity2: rgba(63,81,181,0.12);
|
||||
@ -263,6 +294,7 @@
|
||||
--accent-color-hover: #1E88E5;
|
||||
--accent-color-active: #1565C0;
|
||||
--accent-color-light: #90CAF9;
|
||||
--accent-color-visited: #0D47A1;
|
||||
--text-with-accent-color: #FFFFFF;
|
||||
--accent-color-opacity1: rgba(33,150,243,0.04);
|
||||
--accent-color-opacity2: rgba(33,150,243,0.12);
|
||||
@ -275,6 +307,7 @@
|
||||
--accent-color-hover: #039BE5;
|
||||
--accent-color-active: #0277BD;
|
||||
--accent-color-light: #81D4FA;
|
||||
--accent-color-visited: #01579B;
|
||||
--text-with-accent-color: #FFFFFF;
|
||||
--accent-color-opacity1: rgba(3,169,244,0.04);
|
||||
--accent-color-opacity2: rgba(3,169,244,0.12);
|
||||
@ -287,6 +320,7 @@
|
||||
--accent-color-hover: #00ACC1;
|
||||
--accent-color-active: #00838F;
|
||||
--accent-color-light: #80DEEA;
|
||||
--accent-color-visited: #006064;
|
||||
--text-with-accent-color: #FFFFFF;
|
||||
--accent-color-opacity1: rgba(0,188,212,0.04);
|
||||
--accent-color-opacity2: rgba(0,188,212,0.12);
|
||||
@ -299,6 +333,7 @@
|
||||
--accent-color-hover: #00897B;
|
||||
--accent-color-active: #00695C;
|
||||
--accent-color-light: #80CBC4;
|
||||
--accent-color-visited: #004D40;
|
||||
--text-with-accent-color: #FFFFFF;
|
||||
--accent-color-opacity1: rgba(0,150,136,0.04);
|
||||
--accent-color-opacity2: rgba(0,150,136,0.12);
|
||||
@ -311,6 +346,7 @@
|
||||
--accent-color-hover: #43A047;
|
||||
--accent-color-active: #2E7D32;
|
||||
--accent-color-light: #A5D6A7;
|
||||
--accent-color-visited: #1B5E20;
|
||||
--text-with-accent-color: #FFFFFF;
|
||||
--accent-color-opacity1: rgba(76,175,80,0.04);
|
||||
--accent-color-opacity2: rgba(76,175,80,0.12);
|
||||
@ -323,6 +359,7 @@
|
||||
--accent-color-hover: #7CB342;
|
||||
--accent-color-active: #558B2F;
|
||||
--accent-color-light: #C5E1A5;
|
||||
--accent-color-visited: #33691E;
|
||||
--text-with-accent-color: #000000;
|
||||
--accent-color-opacity1: rgba(139,195,74,0.04);
|
||||
--accent-color-opacity2: rgba(139,195,74,0.12);
|
||||
@ -335,6 +372,7 @@
|
||||
--accent-color-hover: #C0CA33;
|
||||
--accent-color-active: #9E9D24;
|
||||
--accent-color-light: #E6EE9C;
|
||||
--accent-color-visited: #827717;
|
||||
--text-with-accent-color: #000000;
|
||||
--accent-color-opacity1: rgba(205,220,57,0.04);
|
||||
--accent-color-opacity2: rgba(205,220,57,0.12);
|
||||
@ -347,6 +385,7 @@
|
||||
--accent-color-hover: #FDD835;
|
||||
--accent-color-active: #F9A825;
|
||||
--accent-color-light: #FFF59D;
|
||||
--accent-color-visited: #F57F17;
|
||||
--text-with-accent-color: #000000;
|
||||
--accent-color-opacity1: rgba(255,235,59,0.04);
|
||||
--accent-color-opacity2: rgba(255,235,59,0.12);
|
||||
@ -359,6 +398,7 @@
|
||||
--accent-color-hover: #FFB300;
|
||||
--accent-color-active: #FF8F00;
|
||||
--accent-color-light: #FFE082;
|
||||
--accent-color-visited: #FF6F00;
|
||||
--text-with-accent-color: #000000;
|
||||
--accent-color-opacity1: rgba(255,193,7,0.04);
|
||||
--accent-color-opacity2: rgba(255,193,7,0.12);
|
||||
@ -371,6 +411,7 @@
|
||||
--accent-color-hover: #FB8C00;
|
||||
--accent-color-active: #EF6C00;
|
||||
--accent-color-light: #FFCC80;
|
||||
--accent-color-visited: #E65100;
|
||||
--text-with-accent-color: #000000;
|
||||
--accent-color-opacity1: rgba(255,152,0,0.04);
|
||||
--accent-color-opacity2: rgba(255,152,0,0.12);
|
||||
@ -383,6 +424,7 @@
|
||||
--accent-color-hover: #F4511E;
|
||||
--accent-color-active: #D84315;
|
||||
--accent-color-light: #FFAB91;
|
||||
--accent-color-visited: #BF360C;
|
||||
--text-with-accent-color: #000000;
|
||||
--accent-color-opacity1: rgba(255,87,34,0.04);
|
||||
--accent-color-opacity2: rgba(255,87,34,0.12);
|
||||
@ -400,3 +442,9 @@ body {
|
||||
color: var(--primary-text-color);
|
||||
background-color: var(--bg-color);
|
||||
}
|
||||
a:link {
|
||||
color: var(--link-color);
|
||||
}
|
||||
a:visited {
|
||||
color: var(--link-visited-color);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user