first commit
This commit is contained in:
442
src/styles/wiki-egames.css
Normal file
442
src/styles/wiki-egames.css
Normal file
@@ -0,0 +1,442 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;600&display=swap');
|
||||
|
||||
:root {
|
||||
--wiki-purple-1: #4e6ea8;
|
||||
--wiki-purple-2: #5f86c8;
|
||||
--wiki-purple-3: #739de0;
|
||||
--wiki-blue-1: #3f7bcc;
|
||||
--wiki-blue-2: #4aa7d9;
|
||||
--wiki-white: #ffffff;
|
||||
|
||||
--wiki-bg: #f3f6fb;
|
||||
--wiki-bg-soft: #eaf0f9;
|
||||
--wiki-card: #ffffff;
|
||||
--wiki-text: #1f2735;
|
||||
--wiki-text-soft: #5a6577;
|
||||
--wiki-border: #c9d4e3;
|
||||
|
||||
--sl-font: 'IBM Plex Sans', sans-serif;
|
||||
--sl-font-system: 'IBM Plex Sans', sans-serif;
|
||||
--sl-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
|
||||
--sl-color-white: #1e2738;
|
||||
--sl-color-gray-1: #2f3a4d;
|
||||
--sl-color-gray-2: #4c5a72;
|
||||
--sl-color-gray-3: #6a7a92;
|
||||
--sl-color-gray-4: #8d9bb2;
|
||||
--sl-color-gray-5: #d1dbe8;
|
||||
--sl-color-gray-6: #e4ebf4;
|
||||
--sl-color-gray-7: #ffffff;
|
||||
--sl-color-black: #ffffff;
|
||||
|
||||
--sl-color-accent-low: color-mix(in srgb, var(--wiki-blue-2) 16%, #ffffff);
|
||||
--sl-color-accent: color-mix(in srgb, var(--wiki-blue-2) 64%, #456ca8);
|
||||
--sl-color-accent-high: #244b86;
|
||||
|
||||
--sl-color-blue-low: color-mix(in srgb, var(--wiki-blue-2) 18%, #ffffff);
|
||||
--sl-color-blue: #5f9ce2;
|
||||
--sl-color-blue-high: #204d86;
|
||||
|
||||
--sl-color-purple-low: color-mix(in srgb, var(--wiki-purple-2) 14%, #ffffff);
|
||||
--sl-color-purple: #7b9cd0;
|
||||
--sl-color-purple-high: #274d84;
|
||||
|
||||
--sl-color-orange-low: #fff0e2;
|
||||
--sl-color-orange: #eea467;
|
||||
--sl-color-orange-high: #8c3f12;
|
||||
|
||||
--sl-color-red-low: #ffe8ed;
|
||||
--sl-color-red: #f28ca3;
|
||||
--sl-color-red-high: #8d2d45;
|
||||
|
||||
--sl-color-text-accent: #2e5a99;
|
||||
--sl-color-text-invert: #ffffff;
|
||||
--sl-color-bg: var(--wiki-bg);
|
||||
--sl-color-bg-nav: color-mix(in srgb, #f8fbff 90%, #e8eff9);
|
||||
--sl-color-bg-sidebar: color-mix(in srgb, #f5f9ff 90%, #e5edf8);
|
||||
--sl-color-bg-inline-code: #edf3fb;
|
||||
--sl-color-hairline-light: #dbe5f2;
|
||||
--sl-color-hairline: var(--wiki-border);
|
||||
--sl-color-hairline-shade: #ccd7e7;
|
||||
--sl-color-backdrop-overlay: hsl(219 28% 22% / 0.24);
|
||||
|
||||
--sl-shadow-sm: 0 4px 10px hsl(218 33% 35% / 0.1);
|
||||
--sl-shadow-md: 0 10px 22px hsl(218 34% 30% / 0.12);
|
||||
--sl-shadow-lg: 0 16px 32px hsl(218 34% 28% / 0.16);
|
||||
}
|
||||
|
||||
:root[data-theme='dark'] {
|
||||
--wiki-bg: #090d14;
|
||||
--wiki-bg-soft: #0d121a;
|
||||
--wiki-card: #131a24;
|
||||
--wiki-text: #eef2fb;
|
||||
--wiki-text-soft: #a7b1c7;
|
||||
--wiki-border: #283240;
|
||||
--sl-color-white: #eff3fc;
|
||||
--sl-color-gray-1: #d7deee;
|
||||
--sl-color-gray-2: #a8b4ce;
|
||||
--sl-color-gray-3: #8591ab;
|
||||
--sl-color-gray-4: #657089;
|
||||
--sl-color-gray-5: #2a3347;
|
||||
--sl-color-gray-6: #1b2232;
|
||||
--sl-color-gray-7: #151b28;
|
||||
--sl-color-black: #0a0e16;
|
||||
--sl-color-accent-low: color-mix(in srgb, var(--wiki-blue-2) 14%, #1a2230);
|
||||
--sl-color-accent: color-mix(in srgb, var(--wiki-blue-2) 65%, #7ea2d6);
|
||||
--sl-color-accent-high: #d5e7ff;
|
||||
--sl-color-blue-low: color-mix(in srgb, var(--wiki-blue-2) 17%, #172739);
|
||||
--sl-color-blue: #7ab9f7;
|
||||
--sl-color-blue-high: #c6e0ff;
|
||||
--sl-color-purple-low: color-mix(in srgb, var(--wiki-purple-2) 16%, #223149);
|
||||
--sl-color-purple: #9db8e6;
|
||||
--sl-color-purple-high: #d8e8ff;
|
||||
--sl-color-orange-low: #3f2a23;
|
||||
--sl-color-orange: #ffbc89;
|
||||
--sl-color-orange-high: #ffd3b3;
|
||||
--sl-color-red-low: #412231;
|
||||
--sl-color-red: #ff9eb4;
|
||||
--sl-color-red-high: #ffd0db;
|
||||
--sl-color-text-accent: #c8dcfb;
|
||||
--sl-color-text-invert: #101420;
|
||||
--sl-color-bg-nav: color-mix(in srgb, #101721 96%, #192433);
|
||||
--sl-color-bg-sidebar: color-mix(in srgb, #101721 95%, #182534);
|
||||
--sl-color-bg-inline-code: #182232;
|
||||
--sl-color-hairline-light: #2c364a;
|
||||
--sl-color-hairline-shade: #242c3e;
|
||||
--sl-color-backdrop-overlay: hsl(240 30% 5% / 0.62);
|
||||
--sl-shadow-sm: 0 8px 14px hsl(222 30% 3% / 0.26);
|
||||
--sl-shadow-md: 0 14px 24px hsl(222 34% 3% / 0.34);
|
||||
--sl-shadow-lg: 0 20px 34px hsl(222 38% 3% / 0.44);
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--wiki-text);
|
||||
line-height: 1.66;
|
||||
background:
|
||||
radial-gradient(circle at 12% -18%, color-mix(in srgb, var(--wiki-blue-2) 8%, transparent), transparent 36%),
|
||||
radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--wiki-purple-2) 6%, transparent), transparent 38%),
|
||||
linear-gradient(180deg, var(--wiki-bg), var(--wiki-bg-soft));
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
.site-title {
|
||||
font-family: 'Sora', sans-serif;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
.header {
|
||||
backdrop-filter: blur(12px);
|
||||
background: color-mix(in srgb, var(--sl-color-bg-nav) 94%, transparent);
|
||||
border-bottom-color: color-mix(in srgb, var(--sl-color-hairline) 92%, transparent);
|
||||
}
|
||||
|
||||
.sidebar-pane {
|
||||
background:
|
||||
radial-gradient(circle at 8% -4%, color-mix(in srgb, var(--wiki-purple-2) 7%, transparent), transparent 38%),
|
||||
var(--sl-color-bg-sidebar);
|
||||
}
|
||||
|
||||
.sidebar-content a {
|
||||
border: 1px solid color-mix(in srgb, var(--sl-color-hairline) 50%, transparent);
|
||||
border-radius: 0.2rem;
|
||||
transition: border-color 170ms ease, background 170ms ease, color 170ms ease;
|
||||
}
|
||||
|
||||
.sidebar-content a:hover {
|
||||
border-color: color-mix(in srgb, var(--sl-color-accent) 34%, transparent);
|
||||
background: color-mix(in srgb, var(--sl-color-accent-low) 70%, transparent);
|
||||
}
|
||||
|
||||
.sidebar-content :is(a[aria-current='page'], a[aria-current='page']:hover) {
|
||||
border-color: color-mix(in srgb, var(--sl-color-accent) 52%, transparent);
|
||||
background: linear-gradient(
|
||||
130deg,
|
||||
color-mix(in srgb, var(--wiki-purple-3) 14%, transparent),
|
||||
color-mix(in srgb, var(--wiki-blue-2) 12%, transparent)
|
||||
);
|
||||
color: var(--sl-color-white);
|
||||
}
|
||||
|
||||
.content-panel > .sl-container {
|
||||
border-radius: 0.2rem;
|
||||
border: 1px solid color-mix(in srgb, var(--sl-color-hairline) 100%, transparent);
|
||||
background: color-mix(in srgb, var(--wiki-card) 97%, transparent);
|
||||
box-shadow: var(--sl-shadow-sm);
|
||||
max-width: min(100%, 76rem);
|
||||
margin-inline: auto;
|
||||
padding: 1.2rem 1.35rem;
|
||||
}
|
||||
|
||||
/* Выравниваем первый заголовок страницы: одинаковый воздух сверху и снизу. */
|
||||
.content-panel:first-of-type > .sl-container {
|
||||
padding-top: 1.28rem;
|
||||
padding-bottom: 1.28rem;
|
||||
}
|
||||
|
||||
.content-panel:first-of-type h1 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
line-height: 1.16;
|
||||
}
|
||||
|
||||
.hero {
|
||||
border-radius: 0.2rem;
|
||||
border: 1px solid color-mix(in srgb, var(--sl-color-hairline) 94%, transparent);
|
||||
background:
|
||||
radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--wiki-purple-3) 10%, transparent), transparent 55%),
|
||||
radial-gradient(circle at 95% 10%, color-mix(in srgb, var(--wiki-blue-2) 10%, transparent), transparent 53%),
|
||||
color-mix(in srgb, var(--wiki-card) 98%, transparent);
|
||||
}
|
||||
|
||||
.hero .stack {
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hero .copy {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hero .actions {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.hero .tagline {
|
||||
color: var(--wiki-text-soft);
|
||||
}
|
||||
|
||||
.hero .sl-link-button {
|
||||
border-radius: 0.18rem;
|
||||
transition: transform 170ms ease, box-shadow 170ms ease;
|
||||
}
|
||||
|
||||
.hero .sl-link-button:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.sl-markdown-content h1,
|
||||
.sl-markdown-content h2,
|
||||
.sl-markdown-content h3 {
|
||||
font-family: 'Sora', sans-serif;
|
||||
letter-spacing: 0.005em;
|
||||
line-height: 1.24;
|
||||
color: var(--sl-color-white);
|
||||
}
|
||||
|
||||
.sl-markdown-content h1 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
.sl-markdown-content h2 {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 0.72rem;
|
||||
padding-bottom: 0.35rem;
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--sl-color-hairline) 85%, transparent);
|
||||
}
|
||||
|
||||
.sl-markdown-content h3 {
|
||||
margin-top: 1.35rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.sl-markdown-content p,
|
||||
.sl-markdown-content li {
|
||||
color: var(--wiki-text);
|
||||
}
|
||||
|
||||
.sl-markdown-content p {
|
||||
margin-block: 0.7rem;
|
||||
}
|
||||
|
||||
.sl-markdown-content ul,
|
||||
.sl-markdown-content ol {
|
||||
margin-block: 0.75rem 1rem;
|
||||
padding-inline-start: 1.3rem;
|
||||
}
|
||||
|
||||
.sl-markdown-content li + li {
|
||||
margin-top: 0.28rem;
|
||||
}
|
||||
|
||||
.sl-markdown-content a {
|
||||
text-underline-offset: 0.18em;
|
||||
text-decoration-thickness: 0.07em;
|
||||
}
|
||||
|
||||
.sl-markdown-content code {
|
||||
border-radius: 0.16rem;
|
||||
border: 1px solid color-mix(in srgb, var(--sl-color-hairline) 78%, transparent);
|
||||
background: var(--sl-color-bg-inline-code);
|
||||
}
|
||||
|
||||
.expressive-code,
|
||||
pre {
|
||||
border-radius: 0.2rem;
|
||||
border: 1px solid color-mix(in srgb, var(--sl-color-hairline) 86%, transparent);
|
||||
}
|
||||
|
||||
.pagination-links a {
|
||||
border-radius: 0.18rem;
|
||||
border: 1px solid color-mix(in srgb, var(--sl-color-hairline) 88%, transparent);
|
||||
background: color-mix(in srgb, var(--sl-color-bg-nav) 90%, transparent);
|
||||
transition: border-color 170ms ease, background 170ms ease;
|
||||
}
|
||||
|
||||
.pagination-links a:hover {
|
||||
border-color: color-mix(in srgb, var(--sl-color-accent) 40%, transparent);
|
||||
background: color-mix(in srgb, var(--sl-color-accent-low) 70%, transparent);
|
||||
}
|
||||
|
||||
starlight-toc nav {
|
||||
border-radius: 0.18rem;
|
||||
border: 1px solid color-mix(in srgb, var(--sl-color-hairline) 88%, transparent);
|
||||
background: color-mix(in srgb, var(--wiki-card) 92%, transparent);
|
||||
padding: 0.82rem 0.9rem;
|
||||
}
|
||||
|
||||
starlight-toc h2 {
|
||||
margin: 0 0 0.58rem;
|
||||
font-size: 1.02rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
starlight-toc ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
starlight-toc li {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
starlight-toc ul ul {
|
||||
margin-top: 0.18rem;
|
||||
padding-left: 0.72rem;
|
||||
}
|
||||
|
||||
starlight-toc a {
|
||||
display: block;
|
||||
padding: 0.16rem 0;
|
||||
line-height: 1.38;
|
||||
}
|
||||
|
||||
.starlight-aside {
|
||||
border-radius: 0.2rem;
|
||||
border-inline-start-width: 0.26rem;
|
||||
}
|
||||
|
||||
.sl-markdown-content table {
|
||||
border-radius: 0.16rem;
|
||||
overflow: hidden;
|
||||
border: 1px solid color-mix(in srgb, var(--sl-color-hairline) 88%, transparent);
|
||||
display: table;
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 0.9rem 0 1.15rem;
|
||||
}
|
||||
|
||||
.sl-markdown-content th,
|
||||
.sl-markdown-content td {
|
||||
padding: 0.76rem 0.95rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.sl-markdown-content :is(th:first-child, td:first-child) {
|
||||
padding-inline-start: 0.95rem;
|
||||
}
|
||||
|
||||
.sl-markdown-content :is(th:last-child, td:last-child) {
|
||||
padding-inline-end: 0.95rem;
|
||||
}
|
||||
|
||||
.sl-markdown-content details {
|
||||
border-radius: 0.16rem;
|
||||
border: 1px solid color-mix(in srgb, var(--sl-color-hairline) 86%, transparent);
|
||||
background: color-mix(in srgb, var(--wiki-card) 93%, transparent);
|
||||
padding: 0.72rem 0.82rem;
|
||||
}
|
||||
|
||||
.sl-markdown-content details summary {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.lore-grid {
|
||||
display: grid;
|
||||
gap: 1.05rem;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
margin: 1.05rem 0 1.25rem;
|
||||
}
|
||||
|
||||
.lore-card {
|
||||
border: 1px solid color-mix(in srgb, var(--sl-color-hairline) 88%, transparent);
|
||||
border-radius: 0.2rem;
|
||||
padding: 1rem 1.02rem;
|
||||
background:
|
||||
linear-gradient(
|
||||
140deg,
|
||||
color-mix(in srgb, var(--wiki-purple-3) 7%, transparent),
|
||||
color-mix(in srgb, var(--wiki-blue-2) 7%, transparent)
|
||||
),
|
||||
color-mix(in srgb, var(--wiki-card) 94%, transparent);
|
||||
transition: transform 170ms ease, border-color 170ms ease;
|
||||
}
|
||||
|
||||
.lore-card:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: color-mix(in srgb, var(--sl-color-accent) 42%, transparent);
|
||||
}
|
||||
|
||||
.lore-card h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.45rem;
|
||||
}
|
||||
|
||||
.command-block {
|
||||
border: 1px solid color-mix(in srgb, var(--sl-color-hairline) 88%, transparent);
|
||||
border-radius: 0.16rem;
|
||||
padding: 0.78rem 0.88rem;
|
||||
background: color-mix(in srgb, var(--wiki-card) 92%, transparent);
|
||||
font-family: var(--sl-font-mono);
|
||||
}
|
||||
|
||||
.see-also {
|
||||
margin-top: 1.2rem;
|
||||
padding: 0.82rem 0.95rem;
|
||||
border-radius: 0.16rem;
|
||||
border: 1px dashed color-mix(in srgb, var(--sl-color-accent) 36%, transparent);
|
||||
background: color-mix(in srgb, var(--sl-color-accent-low) 72%, transparent);
|
||||
}
|
||||
|
||||
.see-also p {
|
||||
margin: 0 0 0.45rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@media (min-width: 50rem) {
|
||||
.hero {
|
||||
grid-template-columns: 1fr;
|
||||
justify-items: center;
|
||||
padding-block: clamp(2rem, calc(1.2rem + 4vmin), 4.8rem);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero > img,
|
||||
.hero > .hero-html {
|
||||
order: 0;
|
||||
width: min(70%, 18rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 50rem) {
|
||||
.content-panel > .sl-container {
|
||||
border-radius: 0.16rem;
|
||||
padding: 1rem 0.92rem;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user