Add custom.css
This commit is contained in:
Ramses Revengeday
commit
05f44b9174
1 changed files with 304 additions and 0 deletions
304
custom.css
Normal file
304
custom.css
Normal file
|
|
@ -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));
|
||||
}
|
||||
Loading…
Reference in a new issue