veryroundbird / distanthomes.themes

/* ==UserStyle== @name distanthomes.themes @namespace git.gay/veryroundbird/distanthomes.themes @version 1.0.0 @description Theme set for the Distant Home's Guide Arknights story reader plus some styling tweak options @author Carly Smallbird @var select siteTheme "Site Theme \n Select 'Boring' for a visually-bland work-friendly experience." { "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", "rhodesdark:Rhodes Island Dark": "rhodesdark", "rhine:Rhine Lab": "rhine", "dahuang:Dahuang": "dahuang", "crimson:Crimson Solitaire": "crimson", "caerula:Caerula Arbor": "caerula", "garden:Garden of Grotesqueries": "garden", "sami:Expeditioners' Jǫklumarkar": "sami", "furnace:Furnaceside Fables": "furnace", "blackflow:Black Flow": "blackflow", "avemuji:Ave Mujica": "avemuji", "boring:Boring": "boring" } @var select font "Font" ["Atkinson Hyperlegible", "Alegreya Sans", "Bree Serif", "Cormorant", "Lexend", "Open-Dyslexic", "Space Mono"] @var select fancyfont "Fancy Font" ["Alegreya", "Bungee", "Climate Crisis", "Contrail One", "Croissant One", "Freehand", "Lemonada", "Righteous", "Srisakdi", "Unbounded", "Uncial Antiqua"] @var checkbox colorful "More Colors? \n Makes the interface more colorful." 0 @var checkbox unrounded "Force Unrounded Corners \n Some themes will force unrounded corners regardless." 0 ==/UserStyle== */ @-moz-document domain("distanthomes.guide") { @import url(https://fonts.bunny.net/css?family=alegreya-sans:400,400i,700,700i|atkinson-hyperlegible:400,400i,700,700i|cascadia-code:400,400i,700,700i|lexend:400,700|space-mono:400,400i,700,700i|alegreya:400|croissant-one:400|freehand:400|lemonada:400|righteous:400|srisakdi:400|unbounded:400|open-dyslexic:400,400i,700,700i|climate-crisis:400|contrail-one:400|bungee:400|uncial-antiqua:400|bree-serif:400,400i,700,700i|cormorant:400,400i,700,700i|gentium-book-plus:400,400i,700,700i); @import url('https://fonts.cdnfonts.com/css/open-dyslexic'); html { container: html; } @container html style(--colorful: 1) { h2 { color: var(--autumn-red) !important; } h3 { font-style: italic; color: var(--autumn-orange) !important; } .my-8:has(.bg-cover) { border: 3px var(--autumn-amber) solid !important; } .my-3.animate-fadeIn.relative { padding-left: calc(var(--spacing) * 4); padding-right: calc(var(--spacing) * 4); &:nth-child(2n+2) { padding: calc(var(--spacing) * 4); border-radius: var(--radius-xl); background-color: color-mix(in srgb-linear, var(--background), transparent 40%); } } .rounded-full.overflow-hidden { border-color: var(--autumn-orange) !important; } [class*="max-w-[95vw]"] { position: fixed !important; } } @container html style(--unrounded: 1) { * { --radius-2xl: 0; --radius-xl: 0; --radius-lg: 0; } } @container html style(--siteTheme: dawn) { * { --background: #faf4ed; --background-gradient: linear-gradient(135deg, #faf4ed 0%, #f2e9e1 50%, #fffaf3 100%); --foreground: #797593; --foreground-dark: #464261; --accent: #b4637a; --accent-hover: color-mix(in srgb-linear, var(--accent), var(--background) 30%); --card-bg: color-mix(in srgb-linear, #fffaf3, transparent 40%); --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; } body:after { content: ""; display: block; width: 1030px; height: 640px; border-radius: 100%; background-image: linear-gradient(to left, 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); right: 50%; bottom: -176px; } .fixed.inset-0.z-0.bg-cover.bg-center.transition-all.duration-1000 { background-color: var(--background); background-blend-mode: color-burn; } } @container html style(--siteTheme: moon) { * { --background: #232136; --background-gradient: linear-gradient(135deg, #232136 0%, #393552 50%, #2a273f 100%); --foreground: #908caa; --foreground-dark: #e0def4; --accent: #eb6f92; --accent-hover: color-mix(in srgb-linear, var(--accent), var(--background) 30%); --card-bg: color-mix(in srgb-linear, #2a273f, transparent 40%); --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; } body:after { content: ""; display: block; width: 1030px; height: 640px; border-radius: 100%; background-image: linear-gradient(to left, 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); right: 50%; bottom: -176px; } .fixed.inset-0.z-0.bg-cover.bg-center.transition-all.duration-1000 { background-color: var(--background); background-blend-mode: soft-light; } } @container html style(--siteTheme: mocha) { * { --background: #1e1e2e; --foreground: #cdd6f4; --foreground-dark: #bac2de; --accent: #89dceb; --accent-hover: color-mix(in srgb-linear, var(--accent), var(--background) 30%); --card-bg: color-mix(in srgb-linear, #313244, transparent 50%); --card-border: #f2cdcd; --muted: #a6adc8; --autumn-red: #f38ba8; --autumn-orange: #fab387; --autumn-amber: #f9e2af; --autumn-rust: #a6e3a1; --autumn-gold: #b4befe; --background-gradient: linear-gradient(120deg, color-mix(in srgb-linear, var(--background), var(--autumn-orange) 5%), color-mix(in srgb, var(--background), var(--autumn-gold) 10%)); } body:before { content: ""; width: 100%; height: 100vh; position: fixed; top: 0; left: 0; background-image: var(--background-gradient); z-index: 2; mix-blend-mode: overlay; } } @container html style(--siteTheme: latte) { * { --background: #eff1f5; --foreground: #4c4f69; --foreground-dark: #5c5f77; --accent: #209fb5; --accent-hover: color-mix(in srgb-linear, var(--accent), var(--background) 30%); --card-bg: color-mix(in srgb-linear, #ccd0da, transparent 50%); --card-border: #dc8a78; --muted: #6c6f85; --autumn-red: #d20f39; --autumn-orange: #fe640b; --autumn-amber: #df8e1d; --autumn-rust: #40a02b; --autumn-gold: #7287fd; --background-gradient: linear-gradient(120deg, color-mix(in srgb-linear, var(--background), var(--autumn-orange) 5%), color-mix(in srgb, var(--background), var(--autumn-gold) 10%)); } body:before { content: ""; width: 100%; height: 100vh; position: fixed; top: 0; left: 0; background-image: var(--background-gradient); z-index: 2; mix-blend-mode: overlay; } } @container html style(--siteTheme: rhodes) { * { --background: #18d1ff; --background-gradient: linear-gradient(135deg, #404040 0%, #404040 50%, #404040 100%); --foreground: #333333; --foreground-dark: #111111; --accent: #ffe800; --accent-hover: color-mix(in srgb-linear, var(--accent), var(--background) 30%); --card-bg: #DDDDDD; --card-border: var(--accent); --muted: #666666; --autumn-red: #ffa700; --autumn-orange: #ffe800; --autumn-amber: #a6a6a6; --autumn-rust: #fff; --autumn-gold: #f00; } [style="background: var(--background-gradient);"] { background: none !important; } body { &:before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url(https://img.veryroundbird.house/userstyle-assets/ri-day.webp) !important; background-size: cover; pointer-events: none; z-index: 1 !important; } &:after { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--background); opacity: .5; mix-blend-mode: soft-light; pointer-events: none; z-index: 3 !important; } } main { position: relative; } main > :first-child { border: none !important; background-color: var(--card-bg); padding: calc(var(--spacing) * 8); &:before { content: ""; position: absolute; display: block; width: 90%; height: 8px; top: 0; left: 5%; background-color: var(--autumn-red); } > :first-child { position: relative; padding-bottom: calc(var(--spacing) * 8); border-bottom: none !important; &:after { content: ""; box-sizing: border-box; width: 30px; height: 30px; border: 3px var(--autumn-red) solid; transform-origin: center; transform: translate(-50%, -50%) rotate(-45deg); position: absolute; top: 100%; left: 50%; z-index: 2; } h2, h3, p { text-align: center; } h2, h3 { text-transform: uppercase; } h2 { font-size: 1.2rem; margin-bottom: 0; } h3 { font-size: 1.5rem; color: var(--foreground-dark) !important; margin-top: 0; } h3, p { font-style: normal; } h2, p { color: var(--foreground) !important; } p { letter-spacing: 2px; &:before { content: "[ "; } &:after { content: " ]"; } } } } .fixed.inset-0.z-0.bg-cover.bg-center.transition-all.duration-1000 { z-index: 2; } .w-full.p-4.rounded-2xl.transition-all.text-left { border-color: var(--background) !important; h3 { color: var(--foreground-dark) !important; } } .text-2xl.font-serif.lowercase.transition-all { color: var(--background) !important; } .text-xs.px-3.rounded-lg.transition-all.lowercase { border-color: var(--background) !important; &[style*="background: var(--accent);"] { background-color: var(--background) !important; } } h3.text-xl.font-serif.leading-snug.lowercase { color: var(--foreground-dark) !important; } .block.p-6.rounded-2xl.transition-all.shadow-lg { border-color: var(--background) !important; } .fixed.bottom-4.right-4.z-50.gap-3 { color: var(--foreground-dark) !important; border-left: 5px var(--background) solid; button.text-xl { color: var(--foreground-dark) !important; } } nav.items-center { border-color: var(--background) !important; } nav button.rounded-xl { color: var(--foreground-dark) !important; } footer { color: var(--card-bg) !important; } } @container html style(--siteTheme: rhodesdark) { * { --background: #1e7f98; --background-gradient: linear-gradient(135deg, #404040 0%, #404040 50%, #404040 100%); --foreground: #DDDDDD; --foreground-dark: #EEEEEE; --accent: #ffe800; --accent-hover: color-mix(in srgb-linear, var(--accent), var(--background) 30%); --card-bg: #111111; --card-border: var(--accent); --muted: #AAAAAA; --autumn-red: #ffa700; --autumn-orange: #ffe800; --autumn-amber: #a6a6a6; --autumn-rust: #fff; --autumn-gold: #f00; } [style="background: var(--background-gradient);"] { background: none !important; } body { &:before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url(https://img.veryroundbird.house/userstyle-assets/ri-night.webp) !important; background-size: cover; pointer-events: none; z-index: 1 !important; } &:after { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--background); opacity: .5; mix-blend-mode: soft-light; pointer-events: none; z-index: 3 !important; } } main > :first-child { border: none !important; background-color: var(--card-bg); padding: calc(var(--spacing) * 8); &:before { content: ""; position: absolute; display: block; width: 90%; height: 8px; top: 0; left: 5%; background-color: var(--autumn-red); } > :first-child { position: relative; padding-bottom: calc(var(--spacing) * 8); border-bottom: none !important; &:after { content: ""; box-sizing: border-box; width: 30px; height: 30px; border: 3px var(--autumn-red) solid; transform-origin: center; transform: translate(-50%, -50%) rotate(-45deg); position: absolute; top: 100%; left: 50%; z-index: 2; } h2, h3, p { text-align: center; } h2, h3 { text-transform: uppercase; } h2 { font-size: 1.2rem; margin-bottom: 0; } h3 { font-size: 1.5rem; color: var(--foreground-dark) !important; margin-top: 0; } h3, p { font-style: normal; } h2, p { color: var(--foreground) !important; } p { letter-spacing: 2px; &:before { content: "[ "; } &:after { content: " ]"; } } } } .fixed.inset-0.z-0.bg-cover.bg-center.transition-all.duration-1000 { z-index: 2; } .fixed.bottom-4.right-4.z-50.gap-3 { color: var(--card-bg) !important; border-left: 5px var(--background) solid; button.text-xl { color: var(--card-bg) !important; } } nav.items-center { border-color: var(--background) !important; } nav button.rounded-xl { color: var(--card-bg) !important; } } @container html style(--siteTheme: rhine) { * { --radius-2xl: 0 !important; --radius-xl: 0 !important; --radius-lg: 0 !important; --background: #111111; --background-gradient: repeating-linear-gradient(to bottom, #111111aa 0 2px, #D7C7A511 3px 4px, #111111aa 5px); --foreground: #D7824E; --foreground-dark: #111111; --accent: #E8B359; --accent-hover: color-mix(in srgb-linear, var(--accent), var(--background) 30%); --card-bg: #E3DACA; --card-border: var(--accent); --muted: #333333; --autumn-red: #E8B359; --autumn-orange: #963A37; --autumn-amber: #94BFAF; --autumn-rust: #F7EFE0; --autumn-gold: #D7C7A5; } body:before { content: ""; width: 100%; height: 100vh; position: fixed; top: 0; left: 0; background-image: var(--background-gradient); } main > :first-child { border-left: 0 !important; border-right: 0 !important; &:before, &:after { content: ""; width: 100%; left: 0; height: 5px; position: absolute; background-image: linear-gradient(to right, var(--autumn-red), var(--autumn-red) 33.2%, var(--autumn-orange) 33.3%, var(--autumn-orange) 66.5%, var(--autumn-amber) 66.6%, var(--autumn-amber)); } &:before { top: -2px; } &:after { bottom: 2px; } h2 { color: var(--foreground-dark) !important; text-transform: uppercase; text-align: center; } h3 { text-transform: uppercase; text-align: center; font-style: normal; } .text-xs.mt-2.italic.opacity-70.lowercase { text-align: center; } } .flex.flex-col.gap-2.items-center.mb-6 { padding: calc(var(--spacing) * 4) 0; h2 { color: var(--card-bg) !important; } } @container html style(--colorful: 1) { .my-3.animate-fadeIn.relative:nth-child(2n+2) { .font-bold, .leading-relaxed { color: var(--autumn-rust) !important; } } } } @container html style(--siteTheme: garden) { /* background image credit: https://unsplash.com/@ksushlapush */ * { --background: #E96995; --background-gradient: linear-gradient(135deg, #E96995 0%, #E96995 50%, #E96995 100%); --foreground: #555555; --foreground-dark: #333233; --accent: #5adeff; --accent-hover: color-mix(in srgb-linear, var(--accent), var(--background) 30%); --card-bg: #FEFEFE; --card-border: var(--accent); --muted: #8A8B8A; --autumn-red: #B47890; --autumn-orange: #4FA0B4; --autumn-amber: #8A8B8A; --autumn-rust: #a6a6a6; --autumn-gold: #f00; } body { &:before, &:after { content: ""; width: 100vw; height: 100vh; top: 0; left: 0; position: fixed; background-image: url(https://img.veryroundbird.house/userstyle-assets/kseniya-lapteva-6iUiRv_RX8w-unsplash.webp); background-size: cover; background-attachment: fixed; opacity: .8; pointer-events: none; filter: saturate(1.5) contrast(2); } &:before { background-color: var(--background); background-blend-mode: screen; mix-blend-mode: soft-light; } &:after { background-color: var(--accent); background-blend-mode: screen; transform: rotate(180deg) scaleX(-1); mix-blend-mode: multiply; } } .max-w-3xl h2 { color: var(--card-bg) !important; } main > :first-child { background-color: color-mix(in srgb-linear, var(--card-bg), transparent 40%) !important; backdrop-filter: blur(5px); border-radius: 0 !important; border-width: 0 !important; } main > :first-child > :first-child.mb-6.pb-4 { background-color: var(--foreground); padding: calc(var(--spacing) * 4); border-bottom: none !important; margin: calc(var(--spacing) * -4); margin-bottom: calc(var(--spacing) * 4); h2, h3, p { color: var(--card-bg) !important; } h2, h3 { text-transform: uppercase; } h3 { font-style: normal; } & > * { color: var(--card-bg); } } } @container html style(--siteTheme: dahuang) { } @container html style(--siteTheme: avemuji) { /* Background Image Credit: https://unsplash.com/@splashabout */ * { --one: #c12a54; --two: #a12347; --three: #80827f; --four: #231e1d; --five: #f2f7f6; --six: #c48193; --seven: #1d1618; --eight: #f3a033; --nine: #5c1c2d; --radius-2xl: 0 !important; --radius-xl: 0 !important; --radius-lg: 0 !important; --background: #1d1618; --background-gradient: linear-gradient(to bottom, #5c1c2d, var(--background) 50%); --foreground: #dce2e1; --foreground-dark: #f2f7f6; --accent: #c12a54; --accent-hover: color-mix(in srgb-linear, var(--accent), var(--background) 30%); --card-bg: #231e1d; --card-border: #a12347; --muted: #80827f; --autumn-red: #c48193; --autumn-orange: #f3a033; --autumn-amber: #5c1c2d; --autumn-rust: #8f0000; --autumn-gold: #968500; } body:before { content:""; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-size: cover; background-image: url(https://img.veryroundbird.house/userstyle-assets/nareeta-martin-S_06N663vig-unsplash.webp), var(--background-gradient); background-blend-mode: multiply; mix-blend-mode: multiply; opacity: 0.75; z-index: 1; } main > :first-child { > :first-child { border-color: var(--autumn-orange) !important; > h2, > h3, > p { text-align: center; text-transform: none; } > h2 { font-size: 1rem; font-family: var(--font-rubik); } > h3 { font-size: 2rem; font-style: normal; } } } main > :first-child:before { content: ""; width: 50px; height: 50px; position: absolute; top: 0; left: 0; background-image: url(https://img.veryroundbird.house/userstyle-assets/corner.webp); background-size: contain; transform: rotate(90deg); } main > :first-child:after { content: ""; width: 50px; height: 50px; position: absolute; top: 0; right: 0; background-image: url(https://img.veryroundbird.house/userstyle-assets/corner.webp); background-size: contain; transform: rotate(180deg); } .fixed.bottom-4.right-4.z-50 { color: var(--foreground-dark) !important; } } @container html style(--siteTheme: crimson) { } @container html style(--siteTheme: furnace) { * { --background: #762D3E; --background-gradient: linear-gradient(135deg, #762D3E 0%, #393B3C 50%, #333534 100%); --foreground: #E3D7AC; --foreground-dark: #F3F2E8; --accent: #4367AB; --accent-hover: color-mix(in srgb-linear, var(--accent), var(--background) 30%); --card-bg: #333534; --card-border: var(--accent); --muted: #8A8B8A; --autumn-red: #A76251; --autumn-orange: #9C3327; --autumn-amber: #517BAF; --autumn-rust: #762D3E; --autumn-gold: #4367AB; } } @container html style(--siteTheme: caerula) { } @container html style(--siteTheme: sami) { } @container html style(--siteTheme: blackflow) { } @container html style(--siteTheme: boring) { * { --background: #FFFFFF; --background-gradient: linear-gradient(135deg, #FFFFFF 0%); --foreground: #222222; --foreground-dark: #000000; --accent: #1a539a; --accent-hover: color-mix(in srgb-linear, var(--accent), var(--background) 30%); --card-bg: #FFFFFF; --card-border: #DDDDDD; --muted: #666666; --autumn-red: #687e9a; --autumn-orange: #4FA0B4; --autumn-amber: #8A8B8A; --autumn-rust: #8f0000; --autumn-gold: #968500; --tw-shadow-color: transparent; } body:before { content: ""; width: 100%; height: 100vh; background-color: var(--background); z-index: 2; position: fixed; } } :root { --font-rubik: var(--font); --font-rye: var(--fancyfont); } body { --font-rubik: var(--font) !important; --font-rye: var(--fancyfont) !important; font-family: var(--font), ui-sans-serif, system-ui, sans-serif; &:before, &:after { z-index: 2; } } @container html not style(--siteTheme: default) { .flex.flex-wrap.px-2 { justify-content: center; margin-top: calc(var(--spacing) * 8) !important; } .fixed.inset-0.z-0.bg-cover.bg-center.transition-all.duration-1000 { z-index: 1; } header, main, footer { z-index: 5; position: relative; } main > :first-child { backdrop-filter: blur(20px); } .fixed.top-4.left-4.z-50.w-10.h-10 { background-color: var(--card-bg) !important; } .fixed.bottom-4.right-4.z-50 { background-color: var(--card-border) !important; color: var(--background) !important; button { color: var(--background) !important; } } } }