mirror of https://github.com/FreeTubeApp/FreeTube
1138 lines
30 KiB
CSS
1138 lines
30 KiB
CSS
.system[data-system-theme*='light'], .light,
|
|
.system[data-system-theme*='dark'], .dark,
|
|
.black,
|
|
.gray,
|
|
.dracula,
|
|
.catppuccinMocha,
|
|
.pastelPink,
|
|
.hotPink,
|
|
.nordic {
|
|
--primary-input-color: rgb(0 0 0 / 50%);
|
|
--destructive-color: #f44336;
|
|
--destructive-text-color: #000;
|
|
--destructive-hover-color: #e53935;
|
|
--destructive-active-color: #c62828;
|
|
}
|
|
|
|
.system[data-system-theme*='light'], .light,
|
|
.system[data-system-theme*='dark'], .dark,
|
|
.black,
|
|
.dracula,
|
|
.catppuccinMocha,
|
|
.pastelPink,
|
|
.hotPink,
|
|
.nordic {
|
|
--link-color: var(--accent-color);
|
|
--link-visited-color: var(--accent-color-visited);
|
|
--instance-menu-color: var(--search-bar-color);
|
|
}
|
|
|
|
.system[data-system-theme*='light'], .light,
|
|
.system[data-system-theme*='dark'], .dark,
|
|
.black,
|
|
.gray,
|
|
.dracula,
|
|
.catppuccinMocha,
|
|
.pastelPink,
|
|
.nordic {
|
|
--primary-input-color: rgb(0 0 0 / 50%);
|
|
--side-nav-hover-text-color: var(--primary-text-color);
|
|
}
|
|
|
|
.system[data-system-theme*='light'], .light,
|
|
.system[data-system-theme*='dark'], .dark,
|
|
.black,
|
|
.gray,
|
|
.dracula,
|
|
.catppuccinMocha,
|
|
.nordic {
|
|
--side-nav-active-text-color: var(--primary-text-color);
|
|
--scrollbar-text-color-hover: var(--primary-text-color);
|
|
|
|
}
|
|
|
|
.system[data-system-theme*='light'], .light,
|
|
.system[data-system-theme*='dark'], .dark,
|
|
.black,
|
|
.gray {
|
|
--logo-icon: url("../../_icons/iconColorSmall.svg");
|
|
--logo-text: url("../../_icons/textColorSmall.svg");
|
|
}
|
|
|
|
.system[data-system-theme*='dark'], .dark,
|
|
.black,
|
|
.gray,
|
|
.dracula,
|
|
.catppuccinMocha,
|
|
.hotPink,
|
|
.nordic {
|
|
--primary-shadow-color: rgb(0 0 0 / 75%);
|
|
}
|
|
|
|
.system[data-system-theme*='light'], .light {
|
|
--primary-text-color: #212121;
|
|
--secondary-text-color: #424242;
|
|
--tertiary-text-color: #757575;
|
|
--primary-shadow-color: rgb(232 232 232 / 100%);
|
|
--title-color: #3f7ac6;
|
|
--bg-color: #f1f1f1;
|
|
--favorite-icon-color: #0C0;
|
|
--card-bg-color: #FFF;
|
|
--secondary-card-bg-color: #eee;
|
|
--scrollbar-color: #CCC;
|
|
--scrollbar-color-hover: #BDBDBD;
|
|
--side-nav-color: #FFF;
|
|
--side-nav-hover-color: #e0e0e0;
|
|
--side-nav-active-color: #757575;
|
|
--search-bar-color: #f5f5f5;
|
|
}
|
|
|
|
.system[data-system-theme*='dark'], .dark {
|
|
--primary-text-color: #EEE;
|
|
--secondary-text-color: #ddd;
|
|
--tertiary-text-color: #999;
|
|
--title-color: #EEE;
|
|
--bg-color: #212121;
|
|
--favorite-icon-color: #0F0;
|
|
--card-bg-color: #303030;
|
|
--secondary-card-bg-color: rgb(0 0 0 / 75%);
|
|
--scrollbar-color: #414141;
|
|
--scrollbar-color-hover: #757575;
|
|
--side-nav-color: #262626;
|
|
--side-nav-hover-color: #212121;
|
|
--side-nav-active-color: #303030;
|
|
--search-bar-color: #262626;
|
|
}
|
|
|
|
.black {
|
|
--primary-text-color: #EEE;
|
|
--secondary-text-color: #ddd;
|
|
--tertiary-text-color: #EEE;
|
|
--title-color: #EEE;
|
|
--bg-color: #000;
|
|
--favorite-icon-color: #0F0;
|
|
--card-bg-color: #000;
|
|
--secondary-card-bg-color: rgb(0 0 0 / 75%);
|
|
--scrollbar-color: #515151;
|
|
--scrollbar-color-hover: #424242;
|
|
--side-nav-color: #0f0f0f;
|
|
--side-nav-hover-color: #212121;
|
|
--side-nav-active-color: #303030;
|
|
--search-bar-color: #262626;
|
|
}
|
|
|
|
.gray {
|
|
--primary-text-color: #EEE;
|
|
--secondary-text-color: #E0E0E0;
|
|
--tertiary-text-color: #F5F5F5;
|
|
--title-color: #EEE;
|
|
--bg-color: #212121;
|
|
--card-bg-color: #303030;
|
|
--secondary-card-bg-color: rgb(0 0 0 / 75%);
|
|
--side-nav-color: #262626;
|
|
--side-nav-hover-color: #212121;
|
|
--side-nav-active-color: #303030;
|
|
--search-bar-color: #212121;
|
|
}
|
|
|
|
.dracula {
|
|
--primary-text-color: #F8F8F2;
|
|
--secondary-text-color: #c6cee6;
|
|
--tertiary-text-color: #e5e8f3;
|
|
--title-color: #BD93F9;
|
|
--bg-color: #282A36;
|
|
--favorite-icon-color: #0F0;
|
|
--card-bg-color: #33353F;
|
|
--secondary-card-bg-color: #282A36;
|
|
--scrollbar-color: #44475A;
|
|
--scrollbar-color-hover: #3D4051;
|
|
--side-nav-color: #44475A;
|
|
--side-nav-hover-color: #57596B;
|
|
--side-nav-active-color: #3D4051;
|
|
--search-bar-color: #3E3F4A;
|
|
--logo-icon: url("../../_icons/iconDraculaLightSmall.svg");
|
|
--logo-text: url("../../_icons/textDraculaLightSmall.svg");
|
|
}
|
|
|
|
.catppuccinMocha {
|
|
--primary-text-color: #cdd6f4;
|
|
--secondary-text-color: #bac2de;
|
|
--tertiary-text-color: #a6adc8;
|
|
--title-color: var(--accent-color);
|
|
--bg-color: #1e1e2e;
|
|
--favorite-icon-color: #0F0;
|
|
--card-bg-color: #181825;
|
|
--secondary-card-bg-color: #1e1e2e;
|
|
--scrollbar-color: #313244;
|
|
--scrollbar-color-hover: #3D4051;
|
|
--side-nav-color: #181825;
|
|
--side-nav-hover-color: #11111b;
|
|
--side-nav-active-color: #11111b;
|
|
--search-bar-color: #313244;
|
|
--logo-icon: url("../../_icons/iconCatppuccinMochaLightSmall.svg");
|
|
--logo-text: url("../../_icons/textCatppuccinMochaLightSmall.svg");
|
|
}
|
|
|
|
.pastelPink {
|
|
--primary-text-color: #1F002B;
|
|
--secondary-text-color: #361836;
|
|
--tertiary-text-color: #5A285A;
|
|
--primary-shadow-color: rgb(255 240 240 / 50%);
|
|
--title-color: #185EB4;
|
|
--bg-color: #ffeadd;
|
|
--favorite-icon-color: #760278;
|
|
--card-bg-color: #ffd1dc;
|
|
--secondary-card-bg-color: #FFF;
|
|
--scrollbar-color: #f5c8d3;
|
|
--scrollbar-color-hover: #760278;
|
|
--scrollbar-text-color-hover: var(--scrollbar-color);
|
|
--side-nav-color: #ffd1dc;
|
|
--side-nav-hover-color: #cef4f1;
|
|
--side-nav-active-color: #3124E7;
|
|
--side-nav-active-text-color: #FFFF;
|
|
--search-bar-color: #FFF0DD;
|
|
--logo-icon: url("../../_icons/iconBlackSmall.svg");
|
|
--logo-text: url("../../_icons/textBlackSmall.svg");
|
|
}
|
|
|
|
.nordic {
|
|
--primary-text-color: #EEE;
|
|
--secondary-text-color: #ddd;
|
|
--tertiary-text-color: #EEE;
|
|
--title-color: #EEE;
|
|
--bg-color: #2b2f3a;
|
|
--favorite-icon-color: #0F0;
|
|
--card-bg-color: #2e3440;
|
|
--secondary-card-bg-color: rgb(59 66 82 / 75%);
|
|
--scrollbar-color: #4b566a;
|
|
--scrollbar-color-hover: #4b566a;
|
|
--side-nav-color: #2e3440;
|
|
--side-nav-hover-color: #3b4252;
|
|
--side-nav-active-color: #3b4252;
|
|
--search-bar-color: #4b566a;
|
|
--logo-icon: url("../../_icons/iconNordicLightSmall.svg");
|
|
--logo-text: url("../../_icons/textNordicLightSmall.svg");
|
|
}
|
|
|
|
.hotPink {
|
|
--primary-text-color: #FFFF;
|
|
--secondary-text-color: #FFFF;
|
|
--tertiary-text-color: #FFFF;
|
|
--title-color: #000;
|
|
--bg-color: #ff008a;
|
|
--favorite-icon-color: #0F0;
|
|
--card-bg-color: #DE1C85;
|
|
--secondary-card-bg-color: rgb(0 0 0 / 75%);
|
|
--scrollbar-color: #FFF;
|
|
--scrollbar-color-hover: #C0F6FF;
|
|
--scrollbar-text-color-hover: #000;
|
|
--side-nav-color: #EE1E90;
|
|
--side-nav-hover-color: #FFF;
|
|
--side-nav-hover-text-color: #000;
|
|
--side-nav-active-color: #959595;
|
|
--side-nav-active-text-color: #000;
|
|
--search-bar-color: #9C2D5D;
|
|
--logo-icon: url("../../_icons/iconWhiteSmall.svg");
|
|
--logo-text: url("../../_icons/textWhiteSmall.svg");
|
|
|
|
/* The hot pink theme does not have a great color contrast with
|
|
many other colors than black and white. This means that the primary and
|
|
secondary theme colors are forced here to be black so as to avoid any
|
|
accessibility concerns. */
|
|
--primary-color: #000 !important;
|
|
--primary-color-hover: #000 !important;
|
|
--primary-color-active: #000 !important;
|
|
--text-with-main-color: #FFF !important;
|
|
--text-with-accent-color: #FFF !important;
|
|
--accent-color: #000 !important;
|
|
--accent-color-hover: #808080 !important;
|
|
--accent-color-active: #6A739A !important;
|
|
--accent-color-light: #000 !important;
|
|
--accent-color-visited: #000 !important;
|
|
--accent-color-opacity1: rgb(0 0 0 / 4%) !important;
|
|
--accent-color-opacity2: rgb(0 0 0 / 12%) !important;
|
|
--accent-color-opacity3: rgb(255 255 255 / 16%) !important;
|
|
--accent-color-opacity4: rgb(255 255 255 / 24%) !important;
|
|
}
|
|
|
|
/* Given that the Hot Pink theme does not need link underlining due to meeting
|
|
WCAG 2 Level AA (https://webaim.org/resources/linkcontrastchecker/?fcolor=FFFFFF&bcolor=DE1C85&lcolor=000000),
|
|
it can be safely elided. This looks quite pleasant on this theme. */
|
|
.hotPink a:not(:hover, :focus), .hotPink .navOption:hover, .hotPink .navOption:focus, .hotPink *:not(:hover, :focus) {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.hotPink a:hover, .hotPink a:focus {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.mainRed,
|
|
.mainPink,
|
|
.mainPurple,
|
|
.mainDeepPurple,
|
|
.mainIndigo,
|
|
.mainBlue,
|
|
.mainLightBlue,
|
|
.mainCyan,
|
|
.mainTeal,
|
|
.mainGreen {
|
|
--text-with-main-color: #FFF;
|
|
--logo-icon-bar-color: url("../../_icons/iconWhiteSmall.svg");
|
|
--logo-text-bar-color: url("../../_icons/textWhiteSmall.svg");
|
|
}
|
|
|
|
.mainLightGreen,
|
|
.mainLime,
|
|
.mainYellow,
|
|
.mainAmber,
|
|
.mainOrange,
|
|
.mainDeepOrange {
|
|
--text-with-main-color: #000;
|
|
--logo-icon-bar-color: url("../../_icons/iconBlackSmall.svg");
|
|
--logo-text-bar-color: url("../../_icons/textBlackSmall.svg");
|
|
}
|
|
|
|
.mainRed {
|
|
--primary-color: #f44336;
|
|
--primary-color-hover: #e53935;
|
|
--primary-color-active: #c62828;
|
|
}
|
|
|
|
.mainPink {
|
|
--primary-color: #E91E63;
|
|
--primary-color-hover: #D81B60;
|
|
--primary-color-active: #AD1457;
|
|
}
|
|
|
|
.mainPurple {
|
|
--primary-color: #9C27B0;
|
|
--primary-color-hover: #8E24AA;
|
|
--primary-color-active: #6A1B9A;
|
|
}
|
|
|
|
.mainDeepPurple {
|
|
--primary-color: #673AB7;
|
|
--primary-color-hover: #5E35B1;
|
|
--primary-color-active: #4527A0;
|
|
}
|
|
|
|
.mainIndigo {
|
|
--primary-color: #3F51B5;
|
|
--primary-color-hover: #3949AB;
|
|
--primary-color-active: #283593;
|
|
}
|
|
|
|
.mainBlue {
|
|
--primary-color: #2196F3;
|
|
--primary-color-hover: #1E88E5;
|
|
--primary-color-active: #1565C0;
|
|
}
|
|
|
|
.mainLightBlue {
|
|
--primary-color: #03A9F4;
|
|
--primary-color-hover: #039BE5;
|
|
--primary-color-active: #0277BD;
|
|
}
|
|
|
|
.mainCyan {
|
|
--primary-color: #00BCD4;
|
|
--primary-color-hover: #00ACC1;
|
|
--primary-color-active: #00838F;
|
|
}
|
|
|
|
.mainTeal {
|
|
--primary-color: #009688;
|
|
--primary-color-hover: #00897B;
|
|
--primary-color-active: #00695C;
|
|
}
|
|
|
|
.mainGreen {
|
|
--primary-color: #4CAF50;
|
|
--primary-color-hover: #43A047;
|
|
--primary-color-active: #2E7D32;
|
|
}
|
|
|
|
.mainLightGreen {
|
|
--primary-color: #8BC34A;
|
|
--primary-color-hover: #7CB342;
|
|
--primary-color-active: #558B2F;
|
|
}
|
|
|
|
.mainLime {
|
|
--primary-color: #CDDC39;
|
|
--primary-color-hover: #C0CA33;
|
|
--primary-color-active: #9E9D24;
|
|
}
|
|
|
|
.mainYellow {
|
|
--primary-color: #FFEB3B;
|
|
--primary-color-hover: #FDD835;
|
|
--primary-color-active: #F9A825;
|
|
}
|
|
|
|
.mainAmber {
|
|
--primary-color: #FFC107;
|
|
--primary-color-hover: #FFB300;
|
|
--primary-color-active: #FF8F00;
|
|
}
|
|
|
|
.mainOrange {
|
|
--primary-color: #FF9800;
|
|
--primary-color-hover: #FB8C00;
|
|
--primary-color-active: #EF6C00;
|
|
}
|
|
|
|
.mainDeepOrange {
|
|
--primary-color: #FF5722;
|
|
--primary-color-hover: #F4511E;
|
|
--primary-color-active: #D84315;
|
|
}
|
|
|
|
.mainDraculaCyan,
|
|
.mainDraculaGreen,
|
|
.mainDraculaOrange,
|
|
.mainDraculaRed,
|
|
.mainDraculaYellow {
|
|
--text-with-main-color: #282A36;
|
|
--logo-icon-bar-color: url("../../_icons/iconDraculaDarkSmall.svg");
|
|
--logo-text-bar-color: url("../../_icons/textDraculaDarkSmall.svg");
|
|
}
|
|
|
|
.mainDraculaPink,
|
|
.mainDraculaPurple {
|
|
--text-with-main-color: #F8F8F2;
|
|
--logo-icon-bar-color: url("../../_icons/iconDraculaLightSmall.svg");
|
|
--logo-text-bar-color: url("../../_icons/textDraculaLightSmall.svg");
|
|
}
|
|
|
|
.mainDraculaCyan {
|
|
--primary-color: #8BE9FD;
|
|
--primary-color-hover: #97EBFD;
|
|
--primary-color-active: #7DD2E4;
|
|
}
|
|
|
|
.mainDraculaGreen {
|
|
--primary-color: #50FA7B;
|
|
--primary-color-hover: #62FB88;
|
|
--primary-color-active: #48E16F;
|
|
}
|
|
|
|
.mainDraculaOrange {
|
|
--primary-color: #FFB86C;
|
|
--primary-color-hover: #FFBF7B;
|
|
--primary-color-active: #E6A661;
|
|
}
|
|
|
|
.mainDraculaPink {
|
|
--primary-color: #FF79C6;
|
|
--primary-color-hover: #FF86CC;
|
|
--primary-color-active: #E66DB2;
|
|
}
|
|
|
|
.mainDraculaPurple {
|
|
--primary-color: #BD93F9;
|
|
--primary-color-hover: #C49EFA;
|
|
--primary-color-active: #AA84E0;
|
|
}
|
|
|
|
.mainDraculaRed {
|
|
--primary-color: #F55;
|
|
--primary-color-hover: #F66;
|
|
--primary-color-active: #E64D4D;
|
|
}
|
|
|
|
.mainDraculaYellow {
|
|
--primary-color: #F1FA8C;
|
|
--primary-color-hover: #F2FB98;
|
|
--primary-color-active: #D9E17E;
|
|
}
|
|
|
|
.mainCatppuccinMochaRosewater,
|
|
.mainCatppuccinMochaFlamingo,
|
|
.mainCatppuccinMochaPink,
|
|
.mainCatppuccinMochaMauve,
|
|
.mainCatppuccinMochaRed,
|
|
.mainCatppuccinMochaMaroon,
|
|
.mainCatppuccinMochaPeach,
|
|
.mainCatppuccinMochaYellow,
|
|
.mainCatppuccinMochaGreen,
|
|
.mainCatppuccinMochaTeal,
|
|
.mainCatppuccinMochaSky,
|
|
.mainCatppuccinMochaSapphire,
|
|
.mainCatppuccinMochaBlue,
|
|
.mainCatppuccinMochaLavender {
|
|
--text-with-main-color: #1e1e2e;
|
|
--logo-icon-bar-color: url("../../_icons/iconCatppuccinMochaDarkSmall.svg");
|
|
--logo-text-bar-color: url("../../_icons/textCatppuccinMochaDarkSmall.svg");
|
|
}
|
|
|
|
.mainCatppuccinMochaRosewater {
|
|
--primary-color: #f5e0dc;
|
|
--primary-color-hover: #fceeec;
|
|
--primary-color-active: #e1c8c3;
|
|
}
|
|
|
|
.mainCatppuccinMochaFlamingo {
|
|
--primary-color: #f2cdcd;
|
|
--primary-color-hover: #f2e1e1;
|
|
--primary-color-active: #ddb7b7;
|
|
}
|
|
|
|
.mainCatppuccinMochaPink {
|
|
--primary-color: #f5c2e7;
|
|
--primary-color-hover: #f3d2ea;
|
|
--primary-color-active: #dca3cd;
|
|
}
|
|
|
|
.mainCatppuccinMochaMauve {
|
|
--primary-color: #cba6f7;
|
|
--primary-color-hover: #d4b7f8;
|
|
--primary-color-active: #b38fdf;
|
|
}
|
|
|
|
.mainCatppuccinMochaRed {
|
|
--primary-color: #f38ba8;
|
|
--primary-color-hover: #f0a4b9;
|
|
--primary-color-active: #de7693;
|
|
}
|
|
|
|
.mainCatppuccinMochaMaroon {
|
|
--primary-color: #eba0ac;
|
|
--primary-color-hover: #eabbc3;
|
|
--primary-color-active: #d68895;
|
|
}
|
|
|
|
.mainCatppuccinMochaPeach {
|
|
--primary-color: #fab387;
|
|
--primary-color-hover: #f7c7a9;
|
|
--primary-color-active: #e1996d;
|
|
}
|
|
|
|
.mainCatppuccinMochaYellow {
|
|
--primary-color: #f9e2af;
|
|
--primary-color-hover: #feeecd;
|
|
--primary-color-active: #dec48d;
|
|
}
|
|
|
|
.mainCatppuccinMochaGreen {
|
|
--primary-color: #a6e3a1;
|
|
--primary-color-hover: #bfebbb;
|
|
--primary-color-active: #86c780;
|
|
}
|
|
|
|
.mainCatppuccinMochaTeal {
|
|
--primary-color: #94e2d5;
|
|
--primary-color-hover: #aceae0;
|
|
--primary-color-active: #6fc5b7;
|
|
}
|
|
|
|
.mainCatppuccinMochaSky {
|
|
--primary-color: #89dceb;
|
|
--primary-color-hover: #a3e4f0;
|
|
--primary-color-active: #68bcca;
|
|
}
|
|
|
|
.mainCatppuccinMochaSapphire {
|
|
--primary-color: #74c7ec;
|
|
--primary-color-hover: #93d1ed;
|
|
--primary-color-active: #59a9cf;
|
|
}
|
|
|
|
.mainCatppuccinMochaBlue {
|
|
--primary-color: #89b4fa;
|
|
--primary-color-hover: #a6c8ff;
|
|
--primary-color-active: #6593df;
|
|
}
|
|
|
|
.mainCatppuccinMochaLavender {
|
|
--primary-color: #b4befe;
|
|
--primary-color-hover: #c9d0ff;
|
|
--primary-color-active: #8d98e4;
|
|
}
|
|
|
|
.secRed,
|
|
.secPink,
|
|
.secPurple,
|
|
.secDeepPurple,
|
|
.secIndigo,
|
|
.secBlue,
|
|
.secLightBlue,
|
|
.secCyan,
|
|
.secTeal,
|
|
.secGreen {
|
|
--text-with-accent-color: #FFF;
|
|
}
|
|
|
|
.secLightGreen,
|
|
.secLime,
|
|
.secYellow,
|
|
.secAmber,
|
|
.secOrange,
|
|
.secDeepOrange {
|
|
--text-with-accent-color: #000;
|
|
}
|
|
|
|
.secRed {
|
|
--accent-color: #f44336;
|
|
--accent-color-hover: #e53935;
|
|
--accent-color-active: #c62828;
|
|
--accent-color-light: #ef9a9a;
|
|
--accent-color-visited: #b71c1c;
|
|
--accent-color-opacity1: rgb(244 67 54 / 4%);
|
|
--accent-color-opacity2: rgb(244 67 54 / 12%);
|
|
--accent-color-opacity3: rgb(244 67 54 / 16%);
|
|
--accent-color-opacity4: rgb(244 67 54 / 24%);
|
|
}
|
|
|
|
.secPink {
|
|
--accent-color: #E91E63;
|
|
--accent-color-hover: #D81B60;
|
|
--accent-color-active: #AD1457;
|
|
--accent-color-light: #F48FB1;
|
|
--accent-color-visited: #880E4F;
|
|
--accent-color-opacity1: rgb(233 30 99 / 4%);
|
|
--accent-color-opacity2: rgb(233 30 99 / 12%);
|
|
--accent-color-opacity3: rgb(233 30 99 / 16%);
|
|
--accent-color-opacity4: rgb(233 30 99 / 24%);
|
|
}
|
|
|
|
.secPurple {
|
|
--accent-color: #9C27B0;
|
|
--accent-color-hover: #8E24AA;
|
|
--accent-color-active: #6A1B9A;
|
|
--accent-color-light: #CE93D8;
|
|
--accent-color-visited: #4A148C;
|
|
--accent-color-opacity1: rgb(156 39 176 / 4%);
|
|
--accent-color-opacity2: rgb(156 39 176 / 12%);
|
|
--accent-color-opacity3: rgb(156 39 176 / 16%);
|
|
--accent-color-opacity4: rgb(156 39 176 / 24%);
|
|
}
|
|
|
|
.secDeepPurple {
|
|
--accent-color: #673AB7;
|
|
--accent-color-hover: #5E35B1;
|
|
--accent-color-active: #4527A0;
|
|
--accent-color-light: #B39DDB;
|
|
--accent-color-visited: #311B92;
|
|
--accent-color-opacity1: rgb(103 58 183 / 4%);
|
|
--accent-color-opacity2: rgb(103 58 183 / 12%);
|
|
--accent-color-opacity3: rgb(103 58 183 / 16%);
|
|
--accent-color-opacity4: rgb(103 58 183 / 24%);
|
|
}
|
|
|
|
.secIndigo {
|
|
--accent-color: #3F51B5;
|
|
--accent-color-hover: #3949AB;
|
|
--accent-color-active: #283593;
|
|
--accent-color-light: #9FA8DA;
|
|
--accent-color-visited: #1A237E;
|
|
--accent-color-opacity1: rgb(63 81 181 / 4%);
|
|
--accent-color-opacity2: rgb(63 81 181 / 12%);
|
|
--accent-color-opacity3: rgb(63 81 181 / 16%);
|
|
--accent-color-opacity4: rgb(63 81 181 / 24%);
|
|
}
|
|
|
|
.secBlue {
|
|
--accent-color: #2196F3;
|
|
--accent-color-hover: #1E88E5;
|
|
--accent-color-active: #1565C0;
|
|
--accent-color-light: #90CAF9;
|
|
--accent-color-visited: #0D47A1;
|
|
--accent-color-opacity1: rgb(33 150 243 / 4%);
|
|
--accent-color-opacity2: rgb(33 150 243 / 12%);
|
|
--accent-color-opacity3: rgb(33 150 243 / 16%);
|
|
--accent-color-opacity4: rgb(33 150 243 / 24%);
|
|
}
|
|
|
|
.secLightBlue {
|
|
--accent-color: #03A9F4;
|
|
--accent-color-hover: #039BE5;
|
|
--accent-color-active: #0277BD;
|
|
--accent-color-light: #81D4FA;
|
|
--accent-color-visited: #01579B;
|
|
--accent-color-opacity1: rgb(3 169 244 / 4%);
|
|
--accent-color-opacity2: rgb(3 169 244 / 12%);
|
|
--accent-color-opacity3: rgb(3 169 244 / 16%);
|
|
--accent-color-opacity4: rgb(3 169 244 / 24%);
|
|
}
|
|
|
|
.secCyan {
|
|
--accent-color: #00BCD4;
|
|
--accent-color-hover: #00ACC1;
|
|
--accent-color-active: #00838F;
|
|
--accent-color-light: #80DEEA;
|
|
--accent-color-visited: #006064;
|
|
--accent-color-opacity1: rgb(0 188 212 / 4%);
|
|
--accent-color-opacity2: rgb(0 188 212 / 12%);
|
|
--accent-color-opacity3: rgb(0 188 212 / 16%);
|
|
--accent-color-opacity4: rgb(0 188 212 / 24%);
|
|
}
|
|
|
|
.secTeal {
|
|
--accent-color: #009688;
|
|
--accent-color-hover: #00897B;
|
|
--accent-color-active: #00695C;
|
|
--accent-color-light: #80CBC4;
|
|
--accent-color-visited: #004D40;
|
|
--accent-color-opacity1: rgb(0 150 136 / 4%);
|
|
--accent-color-opacity2: rgb(0 150 136 / 12%);
|
|
--accent-color-opacity3: rgb(0 150 136 / 16%);
|
|
--accent-color-opacity4: rgb(0 150 136 / 24%);
|
|
}
|
|
|
|
.secGreen {
|
|
--accent-color: #4CAF50;
|
|
--accent-color-hover: #43A047;
|
|
--accent-color-active: #2E7D32;
|
|
--accent-color-light: #A5D6A7;
|
|
--accent-color-visited: #1B5E20;
|
|
--accent-color-opacity1: rgb(76 175 80 / 4%);
|
|
--accent-color-opacity2: rgb(76 175 80 / 12%);
|
|
--accent-color-opacity3: rgb(76 175 80 / 16%);
|
|
--accent-color-opacity4: rgb(76 175 80 / 24%);
|
|
}
|
|
|
|
.secLightGreen {
|
|
--accent-color: #8BC34A;
|
|
--accent-color-hover: #7CB342;
|
|
--accent-color-active: #558B2F;
|
|
--accent-color-light: #C5E1A5;
|
|
--accent-color-visited: #33691E;
|
|
--accent-color-opacity1: rgb(139 195 74 / 4%);
|
|
--accent-color-opacity2: rgb(139 195 74 / 12%);
|
|
--accent-color-opacity3: rgb(139 195 74 / 16%);
|
|
--accent-color-opacity4: rgb(139 195 74 / 24%);
|
|
}
|
|
|
|
.secLime {
|
|
--accent-color: #CDDC39;
|
|
--accent-color-hover: #C0CA33;
|
|
--accent-color-active: #9E9D24;
|
|
--accent-color-light: #E6EE9C;
|
|
--accent-color-visited: #827717;
|
|
--accent-color-opacity1: rgb(205 220 57 / 4%);
|
|
--accent-color-opacity2: rgb(205 220 57 / 12%);
|
|
--accent-color-opacity3: rgb(205 220 57 / 16%);
|
|
--accent-color-opacity4: rgb(205 220 57 / 24%);
|
|
}
|
|
|
|
.secYellow {
|
|
--accent-color: #FFEB3B;
|
|
--accent-color-hover: #FDD835;
|
|
--accent-color-active: #F9A825;
|
|
--accent-color-light: #FFF59D;
|
|
--accent-color-visited: #F57F17;
|
|
--accent-color-opacity1: rgb(255 235 59 / 4%);
|
|
--accent-color-opacity2: rgb(255 235 59 / 12%);
|
|
--accent-color-opacity3: rgb(255 235 59 / 16%);
|
|
--accent-color-opacity4: rgb(255 235 59 / 24%);
|
|
}
|
|
|
|
.secAmber {
|
|
--accent-color: #FFC107;
|
|
--accent-color-hover: #FFB300;
|
|
--accent-color-active: #FF8F00;
|
|
--accent-color-light: #FFE082;
|
|
--accent-color-visited: #FF6F00;
|
|
--accent-color-opacity1: rgb(255 193 7 / 4%);
|
|
--accent-color-opacity2: rgb(255 193 7 / 12%);
|
|
--accent-color-opacity3: rgb(255 193 7 / 16%);
|
|
--accent-color-opacity4: rgb(255 193 7 / 24%);
|
|
}
|
|
|
|
.secOrange {
|
|
--accent-color: #FF9800;
|
|
--accent-color-hover: #FB8C00;
|
|
--accent-color-active: #EF6C00;
|
|
--accent-color-light: #FFCC80;
|
|
--accent-color-visited: #E65100;
|
|
--accent-color-opacity1: rgb(255 152 0 / 4%);
|
|
--accent-color-opacity2: rgb(255 152 0 / 12%);
|
|
--accent-color-opacity3: rgb(255 152 0 / 16%);
|
|
--accent-color-opacity4: rgb(255 152 0 / 24%);
|
|
}
|
|
|
|
.secDeepOrange {
|
|
--accent-color: #FF5722;
|
|
--accent-color-hover: #F4511E;
|
|
--accent-color-active: #D84315;
|
|
--accent-color-light: #FFAB91;
|
|
--accent-color-visited: #BF360C;
|
|
--accent-color-opacity1: rgb(255 87 34 / 4%);
|
|
--accent-color-opacity2: rgb(255 87 34 / 12%);
|
|
--accent-color-opacity3: rgb(255 87 34 / 16%);
|
|
--accent-color-opacity4: rgb(255 87 34 / 24%);
|
|
}
|
|
|
|
.secDraculaCyan,
|
|
.secDraculaGreen,
|
|
.secDraculaOrange,
|
|
.secDraculaRed,
|
|
.secDraculaYellow {
|
|
--text-with-accent-color: #212121;
|
|
}
|
|
|
|
.secDraculaPink,
|
|
.secDraculaPurple {
|
|
--text-with-accent-color: #F8F8F2;
|
|
}
|
|
|
|
.secDraculaCyan,
|
|
.secDraculaGreen,
|
|
.secDraculaOrange,
|
|
.secDraculaPink,
|
|
.secDraculaPurple,
|
|
.secDraculaRed,
|
|
.secDraculaYellow {
|
|
--accent-color-opacity1: rgb(98 114 164 / 4%);
|
|
--accent-color-opacity2: rgb(98 114 164 / 12%);
|
|
--accent-color-opacity3: rgb(98 114 164 / 16%);
|
|
--accent-color-opacity4: rgb(98 114 164 / 24%);
|
|
}
|
|
|
|
.secDraculaCyan {
|
|
--accent-color: #8BE9FD;
|
|
--accent-color-hover: #97EBFD;
|
|
--accent-color-active: #7DD2E4;
|
|
--accent-color-light: #A2EDFD;
|
|
--accent-color-visited: #6FBACA;
|
|
|
|
}
|
|
|
|
.secDraculaGreen {
|
|
--accent-color: #50FA7B;
|
|
--accent-color-hover: #62FB88;
|
|
--accent-color-active: #48E16F;
|
|
--accent-color-light: #73FB95;
|
|
--accent-color-visited: #40C862;
|
|
}
|
|
|
|
.secDraculaOrange {
|
|
--accent-color: #FFB86C;
|
|
--accent-color-hover: #FFBF7B;
|
|
--accent-color-active: #E6A661;
|
|
--accent-color-light: #FFC689;
|
|
--accent-color-visited: #CC9356;
|
|
}
|
|
|
|
.secDraculaPink {
|
|
--accent-color: #FF79C6;
|
|
--accent-color-hover: #FF86CC;
|
|
--accent-color-active: #E66DB2;
|
|
--accent-color-light: #FF94D1;
|
|
--accent-color-visited: #CC619E;
|
|
}
|
|
|
|
.secDraculaPurple {
|
|
--accent-color: #BD93F9;
|
|
--accent-color-hover: #C49EFA;
|
|
--accent-color-active: #AA84E0;
|
|
--accent-color-light: #CAA9FA;
|
|
--accent-color-visited: #9776C7;
|
|
}
|
|
|
|
.secDraculaRed {
|
|
--accent-color: #F55;
|
|
--accent-color-hover: #F66;
|
|
--accent-color-active: #E64D4D;
|
|
--accent-color-light: #F77;
|
|
--accent-color-visited: #C44;
|
|
}
|
|
|
|
.secDraculaYellow {
|
|
--accent-color: #F1FA8C;
|
|
--accent-color-hover: #F2FB98;
|
|
--accent-color-active: #D9E17E;
|
|
--accent-color-light: #F4FBA3;
|
|
--accent-color-visited: #C1C870;
|
|
}
|
|
|
|
.secCatppuccinMochaRosewater,
|
|
.secCatppuccinMochaFlamingo,
|
|
.secCatppuccinMochaPink,
|
|
.secCatppuccinMochaMauve,
|
|
.secCatppuccinMochaRed,
|
|
.secCatppuccinMochaMaroon,
|
|
.secCatppuccinMochaPeach,
|
|
.secCatppuccinMochaYellow,
|
|
.secCatppuccinMochaGreen,
|
|
.secCatppuccinMochaTeal,
|
|
.secCatppuccinMochaSky,
|
|
.secCatppuccinMochaSapphire,
|
|
.secCatppuccinMochaBlue,
|
|
.secCatppuccinMochaLavender {
|
|
--text-with-accent-color: #1e1e2e;
|
|
}
|
|
|
|
.secCatppuccinMochaRosewater {
|
|
--accent-color: #f5e0dc;
|
|
--accent-color-hover: #fceeec;
|
|
--accent-color-active: #e1c8c3;
|
|
--accent-color-light: #F8EAE7;
|
|
--accent-color-visited: #D3A197;
|
|
--accent-color-opacity1: rgb(245 224 220 / 4%);
|
|
--accent-color-opacity2: rgb(245 224 220 / 12%);
|
|
--accent-color-opacity3: rgb(245 224 220 / 16%);
|
|
--accent-color-opacity4: rgb(245 224 220 / 24%);
|
|
}
|
|
|
|
.secCatppuccinMochaFlamingo {
|
|
--accent-color: #f2cdcd;
|
|
--accent-color-hover: #f3d7d7;
|
|
--accent-color-active: #ddb7b7;
|
|
--accent-color-light: #F7DFDF;
|
|
--accent-color-visited: #cf9898;
|
|
--accent-color-opacity1: rgb(242 205 205 / 4%);
|
|
--accent-color-opacity2: rgb(242 205 205 / 12%);
|
|
--accent-color-opacity3: rgb(242 205 205 / 16%);
|
|
--accent-color-opacity4: rgb(242 205 205 / 24%);
|
|
}
|
|
|
|
.secCatppuccinMochaPink {
|
|
--accent-color: #f5c2e7;
|
|
--accent-color-hover: #f3cee9;
|
|
--accent-color-active: #dca3cd;
|
|
--accent-color-light: #f4dbed;
|
|
--accent-color-visited: #d28fc0;
|
|
--accent-color-opacity1: rgb(245 194 231 / 4%);
|
|
--accent-color-opacity2: rgb(245 194 231 / 12%);
|
|
--accent-color-opacity3: rgb(245 194 231 / 16%);
|
|
--accent-color-opacity4: rgb(245 194 231 / 24%);
|
|
}
|
|
|
|
.secCatppuccinMochaMauve {
|
|
--accent-color: #cba6f7;
|
|
--accent-color-hover: #d4b7f8;
|
|
--accent-color-active: #b38fdf;
|
|
--accent-color-light: #D6B9F9;
|
|
--accent-color-visited: #A171DA;
|
|
--accent-color-opacity1: rgb(203 166 247 / 4%);
|
|
--accent-color-opacity2: rgb(203 166 247 / 12%);
|
|
--accent-color-opacity3: rgb(203 166 247 / 16%);
|
|
--accent-color-opacity4: rgb(203 166 247 / 24%);
|
|
}
|
|
|
|
.secCatppuccinMochaRed {
|
|
--accent-color: #f38ba8;
|
|
--accent-color-hover: #f399b2;
|
|
--accent-color-active: #de7693;
|
|
--accent-color-light: #F5A3BA;
|
|
--accent-color-visited: #D56C89;
|
|
--accent-color-opacity1: rgb(243 139 168 / 4%);
|
|
--accent-color-opacity2: rgb(243 139 168 / 12%);
|
|
--accent-color-opacity3: rgb(243 139 168 / 16%);
|
|
--accent-color-opacity4: rgb(243 139 168 / 24%);
|
|
}
|
|
|
|
.secCatppuccinMochaMaroon {
|
|
--accent-color: #eba0ac;
|
|
--accent-color-hover: #ebb4bd;
|
|
--accent-color-active: #d68895;
|
|
--accent-color-light: #F0B7C0;
|
|
--accent-color-visited: #C86A79;
|
|
--accent-color-opacity1: rgb(235 160 172 / 4%);
|
|
--accent-color-opacity2: rgb(235 160 172 / 12%);
|
|
--accent-color-opacity3: rgb(235 160 172 / 16%);
|
|
--accent-color-opacity4: rgb(235 160 172 / 24%);
|
|
}
|
|
|
|
.secCatppuccinMochaPeach {
|
|
--accent-color: #fab387;
|
|
--accent-color-hover: #f7bd99;
|
|
--accent-color-active: #e1996d;
|
|
--accent-color-light: #FBC4A2;
|
|
--accent-color-visited: #D78A5B;
|
|
--accent-color-opacity1: rgb(250 179 135 / 4%);
|
|
--accent-color-opacity2: rgb(250 179 135 / 12%);
|
|
--accent-color-opacity3: rgb(250 179 135 / 16%);
|
|
--accent-color-opacity4: rgb(250 179 135 / 24%);
|
|
}
|
|
|
|
.secCatppuccinMochaYellow {
|
|
--accent-color: #f9e2af;
|
|
--accent-color-hover: #f9e7bf;
|
|
--accent-color-active: #dec48d;
|
|
--accent-color-light: #FBECCB;
|
|
--accent-color-visited: #D5B05D;
|
|
--accent-color-opacity1: rgb(249 226 175 / 4%);
|
|
--accent-color-opacity2: rgb(249 226 175 / 12%);
|
|
--accent-color-opacity3: rgb(249 226 175 / 16%);
|
|
--accent-color-opacity4: rgb(249 226 175 / 24%);
|
|
}
|
|
|
|
.secCatppuccinMochaGreen {
|
|
--accent-color: #a6e3a1;
|
|
--accent-color-hover: #b6e3b2;
|
|
--accent-color-active: #86c780;
|
|
--accent-color-light: #BCEAB8;
|
|
--accent-color-visited: #6ED166;
|
|
--accent-color-opacity1: rgb(166 227 161 / 4%);
|
|
--accent-color-opacity2: rgb(166 227 161 / 12%);
|
|
--accent-color-opacity3: rgb(166 227 161 / 16%);
|
|
--accent-color-opacity4: rgb(166 227 161 / 24%);
|
|
}
|
|
|
|
.secCatppuccinMochaTeal {
|
|
--accent-color: #94e2d5;
|
|
--accent-color-hover: #a1dfd5;
|
|
--accent-color-active: #6fc5b7;
|
|
--accent-color-light: #AFE9DF;
|
|
--accent-color-visited: #5CCCB9;
|
|
--accent-color-opacity1: rgb(148 226 213 / 4%);
|
|
--accent-color-opacity2: rgb(148 226 213 / 12%);
|
|
--accent-color-opacity3: rgb(148 226 213 / 16%);
|
|
--accent-color-opacity4: rgb(148 226 213 / 24%);
|
|
}
|
|
|
|
.secCatppuccinMochaSky {
|
|
--accent-color: #89dceb;
|
|
--accent-color-hover: #99dfeb;
|
|
--accent-color-active: #68bcca;
|
|
--accent-color-light: #9FE3EF;
|
|
--accent-color-visited: #64C2D3;
|
|
--accent-color-opacity1: rgb(137 220 235 / 4%);
|
|
--accent-color-opacity2: rgb(137 220 235 / 12%);
|
|
--accent-color-opacity3: rgb(137 220 235 / 16%);
|
|
--accent-color-opacity4: rgb(137 220 235 / 24%);
|
|
}
|
|
|
|
.secCatppuccinMochaSapphire {
|
|
--accent-color: #74c7ec;
|
|
--accent-color-hover: #84c7e6;
|
|
--accent-color-active: #59a9cf;
|
|
--accent-color-light: #93D4F0;
|
|
--accent-color-visited: #6AB6D7;
|
|
--accent-color-opacity1: rgb(116 199 236 / 4%);
|
|
--accent-color-opacity2: rgb(116 199 236 / 12%);
|
|
--accent-color-opacity3: rgb(116 199 236 / 16%);
|
|
--accent-color-opacity4: rgb(116 199 236 / 24%);
|
|
}
|
|
|
|
.secCatppuccinMochaBlue {
|
|
--accent-color: #89b4fa;
|
|
--accent-color-hover: #9bbef6;
|
|
--accent-color-active: #6593df;
|
|
--accent-color-light: #A7C7FB;
|
|
--accent-color-visited: #739CDD;
|
|
--accent-color-opacity1: rgb(137 220 235 / 4%);
|
|
--accent-color-opacity2: rgb(137 220 235 / 12%);
|
|
--accent-color-opacity3: rgb(137 220 235 / 16%);
|
|
--accent-color-opacity4: rgb(137 220 235 / 24%);
|
|
}
|
|
|
|
.secCatppuccinMochaLavender {
|
|
--accent-color: #b4befe;
|
|
--accent-color-hover: #c9d0ff;
|
|
--accent-color-active: #8d98e4;
|
|
--accent-color-light: #D2D8FE;
|
|
--accent-color-visited: #96A1E9;
|
|
--accent-color-opacity1: rgb(180 190 254 / 4%);
|
|
--accent-color-opacity2: rgb(180 190 254 / 12%);
|
|
--accent-color-opacity3: rgb(180 190 254 / 16%);
|
|
--accent-color-opacity4: rgb(180 190 254 / 24%);
|
|
}
|
|
|
|
/* region destructive color for red color themes
|
|
using :has(.app) to increase specificity */
|
|
.mainRed:has(.app), .secRed:has(.app), .mainDraculaRed:has(.app), .secDraculaRed:has(.app) {
|
|
--destructive-color: #9C27B0;
|
|
--destructive-text-color: #FFF;
|
|
--destructive-hover-color: #8E24AA;
|
|
--destructive-active-color: #6A1B9A;
|
|
}
|
|
|
|
/* Deal with theme conflict on destructive colors */
|
|
.mainRed.secPurple,
|
|
.mainRed.secDeepPurple,
|
|
.mainRed.secDraculaPurple,
|
|
.mainDraculaRed.secPurple,
|
|
.mainDraculaRed.secDeepPurple,
|
|
.mainDraculaRed.secDraculaPurple,
|
|
.mainPurple.secRed,
|
|
.mainPurple.secDraculaRed,
|
|
.mainDeepPurple.secRed,
|
|
.mainDeepPurple.secDraculaRed,
|
|
.mainDraculaPurple.secRed,
|
|
.mainDraculaPurple.secDraculaRed {
|
|
--destructive-color: #FF9800;
|
|
--destructive-text-color: #FFF;
|
|
--destructive-hover-color: #FB8C00;
|
|
--destructive-active-color: #EF6C00;
|
|
}
|
|
|
|
body[dir='ltr'] {
|
|
--ltr-or-rtl: ltr;
|
|
--float-left-ltr-rtl-value: left;
|
|
--float-right-ltr-rtl-value: right;
|
|
--horizontal-directionality-coefficient: 1;
|
|
}
|
|
|
|
body[dir='rtl'] {
|
|
--ltr-or-rtl: rtl;
|
|
--float-left-ltr-rtl-value: right;
|
|
--float-right-ltr-rtl-value: left;
|
|
--horizontal-directionality-coefficient: -1;
|
|
}
|
|
|
|
body[dir='rtl'] [data-prefix="fas"]:not([data-icon="magnifying-glass"], [data-icon="circle-question"]) {
|
|
transform: scale(-1,1);
|
|
}
|
|
|
|
/* Arabic, Kurdish, Persian and Urdu have a reversed question mark, but not Hebrew and Yiddish */
|
|
html[lang='ar'] [data-prefix="fas"][data-icon="circle-question"],
|
|
html[lang='fa'] [data-prefix="fas"][data-icon="circle-question"],
|
|
html[lang='ku'] [data-prefix="fas"][data-icon="circle-question"],
|
|
html[lang='ur'] [data-prefix="fas"][data-icon="circle-question"] {
|
|
transform: scale(-1, 1)
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
min-block-size: 100vh;
|
|
color: var(--primary-text-color);
|
|
background-color: var(--bg-color);
|
|
|
|
--red-500: #f44336;
|
|
}
|
|
|
|
.app {
|
|
color: var(--primary-text-color);
|
|
background-color: var(--bg-color);
|
|
}
|
|
|
|
/* stylelint-disable-next-line a11y/no-outline-none */
|
|
.hideOutlines *:focus {
|
|
outline: none;
|
|
}
|
|
|
|
/* stylelint-disable-next-line no-descending-specificity */
|
|
a:link {
|
|
color: var(--link-color);
|
|
}
|
|
|
|
/* stylelint-disable-next-line no-descending-specificity */
|
|
a:visited {
|
|
color: var(--link-visited-color);
|
|
}
|
|
|
|
@media (prefers-reduced-motion) {
|
|
* {
|
|
transition: none !important;
|
|
animation: none !important;
|
|
}
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
inline-size: 6px;
|
|
block-size: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--scrollbar-color);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:focus {
|
|
background: var(--scrollbar-color-hover);
|
|
}
|