path: root/css/cs16.css

:root {
  --bg: #4a5942;
  --secondary-bg: #3e4637;

  --accent: #c4b550;
  --secondary-accent: #958831;

  --text: #dedfd6;
  --secondary-text: #d8ded3;
  --text-3: #a0aa95;

  --border-light: #8c9284;
  --border-dark: #292c21;

  --disabled-text: #292c21;
  --disabled-text-shadow: #75806f;

  --outline: #000;
  --slider: #7f8c7f;
  --slider-bg: #1f1f1f;

  --scrollbar-track: #5a6a50;
}

@font-face {
  font-family: ArialPixel;
  src: url('https://cdn.jsdelivr.net/gh/ekmas/cs16.css@main/ArialPixel.ttf')
    format('truetype');
  font-weight: 400;
  font-style: normal;
}

.cs {
  & {
    font-weight: 400;
    line-height: 1.5;
    background-color: var(--bg);
    color: var(--text);
    font-family: ArialPixel, system-ui, sans-serif;
  }

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

  * {
    margin: 0;
    padding: 0;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
  }

  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    overflow-wrap: break-word;
    font-weight: 400;
  }

  /* Scrollbars */

  ::-webkit-scrollbar {
    width: 18px;
    width: 1.125rem;
  }

  ::-webkit-scrollbar-track {
    background-color: var(--scrollbar-track);
    width: 18px;
    width: 1.125rem;
    border: 1px solid var(--border-dark);
    border-left: 0;
  }

  ::-webkit-scrollbar-thumb {
    width: 17px;
    width: 1.0625rem;
    background-color: var(--bg);
    border: 1px solid;
    border-color: var(--border-light) var(--border-dark) var(--border-dark)
      var(--border-light);
  }

  ::-webkit-scrollbar-corner {
    background-color: var(--scrollbar-track);
  }

  ::-webkit-scrollbar-button:vertical:start:decrement,
  ::-webkit-scrollbar-button:vertical:end:increment {
    display: block;
  }

  ::-webkit-scrollbar-button:vertical:start:increment,
  ::-webkit-scrollbar-button:vertical:start:decrement,
  ::-webkit-scrollbar-button:vertical:end:increment,
  ::-webkit-scrollbar-button:vertical:end:decrement {
    background-repeat: no-repeat;
    height: 17px;
    height: 1.0625rem;
  }

  ::-webkit-scrollbar-button:vertical:start {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='16' viewBox='0 0 15 16'%3E%3Cpath d='M5,9 6,9 6,10 5,10 M6,9 7,9 7,10 6,10 M6,8 7,8 7,9 6,9 M7,9 8,9 8,10 7,10 M7,8 8,8 8,9 7,9 M7,7 8,7 8,8 7,8 M8,9 9,9 9,10 8,10 M8,8 9,8 9,9 8,9 M8,7 9,7 9,8 8,8 M8,6 9,6 9,7 8,7 M9,9 10,9 10,10 9,10 M9,8 10,8 10,9 9,9 M9,7 10,7 10,8 9,8 M10,9 11,9 11,10 10,10 M10,8 11,8 11,9 10,9 M11,9 12,9 12,10 11,10 ' fill='%23a0aa95'/%3E%3C/svg%3E");
  }

  ::-webkit-scrollbar-button:vertical:start,
  ::-webkit-scrollbar-button:vertical:end {
    border: 1px solid;
    border-color: var(--border-light) var(--border-dark) var(--border-dark)
      var(--border-light);
  }

  ::-webkit-scrollbar-button:vertical:start:active,
  ::-webkit-scrollbar-button:vertical:end:active {
    border-color: var(--border-dark) var(--border-light) var(--border-light)
      var(--border-dark);
  }

  ::-webkit-scrollbar-button:vertical:start:active,
  ::-webkit-scrollbar-button:vertical:start:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='16' viewBox='0 0 15 16'%3E%3Cpath d='M5,9 6,9 6,10 5,10 M6,9 7,9 7,10 6,10 M7,9 8,9 8,10 7,10 M8,9 9,9 9,10 8,10 M9,9 10,9 10,10 9,10 M10,9 11,9 11,10 10,10 M11,9 12,9 12,10 11,10 M6,8 7,8 7,9 6,9 M7,8 8,8 8,9 7,9 M8,8 9,8 9,9 8,9 M9,8 10,8 10,9 9,9 M10,8 11,8 11,9 10,9 M7,7 8,7 8,8 7,8 M8,7 9,7 9,8 8,8 M9,7 10,7 10,8 9,8 M8,6 9,6 9,7 8,7 ' fill='%23ffffff'/%3E%3C/svg%3E");