From 05f44b91743b3350f9ea2b6d84db9521a18c7ab5 Mon Sep 17 00:00:00 2001 From: revengeday Date: Sat, 19 Oct 2024 21:33:13 +0000 Subject: [PATCH] Add custom.css --- custom.css | 304 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 304 insertions(+) create mode 100644 custom.css diff --git a/custom.css b/custom.css new file mode 100644 index 0000000..a8a4a2e --- /dev/null +++ b/custom.css @@ -0,0 +1,304 @@ +:root { + --primary-color: #1d0427; + --secondary-color: #13ed9a; + --dropdown-border-color: #320640; + --dropdown-background-color: rgba(29,4,39,.9); + --modal-background-color: rgba(29,4,39,.7); + --modal-background-variant-color: rgba(46,7,48,.7); + --modal-border-color: #320640; + --background-border-color: #320640; + --background-color: #1d0427; + --background-color-tint: rgba(29,4,39,.9); + --surface-background-color: #260635; + --surface-variant-background-color: #320640; + --surface-variant-active-background-color: #3b0659; + --on-surface-color: rgba(46,7,48,.5); + --media-outline-color: rgba(29,4,39,.15); + --error-background-color: #b51f3b; + --error-active-background-color: #ce2442; +} + +body { + background: var(--background-color); + font-family: monospace; +} + +.scrollbar-thumb { + background-color: #7b7a92; +} + +a:focus { + outline: 2px solid var(--secondary-color); +} + +.app-holder noscript,.error-boundary { + color: #ce3b63; +} + +.app-holder noscript a,.error-boundary a { + color: var(--secondary-color); +} + +.app-holder noscript__footer,.error-boundary__footer { + color: #7b7a92; +} + +.app-holder noscript__footer a,.error-boundary__footer a { + color: #7b7a92; +} + +.app-holder noscript button,.error-boundary button { + color: #7b7a92; +} + +.app-holder noscript button.copied,.error-boundary button.copied { + color: var(--secondary-color); +} + +.flash-message { + border: 1px solid var(--secondary-color); + color: var(--secondary-color); +} + +.flash-message.notice { + background: rgba(19,237,154,.25); + border: 1px solid rgba(19,237,154,.5); + color: var(--secondary-color); +} + +.flash-message.warning { + background: rgba(214,159,12,.25); + border: 1px solid rgba(214,159,12,.5); + color: #d69f0c; +} + +.flash-message.alert { + background: rgba(202,52,74,.1); + border: 1px solid rgba(202,52,74,.5); + color: #ca344a; +} + +.compose-form__highlightable { + background: #2a092e; + border-color: #3c0735; +} + +.compose-form__highlightable.active { + border-color: var(--secondary-color); +} + +.compose-form__warning { + background: #7a7a99; + color: var(--primary-color); +} + +.compose-form__warning strong { + color: var(--primary-color); +} + +.compose-form__warning a { + color: #7b7a92; +} + +.compose-form .autosuggest-textarea__textarea, .compose-form .spoiler-input__input { + background: var(--primary-color); + color: #d0bfe4; +} + +.compose-form .spoiler-input__input { + background: rgba(121,100,255,.1); + color: #b0a1ff; +} + +.compose-form__actions .icon-button:.active { + background: var(--primary-color); + color: var(--secondary-color); +} + +.compose-form__upload__warning .icon-button.active { + color: #ffbc3e; +} + +.compose-form__sensitive-button input[type=checkbox] { + border-color: var(--secondary-color); +} + +.compose-form__buttons .icon-button { + color: var(--secondary-color); +} + +.compose-form__poll__select__label { + color: var(--secondary-color); +} + +.dropdown-button { + border: 1px solid var(--secondary-color); + color: var(--secondary-color); +} + +.dropdown-button.active { + background: #4f3cb2; + border-color: #4f3cb2; + color: #fff; +} + +.search__input { + background: #2a092e; +} + +.button { + background: var(--secondary-color); + color: var(--primary-color); + transition: background 0.3s ease, color 0.3s ease; +} + +.button:hover { + background: var(--primary-color); + color: var(--secondary-color); +} + +.account__header__tabs__buttons .icon-button { + border: 1px solid var(--secondary-color); +} + +.icon-button { + color: var(--secondary-color); +} + +.icon-with-badge__badge { + background: var(--secondary-color); + color: var(--primary-color); +} + +.account__action-bar__tab.active { + border-bottom: 4px solid var(--secondary-color); +} + +.account__action-bar { + border-bottom: 1px solid #320640; + border-top: 1px solid #320640; +} + +.account__action-bar__tab { + border-inline-start: 1px solid #320640; +} + +.about__section.active .about__section__title { + border-radius: 10px 10px 0 0; +} + +.about__meta { + border: 1px solid var(--background-border-color); +} + +.about__section__title { + border-radius: 10px; + color: var(--secondary-color); + font-family: monospace; +} + +.about__header h1 { + font-size: 16px; + color: var(--secondary-color); + margin-bottom: 0px; + font-family: monospace; +} + +.about__header p { + color: #ffffff; +} + +.account__domain-pill { + background: var(--secondary-color); + color: var(--primary-color); +} + +.account__header__tabs__name h1 small span { + color: var(--secondary-color); +} + +.account__header__tabs__name h1 { + color: var(--secondary-color); +} +.button.button-tertiary { + border: 1px solid #13ed9a; + color: #13ed9a; +} +.button.button-tertiary:hover { + background-color: #1d0427; + color: #13ed9a; +} +/* === custom role colors === */ +.account-role { + position: relative; + margin-top: 2px !important; + z-index: 1; + --color-role-bg: hsl(225deg 10% 30%); + --color-role-border: hsl(227deg 16% 76%); + --color-role-bg-shine: hsl(227deg 16% 54%); + --color-role-border-shine: hsl(227deg 16% 10%); + color: color-mix(in srgb, white, var(--color-role-border)); + + /* moderator */ + &[data-account-role-id="1"] { + --color-role-border: hsl(149.12deg 34% 60.78%); + --color-role-border-shine: var(--secondary-color); + } + + /* owner */ + &[data-account-role-id="3"] { + --color-role-border: hsl(330deg 100% 50%); + --color-role-border-shine: hsl(254deg 100% 65%); + } + + /* supporter */ + &[data-account-role-id="34"] { + --color-role-border: hsl(187deg 98% 48%); + --color-role-border-shine: var(--secondary-color); + } +} + +@keyframes shine { + 0% { background-position: 100% 50%; } + 100% { background-position: 0% 50%; } +} + +.account-role::before, +.account-role::after { + content: ""; + position: absolute; + border-radius: inherit; + background-size: 300% 100%; + animation: shine 5000ms infinite; + background-position: -100% 50%; +} + +/* border */ +.account-role::before { + z-index: -2; + inset: -1px; + background-image: + linear-gradient(60deg, + transparent 0%, + transparent 40%, + color-mix(in srgb, var(--color-role-border-shine) 40%, transparent) 50%, + transparent 60%, + transparent 100% + ), + linear-gradient(var(--color-role-border), var(--color-role-border)); +} + +/* background */ +.account-role::after { + z-index: -1; + inset: 0px; + background-image: + linear-gradient(60deg, + transparent 0%, + transparent 45%, + color-mix(in srgb, var(--color-role-bg-shine) 20%, transparent) 55%, + transparent 65%, + transparent 100% + ), + linear-gradient(var(--color-role-bg), var(--color-role-bg)); +} \ No newline at end of file