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", "rhine:Rhine Lab": "rhine", "dahuang:Dahuang": "dahuang", "garden:Garden of Grotesqueries": "garden", "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); @font-face { font-family: "Open Dyslexic"; src: url(https://img.veryroundbird.house/userstyle-assets/OpenDyslexic-Regular.otf) format('opentype'); font-weight: normal; font-style: normal; } @font-face { font-family: "Open Dyslexic"; src: url(https://img.veryroundbird.house/userstyle-assets/OpenDyslexic-Italic.otf) format('opentype'); font-weight: normal; font-style: italic; } @font-face { font-family: "Open Dyslexic"; src: url(https://img.veryroundbird.house/userstyle-assets/OpenDyslexic-Bold.otf) format('opentype'); font-weight: bold; font-style: normal; } @font-face { font-family: "Open Dyslexic"; src: url(https://img.veryroundbird.house/userstyle-assets/OpenDyslexic-BoldItalic.otf) format('opentype'); font-weight: bold; font-style: italic; } 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; z-index: 1; } 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; z-index: 1; } } @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; z-index: 1; } 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; z-index: 1; } } @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%)); } } @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%)); } } @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) { * { --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; } 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; } } @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; z-index: 1; opacity: .8; filter: saturate(1.5) contrast(2); } &:before { mix-blend-mode: screen; } &: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 { 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) { * { --one: #c12a54; --two: #a12347; --three: #80827f; --four: #231e1d; --five: #f2f7f6; --six: #c48193; --seven: #1d1618; --eight: #f3a033; --nine: #5c1c2d; --background: #1d1618; --background-gradient: linear-gradient(135deg, var(--background) 0%); --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; } 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: 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; } } :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; } 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; } } }