distanthomes.user.css
· 4.7 KiB · CSS
Raw
/* ==UserStyle==
@name distanthomes.guide
@namespace github.com/openstyles/stylus
@version 1.0.0
@description A new userstyle
@author Me
@var select siteTheme "Site Theme" {
"default:Default*": "default",
"moon:Rose Pine Moon": "moon",
"dawn:Rose Pine Dawn": "dawn",
"mocha:Catppuccin Mocha": "mocha",
"latte:Catppuccin Latte": "latte",
"rhodes:Rhodes Island": "rhodes",
"rhine:Rhine Lab": "rhine",
"dahuang:Dahuang": "dahuang",
"avemuji:Ave Mujica": "avemuji"
}
@var select font "Font" ["Atkinson Hyperlegible", "Lexend", "Space Mono"]
==/UserStyle== */
@-moz-document domain("distanthomes.guide") {
html {
container: html;
}
@container html style(--siteTheme: dawn) {
* {
--background: #faf4ed;
--background-gradient: linear-gradient(135deg, #faf4ed 0%, #f2e9e1 50%, #fffaf3 100%);
--foreground: #464261;
--foreground-dark: #797593;
--accent: #b4637a;
--accent-hover: color-mix(in srgb-linear, var(--accent), var(--background) 30%);
--card-bg: #fffaf3;
--card-border: #cecacd;
--muted: #9893a5;
--autumn-red: #286983;
--autumn-orange: #56949f;
--autumn-amber: #907aa9;
--autumn-rust: #b4637a;
--autumn-gold: #ea9d34;
}
body:before {
content: "";
display: block;
width: 576px;
height: 240px;
border-radius: 100%;
background-image: linear-gradient(to right, color-mix(in srgb-linear, var(--autumn-gold), transparent 50%) 30%, color-mix(in srgb-linear, var(--autumn-rust), transparent 30%) 70%, var(--autumn-amber) 100%);
filter: blur(64px);
position: fixed;
transform: rotate(-25deg);
left: 50%;
top: -176px;
z-index: 1;
}
}
@container html style(--siteTheme: moon) {
* {
--background: #232136;
--background-gradient: linear-gradient(135deg, #232136 0%, #393552 50%, #2a273f 100%);
--foreground: #e0def4;
--foreground-dark: #908caa;
--accent: #eb6f92;
--accent-hover: color-mix(in srgb-linear, var(--accent), var(--background) 30%);
--card-bg: #2a273f;
--card-border: #56526e;
--muted: #6e6a86;
--autumn-red: #3e8fb0;
--autumn-orange: #9ccfd8;
--autumn-amber: #c4a7e7;
--autumn-rust: #eb6f92;
--autumn-gold: #f6c177;
}
body:before {
content: "";
display: block;
width: 576px;
height: 240px;
border-radius: 100%;
background-image: linear-gradient(to right, color-mix(in srgb-linear, var(--autumn-gold), transparent 50%) 30%, color-mix(in srgb-linear, var(--autumn-rust), transparent 30%) 70%, var(--autumn-amber) 100%);
filter: blur(64px);
position: fixed;
transform: rotate(-25deg);
left: 50%;
top: -176px;
z-index: 1;
}
}
@container html style(--siteTheme: mocha) {
* {
--background: #1e1e2e;
--background-gradient: linear-gradient(135deg, #1e1e2e 0%, #181825 50%, #11111b 100%);
--foreground: #cdd6f4;
--foreground-dark: #bac2de;
--accent: #89dceb;
--accent-hover: color-mix(in srgb-linear, var(--accent), var(--background) 30%);
--card-bg: #313244;
--card-border: #b4befe;
--muted: #a6adc8;
--autumn-red: #f38ba8;
--autumn-orange: #fab387;
--autumn-amber: #f9e2af;
--autumn-rust: #a6e3a1;
--autumn-gold: #b4befe;
}
}
@container html style(--siteTheme: latte) {
* {
--background: #eff1f5;
--background-gradient: linear-gradient(135deg, #eff1f5 0%, #e6e9ef 50%, #dce0e8 100%);
--foreground: #4c4f69;
--foreground-dark: #5c5f77;
--accent: #209fb5;
--accent-hover: color-mix(in srgb-linear, var(--accent), var(--background) 30%);
--card-bg: #ccd0da;
--card-border: #7287fd;
--muted: #6c6f85;
--autumn-red: #d20f39;
--autumn-orange: #fe640b;
--autumn-amber: #df8e1d;
--autumn-rust: #40a02b;
--autumn-gold: #7287fd;
}
}
@container html style(--siteTheme: rhodes) {
* {
--background: #404040;
--background-gradient: linear-gradient(135deg, #404040 0%, #404040 50%, #404040 100%);
--foreground: #FFFFFF;
--foreground-dark: #DDDDDD;
--accent: #18d1ff;
--accent-hover: color-mix(in srgb-linear, var(--accent), var(--background) 30%);
--card-bg: #555555;
--card-border: var(--accent);
--muted: #CCCCCC;
--autumn-red: #ffa700;
--autumn-orange: #ffe800;
--autumn-amber: #a6a6a6;
--autumn-rust: #fff;
--autumn-gold: #f00;
}
}
@container html style(--siteTheme: rhine) {
}
body {
font-family: var(--font-rubik), ui-sans-serif, system-ui, sans-serif;
}
}
| 1 | /* ==UserStyle== |
| 2 | @name distanthomes.guide |
| 3 | @namespace github.com/openstyles/stylus |
| 4 | @version 1.0.0 |
| 5 | @description A new userstyle |
| 6 | @author Me |
| 7 | @var select siteTheme "Site Theme" { |
| 8 | "default:Default*": "default", |
| 9 | "moon:Rose Pine Moon": "moon", |
| 10 | "dawn:Rose Pine Dawn": "dawn", |
| 11 | "mocha:Catppuccin Mocha": "mocha", |
| 12 | "latte:Catppuccin Latte": "latte", |
| 13 | "rhodes:Rhodes Island": "rhodes", |
| 14 | "rhine:Rhine Lab": "rhine", |
| 15 | "dahuang:Dahuang": "dahuang", |
| 16 | "avemuji:Ave Mujica": "avemuji" |
| 17 | } |
| 18 | @var select font "Font" ["Atkinson Hyperlegible", "Lexend", "Space Mono"] |
| 19 | ==/UserStyle== */ |
| 20 | |
| 21 | @-moz-document domain("distanthomes.guide") { |
| 22 | html { |
| 23 | container: html; |
| 24 | } |
| 25 | |
| 26 | @container html style(--siteTheme: dawn) { |
| 27 | * { |
| 28 | --background: #faf4ed; |
| 29 | --background-gradient: linear-gradient(135deg, #faf4ed 0%, #f2e9e1 50%, #fffaf3 100%); |
| 30 | --foreground: #464261; |
| 31 | --foreground-dark: #797593; |
| 32 | --accent: #b4637a; |
| 33 | --accent-hover: color-mix(in srgb-linear, var(--accent), var(--background) 30%); |
| 34 | --card-bg: #fffaf3; |
| 35 | --card-border: #cecacd; |
| 36 | --muted: #9893a5; |
| 37 | --autumn-red: #286983; |
| 38 | --autumn-orange: #56949f; |
| 39 | --autumn-amber: #907aa9; |
| 40 | --autumn-rust: #b4637a; |
| 41 | --autumn-gold: #ea9d34; |
| 42 | } |
| 43 | |
| 44 | body:before { |
| 45 | content: ""; |
| 46 | display: block; |
| 47 | width: 576px; |
| 48 | height: 240px; |
| 49 | border-radius: 100%; |
| 50 | background-image: linear-gradient(to right, color-mix(in srgb-linear, var(--autumn-gold), transparent 50%) 30%, color-mix(in srgb-linear, var(--autumn-rust), transparent 30%) 70%, var(--autumn-amber) 100%); |
| 51 | filter: blur(64px); |
| 52 | position: fixed; |
| 53 | transform: rotate(-25deg); |
| 54 | left: 50%; |
| 55 | top: -176px; |
| 56 | z-index: 1; |
| 57 | } |
| 58 | } |
| 59 | |
| 60 | @container html style(--siteTheme: moon) { |
| 61 | * { |
| 62 | --background: #232136; |
| 63 | --background-gradient: linear-gradient(135deg, #232136 0%, #393552 50%, #2a273f 100%); |
| 64 | --foreground: #e0def4; |
| 65 | --foreground-dark: #908caa; |
| 66 | --accent: #eb6f92; |
| 67 | --accent-hover: color-mix(in srgb-linear, var(--accent), var(--background) 30%); |
| 68 | --card-bg: #2a273f; |
| 69 | --card-border: #56526e; |
| 70 | --muted: #6e6a86; |
| 71 | --autumn-red: #3e8fb0; |
| 72 | --autumn-orange: #9ccfd8; |
| 73 | --autumn-amber: #c4a7e7; |
| 74 | --autumn-rust: #eb6f92; |
| 75 | --autumn-gold: #f6c177; |
| 76 | } |
| 77 | |
| 78 | body:before { |
| 79 | content: ""; |
| 80 | display: block; |
| 81 | width: 576px; |
| 82 | height: 240px; |
| 83 | border-radius: 100%; |
| 84 | background-image: linear-gradient(to right, color-mix(in srgb-linear, var(--autumn-gold), transparent 50%) 30%, color-mix(in srgb-linear, var(--autumn-rust), transparent 30%) 70%, var(--autumn-amber) 100%); |
| 85 | filter: blur(64px); |
| 86 | position: fixed; |
| 87 | transform: rotate(-25deg); |
| 88 | left: 50%; |
| 89 | top: -176px; |
| 90 | z-index: 1; |
| 91 | } |
| 92 | } |
| 93 | |
| 94 | @container html style(--siteTheme: mocha) { |
| 95 | * { |
| 96 | --background: #1e1e2e; |
| 97 | --background-gradient: linear-gradient(135deg, #1e1e2e 0%, #181825 50%, #11111b 100%); |
| 98 | --foreground: #cdd6f4; |
| 99 | --foreground-dark: #bac2de; |
| 100 | --accent: #89dceb; |
| 101 | --accent-hover: color-mix(in srgb-linear, var(--accent), var(--background) 30%); |
| 102 | --card-bg: #313244; |
| 103 | --card-border: #b4befe; |
| 104 | --muted: #a6adc8; |
| 105 | --autumn-red: #f38ba8; |
| 106 | --autumn-orange: #fab387; |
| 107 | --autumn-amber: #f9e2af; |
| 108 | --autumn-rust: #a6e3a1; |
| 109 | --autumn-gold: #b4befe; |
| 110 | } |
| 111 | } |
| 112 | |
| 113 | @container html style(--siteTheme: latte) { |
| 114 | * { |
| 115 | --background: #eff1f5; |
| 116 | --background-gradient: linear-gradient(135deg, #eff1f5 0%, #e6e9ef 50%, #dce0e8 100%); |
| 117 | --foreground: #4c4f69; |
| 118 | --foreground-dark: #5c5f77; |
| 119 | --accent: #209fb5; |
| 120 | --accent-hover: color-mix(in srgb-linear, var(--accent), var(--background) 30%); |
| 121 | --card-bg: #ccd0da; |
| 122 | --card-border: #7287fd; |
| 123 | --muted: #6c6f85; |
| 124 | --autumn-red: #d20f39; |
| 125 | --autumn-orange: #fe640b; |
| 126 | --autumn-amber: #df8e1d; |
| 127 | --autumn-rust: #40a02b; |
| 128 | --autumn-gold: #7287fd; |
| 129 | } |
| 130 | } |
| 131 | |
| 132 | @container html style(--siteTheme: rhodes) { |
| 133 | * { |
| 134 | --background: #404040; |
| 135 | --background-gradient: linear-gradient(135deg, #404040 0%, #404040 50%, #404040 100%); |
| 136 | --foreground: #FFFFFF; |
| 137 | --foreground-dark: #DDDDDD; |
| 138 | --accent: #18d1ff; |
| 139 | --accent-hover: color-mix(in srgb-linear, var(--accent), var(--background) 30%); |
| 140 | --card-bg: #555555; |
| 141 | --card-border: var(--accent); |
| 142 | --muted: #CCCCCC; |
| 143 | --autumn-red: #ffa700; |
| 144 | --autumn-orange: #ffe800; |
| 145 | --autumn-amber: #a6a6a6; |
| 146 | --autumn-rust: #fff; |
| 147 | --autumn-gold: #f00; |
| 148 | } |
| 149 | } |
| 150 | |
| 151 | @container html style(--siteTheme: rhine) { |
| 152 | |
| 153 | } |
| 154 | |
| 155 | body { |
| 156 | font-family: var(--font-rubik), ui-sans-serif, system-ui, sans-serif; |
| 157 | } |
| 158 | } |