cacatoo
Version:
Building, exploring, and sharing spatially structured models
272 lines (249 loc) • 6.99 kB
CSS
/* ================================================================
Cacatoo CSS reskin — "Slightly Beneficial Genes" aesthetic
Warmer teal-slate accent, generous spacing, soft shadows.
Dark mode: toggle class "dark" on <body>.
================================================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap');
/* ── Variables — light ── */
:root {
--bg: #f2f4f6;
--surface: #ffffff;
--border: #e4e7ec;
--text: #1c2128;
--muted: #6e7a88;
--accent: #3d8b8b; /* teal-slate, not electric blue */
--accent-light: #e8f4f4;
--radius: 12px;
--slider-bg: #dde3ea;
--slider-thumb: #3d8b8b;
--btn-bg: #c7eaea;
--btn-border: #e4e7ec;
--header-bg: #5a4e6e; /* muted dusty purple */
--header-text: #ede9f4;
--footer-bg: #f2f4f6;
}
/* ── Variables — dark ── */
body.dark {
--bg: #141c22;
--surface: #1c2730;
--border: #263340;
--text: #cdd8e0;
--muted: #6a8494;
--accent: #4aa8a8;
--accent-light: #1a2e30;
--slider-bg: #263340;
--slider-thumb: #4aa8a8;
--btn-bg: #1c2730;
--btn-border: #263340;
--header-bg: #2e2440; /* deeper muted purple for dark */
--header-text: #c9bfe0;
--footer-bg: #141c22;
}
/* ── Base ── */
body {
font-family: 'DM Sans', sans-serif;
background-color: var(--bg);
color: var(--text);
margin: 16px;
font-size: 13px;
line-height: 1.6;
}
/* ── Dark toggle — fixed top-right ── */
#dark-toggle {
position: absolute;
top: 28px; right: 25px;
z-index: 999;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 20px;
padding: 5px 14px;
font-family: 'DM Sans', sans-serif;
font-size: 12px; font-weight: 500;
color: var(--text);
cursor: pointer;
box-shadow: var(--shadow);
width: auto; /* override Cacatoo's global button width */
margin: 0;
}
#dark-toggle:hover {
background: var(--accent-light);
border-color: var(--accent);
color: var(--accent);
}
/* ── Header ── */
.header {
background-color: var(--header-bg);
border: none;
box-shadow: 0 4px 16px rgba(0,0,0,.18), 0 16px 40px rgba(0,0,0,.1);
border-radius: var(--radius) var(--radius) var(--radius) var(--radius);
padding: 16px 24px;
text-align: center;
font-size: 18px;
font-weight: 600;
letter-spacing: -.25px;
color: var(--header-text);
position: relative;
z-index: 1; /* shadow bleeds over content below */
}
/* ── Content ── */
.content {
text-align: center;
padding: 18px 12px;
background-color: var(--bg);
}
/* ── Footer ── */
.footer {
background-color: var(--footer-bg);
border: none;
box-shadow: var(--shadow);
border-radius: 0 0 var(--radius) var(--radius);
padding: 12px;
font-weight: light;
text-align: center;
font-size: 8px;
color: var(--muted);
}
.footer a {
color: var(--muted);
text-decoration: none;
}
/* ── Grid / graph holders ── */
.grid-holder {
margin: 12px;
display: inline-block;
}
.graph-holder {
margin: 12px;
display: inline-block;
padding: 0;
}
/* ── FPS meter ── */
#fpsmeter,
#fpsmeter * {
font-size: 9px ;
}
/* ── Dygraph labels ── */
/* Dygraphs inlines color on tick labels so we need !important here.
The JS snippet patches the remaining inline styles on toggle. */
.dygraph-axis-label {
color: var(--muted) ;
font-family: 'DM Mono', monospace ;
font-size: 10px ;
}
/* ── Form container ── */
.form-container {
display: inline-block;
width: 220px;
margin: 12px;
vertical-align: middle;
border-radius: var(--radius);
padding: 18px 18px;
transition: background .3s, border-color .3s, box-shadow .3s;
}
/* ── Buttons ── */
button {
background-color: var(--btn-bg);
border-radius: 8px;
border: 1px solid var(--btn-border);
padding: 8px 12px;
font-family: 'DM Sans', sans-serif;
font-size: 12px;
font-weight: 500;
margin: 5px auto;
display: inline-block; /* back to inline-block so vertical-align works */
float: none;
vertical-align: middle;
padding: 10px;
margin: 10px;
width: 154px;
color: var(--text);
box-shadow: var(--shadow-sm);
transition: background-color .5s, border-color .5s, box-shadow .5s, color .5s;
}
button:hover {
background-color: var(--accent-light);
border-color: var(--accent);
color: var(--accent);
box-shadow: var(--shadow);
}
/* ── Slider row — match button height so they sit at the same vertical position ── */
.form-container br {
display: none; /* Cacatoo uses <br> between elements; hide them */
}
.form-container > * {
vertical-align: bottom; /* align to bottom so buttons sit level with slider track */
}
/* ── Numeric input ── */
input[type=number] {
background-color: var(--surface);
border: 1px solid var(--border);
border-radius: 6px;
font-family: 'DM Mono', monospace;
font-size: 11px;
color: var(--text);
padding: 4px 7px;
transition: background .2s, border-color .2s;
}
input[type=number]:focus {
outline: none;
border-color: var(--accent);
}
/* ── Slider ── */
.slider {
-webkit-appearance: none;
appearance: none;
width: 55%;
cursor: pointer;
height: 5px;
background: var(--slider-bg);
border-radius: 3px;
outline: none;
opacity: 0.6;
vertical-align: middle;
transition: opacity .2s;
}
.slider:hover { opacity: 1; }
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 15px; height: 15px;
border-radius: 50%;
background: var(--slider-thumb);
cursor: pointer;
box-shadow: 0 0 0 3px rgba(61,139,139,.15);
transition: box-shadow .15s;
}
.slider:hover::-webkit-slider-thumb {
box-shadow: 0 0 0 5px rgba(61,139,139,.22);
}
.slider::-moz-range-thumb {
width: 15px; height: 15px;
border-radius: 50%;
background: var(--slider-thumb);
cursor: pointer;
border: none;
}
/* ── Number display ── */
.number {
-webkit-appearance: none;
appearance: none;
width: 40%;
margin-top: 5px;
height: 24px;
background: var(--surface);
color: var(--text);
border: 1px solid var(--border);
border-radius: 6px;
font-family: 'DM Mono', monospace;
font-size: 11px;
padding: 0 6px;
opacity: 0.75;
vertical-align: middle;
transition: opacity .2s, border-color .2s;
}
.number:hover { opacity: 1; }
.number:focus { outline: none; border-color: var(--accent); opacity: 1; }
/* ── Canvas ── */
canvas {
border-radius: 0px ;
display: block;
}