css/base.css - master - hamster75/Life

css/base.css
92 строки2 KB
Dmitry Smirnov
polishing
27 май 2026, 13:36
27 май 2026, 13:36164976c
:root {
  --bg-deep:       #080e18;
  --bg-btn:        #18253a;
  --bg-card:       #0f1825;
  --bg-panel:      #131c2a;
  --bg-chrome:     #0f1825;
  --bg-page:       #0b1220;

  --border-panel:  #1c2c40;
  --border:        #223248;
  --border-chrome: #1c2c40;
  --border-hi:     #2a4060;
  --border-focus:  #3070b8;

  --text:          #c8d8e8;
  --text-hi:       #e0eaf4;
  --text-mid:      #a0b8cc;
  --text-soft:     #7898b0;
  --text-dim:      #507080;
  --text-faint:    #385060;

  --accent:        #4a9fd4;
  --btn-color:     #5aafec;

  --overlay-bg:          rgba(8, 14, 24, 0.88);
  --overlay-border:      #2a4060;
  --overlay-kbd-bg:      #152030;
  --overlay-kbd-color:   #7ec8f0;
  --overlay-kbd-border:  #2a4060;
  --overlay-kbd-shadow:  #040c18;
  --overlay-sep:         #405870;
  --overlay-desc:        #90aabf;
  --overlay-desc-dim:    #506070;

  /* ── Font scale (overridden by settings.js via JS) ── */
  --fs-xs:    10px;
  --fs-sm:    11px;
  --fs-base:  12px;
  --fs-md:    13px;
  --fs-lg:    14px;
  --fs-title: 15px;
  --fs-xl:    16px;
  --fs-icon:  18px;
  --fs-2xl:   20px;
  --fs-3xl:   22px;

  /* ── Tile sizes (overridden by settings.js via JS) ── */
  --palette-tile-w: 80px;
  --lib-card-min:   110px;
  --soup-tile-min:  128px;
}

[data-theme="light"] {
  --bg-deep:       #e8edf2;
  --bg-btn:        #d0d8e4;
  --bg-card:       #f0f4f8;
  --bg-panel:      #f8fafc;
  --bg-chrome:     #e4eaf2;
  --bg-page:       #dce4ee;

  --border-panel:  #c8d4e0;
  --border:        #b8c8d8;
  --border-chrome: #a8bcd0;
  --border-hi:     #8098b4;
  --border-focus:  #3070b8;

  --text:          #1a2030;
  --text-hi:       #2a3848;
  --text-mid:      #3a5068;
  --text-soft:     #4a6888;
  --text-dim:      #607890;
  --text-faint:    #7890a8;

  --accent:        #1050a0;
  --btn-color:     #2060a0;

  --overlay-bg:          rgba(240, 246, 252, 0.92);
  --overlay-border:      #90aec8;
  --overlay-kbd-bg:      #dce8f2;
  --overlay-kbd-color:   #1050a0;
  --overlay-kbd-border:  #8098b4;
  --overlay-kbd-shadow:  #a8c0d4;
  --overlay-sep:         #607890;
  --overlay-desc:        #2a3848;
  --overlay-desc-dim:    #607890;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}