133 lines
3.6 KiB
Plaintext
133 lines
3.6 KiB
Plaintext
/*
|
|
* Disroot flavor
|
|
*/
|
|
|
|
:root {
|
|
--disroot-dark-black: #1F222B;
|
|
--disroot-purple: #50162d;
|
|
--disroot-purple-lighter: #61273e; //#80264a;
|
|
--disroot-purple-even-lighter: #83495f; //#e7518e;
|
|
--disroot-purple-darker: #201c1c;
|
|
--disroot-green: #8eb726;
|
|
--disroot-green-lighter: #afcf60;
|
|
--disroot-green-even-lighter: #cde78c;
|
|
--disroot-green-darker: #71911e;
|
|
--disroot-blueish: #1f5c60;
|
|
--disroot-blueish-lighter: #38989f;
|
|
--color-btn-font: white;
|
|
--color-url-font: var(--disroot-green);
|
|
--color-url-visited-font: var(--disroot-blueish);
|
|
--color-header-background: var(--disroot-purple);
|
|
--color-btn-background: var(--disroot-purple);
|
|
--color-categories-item-selected-font: var(--disroot-purple-even-lighter);
|
|
--color-categories-item-border-selected: var(--disroot-purple-even-lighter);
|
|
--color-result-vim-arrow: var(--disroot-purple);
|
|
--color-result-link-font: var(--disroot-purple);
|
|
--color-result-link-font-highlight: var(--disroot-purple-even-lighter);
|
|
--color-result-link-visited-font: var(--disroot-green);
|
|
--color-toolkit-checkbox-onoff-on-mark-background: var(--disroot-purple);
|
|
--color-toolkit-checkbox-input-border: var(--disroot-purple);
|
|
--color-search-background-hover: var(--disroot-purple);
|
|
}
|
|
.dark-themes() {
|
|
--color-base-background: var(--disroot-dark-black);
|
|
--color-url-font: var(--disroot-green);
|
|
--color-url-visited-font: var(--disroot-blueish-lighter);
|
|
--color-header-background: var(--disroot-purple-darker);
|
|
--color-btn-background: var(--disroot-purple);
|
|
--color-btn-font: var(--color-base-font);
|
|
--color-categories-item-selected-font: var(--disroot-purple-even-lighter);
|
|
--color-categories-item-border-selected: var(--disroot-purple-even-lighter);
|
|
--color-result-vim-arrow: var(--disroot-purple);
|
|
--color-result-link-font: var(--disroot-purple-lighter);
|
|
--color-result-link-font-highlight: var(--disroot-purple-even-lighter);
|
|
--color-result-link-visited-font: var(--disroot-green);
|
|
--color-toolkit-checkbox-input-border: var(--disroot-purple-lighter);
|
|
--color-search-background-hover: var(--disroot-purple-lighter);
|
|
}
|
|
// Category color
|
|
.category label {
|
|
color: var(--color-btn-font);
|
|
}
|
|
|
|
// Navbar links in right corner only on results page
|
|
// (needed when using disroot color as navbar background)
|
|
.results_endpoint #links_on_top a,
|
|
.results_endpoint #links_on_top a:active *,
|
|
.results_endpoint #links_on_top a:hover *,
|
|
.results_endpoint #links_on_top a:link *,
|
|
.results_endpoint #links_on_top a:visited * {
|
|
color: #fff !important;
|
|
}
|
|
|
|
// Navbar magnifying glass color
|
|
#search_logo svg g circle,
|
|
#search_logo svg g path {
|
|
stroke: var(--disroot-purple-even-lighter);
|
|
}
|
|
|
|
#search_logo svg g rect {
|
|
fill: var(--disroot-purple-even-lighter);
|
|
}
|
|
|
|
//Logo
|
|
.index {
|
|
.title {
|
|
min-height: 8rem;
|
|
}
|
|
}
|
|
//top margin front page
|
|
|
|
#main_index {
|
|
margin-top: 13vh;
|
|
}
|
|
// Have a slightly more bright disroot purple color on logo png
|
|
// when in dark mode
|
|
.theme-dark .index .title {
|
|
filter: brightness(1.25);
|
|
}
|
|
|
|
.theme-dark img.logo {
|
|
filter: brightness(1.25);
|
|
}
|
|
// Dashboard
|
|
.dashboard {
|
|
width: 50%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-top: 60px;
|
|
}
|
|
|
|
.dashboard-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.image-dash {
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
width: 50%;
|
|
}
|
|
|
|
.dashlink-text {
|
|
//position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
text-align: center;
|
|
color: var(--color-base-font);
|
|
}
|
|
|
|
.image-dash img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
|
|
&:hover {
|
|
filter: grayscale(1);
|
|
}
|
|
}
|