persona5-negotiation/assets/css/style.scss

---
---

@import "{{ site.theme }}";

html, html[data-theme='light'] {
  --bg-color: #fff;
  --p5-red: #dc3545;
  --headings: #222;
  --text: #727272;
  --table-heading: #444;
  --table-head-bg: rgba(0, 0, 0, 0.05);
  --table-text: #727272;
  --table-result-text: rgb(60, 60, 60);
  --table-unconfirmed-bg: rgb(247, 205, 209);
  --table-unconfirmed-text: rgb(60, 60, 60);
  --table-border: #e5e5e5;
  --hr-line: #e5e5e5;
  --form-bg: #fff;
  --form-border: #dee2e6;
  --form-text: #495057;
  --filter-head-bg: #f7f7f7;
  --filter-bg: #fff;
  --filter-btn: #f1f1f1;
  --filter-btn-text: #727272;
  --filter-btn-text-hover: #727272;
  --filter-btn-text-active: white;
  --filter-btn-hover: #ddd;
  --filter-btn-active: #666;
  --switch-bg: #ccc;
  --theme-switch-bg: #2a2a2a;
  --fa-font-icon: black;
}

html[data-theme='dark']  {
  --bg-color: #121212;// #1d1d1d;
  --p5-red: #dc3545;
  --headings: #dedede;
  --text: #e6e6e6;
  --table-heading: #dedede;
  --table-head-bg: #2a2a2a;
  --table-text: #e6e6e6;
  --table-result-text: #e6e6e6;
  --table-unconfirmed-text: #e6e6e6;
  --table-unconfirmed-bg: rgba(182, 76, 87, 0.705);
  --table-border: #383838;//#dedede;
  --table-bg: #121212;//#1d1d1d;
  --hr-line: #2e2e2e;
  --form-bg: #2e2e2e;//#121212;//#1d1d1d;
  --form-border: #383838;
  --form-text: #e6e6e6;
  --filter-head: #2e2e2e;
  --filter-body: #121212;//#1d1d1d;
  --filter-btn: #373737;
  --filter-btn-text: #e6e6e6;
  --filter-btn-text-hover: #121212;
  --filter-btn-text-active: #121212;
  --filter-btn-hover: #666;
  --filter-btn-active: #ddd;
  --switch-bg: #2a2a2a;
  --theme-switch-bg: #2a2a2a;
  --fa-font-icon: white;
}

@media (prefers-color-scheme: dark) {
  html {
    content: "dark";
  }
}

body {
  background-color: var(--bg-color);
  transition: background 0.2s linear;
}
h1, h2, h3, h4, h5, h6 {
  color: var(--headings);
}
footer {
  width: 100%;
  position: static !important;
}
section {
  margin-top: 2rem;
  width: auto;
  float: none;
}
header {
  width: 100%;
  position: static !important;
}
nav {
  width: auto;
  position: static !important;
}
strong {
  color: var(--headings);
}
hr {
  background: var(--hr-line);
}

// ----------- FORM ----------- //
#searchBar {
  background-color: var(--form-bg);
  border: 1px solid var(--form-border) !important;
}
.form-control {
  color: var(--form-text);
}
.form-control:focus {
  color: var(--form-text);
  outline: 0 !important;
  border-color: initial;
  box-shadow: none;
}
.input-group-text {
  border: 1px solid var(--form-border) !important;
}

// ----------- ALL QUESTIONS ----------- //
#questions {
  margin-top: 1rem;
}

// ----------- LINKS ----------- //
a {
  color: var(--p5-red);
  font-weight: normal;
}
a:hover {
  color: var(--p5-red);
  font-weight: normal;
}
a:active {
  color: var(--p5-red);
  font-weight: normal;
}
a:focus {
  color: var(--p5-red);
  font-weight: bold;
}
a:visited {
  color: var(--p5-red);
  font-weight: normal;
}

// ----------- TABLES ----------- //
table {
  width: auto;
  background-color: var(--table-bg);
  border: 1px solid var(--table-border);
  color: var(--table-text);
  font: 14px/1.5 "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  
  th {
    font-weight: bold;
    text-align: center;
    color: var(--table-heading);
    background-color: var(--table-head-bg);
    border-color: var(--table-border);
  }
  td {
    border-bottom: 1px solid var(--table-border);
  }
  .subheader {
    text-align: center;
    font-variant: small-caps;
    font-weight: bold;
  }
  .extra {
    display: inline;
  }
  .result {
    text-align: center;
    color: var(--table-result-text);
  }
  .text {
    display: block;
  }
  .symbol {
    display: none;
  }
}
.unconfirmed {
  background-color: var(--table-unconfirmed-bg);
  color: var(--table-unconfirmed-text) !important;
}

// ----------- SWITCH ----------- //
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  margin: 0;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--switch-bg);
  -webkit-transition: .4s;
  transition: .4s;
}
.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}
input:checked + .slider {
  background-color: var(--p5-red);
}
input:focus + .slider {
  box-shadow: 0 0 5px var(--p5-red);
}
input:checked + .slider:before {
  left: calc(100% - 30px);
}
.slider.round {
  border-radius: 34px;
  display: flex;
  padding: 11px;
  justify-content: space-between;
}
.slider.round:before {
  border-radius: 50%;
  z-index: 2;
}
.fa-icons {
  color: black;
  transform: scale(1.25);
}
.fa-font {
  color: var(--fa-font-icon);
  transform: scale(1.15);
}

// ----------- DARK MODE ----------- //
#themeSwitchLabel .slider {
  background-color: var(--theme-switch-bg);
}
#themeSwitchLabel .slider.round  {
  padding: 10px;
}
.fa-moon {
  color: #f1c40f;
  transform: scale(1.5);
}
.fa-sun {
  color: #f39c12;
  transform: scale(1.5);
}

// ----------- FILTER ----------- //
.card {
  background-color: var(--filter-head);
}
#shadowFilters {
  background-color: var(--filter-body);
}
.filter-btn {
  border: none;
  outline: none;
  background-color: var(--filter-btn);
  cursor: pointer;
  font-size: small;
  margin: .2rem .2rem;
  color: var(--filter-btn-text);
}
.filter-btn:hover {
  background-color: var(--filter-btn-hover);
  color: var(--filter-btn-text-hover);
}
.filter-btn:focus {
  outline: none;
  box-shadow: none;
}
.filter-btn.active {
  background-color: var(--filter-btn-active);
  color: var(--filter-btn-text-active);
}
.hidden {
  display: none;
}