5et Initial React Skin
This commit is contained in:
boris committed
1 parent
b236390afe
commit
0eb340e1c2
17 files changed
+5079
No files matched your search
@@ -0,0 +1,250 @@
|
||||
:root {
|
||||
--bg-0: #070d15;
|
||||
--bg-1: #0f1a2c;
|
||||
--bg-2: #17243a;
|
||||
--panel-0: rgba(10, 16, 28, 0.86);
|
||||
--panel-1: rgba(23, 36, 58, 0.88);
|
||||
--line: rgba(130, 178, 228, 0.24);
|
||||
--line-strong: rgba(130, 178, 228, 0.5);
|
||||
--text-0: #f4f8fd;
|
||||
--text-1: #c2d0e4;
|
||||
--text-2: #90a3bf;
|
||||
--accent: #60c4ff;
|
||||
--accent-strong: #8fd8ff;
|
||||
--accent-warm: #e8b273;
|
||||
--shadow: 0 16px 42px rgba(0, 0, 0, 0.42);
|
||||
color: var(--text-0);
|
||||
background: var(--bg-0);
|
||||
font-family: "Avenir Next", "Trebuchet MS", "Segoe UI", sans-serif;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#root {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow: hidden;
|
||||
background:
|
||||
radial-gradient(circle at 15% -5%, rgba(62, 117, 194, 0.45), transparent 42%),
|
||||
radial-gradient(circle at 86% 0%, rgba(235, 167, 86, 0.4), transparent 40%),
|
||||
linear-gradient(165deg, var(--bg-0) 0%, #0b1322 100%);
|
||||
}
|
||||
|
||||
.shell {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 320px 1fr;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
border-right: 1px solid var(--line);
|
||||
background: linear-gradient(180deg, var(--panel-0) 0%, rgba(9, 14, 24, 0.88) 100%);
|
||||
backdrop-filter: blur(18px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.sidebar-brand {
|
||||
padding: 24px 20px 16px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.sidebar-kicker {
|
||||
margin: 0 0 6px;
|
||||
color: var(--accent-warm);
|
||||
font-size: 0.78rem;
|
||||
letter-spacing: 0.16em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.sidebar-title {
|
||||
margin: 0;
|
||||
font-size: 1.45rem;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
.sidebar-copy {
|
||||
margin: 10px 0 0;
|
||||
color: var(--text-1);
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.sidebar-copy-subtitle {
|
||||
margin: 5px 0 0;
|
||||
color: var(--text-1);
|
||||
font-size: 0.6rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.sidebar-nav {
|
||||
padding: 16px 14px 24px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.nav-section + .nav-section {
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.nav-section h2 {
|
||||
margin: 0 0 10px;
|
||||
padding: 0 8px;
|
||||
color: var(--text-2);
|
||||
font-size: 0.72rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.14em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.nav-section ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
width: 100%;
|
||||
border: 1px solid transparent;
|
||||
background: rgba(24, 40, 63, 0.45);
|
||||
border-radius: 12px;
|
||||
padding: 10px 12px;
|
||||
color: var(--text-1);
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
transform 120ms ease,
|
||||
border-color 120ms ease,
|
||||
background-color 120ms ease;
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
transform: translateX(2px);
|
||||
border-color: var(--line-strong);
|
||||
background: rgba(31, 54, 83, 0.75);
|
||||
}
|
||||
|
||||
.nav-item.is-active {
|
||||
border-color: rgba(120, 205, 255, 0.75);
|
||||
background: linear-gradient(140deg, rgba(63, 132, 207, 0.38), rgba(36, 75, 116, 0.82));
|
||||
}
|
||||
|
||||
.nav-item-label {
|
||||
display: block;
|
||||
font-size: 0.92rem;
|
||||
font-weight: 650;
|
||||
color: var(--text-0);
|
||||
}
|
||||
|
||||
.nav-item-desc {
|
||||
margin-top: 3px;
|
||||
display: block;
|
||||
font-size: 0.76rem;
|
||||
color: var(--text-2);
|
||||
}
|
||||
|
||||
.workspace {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
padding: 14px;
|
||||
display: grid;
|
||||
grid-template-rows: 1fr;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.frame-shell {
|
||||
min-height: 0;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow);
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
animation: frame-enter 220ms ease;
|
||||
}
|
||||
|
||||
.frame-shell--full {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.wiki-frame {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.status-wrap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.status-panel {
|
||||
width: min(680px, 100%);
|
||||
border: 1px solid var(--line-strong);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
background: linear-gradient(145deg, #18273f 0%, #101726 100%);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.status-panel h1 {
|
||||
margin: 0 0 8px;
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
|
||||
.status-panel p {
|
||||
margin: 0;
|
||||
color: var(--text-1);
|
||||
}
|
||||
|
||||
@keyframes frame-enter {
|
||||
from {
|
||||
opacity: 0.5;
|
||||
transform: translateY(8px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (width <= 1200px) {
|
||||
.shell {
|
||||
grid-template-columns: 268px 1fr;
|
||||
}
|
||||
|
||||
.nav-item-desc {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width <= 900px) {
|
||||
.shell {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.workspace {
|
||||
padding: 12px;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user