keeb.css

/*****************************************************************************
 * Keyboard Geometry
******************************************************************************/

/* XXX magic numbers */
#left  .matrix { transform-origin: -8px 56px; }
#right .matrix { transform-origin: 67px 56px; }
.leftThumb  .thumb { transform-origin: -14px -62px; }
.rightThumb .thumb { transform-origin:  74px -62px; }

/* XXX Quacken Zero 25.07 */
.zero #left    { transform: translate(-9px, 3px); }
.zero #right   { transform: translate(914px, 3px); }
.zero #outline { transform: translate(-194px, -242px) scale(3.34); }

/* XXX Quacken Flex 25.12+ */
.flex #left    { transform: translate(-12px, 45px); }
.flex #right   { transform: translate(908px, 45px); }
.flex #outline { transform: translate(478px, 191px) scale(3.338, -3.338); }

/* QuackMatrix */
.qmx #right { transform: translate(970px, 0px); }

/* Generic ortholinear view */
.none  #right,
.ortho #right { transform: translate(810px, 0px); }
.none  .col6,
.ortho .col6 { display: none; }
.none .thumbCluster { display: none !important; }

/* XXX dirty WebKit fixes */
@supports (-webkit-hyphens: none) {
  .flex #left    { transform: translate(-10px, 53px); }
  .flex #right   { transform: translate(863px, 50px); }
  .flex #outline { transform: translate(455px, 191px) scale(3.338, -3.338); }
  .none  #right,
  .ortho #right  { transform: translate(772px, 0px); }
}

.board {
  fill:   rgba(130, 156, 175, 0.40);
  stroke: rgba(130, 156, 175, 0.10);
  stroke-width: 1px;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: none;
}
.keycaps {
  stroke: navy;
  stroke-width: 0.5px;
  stroke-dasharray: 1 2;
  display: none !important;
}
.tap-pref {
  stroke-width: 1.2px;
}
text.sticky {
  transform: rotate(-90deg);
}
.zero .zero, .flex .flex,
.qmx .qmx, .qmx_natural .qmx_natural, .qmx_straight .qmx_straight,
.ortho .ortho {
  display: block;
}


/*****************************************************************************
 * Labels: text, symbols
******************************************************************************/

text {
  font: normal 16px sans-serif;
  text-align: center;
  text-anchor: middle;
}
.specialKey text {
  font-size: 14px;
}
text.mac {
  font-size: 14px;
  transform: translate(0, 2px);
}
text.pc, text.fn {
  font-size: 12px;
}
text.title,
text.shortcut {
  font-size: 10px;
}

text.level0, use.level0,
text.level1, use.level1,
text.level2, use.level2 { opacity: 0.5; }
text.colorNav, text.borderNav,
text.colorNum, text.borderNum,
text.colorFun, text.borderFun,
text.colorSym, text.borderSym,
text.colorMod, text.borderMod,
.thumb .level0,
.thumb .level1,
.thumb .level2 { opacity: 1; }
/* ugly but used for manual overrides only */
.dimmed { opacity: 0.3 !important; }

/* symbols */
use.level0,
use.level2,
use.layerSym,
use.layerNav,
use.layerVim {
  stroke-width: 2.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.matrix .layerNav { display: none; }
.matrix .layerVim { display: none; }
.matrix .layerFun { display: none; }
.matrix .layerSym { display: none; }
.matrix .layerNum { display: none; }

[layer3="nav"] .layerNav { display: block; }
[layer3="vim"] .layerVim { display: block; }
[layer3="fun"] .layerFun { display: block; }
[layer4="sym"] .layerSym { display: block; }
[layer4="num"] .layerNum { display: block; }

[layer3="nav"] .layerVim,
[layer3="vim"] .layerNav { display: none !important; }
.thumb  text.title,
.matrix text.title,
.key:hover        use.title,
.thumb:hover  >   use.title,
.specialKey:hover use.title { display: none; }
use.title,
.key:hover        text.title,
.thumb:hover  >   text.title,
.specialKey:hover text.title { display: block; }

#select {
  transform: translate(70px, 280px);
}
#select text {
  font-size: 10px;
  text-align: left;
  text-anchor: start;
}

.hrm .holdTap.pinkyHRM,
.dual .holdTap { display: none; }
.hrm .holdTap,
#right[layer3="fun"] .holdTap { display: block; }

.holdTap .pc,
.holdTap .mac { display: none; }
.pc .holdTap .pc,
.mac .holdTap .mac { display: block; }

.specialKey .pc,
.specialKey .mac { display: none; }
:host(.pc) .specialKey .pc,
:host(.mac) .specialKey .mac { display: block; }


/*****************************************************************************
 * Color Theme
******************************************************************************/

:root {
  color-scheme: light dark;
  --board: rgba(130, 156, 175, 0.40);

  --key-bg: #fff;
  --key-fg: #666;
  --key-label: #444;
  --key-special: #ddd;

  /* Symbol layer */
  --layer-sym-fg: #4646ff;
  --shift-sym-fg: #4f4fac;
  --shift-sym-bg: #ceceff;

  /* Navigation layer */
  --layer-nav-fg: rgb(198, 106, 29);
  --shift-nav-fg: #aa422b;
  --shift-nav-bg: #ffd2ac;

  /* Numeric layer */
  --layer-num-fg: #009900;
  --shift-num-fg: #437a43;
  --shift-num-bg: #a2e7a2;

  /* Function layer */
  --layer-fun-fg: #930404;
  --shift-fun-fg: #930404;
  --shift-fun-bg: #faabe2;
}

@media (prefers-color-scheme: dark) { :root {
  --key-bg: #333;
  --key-fg: #333;
  --key-label: #aaa;
  --key-special: #555;

  /* Symbol layer */
  --layer-sym-fg: #99f;
  --shift-sym-fg: #11a;
  --shift-sym-bg: #66b;

  /* Navigation layer */
  --layer-nav-fg: #e94;
  --shift-nav-fg: #832;
  --shift-nav-bg: #a75;

  /* Numeric layer */
  --layer-num-fg: #5b5;
  --shift-num-fg: #141;
  --shift-num-bg: #484;

  /* Function layer */
  --layer-fun-fg: #e77;
  --shift-fun-fg: #522;
  --shift-fun-bg: #955;
}}

rect {
  fill:   var(--key-bg);
  stroke: var(--key-fg);
  stroke-width: .5px;
  /* opacity: 0.7; */
}

rect.specialKey,
rect.colorSpc,
.col6 rect { fill: var(--key-special); }
text       { fill: var(--key-label); }
use.level0,
use.level2 { stroke: var(--key-label); }

/* Modifier keys */
rect.borderMod,
use.layerMod { stroke: var(--key-label); }
text.colorMod  { fill: var(--key-label); }
rect.colorMod  { fill: var(--key-special); }

/* Symbol layer */
rect.borderSym,
use.layerSym { stroke: var(--layer-sym-fg); }
text.borderSym,
text.layerSym  { fill: var(--layer-sym-fg); }
text.colorSym  { fill: var(--shift-sym-fg); }
rect.colorSym  { fill: var(--shift-sym-bg); }

/* Navigation layers (NavNum, VimNav) */
rect.borderNav,
use.layerVim,
use.layerNav { stroke: var(--layer-nav-fg); }
text.borderNav,
text.layerVim,
text.layerNav  { fill: var(--layer-nav-fg); }
text.colorNav  { fill: var(--shift-nav-fg); }
rect.colorNav  { fill: var(--shift-nav-bg); }

/* Numeric layer (NumRow) */
rect.borderNum,
use.layerNum { stroke: var(--layer-num-fg); }
text.borderNum,
text.layerNum  { fill: var(--layer-num-fg); }
text.colorNum  { fill: var(--shift-num-fg); }
rect.colorNum  { fill: var(--shift-num-bg); }

/* Function/Media layer */
text.layerFun  { fill: var(--layer-fun-fg); }
text.colorFun  { fill: var(--shift-fun-fg); }
rect.colorFun  { fill: var(--shift-fun-bg); }

@media (prefers-color-scheme: dark) {
  .specialKey text.layerSym  { fill: #00f; }
  .specialKey use.layerSym { stroke: #00f; }
}