142 lines
3.9 KiB
CSS
142 lines
3.9 KiB
CSS
:root {
|
|
/* https://ethanschoonover.com/solarized */
|
|
--base03: #002b36;
|
|
--base02: #073642;
|
|
--base01: #586e75;
|
|
--base00: #657b83;
|
|
--base0: #839496;
|
|
--base1: #93a1a1;
|
|
--base2: #eee8d5;
|
|
--base3: #fdf6e3;
|
|
--red: #dc322f;
|
|
--orange: #cb4b16;
|
|
--yellow: #b58900;
|
|
--green: #859900;
|
|
--cyan: #2aa198;
|
|
--blue: #268bd2;
|
|
--violet: #6c71c4;
|
|
--magenta: #d33682;
|
|
|
|
--accent-color: var(--magenta);
|
|
--border-radius: 25px;
|
|
|
|
--alert-error-border-color: var(--red);
|
|
--alert-success-border-color: var(--green);
|
|
--alert-warn-border-color: var(--yellow);
|
|
--background-color-active: color-mix(in srgb, var(--background-color-light), white 15%);
|
|
--background-color-dark-transparent: var(--background-color-dark);
|
|
--background-color-dark: var(--base03);
|
|
--background-color-hover: #ffffff10;
|
|
--background-color-light: var(--base02);
|
|
--background-color-middle: var(--base01);
|
|
--background-color-slider-shadow: rgba(0, 0, 0, 0.5);
|
|
--border-color-dark: var(--base03);
|
|
--border-color-favorite: var(--yellow);
|
|
--border-color-middle: var(--base02);
|
|
--border-color-unread: var(--orange);
|
|
--contrast-attention-background-color-hover: #ffffff10;
|
|
--contrast-attention-background-color: var(--accent-color);
|
|
--contrast-attention-font-color: var(--accent-color);
|
|
--contrast-background-color-active: var(--accent-color);
|
|
--contrast-background-color-hover: #ffffff10;
|
|
--contrast-background-color: var(--base03);
|
|
--contrast-background-font-color: var(--base1);
|
|
--contrast-border-color-hover: var(--base1);
|
|
--empty-feed-color: var(--base03);
|
|
--font-color-contrast: var(--base03);
|
|
--font-color-dark: var(--base02);
|
|
--font-color-error: var(--red);
|
|
--font-color-light: var(--base1);
|
|
--font-color-middle: var(--base0);
|
|
--frss-box-shadow-color-transparent: red;
|
|
--notification-bad-background-color: var(--red);
|
|
--notification-bad-border-color: var(--base03);
|
|
--notification-bad-font-color: var(--base03);
|
|
--notification-border-color: var(--base03);
|
|
--notification-good-background-color: var(--green);
|
|
--notification-good-border-color: var(--green);
|
|
}
|
|
|
|
html,
|
|
body {
|
|
/* Use system font */
|
|
font-family: sans-serif;
|
|
}
|
|
|
|
.btn {
|
|
/* Set button radius */
|
|
border-radius: var(--border-radius);
|
|
|
|
/* Fix vertical misalignment */
|
|
font-size: unset;
|
|
line-height: unset;
|
|
|
|
padding: 4px 12px;
|
|
}
|
|
|
|
.form-group.form-actions {
|
|
/* Disable blur filter */
|
|
backdrop-filter: none;
|
|
|
|
background: var(--background-color-dark);
|
|
}
|
|
|
|
.icon {
|
|
/* Apply #93a1a1 color filter to svg icons */
|
|
filter: brightness(0%) saturate(100%) invert(69%) sepia(10%) saturate(261%) hue-rotate(132deg) brightness(92%)
|
|
contrast(85%);
|
|
}
|
|
|
|
.tree-folder-title:hover button.dropdown-toggle .icon {
|
|
/* Fix bypassing color filter */
|
|
filter: brightness(2);
|
|
}
|
|
|
|
.group input:first-child,
|
|
.stick input:first-child,
|
|
.group .btn:first-child,
|
|
.stick .btn:first-child,
|
|
.group .dropdown:first-child .btn,
|
|
.stick .dropdown:first-child .btn {
|
|
/* Leftmost element in group */
|
|
border-radius: var(--border-radius) 0 0 var(--border-radius);
|
|
}
|
|
|
|
.group input:last-child,
|
|
.stick input:last-child,
|
|
.group .btn:last-child,
|
|
.stick .btn:last-child,
|
|
.group .dropdown:last-child .btn,
|
|
.stick .dropdown:last-child .btn {
|
|
/* Rightmost element in group */
|
|
border-radius: 0 var(--border-radius) var(--border-radius) 0;
|
|
}
|
|
|
|
.group .btn:only-child,
|
|
.stick .btn:only-child,
|
|
.group .dropdown:only-child .btn,
|
|
.stick .dropdown:only-child .btn {
|
|
/* Set radius for single-button group */
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
.flux .item .title,
|
|
.tree-folder-title .title {
|
|
/* Fix overlay with transparent background */
|
|
background: unset !important;
|
|
}
|
|
|
|
.tree-folder.active .tree-folder-title {
|
|
/* Set active category background */
|
|
background: var(--background-color-active);
|
|
}
|
|
|
|
.tree-folder-items:hover {
|
|
/* Fix entire section being highlighted */
|
|
background: unset;
|
|
}
|
|
|
|
.tree-folder-items .item:hover {
|
|
/* Set background color on feed hover */
|
|
background: var(--background-color-hover);
|
|
}
|