init
This commit is contained in:
@@ -0,0 +1,233 @@
|
||||
/* Source module: tokens.css */
|
||||
@font-face {
|
||||
font-family: "DCalc";
|
||||
src: url("../img/fonts/dcalc.ttf") format("truetype");
|
||||
font-display: block;
|
||||
}
|
||||
|
||||
:root {
|
||||
--black-950: #050505;
|
||||
--black-900: #090808;
|
||||
--panel: #131515;
|
||||
--row: #1f1f1e;
|
||||
--row-2: #2e2e2c;
|
||||
--title-top: #5a7099;
|
||||
--title-mid: #415272;
|
||||
--title-bottom: #313e58;
|
||||
--primary: #1a2b4e;
|
||||
--primary-hover: #203259;
|
||||
--primary-active: #16264c;
|
||||
--brass-dark: #504029;
|
||||
--brass: #907746;
|
||||
--gold: #d6c487;
|
||||
--selected: #daa41d;
|
||||
--focus: #4ba7d3;
|
||||
--text: #f6f8f4;
|
||||
--text-2: #d6d3c6;
|
||||
--text-3: #a7a396;
|
||||
--disabled: #4d4b4d;
|
||||
--info: #54c1db;
|
||||
--success: #49a355;
|
||||
--warning: #c28954;
|
||||
--danger: #bb3331;
|
||||
/* Captured control palette. These fill gaps in the semantic palette without changing it. */
|
||||
--control-blue: var(--primary);
|
||||
--control-blue-top: #1f355e;
|
||||
--control-blue-bottom: #1a2849;
|
||||
--control-green-top: #014f22;
|
||||
--control-green-bottom: #013f1b;
|
||||
--control-orange-top: #522d01;
|
||||
--control-orange-bottom: #412401;
|
||||
--control-edge-top: #684f2d;
|
||||
--control-edge-bottom: #483423;
|
||||
--control-disabled-top: #2c2c2c;
|
||||
--control-disabled-bottom: #222222;
|
||||
--control-disabled-edge-top: #343434;
|
||||
--control-disabled-edge-bottom: #262626;
|
||||
--control-glyph: #b69260;
|
||||
--control-highlight: var(--gold);
|
||||
--attribute-label: #9a7d49;
|
||||
--attribute-value: #469b51;
|
||||
--skill-evolution: #bb56f1;
|
||||
--skill-passive: #00ce08;
|
||||
--skill-active: #b69b33;
|
||||
--skill-awakening: #f27300;
|
||||
--skill-buff: #63c8e1;
|
||||
--quality-normal: #ffffff;
|
||||
--quality-advanced: #68d5ed;
|
||||
--quality-rare: #9879da;
|
||||
--quality-artifact: #ef28c1;
|
||||
--quality-legend: #ff7700;
|
||||
--quality-epic: #fcb600;
|
||||
--quality-chronicle: #ff6666;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
html,
|
||||
|
||||
/* Source module: base.css */
|
||||
body {
|
||||
margin: 0;
|
||||
background: #242524;
|
||||
color: var(--text-2);
|
||||
font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 1920px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 48px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.board {
|
||||
position: relative;
|
||||
width: 1920px;
|
||||
height: 1200px;
|
||||
padding: 38px 46px 42px;
|
||||
overflow: hidden;
|
||||
background:
|
||||
radial-gradient(circle at 84% 7%, rgba(65, 82, 114, 0.12), transparent 22%),
|
||||
linear-gradient(180deg, #090b0b 0, #050505 150px, #070707 100%);
|
||||
border: 1px solid #161817;
|
||||
}
|
||||
|
||||
.board::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background-image: linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px);
|
||||
background-size: 100% 4px;
|
||||
opacity: .45;
|
||||
}
|
||||
|
||||
.board-header {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 88px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid var(--brass-dark);
|
||||
}
|
||||
|
||||
.board-kicker {
|
||||
color: var(--selected);
|
||||
font-size: 12px;
|
||||
letter-spacing: 2.6px;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.board-title {
|
||||
margin: 0;
|
||||
color: #e5d69a;
|
||||
font-size: 30px;
|
||||
line-height: 1.1;
|
||||
font-weight: 650;
|
||||
letter-spacing: .7px;
|
||||
}
|
||||
|
||||
.board-subtitle {
|
||||
margin-top: 8px;
|
||||
color: var(--text-3);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.board-index {
|
||||
padding-top: 9px;
|
||||
text-align: right;
|
||||
color: var(--text-3);
|
||||
font-size: 12px;
|
||||
letter-spacing: .8px;
|
||||
}
|
||||
|
||||
.board-index strong {
|
||||
display: block;
|
||||
color: var(--gold);
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 1010px;
|
||||
padding-top: 22px;
|
||||
}
|
||||
|
||||
.grid { display: grid; gap: 18px; }
|
||||
.grid.cols-2 { grid-template-columns: 1fr 1fr; }
|
||||
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
|
||||
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
|
||||
|
||||
.panel {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
background: linear-gradient(180deg, rgba(20,22,22,.98), rgba(7,8,8,.98));
|
||||
border: 1px solid #403421;
|
||||
box-shadow: inset 0 1px 0 rgba(214,196,135,.06), 0 12px 28px rgba(0,0,0,.32);
|
||||
}
|
||||
|
||||
.panel-heading {
|
||||
height: 46px;
|
||||
padding: 0 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #242725;
|
||||
background: #111313;
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
color: var(--gold);
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.panel-note { color: var(--text-3); font-size: 11px; }
|
||||
.panel-body { padding: 18px; }
|
||||
|
||||
.rule-label {
|
||||
color: var(--text-3);
|
||||
font-size: 10px;
|
||||
letter-spacing: 1.2px;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
|
||||
.sample-label {
|
||||
color: var(--text-3);
|
||||
font-size: 11px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.spec-row { display: flex; gap: 7px; flex-wrap: wrap; }
|
||||
.spec-chip {
|
||||
height: 20px;
|
||||
padding: 0 7px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
border: 1px solid #3c3e3c;
|
||||
background: #101111;
|
||||
color: var(--text-3);
|
||||
font-size: 10px;
|
||||
letter-spacing: .4px;
|
||||
}
|
||||
|
||||
.spec-chip.captured { border-color: #6f5a32; color: var(--gold); }
|
||||
.spec-chip.derived { border-color: #24566d; color: var(--focus); }
|
||||
.spec-chip.asset { border-color: #34533e; color: var(--success); }
|
||||
|
||||
.divider { height: 1px; background: #292b29; margin: 14px 0; }
|
||||
|
||||
.dnf-ui {
|
||||
font-family: "DCalc", SimSun, "Microsoft YaHei", sans-serif;
|
||||
text-shadow: 1px 1px 0 #000, 0 0 2px #000;
|
||||
}
|
||||
|
||||
.asset-2x { image-rendering:auto !important; }
|
||||
Reference in New Issue
Block a user