584 lines
18 KiB
CSS
584 lines
18 KiB
CSS
/* =========================================================
|
|
SVGNest — MakeArmy True-Gray Theme (final teal version)
|
|
- Neutral gray UI with Teal accents (#20C5B5)
|
|
- Fixed #svgnest top spacing (removed giant gap)
|
|
- Restores !important on SVG stroke/fill so uploaded parts display correctly
|
|
- Accent is consistent across links, buttons, tooltips, selection, progress
|
|
========================================================= */
|
|
|
|
:root{
|
|
/* Neutral grayscale foundation */
|
|
--bg: #0e0e0e; /* page background (near-black) */
|
|
--bg-2: #1a1a1a; /* panels / cards / buttons */
|
|
--bg-3: #121212; /* bins / work areas */
|
|
--text: #e0e0e0; /* primary text */
|
|
--muted: #a0a0a0; /* secondary text */
|
|
--border: #2a2a2a; /* subtle borders */
|
|
--shadow: rgba(0,0,0,0.40);
|
|
|
|
/* Teal accent */
|
|
--accent: #20C5B5; /* primary accent */
|
|
--accent-2: #1aa397; /* darker hover/active */
|
|
|
|
/* True-grays (replace any previous blues) */
|
|
--gray-1: #f0f0f0; /* headings, light text */
|
|
--gray-2: #cccccc; /* subheadings */
|
|
--gray-3: #888888; /* lines / subtle emphasis */
|
|
--gray-4: #555555; /* secondary fills */
|
|
}
|
|
|
|
/* ===== Base ===== */
|
|
html, body{
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
font: normal 22px/1.4 'LatoLatinWeb', helvetica, arial, verdana, sans-serif;
|
|
background-color: var(--bg);
|
|
color: var(--muted);
|
|
}
|
|
|
|
a{
|
|
color: var(--accent);
|
|
text-decoration: none;
|
|
transition: color .15s ease;
|
|
}
|
|
a:hover{
|
|
color: var(--accent-2);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
h1{
|
|
font-size: 1.5em;
|
|
font-family: 'LatoLatinWebLight', helvetica, arial, verdana, sans-serif;
|
|
font-weight: normal;
|
|
margin: 1.5em 0 0.5em 0;
|
|
color: var(--gray-1);
|
|
}
|
|
h2{
|
|
font-size: 1.1em;
|
|
font-weight: bold;
|
|
margin: 0 0 0.5em 0;
|
|
color: var(--gray-2);
|
|
}
|
|
h3{
|
|
font-size: 1em;
|
|
font-weight: bold;
|
|
margin: 1em 0 0.2em 0;
|
|
color: var(--gray-2);
|
|
}
|
|
|
|
/* ===== Splash ===== */
|
|
#splash{
|
|
width: 28em;
|
|
margin: 8% auto 0 auto;
|
|
}
|
|
#splash .logo{
|
|
width: 50%;
|
|
margin: 0 0 0 25%;
|
|
height: auto;
|
|
}
|
|
#splash h1{ color: var(--accent); }
|
|
#splash h1.title{
|
|
font-size: 3.5em;
|
|
margin: 0;
|
|
padding: 0;
|
|
text-align: center;
|
|
}
|
|
.subscript{ font-size: 0.75em; }
|
|
#splash .subscript{
|
|
display: block;
|
|
color: var(--accent);
|
|
font-size: 1.45em;
|
|
text-align: center;
|
|
font-style: normal;
|
|
}
|
|
|
|
/* ===== Nav + Buttons ===== */
|
|
.nav{ margin: 0; padding: 0; }
|
|
li{ list-style: none; float: left; margin: 0; padding: 0; }
|
|
|
|
.button{
|
|
display: block;
|
|
margin: 0 0.5em;
|
|
padding: 0.6em 2.4em;
|
|
background-color: var(--bg-2);
|
|
border-radius: 5em;
|
|
border: 1px solid var(--border);
|
|
cursor: pointer;
|
|
color: var(--accent);
|
|
box-shadow: 0 1px 0 rgba(0,0,0,0.25);
|
|
transition: color .15s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
|
|
}
|
|
.button a:hover{ text-decoration: none; }
|
|
|
|
.button.start{
|
|
background: var(--bg-2) url(img/start.svg) no-repeat 1.8em 50% / 1.4em 1.4em;
|
|
padding-left: 3.7em;
|
|
}
|
|
.button.spinner{
|
|
background: var(--bg-2) url(img/spin.svg) no-repeat 1.8em 50% / 1.4em 1.4em;
|
|
padding-left: 3.7em;
|
|
}
|
|
.button.upload{
|
|
background: var(--bg-2) url(img/upload.svg) no-repeat 2.2em 50% / 1em 1em;
|
|
padding-left: 4em;
|
|
}
|
|
.button.download{
|
|
background: var(--bg-2) url(img/download.svg) no-repeat 2.2em 50% / 1em 1em;
|
|
padding-left: 4em;
|
|
}
|
|
.button.code{
|
|
background: var(--bg-2) url(img/code.svg) no-repeat 2em 50% / 1.2em 1.2em;
|
|
padding-left: 3.9em;
|
|
}
|
|
.button.config{
|
|
background: var(--bg-2) url(img/settings.svg) no-repeat 2em 50% / 1.2em 1.2em;
|
|
padding-left: 3.9em;
|
|
}
|
|
.button.close{
|
|
background: var(--bg-2) url(img/close.svg) no-repeat 1.8em 50% / 2em 2em;
|
|
padding-left: 3.9em;
|
|
}
|
|
.button.zoomin{ background: var(--bg-2) url(img/zoomin.svg) no-repeat 50% 50% / 1.5em 1.5em; }
|
|
.button.zoomout{ background: var(--bg-2) url(img/zoomout.svg) no-repeat 50% 50% / 1.5em 1.5em; }
|
|
.button.exit{ background: var(--bg-2) url(img/close.svg) no-repeat 50% 50% / 1.5em 1.5em; }
|
|
|
|
.button:hover{
|
|
color: var(--accent-2);
|
|
border-color: var(--accent);
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.25);
|
|
text-decoration: none;
|
|
}
|
|
.button:active{
|
|
background-color: #1f1f1f;
|
|
border-color: var(--accent-2);
|
|
box-shadow: inset 0 2px 2px rgba(0,0,0,0.35);
|
|
}
|
|
.button.disabled{
|
|
cursor: default; opacity: 0.5; color: #999;
|
|
-webkit-filter: saturate(0); filter: saturate(0);
|
|
}
|
|
.button.disabled:hover{ box-shadow: none; border-color: var(--border); }
|
|
.button.disabled:active{ background-color: var(--bg-2); box-shadow: none; }
|
|
|
|
#splash .nav{ float: left; width: 150%; margin: 4em 0 0 -20%; }
|
|
#faq{ display: none; float: left; margin-top: 2em; padding-bottom: 5em; }
|
|
|
|
/* ===== SVGNest layout ===== */
|
|
#svgnest, #messagewrapper{ width: 72em; }
|
|
|
|
/* FIXED: smaller, responsive top spacing (replaces 9em) */
|
|
#svgnest{
|
|
display: none;
|
|
margin: clamp(1rem, 3vh, 2.5rem) auto 0 auto;
|
|
}
|
|
|
|
#svgnest .logo, #svgnest .sidebar{ float: left; width: 22%; margin-right: 8%; }
|
|
#svgnest .sidebar h1{ font-size: 3em; color: var(--text); }
|
|
#svgnest .sidebar{ clear: both; width: 100%; margin-top: 3em; }
|
|
|
|
#svgnest .nav{ float: left; margin: 0 0 0 -0.5em; padding: 0; }
|
|
#controls{ margin-top: 0.5em; float: left; position: relative; }
|
|
|
|
/* ===== Info sidebar ===== */
|
|
#info, #info_placement{ display: none; }
|
|
h1.label{
|
|
font-size: 4em; margin: 0.2em 0 0 0; padding: 0;
|
|
line-height: 1; font-weight: normal; color: var(--text);
|
|
}
|
|
h1.label sup{ font-size: 0.5em; }
|
|
.column{ margin: 0.5em 4em 2em 0; float: left; }
|
|
|
|
/* ===== Progress ===== */
|
|
.progress{
|
|
width: 51%;
|
|
clear: both;
|
|
height: 1.2em;
|
|
background-color: var(--bg-2);
|
|
border: 1px solid var(--accent); /* accent border */
|
|
border-radius: 1em;
|
|
margin-bottom: 0.4em;
|
|
}
|
|
.progress_inner{
|
|
height: 100%;
|
|
background-color: var(--accent); /* accent fill */
|
|
border-radius: 1em;
|
|
}
|
|
|
|
/* ===== Config panel ===== */
|
|
#config{
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
width: 20em;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 24.5em;
|
|
background-color: var(--bg-2);
|
|
border-radius: 0.5em;
|
|
transition: max-height 0.5s;
|
|
box-shadow: 0 2px 8px var(--shadow);
|
|
}
|
|
#configwrapper{ float: left; padding: 3em 0 1em 2em; }
|
|
#config.active{ display: block; max-height: 50em; }
|
|
#configbutton{ position: relative; z-index: 2; width: 3em; padding: 0; height: 2.5em; background-position: 50%; }
|
|
#zoominbutton, #zoomoutbutton, #exitbutton{ width: 3em; padding: 0; height: 2.5em; background-position: 50%; }
|
|
#configbutton.close:hover{ box-shadow: none; }
|
|
#configsave{ margin-left: 7%; }
|
|
|
|
#config input, #config h3, #config .tooltip{ margin: 1em 0 0 0; height: 2em; padding: 0; }
|
|
#config input{
|
|
float: left; width: 13%; font-size: 1em;
|
|
border: 1px solid var(--accent);
|
|
color: var(--text);
|
|
background: #141414;
|
|
text-align: center; clear: left; border-radius: 0.4em;
|
|
transition: border-color .15s ease, background-color .15s ease;
|
|
}
|
|
#config input:hover{ background-color: #181818; border-color: var(--accent-2); }
|
|
#config input.checkbox{ width: 7%; margin-left: 4%; margin-right: 4%; border: 1px solid var(--border); }
|
|
#config h3{ float: left; width: 65%; margin-left: 5%; padding: 0; font-size: 0.8em; line-height: 3em; color: var(--muted); }
|
|
#config .tooltip{
|
|
float: left; max-width: 15%; width: 1.5em; height: 1.5em;
|
|
font-size: 0.8em; font-weight: bold; background-color: var(--accent);
|
|
color: #fff; text-align: center; line-height: 1.5; margin-top: 1.8em;
|
|
cursor: default; border-radius: 3em;
|
|
}
|
|
#config .button{ float: left; clear: both; margin-top: 2em; }
|
|
|
|
/* ===== SVG areas ===== */
|
|
#select{ margin-top: 2em; }
|
|
#select, #bins{ float: left; width: 69%; position: relative; }
|
|
|
|
#select svg, #bins svg{
|
|
width: 100%; height: auto; position: absolute; top: 0;
|
|
margin: 0; display: block; overflow: visible; pointer-events: none;
|
|
}
|
|
|
|
/* Selection strokes (use accent; override uploaded inline styles) */
|
|
#select svg *{
|
|
fill: #fff !important;
|
|
fill-opacity: 0 !important;
|
|
stroke: var(--accent) !important;
|
|
stroke-width: 2px !important;
|
|
vector-effect: non-scaling-stroke !important;
|
|
stroke-linejoin: round !important;
|
|
pointer-events: fill !important;
|
|
}
|
|
#select svg *.fullRect{
|
|
fill: #1b1b1b !important;
|
|
fill-opacity: 1 !important;
|
|
stroke: #1b1b1b !important;
|
|
stroke-width: 2px !important;
|
|
vector-effect: non-scaling-stroke !important;
|
|
stroke-linejoin: round !important;
|
|
}
|
|
#select svg *:hover{ stroke: var(--accent-2) !important; cursor: pointer !important; }
|
|
#select svg *.active{ stroke: var(--accent-2) !important; stroke-width: 3px !important; }
|
|
#select.disabled svg *, #select.disabled svg *:hover, #select.disabled svg *.active{
|
|
stroke: #6b6b6b !important; stroke-width: 2px !important; cursor: default !important;
|
|
}
|
|
|
|
/* Bins (neutral grays) */
|
|
#bins svg{ margin-bottom: 2em; }
|
|
#bins svg.grid{ float: left; width: 45%; margin-right: 5%; min-width: 20em; }
|
|
#bins svg *{
|
|
fill: var(--gray-4) !important;
|
|
stroke: var(--gray-3) !important;
|
|
stroke-width: 2px !important;
|
|
vector-effect: non-scaling-stroke !important;
|
|
stroke-linejoin: round !important;
|
|
}
|
|
#bins svg .bin{ fill: var(--bg-3) !important; stroke: var(--gray-4) !important; }
|
|
#bins svg .hole{ fill: var(--bg) !important; stroke: var(--gray-3) !important; }
|
|
|
|
/* ===== Messages ===== */
|
|
#messagewrapper{
|
|
width: 50em; overflow: hidden;
|
|
background: var(--gray-4) url(img/close.svg) no-repeat 99% 0.5em / 3em 3em;
|
|
line-height: 4em;
|
|
position: fixed; left: 50%; margin-left: -25em; bottom: 1em;
|
|
text-align: center; border-radius: 0.5em; color: #fff;
|
|
box-shadow: 0 6px 24px var(--shadow);
|
|
border-left: 4px solid var(--accent); /* subtle accent marker */
|
|
}
|
|
#messagewrapper:hover{ background-color: #666; border-left-color: var(--accent-2); }
|
|
#message{ overflow: hidden; height: 0; }
|
|
#message.active, #message.error{ height: 4em; cursor: pointer; }
|
|
#message.error{ color: #ff314e; font-weight: bold; }
|
|
|
|
/* ===== Animations (kept intact) ===== */
|
|
.animated{
|
|
-webkit-animation-duration: 1s;
|
|
animation-duration: 1s;
|
|
-webkit-animation-fill-mode: both;
|
|
animation-fill-mode: both;
|
|
}
|
|
@-webkit-keyframes bounce{
|
|
from,20%,53%,80%,to{
|
|
-webkit-animation-timing-function: cubic-bezier(0.215,0.610,0.355,1.000);
|
|
-webkit-transform: translate3d(0,0,0);
|
|
transform: translate3d(0,0,0);
|
|
}
|
|
40%,43%{
|
|
-webkit-animation-timing-function: cubic-bezier(0.755,0.050,0.855,0.060);
|
|
-webkit-transform: translate3d(0,-30px,0);
|
|
transform: translate3d(0,-30px,0);
|
|
}
|
|
70%{
|
|
-webkit-animation-timing-function: cubic-bezier(0.755,0.050,0.855,0.060);
|
|
-webkit-transform: translate3d(0,-15px,0);
|
|
transform: translate3d(0,-15px,0);
|
|
}
|
|
90%{
|
|
-webkit-transform: translate3d(0,-4px,0);
|
|
transform: translate3d(0,-4px,0);
|
|
}
|
|
}
|
|
@keyframes bounce{
|
|
from,20%,53%,80%,to{
|
|
animation-timing-function: cubic-bezier(0.215,0.610,0.355,1.000);
|
|
-webkit-transform: translate3d(0,0,0);
|
|
transform: translate3d(0,0,0);
|
|
}
|
|
40%,43%{
|
|
animation-timing-function: cubic-bezier(0.755,0.050,0.855,0.060);
|
|
-webkit-transform: translate3d(0,-30px,0);
|
|
transform: translate3d(0,-30px,0);
|
|
}
|
|
70%{
|
|
animation-timing-function: cubic-bezier(0.755,0.050,0.855,0.060);
|
|
-webkit-transform: translate3d(0,-15px,0);
|
|
transform: translate3d(0,-15px,0);
|
|
}
|
|
90%{
|
|
-webkit-transform: translate3d(0,-4px,0);
|
|
transform: translate3d(0,-4px,0);
|
|
}
|
|
}
|
|
.bounce{
|
|
-webkit-animation-name: bounce;
|
|
animation-name: bounce;
|
|
-webkit-transform-origin: center bottom;
|
|
transform-origin: center bottom;
|
|
}
|
|
@-webkit-keyframes slideInUp{
|
|
from{
|
|
-webkit-transform: translate3d(0,100%,0);
|
|
transform: translate3d(0,100%,0);
|
|
visibility: visible;
|
|
}
|
|
to{
|
|
-webkit-transform: translate3d(0,0,0);
|
|
transform: translate3d(0,0,0);
|
|
}
|
|
}
|
|
@keyframes slideInUp{
|
|
from{
|
|
-webkit-transform: translate3d(0,100%,0);
|
|
transform: translate3d(0,100%,0);
|
|
visibility: visible;
|
|
}
|
|
to{
|
|
-webkit-transform: translate3d(0,0,0);
|
|
transform: translate3d(0,0,0);
|
|
}
|
|
}
|
|
.slideInUp{
|
|
-webkit-animation-name: slideInUp;
|
|
animation-name: slideInUp;
|
|
}
|
|
|
|
/* ===== Responsive ===== */
|
|
@media only screen and (max-width: 1800px){
|
|
body { font-size: 20px; }
|
|
#svgnest, #messagewrapper{ width: 60em; }
|
|
.progress{ width: 61%; }
|
|
}
|
|
|
|
@media only screen and (max-width: 1500px){
|
|
body { font-size: 16px; }
|
|
|
|
#svgnest, #messagewrapper{ width: 50em; }
|
|
/* replaces old 5em top margin */
|
|
#svgnest{ margin-top: clamp(0.75rem, 2vh, 1.5rem); }
|
|
|
|
#svgnest .logo{ width: 25%; }
|
|
#controls{ margin-top: 0.75em; }
|
|
|
|
#splash .logo{ width: 60%; margin: 0 20%; }
|
|
#splash h1.title{ margin: 0; font-size: 2em; }
|
|
#splash .subscript{ font-size: 1em; }
|
|
|
|
h1.label{ font-size: 3em; }
|
|
.progress{ width: 75%; }
|
|
}
|
|
|
|
@media only screen and (max-width: 1300px){
|
|
body { font-size: 14px; }
|
|
}
|
|
|
|
@media only screen and (max-width: 790px){
|
|
#splash{ width: 100%; }
|
|
#splash .logo{ width: 40%; margin-left: 30%; float: left; }
|
|
#splash h1.title{ margin: 0; font-size: 2em; }
|
|
#splash .subscript{ font-size: 1em; }
|
|
body { font-size: 18px; }
|
|
|
|
#splash .nav{ width: 60%; margin-left: 20%; margin-top: 2em; }
|
|
#splash .nav li{ float: none; display: block; margin-top: 1em; }
|
|
|
|
#faq{ padding: 3em; }
|
|
}
|
|
|
|
/* ===== MakeArmy splash nav & buttons — one-row, mono font, less rounded ===== */
|
|
|
|
/* use Hack sitewide */
|
|
html, body {
|
|
font-family: "Hack", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
|
|
"Liberation Mono", "Courier New", monospace;
|
|
}
|
|
|
|
/* kill the old float hack and center as a single flex row */
|
|
#splash .nav {
|
|
/* override old: float:left; width:150%; margin: 4em 0 0 -20%; */
|
|
float: none;
|
|
width: auto;
|
|
margin: 3rem auto 0 auto;
|
|
padding: 0;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
/* keep them on one line on wide screens */
|
|
flex-wrap: nowrap;
|
|
gap: 18px;
|
|
}
|
|
|
|
/* list items no longer float */
|
|
#splash .nav li {
|
|
list-style: none;
|
|
float: none;
|
|
}
|
|
|
|
/* button shape: slimmer, less rounded, mono font keeps line-height crisp */
|
|
#splash .nav .button {
|
|
border-radius: 12px; /* was pill; now closer to your other UI */
|
|
padding: 0.55em 1.2em; /* a bit tighter so all fit in one row */
|
|
font-size: 0.95em;
|
|
line-height: 1.2;
|
|
white-space: nowrap; /* prevent label wrapping */
|
|
}
|
|
|
|
/* keep left padding for icon-capable buttons (no icon on Back is fine) */
|
|
#splash .nav .button.start { padding-left: 3.7em; }
|
|
#splash .nav .button.spinner { padding-left: 3.7em; }
|
|
#splash .nav .button.upload { padding-left: 4em; }
|
|
#splash .nav .button.download { padding-left: 4em; }
|
|
#splash .nav .button.code { padding-left: 3.9em; }
|
|
#splash .nav .button.config { padding-left: 3.9em; }
|
|
#splash .nav .button.close { padding-left: 3.9em; }
|
|
|
|
/* ensure the standalone Back button visually matches height/shape */
|
|
#splash .nav .button.back {
|
|
/* no extra left padding (no icon), but same height/roundedness */
|
|
}
|
|
|
|
/* responsive fallback: allow wrapping only on truly narrow screens */
|
|
@media (max-width: 860px) {
|
|
#splash .nav {
|
|
flex-wrap: wrap;
|
|
row-gap: 12px;
|
|
}
|
|
}
|
|
|
|
|
|
/* ===== Splash buttons: sharp corners, no icons, one row ===== */
|
|
|
|
/* one-line row stays the same */
|
|
#splash .nav{
|
|
display:flex; align-items:center; justify-content:center;
|
|
flex-wrap:nowrap; gap:14px; /* you can nudge this if you need space */
|
|
margin:3rem auto 0; padding:0; width:auto; float:none;
|
|
}
|
|
|
|
/* kill legacy floats */
|
|
#splash .nav li{ list-style:none; float:none; }
|
|
|
|
/* sharper buttons + uniform padding */
|
|
#splash .nav .button{
|
|
border-radius:6px; /* sharper (not quite square) */
|
|
padding:0.55em 1.2em; /* same for all buttons */
|
|
font-size:0.95em;
|
|
line-height:1.2;
|
|
white-space:nowrap;
|
|
}
|
|
|
|
/* nuke all icon pseudo-elements from the splash row */
|
|
#splash .nav .button::before{ display:none !important; }
|
|
|
|
/* remove the old “extra left padding for icons” */
|
|
#splash .nav .button.start,
|
|
#splash .nav .button.spinner,
|
|
#splash .nav .button.upload,
|
|
#splash .nav .button.download,
|
|
#splash .nav .button.code,
|
|
#splash .nav .button.config,
|
|
#splash .nav .button.close{
|
|
padding:0.55em 1.2em;
|
|
}
|
|
|
|
/* responsive: only wrap on narrow screens */
|
|
@media (max-width: 860px){
|
|
#splash .nav{ flex-wrap:wrap; row-gap:12px; }
|
|
}
|
|
|
|
/* ===== Powered-by footer on splash ===== */
|
|
#poweredby{
|
|
margin: 1.25rem auto 0;
|
|
text-align: center;
|
|
font-size: 0.95rem;
|
|
color: var(--muted);
|
|
max-width: 72ch;
|
|
}
|
|
#poweredby a{
|
|
color: var(--accent);
|
|
text-decoration: underline;
|
|
}
|
|
#poweredby a:hover{ color: var(--accent-2); }
|
|
|
|
|
|
|
|
/* Restore icon backgrounds for app controls (non-splash) */
|
|
.button.start{ background: #1a1a1a url(img/start.svg) no-repeat 1.8em 50%; background-size: 1.4em 1.4em; padding-left: 3.7em; }
|
|
.button.spinner{ background: #1a1a1a url(img/spin.svg) no-repeat 1.8em 50%; background-size: 1.4em 1.4em; padding-left: 3.7em; }
|
|
.button.upload{ background: #1a1a1a url(img/upload.svg) no-repeat 2.2em 50%; background-size: 1em 1em; padding-left: 4em; }
|
|
.button.download{ background: #1a1a1a url(img/download.svg) no-repeat 2.2em 50%; background-size: 1em 1em; padding-left: 4em; }
|
|
.button.code{ background: #1a1a1a url(img/code.svg) no-repeat 2em 50%; background-size: 1.2em 1.2em; padding-left: 3.9em; }
|
|
.button.config{ background: #1a1a1a url(img/settings.svg) no-repeat 2em 50%; background-size: 1.2em 1.2em; padding-left: 3.9em; }
|
|
.button.close{ background: #1a1a1a url(img/close.svg) no-repeat 1.8em 50%; background-size: 2em 2em; padding-left: 3.9em; }
|
|
.button.zoomin{ background: #1a1a1a url(img/zoomin.svg) no-repeat 50% 50%; background-size: 1.5em 1.5em; }
|
|
.button.zoomout{ background: #1a1a1a url(img/zoomout.svg) no-repeat 50% 50%; background-size: 1.5em 1.5em; }
|
|
.button.exit{ background: #1a1a1a url(img/close.svg) no-repeat 50% 50%; background-size: 1.5em 1.5em; }
|
|
|
|
|
|
|
|
/* Keep splash narrow; stretch only its nav/footer for centering */
|
|
#splash{ width:28em; margin:8% auto 0 auto; }
|
|
#splash .logo{ max-width: 220px; width: 50%; margin: 0 0 0 25%; height:auto; display:block; }
|
|
#splash .nav, #poweredby{ width:100%; text-align:center; }
|
|
|
|
|
|
|
|
/* --- Splash page buttons override: text-only, no icons --- */
|
|
#splash .nav .button {
|
|
border-radius: 6px;
|
|
padding: 0.55em 1.2em;
|
|
font-size: 0.95em;
|
|
line-height: 1.2;
|
|
white-space: nowrap;
|
|
|
|
background-image: none !important;
|
|
padding-left: 1.2em !important; /* uniform spacing */
|
|
}
|
|
|