205 lines
6.8 KiB
CSS
205 lines
6.8 KiB
CSS
/* Source module: button.css */
|
|
.btn-shell {
|
|
display: inline-flex;
|
|
padding: 4px;
|
|
border-radius: 0;
|
|
background: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.dnf-btn {
|
|
appearance: none;
|
|
position: relative;
|
|
height: 30px;
|
|
min-width: 110px;
|
|
padding: 0 14px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 7px;
|
|
color: var(--gold);
|
|
border: 1px solid transparent;
|
|
border-radius: 0;
|
|
background:
|
|
linear-gradient(180deg, #1f355e 0%, #1d2f53 55%, #1a2849 100%) padding-box,
|
|
linear-gradient(180deg, #684f2d 0%, #483423 100%) border-box;
|
|
box-shadow: none;
|
|
font-size: 13px;
|
|
line-height: 1;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
button.dnf-btn {
|
|
font-family: inherit;
|
|
cursor: pointer;
|
|
}
|
|
button.dnf-btn.normal:not(.raster-tone):not(.image):hover,
|
|
button.dnf-btn.normal:not(.raster-tone):not(.image):focus-visible {
|
|
color: #eee2aa;
|
|
background:
|
|
linear-gradient(180deg, #29457f 0%, #273f74 55%, #24386a 100%) padding-box,
|
|
linear-gradient(180deg, #725f4e 0%, #524444 100%) border-box;
|
|
outline: none;
|
|
}
|
|
button.dnf-btn.normal:not(.raster-tone):not(.image):active {
|
|
color: #eee2aa;
|
|
transform: translateY(1px);
|
|
background:
|
|
linear-gradient(180deg, #29457f 0%, #273f74 55%, #24386a 100%) padding-box,
|
|
linear-gradient(180deg, #725f4e 0%, #524444 100%) border-box;
|
|
}
|
|
button.dnf-btn:disabled {
|
|
cursor: default;
|
|
}
|
|
|
|
.dnf-btn.normal {
|
|
background:
|
|
linear-gradient(180deg, #1f355e 0%, #1d2f53 55%, #1a2849 100%) padding-box,
|
|
linear-gradient(180deg, #684f2d 0%, #483423 100%) border-box;
|
|
}
|
|
.dnf-btn.hover {
|
|
color: #eee2aa;
|
|
background:
|
|
linear-gradient(180deg, #29457f 0%, #273f74 55%, #24386a 100%) padding-box,
|
|
linear-gradient(180deg, #725f4e 0%, #524444 100%) border-box;
|
|
}
|
|
.dnf-btn.pressed {
|
|
transform: translateY(1px);
|
|
background:
|
|
linear-gradient(180deg, #29457f 0%, #263e73 58%, #213462 100%) padding-box,
|
|
linear-gradient(180deg, #725f4e 0%, #524444 100%) border-box;
|
|
}
|
|
.dnf-btn.disabled {
|
|
color: #666566;
|
|
background:
|
|
linear-gradient(180deg, #2c2c2c 0%, #272727 55%, #222 100%) padding-box,
|
|
linear-gradient(180deg, #343434 0%, #262626 100%) border-box;
|
|
}
|
|
.dnf-btn.large {
|
|
height: 44px;
|
|
min-width: 168px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
/* CSS replica of the compact NinePatch family. State colors are derived from the base tone. */
|
|
.dnf-btn.image,
|
|
.dnf-btn.raster-tone {
|
|
--button-top: var(--control-blue-top);
|
|
--button-bottom: var(--control-blue-bottom);
|
|
--button-edge-top: var(--control-edge-top);
|
|
--button-edge-bottom: var(--control-edge-bottom);
|
|
--button-state-top: var(--button-top);
|
|
--button-state-bottom: var(--button-bottom);
|
|
--button-state-edge-top: var(--button-edge-top);
|
|
--button-state-edge-bottom: var(--button-edge-bottom);
|
|
--button-hover-r: 10;
|
|
--button-hover-g: 16;
|
|
--button-hover-b: 33;
|
|
height: 26px;
|
|
min-width: 112px;
|
|
padding: 0 10px;
|
|
isolation:isolate;
|
|
border:1px solid rgba(0,0,0,.6);
|
|
border-radius: 0;
|
|
background:transparent;
|
|
box-shadow:none;
|
|
}
|
|
.dnf-btn.image::before,
|
|
.dnf-btn.raster-tone::before {
|
|
content:"";
|
|
position:absolute;
|
|
z-index:-1;
|
|
inset:0;
|
|
margin:1px;
|
|
border:1px solid transparent;
|
|
background:
|
|
linear-gradient(180deg,var(--button-state-top),var(--button-state-bottom)) padding-box,
|
|
linear-gradient(180deg,var(--button-state-edge-top),var(--button-state-edge-bottom)) border-box;
|
|
box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
|
|
pointer-events:none;
|
|
}
|
|
.dnf-btn.image.hover,
|
|
.dnf-btn.raster-tone.normal:hover,
|
|
.dnf-btn.raster-tone.hover {
|
|
--button-state-top:rgb(from var(--button-top) calc(r + var(--button-hover-r)) calc(g + var(--button-hover-g)) calc(b + var(--button-hover-b)));
|
|
--button-state-bottom:rgb(from var(--button-bottom) calc(r + var(--button-hover-r)) calc(g + var(--button-hover-g)) calc(b + var(--button-hover-b)));
|
|
--button-state-edge-top:rgb(from var(--button-edge-top) calc(r + var(--button-hover-r)) calc(g + var(--button-hover-g)) calc(b + var(--button-hover-b)));
|
|
--button-state-edge-bottom:rgb(from var(--button-edge-bottom) calc(r + var(--button-hover-r)) calc(g + var(--button-hover-g)) calc(b + var(--button-hover-b)));
|
|
}
|
|
.dnf-btn.image.pressed,
|
|
.dnf-btn.raster-tone.normal:active,
|
|
.dnf-btn.raster-tone.pressed {
|
|
--button-state-top:rgb(from var(--button-top) calc(r + var(--button-hover-r)) calc(g + var(--button-hover-g)) calc(b + var(--button-hover-b)));
|
|
--button-state-bottom:rgb(from var(--button-bottom) calc(r + var(--button-hover-r)) calc(g + var(--button-hover-g)) calc(b + var(--button-hover-b)));
|
|
--button-state-edge-top:rgb(from var(--button-edge-top) calc(r + var(--button-hover-r)) calc(g + var(--button-hover-g)) calc(b + var(--button-hover-b)));
|
|
--button-state-edge-bottom:rgb(from var(--button-edge-bottom) calc(r + var(--button-hover-r)) calc(g + var(--button-hover-g)) calc(b + var(--button-hover-b)));
|
|
transform:translateY(1px);
|
|
}
|
|
.dnf-btn.image.disabled,
|
|
.dnf-btn.raster-tone.disabled {
|
|
--button-state-top:var(--control-disabled-top);
|
|
--button-state-bottom:var(--control-disabled-bottom);
|
|
--button-state-edge-top:var(--control-disabled-edge-top);
|
|
--button-state-edge-bottom:var(--control-disabled-edge-bottom);
|
|
color:#666566;
|
|
}
|
|
.dnf-btn.raster-tone.tone-green {
|
|
--button-top:var(--control-green-top);
|
|
--button-bottom:var(--control-green-bottom);
|
|
--button-hover-r:10;
|
|
--button-hover-g:33;
|
|
--button-hover-b:14;
|
|
}
|
|
.dnf-btn.raster-tone.tone-orange {
|
|
--button-top:var(--control-orange-top);
|
|
--button-bottom:var(--control-orange-bottom);
|
|
--button-hover-r:33;
|
|
--button-hover-g:22;
|
|
--button-hover-b:10;
|
|
}
|
|
|
|
.button-showcase-panel .panel-body { padding:10px 18px; }
|
|
.button-state-grid { gap:4px 14px; }
|
|
.button-state-grid .sample-cell { height:44px;padding:4px 12px;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px; }
|
|
.button-state-grid .sample-label { margin:0; }
|
|
.button-state-grid .button-implementation-label { min-height:44px;padding:5px 10px; }
|
|
.button-showcase-panel .spec-row[style] { margin-top:8px!important; }
|
|
|
|
.button-implementation-label {
|
|
min-height: 52px;
|
|
padding: 8px 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
border-left: 2px solid var(--brass);
|
|
background: #080908;
|
|
color: var(--gold);
|
|
font-size: 13px;
|
|
}
|
|
.button-implementation-label small {
|
|
margin-top: 4px;
|
|
color: var(--muted);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.dnf-btn:has(> .btn-icon),
|
|
.dnf-btn:has(> .button-glyph) { padding-inline:30px; }
|
|
.dnf-btn > .btn-icon,
|
|
.dnf-btn > .button-glyph { position:absolute;left:10px;top:50%;transform:translateY(-50%); }
|
|
.btn-icon { font: 18px/1 Georgia, serif; color: #e4c98f; }
|
|
|
|
.icon-btn {
|
|
width: 30px;
|
|
height: 30px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 1px solid #7a6238;
|
|
background: linear-gradient(#2e4779, #1b2b4f);
|
|
box-shadow: inset 0 0 0 1px #12203d, 0 0 0 3px #111317;
|
|
color: #ddc47e;
|
|
}
|
|
|
|
.icon-btn img, .pixel { image-rendering: pixelated; }
|