mirror of
https://git.sr.ht/~azikx/userstyles
synced 2024-10-30 07:26:19 +00:00
368 lines
9.1 KiB
CSS
368 lines
9.1 KiB
CSS
/* ==UserStyle==
|
|
@name NixOS Wiki paradisa
|
|
@namespace github.com/axax-loll/userstyles/
|
|
@homepageURL https://github.com/axax-loll/userstyles/tree/main
|
|
@version 1.0.1
|
|
@updateURL https://github.com/axax-loll/userstyles/tree/main/nixos/nixos-wiki.css
|
|
@supportURL https://github.com/axax-loll/userstyles/tree/main
|
|
@description Paradise for NixOS Wiki
|
|
@author azikx
|
|
@license MIT
|
|
|
|
@preprocessor less
|
|
@var select darkFlavor "Dark Flavor" ["paradisa:paradisa"]
|
|
@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"]
|
|
==/UserStyle== */
|
|
|
|
@-moz-document domain('nixos.wiki') {
|
|
@import url("https://python.paradisa.com/pygments/paradisa-variables.important.css");
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
#paradisa(@darkFlavor, @accentColor);
|
|
}
|
|
}
|
|
|
|
#paradisa(@lookup, @accent) {
|
|
@rosewater: @paradisa[@@lookup][@rosewater];
|
|
@flamingo: @paradisa[@@lookup][@flamingo];
|
|
@pink: @paradisa[@@lookup][@pink];
|
|
@mauve: @paradisa[@@lookup][@mauve];
|
|
@red: @paradisa[@@lookup][@red];
|
|
@maroon: @paradisa[@@lookup][@maroon];
|
|
@peach: @paradisa[@@lookup][@peach];
|
|
@yellow: @paradisa[@@lookup][@yellow];
|
|
@green: @paradisa[@@lookup][@green];
|
|
@teal: @paradisa[@@lookup][@teal];
|
|
@sky: @paradisa[@@lookup][@sky];
|
|
@sapphire: @paradisa[@@lookup][@sapphire];
|
|
@blue: @paradisa[@@lookup][@blue];
|
|
@lavender: @paradisa[@@lookup][@lavender];
|
|
@text: @paradisa[@@lookup][@text];
|
|
@subtext1: @paradisa[@@lookup][@subtext1];
|
|
@subtext0: @paradisa[@@lookup][@subtext0];
|
|
@overlay2: @paradisa[@@lookup][@overlay2];
|
|
@overlay1: @paradisa[@@lookup][@overlay1];
|
|
@overlay0: @paradisa[@@lookup][@overlay0];
|
|
@surface2: @paradisa[@@lookup][@surface2];
|
|
@surface1: @paradisa[@@lookup][@surface1];
|
|
@surface0: @paradisa[@@lookup][@surface0];
|
|
@base: @paradisa[@@lookup][@base];
|
|
@mantle: @paradisa[@@lookup][@mantle];
|
|
@crust: @paradisa[@@lookup][@crust];
|
|
@accent-color: @paradisa[@@lookup][@@accent];
|
|
|
|
--ctp-rosewater: @rosewater;
|
|
--ctp-flamingo: @flamingo;
|
|
--ctp-pink: @pink;
|
|
--ctp-mauve: @mauve;
|
|
--ctp-red: @red;
|
|
--ctp-maroon: @maroon;
|
|
--ctp-peach: @peach;
|
|
--ctp-yellow: @yellow;
|
|
--ctp-green: @green;
|
|
--ctp-teal: @teal;
|
|
--ctp-sky: @sky;
|
|
--ctp-sapphire: @sapphire;
|
|
--ctp-blue: @blue;
|
|
--ctp-lavender: @lavender;
|
|
--ctp-text: @text;
|
|
--ctp-subtext1: @subtext1;
|
|
--ctp-subtext0: @subtext0;
|
|
--ctp-overlay2: @overlay2;
|
|
--ctp-overlay1: @overlay1;
|
|
--ctp-overlay0: @overlay0;
|
|
--ctp-surface2: @surface2;
|
|
--ctp-surface1: @surface1;
|
|
--ctp-surface0: @surface0;
|
|
--ctp-base: @base;
|
|
--ctp-mantle: @mantle;
|
|
--ctp-crust: @crust;
|
|
|
|
color-scheme: if(@lookup = latte, light, dark);
|
|
|
|
::selection {
|
|
background-color: fade(@accent-color, 30%);
|
|
}
|
|
|
|
input,
|
|
textarea {
|
|
&::placeholder {
|
|
color: @subtext0 !important;
|
|
}
|
|
}
|
|
|
|
&[data-darkreader-scheme="dark"] body::before {
|
|
content: "Please turn off DarkReader for this domain when paradisa for NixOS Wiki is active.";
|
|
background: @red;
|
|
box-shadow:
|
|
0 4px 16px fade(@crust, 10%),
|
|
0 8px 32px fade(@crust, 5%);
|
|
color: @crust;
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
z-index: 99999;
|
|
max-width: 24rem;
|
|
padding: 0.75rem;
|
|
margin: 0.5rem;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
body {
|
|
background-color: @base;
|
|
}
|
|
hr {
|
|
border-color: @surface2;
|
|
}
|
|
.navbar-default {
|
|
color: @text;
|
|
background-color: @mantle !important;
|
|
background-image: none !important;
|
|
border-color: transparent !important;
|
|
|
|
.navbar-brand {
|
|
color: @blue;
|
|
&:hover {
|
|
color: @sky;
|
|
}
|
|
}
|
|
|
|
li {
|
|
a {
|
|
color: @text !important;
|
|
&:hover {
|
|
color: @subtext0 !important;
|
|
}
|
|
}
|
|
&.nav.open > a,
|
|
ul {
|
|
background-color: @surface0 !important;
|
|
background-image: none !important;
|
|
a:hover {
|
|
background-color: fade(@surface1, 50%) !important;
|
|
background-image: none !important;
|
|
}
|
|
}
|
|
}
|
|
.active > a {
|
|
color: @crust !important;
|
|
&:hover {
|
|
color: @base !important;
|
|
}
|
|
background: @blue !important;
|
|
}
|
|
}
|
|
|
|
.search-query.form-control {
|
|
color: @text;
|
|
background-color: @surface0;
|
|
border-color: @surface0;
|
|
}
|
|
|
|
* {
|
|
color: @text;
|
|
}
|
|
|
|
a {
|
|
color: @blue;
|
|
&:hover {
|
|
color: @sky;
|
|
}
|
|
&.new {
|
|
color: @red;
|
|
&:hover {
|
|
color: @maroon;
|
|
}
|
|
}
|
|
}
|
|
|
|
.panel {
|
|
background-color: @mantle;
|
|
border-color: @mantle;
|
|
.panel-heading {
|
|
color: @text;
|
|
background-color: @surface0 !important;
|
|
border-bottom-color: @surface2;
|
|
img {
|
|
& when not (@lookup = latte) {
|
|
filter: invert(100%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn-primary {
|
|
color: @crust;
|
|
background-color: @blue !important;
|
|
background-image: none !important;
|
|
border-color: @crust !important;
|
|
&:hover {
|
|
color: @crust !important;
|
|
background-color: @sky !important;
|
|
background-image: none !important;
|
|
}
|
|
}
|
|
|
|
table {
|
|
&,
|
|
* {
|
|
color: @text;
|
|
border-color: @overlay0 !important;
|
|
background-color: @mantle;
|
|
}
|
|
th {
|
|
&,
|
|
* {
|
|
background-color: @surface0 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
blockquote,
|
|
cite {
|
|
border-left-color: @pink !important;
|
|
}
|
|
|
|
cite a {
|
|
color: @pink;
|
|
&:hover {
|
|
color: @rosewater;
|
|
}
|
|
}
|
|
|
|
pre,
|
|
code {
|
|
box-shadow: none !important;
|
|
background-color: @mantle;
|
|
border-color: @crust;
|
|
}
|
|
pre {
|
|
color: @text;
|
|
}
|
|
code {
|
|
color: @rosewater;
|
|
}
|
|
|
|
*[style*="background-color: #C1E5FF"] {
|
|
color: @text !important;
|
|
background-color: fade(@blue, 15%) !important;
|
|
border-color: @blue !important;
|
|
}
|
|
|
|
*[style*="background-color: #FFD0B7"] {
|
|
color: @text !important;
|
|
background-color: fade(@peach, 15%) !important;
|
|
border-color: @peach !important;
|
|
}
|
|
|
|
*[style*="background: #F6F6F6"] {
|
|
color: @text !important;
|
|
background-color: fade(@overlay0, 15%) !important;
|
|
border-color: @overlay0 !important;
|
|
}
|
|
|
|
.suggestions {
|
|
.suggestions-result {
|
|
background-color: @mantle;
|
|
&:hover {
|
|
background-color: mix(@base, @mantle, 50%);
|
|
}
|
|
color: @text;
|
|
.highlight {
|
|
color: @accent-color;
|
|
}
|
|
}
|
|
.suggestions-results {
|
|
border-color: @surface0 !important;
|
|
}
|
|
.suggestions-special {
|
|
border-color: @surface0 !important;
|
|
background-color: @mantle;
|
|
&:hover {
|
|
background-color: mix(@accent-color, @mantle, 15%);
|
|
}
|
|
.special-label {
|
|
color: @subtext0;
|
|
}
|
|
.special-query {
|
|
color: @text;
|
|
}
|
|
}
|
|
}
|
|
|
|
.toc {
|
|
li.active > a {
|
|
border-left-color: @accent-color !important;
|
|
}
|
|
ul.nav a:hover {
|
|
background: @accent-color !important;
|
|
&,
|
|
* {
|
|
color: @crust !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.page-header {
|
|
border-bottom-color: @overlay2;
|
|
}
|
|
|
|
#catlinks {
|
|
background-color: @mantle;
|
|
border-color: @mantle;
|
|
}
|
|
|
|
#footer {
|
|
background-color: @mantle;
|
|
}
|
|
|
|
.mw-search-profile-tabs {
|
|
background-color: @base !important;
|
|
border-color: @base !important;
|
|
}
|
|
|
|
.search-types .current a {
|
|
color: @text;
|
|
}
|
|
|
|
.oo-ui-inputWidget-input {
|
|
background-color: @overlay2 !important;
|
|
color: @base;
|
|
}
|
|
|
|
.oo-ui-buttonElement-button {
|
|
background-color: @mantle !important;
|
|
color: @base !important;
|
|
border-color: @mantle !important;
|
|
}
|
|
|
|
.oo-ui-labelElement-label {
|
|
background-color: @mantle !important;
|
|
color: @text !important;
|
|
}
|
|
|
|
.oo-ui-floatableElement-floatable,
|
|
.oo-ui-widget:hover {
|
|
background-color: @mantle !important;
|
|
color: @text !important;
|
|
}
|
|
|
|
& when (@lookup = latte) {
|
|
.oo-ui-inputWidget-input {
|
|
background-color: @base !important;
|
|
color: @text;
|
|
}
|
|
.oo-ui-buttonElement-button {
|
|
background-color: @mantle !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* prettier-ignore */
|
|
@paradisa: {
|
|
@paradisa: { @rosewater: #BBB6B6; @flamingo: #A988B0; @pink: #A988B0; @mauve: #A988B0; @red: #B66467; @maroon: #B66467; @peach: #B66467; @yellow: #D9BC8C; @green: #8C977D; @teal: #8AA6A2; @sky: #8AA6A2; @sapphire: #8DA3B9; @blue: #8DA3B9; @lavender: #8DA3B9; @text: #E8E3E3; @subtext1: #BBB6B6; @subtext0: #BBB6B6; @overlay2: #424242; @overlay1: #424242; @overlay0: #424242; @surface2: #2E2E2E; @surface1: #2E2E2E; @surface0: #2E2E2E; @base: #151515; @mantle: #1F1F1F; @crust: #1F1F1F; };
|
|
}
|
|
|