phanpy/src/index.css
2023-01-31 23:43:24 +08:00

327 lines
6.7 KiB
CSS

:root {
text-size-adjust: none;
--hairline-width: 1px;
--blue-color: royalblue;
--purple-color: blueviolet;
--green-color: darkgreen;
--orange-color: darkorange;
--red-color: orangered;
--bg-color: #fff;
--bg-faded-color: #f0f2f5;
--bg-blur-color: #fff9;
--bg-faded-blur-color: #f0f2f599;
--text-color: #1c1e21;
--text-insignificant-color: #1c1e2199;
--link-color: var(--blue-color);
--link-light-color: #4169e199;
--link-faded-color: #4169e155;
--link-bg-hover-color: #f0f2f599;
--link-visited-color: mediumslateblue;
--focus-ring-color: var(--link-color);
--button-bg-color: var(--blue-color);
--button-bg-blur-color: #4169e1aa;
--button-text-color: white;
--button-plain-bg-hover-color: rgba(128, 128, 128, 0.1);
--reblog-color: var(--purple-color);
--reblog-faded-color: #892be220;
--reply-to-color: var(--orange-color);
--reply-to-text-color: #b36200;
--favourite-color: var(--red-color);
--reply-to-faded-color: #ffa60030;
--outline-color: rgba(128, 128, 128, 0.2);
--outline-hover-color: rgba(128, 128, 128, 0.7);
--divider-color: rgba(0, 0, 0, 0.1);
--backdrop-color: rgba(0, 0, 0, 0.05);
--img-bg-color: rgba(128, 128, 128, 0.2);
--loader-color: #1c1e2199;
--comment-line-color: #e5e5e5;
--drop-shadow-color: rgba(0, 0, 0, 0.15);
--timing-function: cubic-bezier(0.3, 0.5, 0, 1);
}
@media (min-resolution: 2dppx) {
:root {
--hairline-width: 0.5px;
}
}
@media (prefers-color-scheme: dark) {
:root {
--blue-color: CornflowerBlue;
--purple-color: #b190f1;
--green-color: lightgreen;
--orange-color: orange;
--bg-color: #242526;
--bg-faded-color: #18191a;
--bg-blur-color: #0009;
--bg-faded-blur-color: #18191a99;
--text-color: #f0f2f5;
--text-insignificant-color: #f0f2f599;
--link-light-color: #6494ed99;
--link-faded-color: #6494ed88;
--link-bg-hover-color: #34353799;
--reblog-faded-color: #b190f141;
--reply-to-text-color: var(--reply-to-color);
--reply-to-faded-color: #ffa60027;
--divider-color: rgba(255, 255, 255, 0.1);
--bg-blur-color: #24252699;
--backdrop-color: rgba(0, 0, 0, 0.5);
--loader-color: #f0f2f599;
--comment-line-color: #565656;
--drop-shadow-color: rgba(0, 0, 0, 0.5);
}
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular',
sans-serif;
font-size: 16px;
word-wrap: break-word;
overflow-wrap: break-word;
}
a {
color: var(--link-color);
text-decoration-color: var(--link-faded-color);
text-decoration-thickness: 2px;
text-underline-offset: 2px;
overflow-wrap: anywhere;
}
a:is(:hover, :focus) {
text-decoration-color: var(--link-color);
}
img {
max-width: 100%;
}
hr {
height: 2px;
border: 0;
padding: 0;
margin: 16px 0;
background-image: linear-gradient(
to right,
transparent,
var(--divider-color),
transparent
);
}
button,
input,
select,
textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
max-width: 100%;
}
button,
.button {
display: inline-block;
padding: 8px 12px;
border-radius: 2.5em;
border: 0;
background-color: var(--button-bg-color);
color: var(--button-text-color);
line-height: 1;
vertical-align: middle;
text-decoration: none;
user-select: none;
}
:is(button, .button) > * {
vertical-align: middle;
pointer-events: none;
}
:is(button, .button):not(:disabled, .disabled):is(:hover, :focus) {
cursor: pointer;
filter: brightness(1.2);
}
:is(button, .button):not(:disabled, .disabled):active {
filter: brightness(0.8);
}
:is(button:disabled, .button.disabled) {
opacity: 0.5;
}
:is(button, .button).plain {
background-color: transparent;
color: var(--link-color);
backdrop-filter: blur(12px);
}
:is(button, .button).plain2 {
background-color: transparent;
color: var(--link-color);
backdrop-filter: blur(12px) invert(0.25) brightness(1.5);
}
:is(button, .button).plain3 {
background-color: transparent;
color: var(--button-text-color);
backdrop-filter: blur(12px) invert(0.25);
}
:is(button, .button).plain4 {
background-color: transparent;
color: var(--text-insignificant-color);
}
:is(button, .button).plain4:not(:disabled, .disabled):is(:hover, :focus) {
color: var(--text-color);
}
:is(button, .button).light {
background-color: var(--bg-faded-color);
color: var(--text-color);
border: 1px solid var(--outline-color);
}
:is(button, .button).light.danger:not(:disabled, .disabled) {
color: var(--red-color);
}
:is(button, .button).block {
display: block;
width: 100%;
padding: 12px;
}
:is(button, .button).textual {
padding: 0;
margin: 0;
vertical-align: baseline;
color: var(--link-color);
background-color: transparent;
border-radius: 0;
}
:is(button, .button).swap {
display: grid;
/* 1 column, 1 row */
grid-template-columns: 1fr;
grid-template-rows: 1fr;
}
:is(button, .button).swap > * {
grid-column: 1;
grid-row: 1;
transition: opacity 0.3s;
}
:is(button, .button).swap > *:nth-child(2) {
opacity: 0;
}
:is(button, .button).swap:is(:hover, :focus) > *:nth-child(2) {
opacity: 1;
}
:is(button, .button).swap[data-swap-state='danger']:is(:hover, :focus) {
color: var(--red-color);
border-color: var(--red-color);
}
:is(button, .button).swap:is(:hover, :focus) > *:nth-child(1) {
opacity: 0;
}
input[type='text'],
textarea,
select {
color: var(--text-color);
background-color: var(--bg-color);
border: 2px solid var(--divider-color);
padding: 8px;
border-radius: 4px;
}
input[type='text']:focus,
textarea:focus,
select:focus {
border-color: var(--outline-color);
}
input[type='text'].large,
textarea.large,
select.large,
button.large {
font-size: 125%;
padding: 12px;
}
button.small {
font-size: 90%;
padding: 4px 8px;
}
select.plain {
border: 0;
background-color: transparent;
}
pre {
tab-size: 2;
}
pre code,
code {
font-size: 90%;
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier,
monospace;
}
@media (prefers-color-scheme: dark) {
:is(button, .button).plain2 {
backdrop-filter: blur(12px) brightness(0.5);
}
}
[tabindex='-1'] {
outline: 0;
}
:not([tabindex='-1']):focus-visible {
outline: 2px solid var(--focus-ring-color);
}
/* UTILS */
.ib {
display: inline-block;
}
.spacer {
flex-grow: 1;
}
.insignificant {
color: var(--text-insignificant-color);
}
/* KEYFRAMES */
@keyframes appear {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fade-in {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slide-up {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(0);
}
}