initial
This commit is contained in:
@@ -0,0 +1,114 @@
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
font: 14px/1.45 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 292px;
|
||||
margin: 0;
|
||||
color: #22202b;
|
||||
background: #fbfaff;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
header img {
|
||||
flex: 0 0 auto;
|
||||
filter: drop-shadow(0 3px 7px rgb(49 30 93 / 20%));
|
||||
}
|
||||
|
||||
h1,
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 18px;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
header p {
|
||||
margin-top: 2px;
|
||||
color: #6d6878;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.status {
|
||||
min-height: 20px;
|
||||
margin-bottom: 10px;
|
||||
color: #5f596a;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
min-height: 42px;
|
||||
border: 0;
|
||||
border-radius: 10px;
|
||||
padding: 10px 16px;
|
||||
color: #fff;
|
||||
background: #6842b8;
|
||||
box-shadow: 0 5px 14px rgb(77 45 146 / 25%);
|
||||
font: inherit;
|
||||
font-weight: 650;
|
||||
cursor: pointer;
|
||||
transition: background 120ms ease, box-shadow 120ms ease, transform 120ms ease;
|
||||
}
|
||||
|
||||
button:hover:not(:disabled) {
|
||||
background: #56329e;
|
||||
box-shadow: 0 7px 17px rgb(77 45 146 / 31%);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
button:active:not(:disabled) {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
button:focus-visible {
|
||||
outline: 3px solid #bba2ec;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
button[aria-pressed="true"] {
|
||||
background: #34303d;
|
||||
box-shadow: 0 5px 14px rgb(24 20 32 / 22%);
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
color: #a29da9;
|
||||
background: #e7e3eb;
|
||||
box-shadow: none;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body {
|
||||
color: #f4f0fa;
|
||||
background: #201d26;
|
||||
}
|
||||
|
||||
header p,
|
||||
.status {
|
||||
color: #bdb5c7;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
color: #77717e;
|
||||
background: #343039;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user