persona5-negotiation/assets/css/style.scss

---
---

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

html {
  --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-border: #e5e5e5;
  --form-bg: #fff;
  --filter-head-bg: #f7f7f7;
  --filter-bg: #fff;
  --filter-btn: #f1f1f1;
  --filter-btn-hover: #ddd;
  --filter-btn-active: #666;
}

html[data-theme='dark']  {
  --bg-color: #1d1d1d;
  --p5-red: #dc3545;
  --headings: #dedede;
  --text: #e6e6e6;
  --table-heading: #dedede;
  --table-head-bg: #2a2a2a;
  --table-text: #e6e6e6;
  --table-border: #dedede;
  --table-bg: #1d1d1d;
  --form-bg: #1d1d1d;
  --filter-head: #2e2e2e;
  --filter-body: #1d1d1d;
  --filter-btn: #f1f1f1;
  --filter-btn-hover: #ddd;
  --filter-btn-active: #666;
}

body {
  background-color: var(--bg-color);
}
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;
}

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

// 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: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);

  th {
    font-weight: bold;
    text-align: center;
    color: var(--table-heading);
    background-color: var(--table-head-bg);
    border-color: var(--table-border);
  }

  .subheader {
    text-align: center;
    font-variant: small-caps;
    font-weight: bold;
  }

  .extra {
    display: inline;
  }

  .result {
    text-align: center;
    color: rgb(60, 60, 60);
  }

  .text {
    display: block;
  }

  .symbol {
    display: none;
  }

}

.unconfirmed {
  background-color:rgb(247, 205, 209);
}


// SWITCH
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -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 1px var(--p5-red);
}
input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
.slider.round {
  border-radius: 34px;
}
.slider.round:before {
  border-radius: 50%;
}

// 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;
}
.filter-btn:hover {
  background-color: var(--filter-btn-hover);
}
.filter-btn:focus {
  outline: none;
  box-shadow: none;
}
.filter-btn.active {
  background-color: var(--filter-btn-active);
  color: white;
}
.hidden {
  display: none;
}