examples/assets/css/styles.css - master - githubmirror/anime

examples/assets/css/styles.css
344 строки9 KB
Julian Garnier
4.5.0
22 июн 2026, 17:32
22 июн 2026, 17:3234f4179
@font-face {
  font-family: 'IoskeleyMono';
  src: url('../fonts/IoskeleyMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IoskeleyMono';
  src: url('../fonts/IoskeleyMono-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --black-1: #252423;
  --black-2: #262422;
  --black-3: #262422;
  --black-4: #262422;
  --black-5: #272421;
  --black-6: #272421;
  --white-1: #f6f4f2;
  --white-2: #b8b6b3;
  --white-3: #9a9593;
  --white-4: #524f49;
  --white-5: #413d39;
  --white-6: #312e2b;
  --red-1: #ff4b4b;
  --red-2: #bf3e3e;
  --red-3: #9e3838;
  --red-4: #532a29;
  --red-5: #412726;
  --red-6: #322523;
  --corail-1: #ff8333;
  --corail-2: #bf672d;
  --corail-3: #9e582b;
  --corail-4: #533724;
  --corail-5: #412f23;
  --corail-6: #322922;
  --orange-1: #ffa828;
  --orange-2: #bf8026;
  --orange-3: #9e6d25;
  --orange-4: #523e23;
  --orange-5: #413422;
  --orange-6: #322b21;
  --yellow-1: #ffcc2a;
  --yellow-2: #bf9a27;
  --yellow-3: #9e8026;
  --yellow-4: #524723;
  --yellow-5: #413922;
  --yellow-6: #322d21;
  --citrus-1: #f9f640;
  --citrus-2: #bab836;
  --citrus-3: #9b9932;
  --citrus-4: #515027;
  --citrus-5: #403f24;
  --citrus-6: #323022;
  --lime-1: #b7ff54;
  --lime-2: #8bbe44;
  --lime-3: #759d3d;
  --lime-4: #42522b;
  --lime-5: #384027;
  --lime-6: #2d3123;
  --green-1: #6aff65;
  --green-2: #54be50;
  --green-3: #4a9e45;
  --green-4: #31522e;
  --green-5: #2c4029;
  --green-6: #273124;
  --emerald-1: #57f695;
  --emerald-2: #47b873;
  --emerald-3: #409962;
  --emerald-4: #2d5039;
  --emerald-5: #293f30;
  --emerald-6: #263128;
  --turquoise-1: #66ffbc;
  --turquoise-2: #52be8e;
  --turquoise-3: #479e77;
  --turquoise-4: #305242;
  --turquoise-5: #2b4035;
  --turquoise-6: #26312b;
  --cyan-1: #26f2d5;
  --cyan-2: #25b5a0;
  --cyan-3: #259686;
  --cyan-4: #244e48;
  --cyan-5: #233f39;
  --cyan-6: #23302d;
  --sega-1: #05dbe9;
  --sega-2: #0fa4ae;
  --sega-3: #138990;
  --sega-4: #1e4a4c;
  --sega-5: #203b3c;
  --sega-6: #212f2f;
  --sky-1: #33b3f1;
  --sky-2: #2e88b4;
  --sky-3: #2c7395;
  --sky-4: #26424e;
  --sky-5: #25363e;
  --sky-6: #242c2f;
  --indigo-1: #717aff;
  --indigo-2: #595fbe;
  --indigo-3: #4d519e;
  --indigo-4: #323351;
  --indigo-5: #2c2c3f;
  --indigo-6: #282630;
  --lavender-1: #a369ff;
  --lavender-2: #7d53be;
  --lavender-3: #6a489e;
  --lavender-4: #3e3051;
  --lavender-5: #342a3f;
  --lavender-6: #2b2530;
  --purple-1: #c06ddf;
  --purple-2: #9356a8;
  --purple-3: #7b4a8c;
  --purple-4: #45314b;
  --purple-5: #392b3c;
  --purple-6: #2f262d;
  --magenta-1: #e962bf;
  --magenta-2: #af4e90;
  --magenta-3: #93447a;
  --magenta-4: #4e2e43;
  --magenta-5: #3f2936;
  --magenta-6: #31252b;
  --pink-1: #ff86a7;
  --pink-2: #bf687f;
  --pink-3: #9f586b;
  --pink-4: #53363c;
  --pink-5: #412e32;
  --pink-6: #322729;
  --bg-1: #252423;
  --bg-2: #2a2928;
  --bg-3: #2f2e2d;
  --bg-4: #353433;
  --bg-5: #3a3938;
  --fg-1: #dddcda;
  --fg-2: #c6c3c1;
  --fg-3: #96918f;
  --fg-4: #65655e;
  --fg-5: #33332e;
  --input-border-radius: .25rem;
  --br: 1rem;
  --padding: 1rem;
  --border-width: 1px;
}

[data-color="fg"] { --color-1: var(--fg-1); --color-2: var(--fg-2); --color-3: var(--fg-3); --color-4: var(--fg-4); --color-5: var(--fg-5);}
[data-color="bg"] { --color-1: var(--bg-1); --color-2: var(--bg-2); --color-3: var(--bg-3); --color-4: var(--bg-4); --color-5: var(--bg-5);}
[data-color="0"] { --color-1: var(--red-1); --color-2: var(--red-2); --color-3: var(--red-3); --color-4: var(--red-4); --color-5: var(--red-5);}
[data-color="1"] { --color-1: var(--corail-1); --color-2: var(--corail-2); --color-3: var(--corail-3); --color-4: var(--corail-4); --color-5: var(--corail-5);}
[data-color="2"] { --color-1: var(--orange-1); --color-2: var(--orange-2); --color-3: var(--orange-3); --color-4: var(--orange-4); --color-5: var(--orange-5);}
[data-color="3"] { --color-1: var(--yellow-1); --color-2: var(--yellow-2); --color-3: var(--yellow-3); --color-4: var(--yellow-4); --color-5: var(--yellow-5);}
[data-color="4"] { --color-1: var(--citrus-1); --color-2: var(--citrus-2); --color-3: var(--citrus-3); --color-4: var(--citrus-4); --color-5: var(--citrus-5);}
[data-color="5"] { --color-1: var(--lime-1); --color-2: var(--lime-2); --color-3: var(--lime-3); --color-4: var(--lime-4); --color-5: var(--lime-5);}
[data-color="6"] { --color-1: var(--green-1); --color-2: var(--green-2); --color-3: var(--green-3); --color-4: var(--green-4); --color-5: var(--green-5);}
[data-color="7"] { --color-1: var(--emerald-1); --color-2: var(--emerald-2); --color-3: var(--emerald-3); --color-4: var(--emerald-4); --color-5: var(--emerald-5);}
[data-color="8"] { --color-1: var(--turquoise-1); --color-2: var(--turquoise-2); --color-3: var(--turquoise-3); --color-4: var(--turquoise-4); --color-5: var(--turquoise-5);}
[data-color="9"] { --color-1: var(--cyan-1); --color-2: var(--cyan-2); --color-3: var(--cyan-3); --color-4: var(--cyan-4); --color-5: var(--cyan-5);}
[data-color="10"] { --color-1: var(--sega-1); --color-2: var(--sega-2); --color-3: var(--sega-3); --color-4: var(--sega-4); --color-5: var(--sega-5);}
[data-color="11"] { --color-1: var(--sky-1); --color-2: var(--sky-2); --color-3: var(--sky-3); --color-4: var(--sky-4); --color-5: var(--sky-5);}
[data-color="12"] { --color-1: var(--indigo-1); --color-2: var(--indigo-2); --color-3: var(--indigo-3); --color-4: var(--indigo-4); --color-5: var(--indigo-5);}
[data-color="13"] { --color-1: var(--lavender-1); --color-2: var(--lavender-2); --color-3: var(--lavender-3); --color-4: var(--lavender-4); --color-5: var(--lavender-5);}
[data-color="14"] { --color-1: var(--purple-1); --color-2: var(--purple-2); --color-3: var(--purple-3); --color-4: var(--purple-4); --color-5: var(--purple-5);}
[data-color="15"] { --color-1: var(--magenta-1); --color-2: var(--magenta-2); --color-3: var(--magenta-3); --color-4: var(--magenta-4); --color-5: var(--magenta-5);}
[data-color="16"] { --color-1: var(--pink-1); --color-2: var(--pink-2); --color-3: var(--pink-3); --color-4: var(--pink-4); --color-5: var(--pink-5);}

*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
}

html,
body {
  background-color: var(--bg-1);
  color: var(--fg-1);
  font-family: 'IoskeleyMono', monospace, sans-serif;
}

.br { border-radius: var(--br); }
.br .br { border-radius: calc(var(--br) * .5); }
.br .br .br { border-radius: calc(var(--br) * .25); }

.black { color: var(--bg-1); }
.white { color: var(--fg-1); }
.red { color: var(--red-1); }
.orange { color: var(--corail-1); }
.yellow { color: var(--yellow-1); }
.blue { color: var(--sky-1); }
.green { color: var(--green-1); }

.grid {
  --one-cell: 100px;
  --border-color: rgba(255,255,255,.75);
  flex-grow: 1;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
}

.grid:before {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(-90deg, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(-90deg, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:
    calc(var(--one-cell) / 10) calc(var(--one-cell) / 10),
    calc(var(--one-cell) / 10) calc(var(--one-cell) / 10),
    var(--one-cell) var(--one-cell), var(--one-cell) var(--one-cell),
    var(--one-cell) var(--one-cell), var(--one-cell) var(--one-cell);
  background-position: 0 -1px;
  backface-visibility: hidden;
}

.grid:before {
  width: calc(75px + 100%);
  left: -75px;
}

@media (min-width: 500px) {
  .grid:before {
    width: 100%;
    left: 0;
  }
}

/* Logs */

.log {
  --width: 22ch;
  --height: 20ch;
  position: fixed;
  z-index: 10;
  top: 0;
  overflow-y: scroll;
  width: var(--width);
  height: var(--height);
  padding-left: 1ch;
  padding-right: 1ch;
  padding-bottom: 1ch;
  font-family: ui-monospace, monospace;
  white-space: pre;
  background-color: rgba(0, 0, 0, .5);
}

@keyframes reveal {
  from { opacity: 1; }
  to { opacity: .4; }
}

.log span {
  animation: reveal 2s ease-in-out forwards;
}

/* Inputs */

button,
select {
  width: 100%;
  flex-shrink: .5;
  border: none;
  background-color: var(--white-1);
  border-radius: var(--input-border-radius);
  white-space: nowrap;
  margin: 0;
  height: 2rem;
}

button {
  padding: 0 .75rem;
}

select:disabled,
button:disabled {
  background-color: var(--bg-3);
  color: var(--fg-4);
  cursor: not-allowed;
}

select:not(:disabled):hover,
button:not(:disabled):hover {
  cursor: pointer;
  background-color: var(--white-2);
}

legend {
  display: flex;
  gap: .5rem;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 2rem;
}

label {
  display: flex;
  gap: .5rem;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  height: 2rem;
}

fieldset {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 1px;
}

fieldset.vertical {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

fieldset > * {
  border-radius: 0;
}

fieldset > *:first-child {
  border-radius: var(--input-border-radius) 0 0 var(--input-border-radius);
}

fieldset > *:last-child {
  border-radius: 0 var(--input-border-radius) var(--input-border-radius) 0;
}