style.css

/*
 *** COLOR SCHEMES ***
 */

/* LIGHT theme */
[data-theme="light"] {
  --bg: #ffffff; /* app background */
  --bg-accent-1: #f7f7f7; /* some headers */
  --bg-accent-2: #ffffff; /* input fields */
  --footer: #e4e4e4; /* settings footer */

  --primary: #bd9d5e; /* buttons, borders, icons */

  --header-text: #191d24;
  --plain-text: #191d24;

  --highlight: #00acb1; /* autoselect, current champ, toggles */
  --logo-large: #bd9d5e; /* icons: welcome & no pages */

  /* active/hovered tab, list item */
  --list-hover: rgba(34, 36, 38, 0.1);
  --menu-hover: rgba(0, 0, 0, 0.03);
  --menu-active: #d8cfbd;

  --lang-dropddown-border: 1px solid rgba(34, 36, 38, 0.15);

  /* buttons, scrollbars */
  --control: #bd9d5e;
  --control-hover: #c7b185;

  /* changelog scrollbar */
  --scrollbar-grey: rgba(0, 0, 0, 0.25);
  --scrollbar-grey-hover: rgba(0, 0, 0, 0.15);

  /* settings/changelog dimmer  */
  --dimmer-modal: rgba(255, 255, 255, 0.8);
}

/* DARK theme */
[data-theme="dark"] {
  --bg: #191d24; /* app background */
  --bg-accent-1: #121212; /* some headers */
  --bg-accent-2: #121212; /* input fields */
  --footer: #121212; /* settings footer */

  --primary: #bd9d5e; /* borders, icons */

  --header-text: #bd9d5e;
  --plain-text: #d8cfbd;

  --highlight: #00acb1; /* autoselect, current champ, toggles */
  --logo-large: #00acb1; /* icons: welcome & no pages */

  /* active/hovered tab, list item */
  --list-hover: #191d24;
  --menu-hover: #121212aa;
  --menu-active: #121212;

  --lang-dropddown-border: none;

  /* buttons, scrollbar */
  --control: #71552b;
  --control-hover: #bd9d5e;

  /* changelog scrollbar */
  --scrollbar-grey: rgba(255, 255, 255, 0.1);
  --scrollbar-grey-hover: rgba(255, 255, 255, 0.15);

  /* settings/changelog dimmer  */
  --dimmer-modal: rgba(40, 42, 42, 0.85);
}

/*
*** MAIN STYLESHEET ***
*/

body {
  background: var(--bg);
}

runebook {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header .ui.secondary.pointing.menu {
  background: var(--bg-accent-1);
  border-bottom: 1px solid var(--primary);
}

header .ui.secondary.pointing.menu .header.item {
  color: var(--header-text) !important;
}

select-champion {
  margin-bottom: -14px;
}

chapters-segment,
chapters-segment > .ui.container {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Header dividers */
.ui.horizontal.divider {
  color: var(--header-text);
}

/*** Pagelist ***/

#pagelist-limiter {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 460px);
  max-height: calc(100vh - 373px);
  padding-top: 12px !important;
  overflow: hidden;
  background: var(--bg);
  border-color: var(--primary);
}

#grid-wrapper {
  flex: 1;
  overflow: auto;
}

#grid-wrapper::-webkit-scrollbar-track {
  background: none !important;
}

#grid-wrapper::-webkit-scrollbar-thumb,
#grid-wrapper::-webkit-scrollbar-thumb:window-inactive {
  background: var(--control) !important;
}

#grid-wrapper::-webkit-scrollbar-thumb:hover {
  background: var(--control-hover) !important;
}

.runepage.list {
  height: 100%;
}

.runepage.list > .item {
  display: flex !important;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  /* border-top: 1px solid var(--primary) !important; */
  color: var(--plain-text) !important;
}

.runepage.list > .item:not(:first-child) {
  border-top: 1px solid var(--primary) !important;
}

.runepage.list > .item > .runeimages {
  flex: 0 0 auto;
  order: 1;
}

.runepage.list > .item > .pagename {
  flex: 1 1 auto;
  padding: 0 1em;
  order: 2;
}

.runepage.list > .item > .buttons {
  flex: 0 0 auto;
  order: 3;
}

/*** Pagelist placeholders ***/

chapters-segment .ui.active.inverted.dimmer {
  background: var(--bg) !important;
  z-index: 0;
}

.welcome.header,
.welcome.header .sub.header,
.nopages.header,
.nopages.header .sub.header {
  color: var(--plain-text) !important;
}

.welcome.header .icon,
.nopages .icon {
  color: var(--logo-large) !important;
}

/*** Champion selection ***/

#autochamp-label span {
  color: var(--plain-text);
}

#autochamp-label::before {
  background: var(--bg-accent-2) !important;
  border: 2px solid var(--primary);
}

.ui.toggle.checkbox.checked #autochamp-label::before {
  background: var(--bg) !important;
  border: 2px solid var(--highlight);
}

#autochamp-label::after {
  background: #d8cfbd !important;
}

input {
  background: var(--bg-accent-2) !important;
  color: var(--plain-text) !important;
}

input::selection {
  background: var(--highlight);
  color: var(--plain-text);
}

.search.champion input {
  border: 2px solid var(--primary);
}

.search.champion.focus input {
  border-color: var(--highlight);
}

.search.icon {
  color: var(--plain-text) !important;
}

.search > .results {
  background: var(--bg-accent-2) !important;
  border: 1px solid var(--primary) !important;
}

.search > .results .result {
  border-bottom-color: var(--list-hover) !important;
}

.search > .results .result:hover {
  background: var(--list-hover) !important;
  transition: background-color 150ms ease-in;
}

.search > .results .result.active {
  background: var(--list-hover) !important;
}

.search > .results .result .title {
  color: var(--plain-text) !important;
}

.search > .results .result.active .title {
  color: var(--plain-text) !important;
}

/*** Tabs ***/

#chapters-menu {
  margin-top: 0;
  background: var(--bg);
  border-color: var(--primary);
}

#chapters-menu .item {
  color: var(--header-text);
}

#chapters-menu .item:hover {
  background: var(--menu-hover);
  transition: background-color 150ms ease-in;
}

#chapters-menu .item.active {
  background: var(--menu-active);
  box-shadow: inset 1px 0px 0px 0px var(--primary),
    inset -1px 0px 0px 0px var(--primary);
  color: var(--plain-text);
}

#chapters-menu .item.active::after {
  background: var(--menu-active) !important;
  border-bottom: 2px solid var(--primary) !important;
  border-right: 2px solid var(--primary) !important;
}

/*** Current page ***/

current-page .ui.segment {
  background: var(--bg) !important;
  border: 1px solid var(--primary);
}

current-page .ui.segment .header {
  color: var(--plain-text) !important;
}

current-page .ui.segment .header .sub.header {
  color: var(--plain-text) !important;
}

current-page .ui.button {
  margin-right: 10px;
}

/*** Buttons, Popups ***/

.ui.button,
.ui.button:focus {
  background: var(--control);
}

.ui.button:hover,
.ui.button:active {
  background: var(--control-hover);
}

.ui.popup {
  background: var(--bg-accent-1) !important;
  color: var(--plain-text);
  border: 1px solid var(--control);
}

.ui.popup::before {
  background: var(--bg-accent-1) !important;
  border-bottom: 1px solid var(--control) !important;
  border-right: 1px solid var(--control) !important;
  box-shadow: none !important;
}

.ui.popup.bottom::before {
  background: var(--bg-accent-1) !important;
  border-left: 1px solid var(--control) !important;
  border-bottom: none !important;
  border-right: none !important;
  border-top: 1px solid var(--control) !important;
  box-shadow: none !important;
}

/*** Modals ***/

.ui.dimmer {
  background: var(--dimmer-modal) !important;
}

.ui.modal {
  background: none !important;
}

.ui.modal > .content {
  background: var(--bg) !important;
}

.settings-modal .divider.header > i {
  padding-right: 0.5em;
  font-size: 1em;
}

.field > label > i1-8n,
.field > span > i1-8n,
.field > span,
span > i1-8n,
.ui.toggle.checkbox > label > i1-8n {
  color: var(--plain-text) !important;
}

.settings-modal .selection.dropdown.lang {
  background: var(--bg-accent-2) !important;
  color: var(--plain-text) !important;
  border: var(--lang-dropddown-border) !important;
}

/* For Text on language label not to disappear when dropdown is visible */
.settings-modal .selection.visible.dropdown.lang > .text:not(.default) {
  color: var(--plain-text) !important;
}

/* Language list */
.settings-modal .selection.dropdown.lang > .menu {
  background: var(--bg) !important;
  border: var(--lang-dropddown-border) !important;
}

.settings-modal .selection.dropdown.lang > .menu > .item {
  background: var(--bg-accent-2);
  color: var(--plain-text) !important;
  border-color: var(--list-hover) !important;
}

.settings-modal .selection.dropdown.lang > .menu > .item:hover {
  background: var(--list-hover) !important;
  transition: background-color 150ms ease-in;
}

.selection.dropdown.lang > .menu::-webkit-scrollbar-track {
  background: var(--bg-accent-2) !important;
}

.selection.dropdown.lang > .menu::-webkit-scrollbar-thumb,
.selection.dropdown.lang > .menu::-webkit-scrollbar-thumb:window-inactive {
  background: var(--control) !important;
}

.selection.dropdown.lang > .menu::-webkit-scrollbar-thumb:hover {
  background: var(--control-hover) !important;
}

.settings-modal .ui.toggle.checkbox label:before {
  background: var(--bg-accent-1) !important;
}

.settings-modal .ui.basic.orange.label.restart {
  background: var(--bg-accent-2) !important;
}

.settings-modal .footer {
  background: var(--footer) !important;
  color: var(--plain-text) !important;
}

.settings-modal .footer a {
  text-decoration: underline;
}

.settings-modal .bug.icon {
  color: var(--plain-text) !important;
}

.changelog-modal > .header {
  background: var(--bg-accent-1) !important;
  color: var(--header-text) !important;
  border-bottom-color: var(--primary) !important;
  text-align: center;
}

.changelog-modal > .content {
  color: var(--plain-text) !important;
}

.changelog-modal > .content > img {
  width: 66% !important;
}

.changelog-modal .ui.horizontal.divider {
  color: var(--primary) !important;
}

.changelog-modal .icon {
  color: var(--plain-text) !important;
}

.ui.modal .scrolling::-webkit-scrollbar-track {
  background: none !important;
}

.ui.modal .scrolling::-webkit-scrollbar-thumb,
.ui.modal .scrolling::-webkit-scrollbar-thumb:window-inactive {
  background: var(--scrollbar-grey) !important;
}

.ui.modal .scrolling::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-grey-hover) !important;
}
.item-list {
  text-align: center;
  word-break: break-word;
  justify-items: end;
}
.item-buttons {
  display: flex;
  justify-content: space-evenly;
}
.item-img {
  border-radius: 500rem;
  margin-bottom: 1rem;
}