/*
  ==Theme==
  @name              /f/
  @version           1.1
  @description       Yotsuba-like theme to imitate the feel of the legendary upload board.
  @author            Shady
  @launcher-version  12.1
  ==/Theme==
*/

:root {
    
    /* The following values weren't tested very well and serve just as a failsafe for the case of an update utilizing these variables */
    /* Most of these values aren't probably used anywhere when this theme is active. */
    
    /* Confirm */
    --layout__confirm-color:        #fff974;
    --layout__confirm-hover-color:  #ffd990;
    --layout__confirm-active-color: #efdc4b;
    /* Warning */
    --layout__warning-dark-color:   #5a3c10;
    --layout__warning-medium-color: #9f5b1e;
    --layout__warning-bright-color: #c1721f;
    --layout__warning-shallow:      #f78800;
    /* Valid / Invalid */
    --layout__valid-color:   #ffceb5;
    --layout__invalid-color: #af7878;
    /* Text Color */
    --layout__highlighted-text-color: rgb(192 0 0 / 1);
    --layout__disabled-text-color:    #976262;
    --layout__disabled-text-color-2:  #6c3030;
    --layout__contrast-text-color:    #191919;
    /* Background */
    --layout__quaternary-background: #ffffff;
    /* Outline Color */
    --layout__primary-outline-color: maroon;
    /* Slider */
    --layout__slider-background:        #8d919c;
    --layout__slider-background-hover:  #73767e;
    --layout__slider-background-active: #404247;
    /* Right Browse Sidebar */
    --layout__browse-right-sidebar-searchable-hover: #f3b37d;
    /* Game Image Split */
    --layout__game-image-split-hover-color:    #575757;
    --layout__game-image-split-disabled-color: #141414;
    /* Curate Page */
    --layout__curate-entry-collision-color: #ffaa5c;
    /* Simple Button */
    --layout__simple-button-background: buttonface;
    --layout__simple-button-border: buttontext;
    /* Splash Screen */
    --layout__splash-screen_loading:                 #ffd299;
    /* Misc */
    --layout__title-bar-cross-color:                 #eb4b4b;
    --layout__no-theme-suggestion-color:             #fce2c1;
    --layout__icon-button-hover-fill:                red; /* Color of "icon buttons" while the cursor is hovering over them. */
    --layout__toggle-sidebar-fill:                   #cccccc;
    --layout__drop-down-content-background-selected: #ffbd1e;
    /* Flashpoint */
    --layout__flashpoint-red: maroon;
    
    /*----------------------END OF FAILSAFE VALUES----------------------*/
    
    --layout__primary-text-color: maroon;
    --layout__secondary-text-color: #900;
    --layout__primary-background: #ffe;
    --layout__secondary-background: #fed6af;
    --layout__tertiary-background: #ea8;
    --layout__footer-scale-slider-background: var(--layout__primary-background);
    --layout__primary-font: arial,helvetica,sans-serif;
    --layout__header-menu-item-hover-background: #0000;
    --layout__header-menu-item-hover-border: #0000;
    --layout__scroll-thumb-color: #c1c1c1;
    --layout__scroll-thumb-color-hover: #c1c1c1;
    --layout__scroll-thumb-color-active: #c1c1c1;
    --layout__game-list-item-background-even: #ede2d4;
    --layout__game-list-item-background-odd: var(--layout__primary-background);
    --layout__playlist-list-item-even-background: #f0e0d6;
    --layout__playlist-list-fake-even-background: var(--layout__playlist-list-item-even-background);
    --layout__game-item-background-selected: #e6bdbd;
    --layout__game-item-background-hover: #f0d6d6;
    --layout__game-item-background-selected-hover: var(--layout__game-item-background-hover);
    --layout__playlist-list-item-editing-description-background: #feeace;
    --layout__background-faded: #0000;
    
    --layout__log-source:                     #787878;
    --layout__log-source-background-services: #212121;
    --layout__log-source-game-launcher:       #bd671c;
    --layout__log-source-language:            #8d43bd;
    --layout__log-source-redirector:          #00b1b1;
    --layout__log-source-server:              #00b800;
    --layout__log-source-curation:            #e7c809;
}

.main {
    background: #ffe url(img/fade.png) top center repeat-x;
    color: #800;
}

:link, a, .clickable-url {
    color: #00e;
    text-decoration: none;
}

:link:hover, :link:active, a:hover, a:active, .clickable-url:hover, .clickable-url:active {
    color: red!important;
}

.simple-scroll {
    --scrollbar-size: unset;
}

.title-bar {
    background-color: var(--layout__tertiary-background);
    height: 28px;
    line-height: 28px;
    padding: 0 0 0 3px;
    font-weight: normal;
    font-size: 10pt;
    border: 1px solid #800;
    border-top: 0;
}

.title-bar__inner {
    height: inherit;
    display: flex;
}

.title-bar__title {
    color: #800;
    overflow: visible;
    top: 0;
}

.title-bar__button-bar {
    top: 3px;
    height: 21px;
    display: table-cell;
}

.title-bar__button-bar__cross {
    background-image: url(img/cross.png);
    -webkit-background-size: cover;
    opacity: 1;
    margin-right: 3px;
    margin-left: 2px;
    width: 21px;
    height: 21px;
}

.title-bar__button-bar__max {
    background-image: url(img/max.png);
    -webkit-background-size: cover;
    opacity: 1;
    margin: 0 2px;
    width: 21px;
    height: 21px;
}

.title-bar__button-bar__min {
    background-image: url(img/min.png);
    -webkit-background-size: cover;
    opacity: 1;
    margin: 0 2px;
    width: 21px;
    height: 21px;
}

.title-bar__button-bar__cross:hover, .title-bar__button-bar__max:hover, .title-bar__button-bar__min:hover {
    background-color: #cc9e80;
}

.header {
    background: url(img/header-fade.png) top center repeat-x;
}

.header__menu__item__link {
    color: var(--layout__secondary-text-color);
    padding: 0.25em;
}

.header__menu__item__link::before {
  content: "[";
}

.header__menu__item__link::after {
  content: "]";
}

.header__menu__item__link-selected {
    font-weight: normal;
}

.input-field {
    color: black;
}

.header__search {
    background-color: white;
    border: 1px solid #aaa;
    margin-right: 0.5em;
    width: fit-content;
}

.header__search:focus-within {
    border: 1px solid #ea8!important;
}

.simple-selector {
    background-color: field;
    color: fieldtext;
    font-size: 13px;
}

.input-dropdown__content label:hover, .input-dropdown__content label:focus {
    background-color: #ccc;
}

.task-bar--header {
    background-color: var(--layout__tertiary-background);
}

.task-bar {
    background-color: var(--layout__primary-background);
    color: maroon;
}

.task-progress-bar {
    background-color: #ffa476;
    color: maroon;
}

.task-progress-bar--fill {
    background-color: #fff17c;
}

.footer__update-panel-updates-ready {
    background-color: #ff8c8c;
}

.footer__scale-slider__input::-webkit-slider-thumb {
    background: var(--layout__tertiary-background);
}

.footer__scale-slider__input::-webkit-slider-thumb:hover {
    background: var(--layout__tertiary-background);
    filter: brightness(0.75);
}

.floating-container {
    background-color: var(--layout__secondary-background);
    border-top: 14px solid var(--layout__tertiary-background);
}

.confirm-dialog__message {
    font-weight: normal;
}

.confirm-dialog__buttons>.simple-button {
    width: 25%;
    overflow: visible;
}

/* Home */

.fp-logo {
    background: #a22020;
}

.home-page__box {
    background: #fff;
    border: 1px solid;
    margin-bottom: .5em;
    padding-bottom: .5em;
}

.home-page__box-head {
    background: #fca;
}

.home-page__box-head--minimize {
    background: #fca;
}

.home-page__box-head--minimize:hover {
    background: #dcb092;
}

.icon:not(.icon--tag)>use {
    fill: maroon!important;
}

.icon--trash:hover>use,
.icon--pencil:hover>use,
.icon--chevron-top:hover>use,
.icon--chevron-bottom:hover>use,
.icon--chevron-right:hover>use,
.icon--chevron-left:hover>use,
.icon--caret-top:hover>use,
.icon--caret-bottom:hover>use,
.icon--layers:hover>use,
.icon--delete:hover>use,
.icon--plus:hover>use,
.icon--file:hover>use,
.icon--box:hover>use,
.icon--data-transfer-download:hover>use {
    fill: red!important;
}

.game-grid-item {
    border: #d9bfb7;
    background-color: #f0e0d6;
    color: #cc1105
}

.game-grid-item--selected, .game-grid-item {
    background-color: #ede2d4;
    color: maroon;
}

.game-grid-item--selected {
    background-color: #e6bdbd!important;
    color: inherit;
}

.game-grid-item--selected:hover, .game-grid-item:hover {
    background-color: #d99f91;
    color: maroon;
}

.game-grid-item__thumb__image {
    background-color: var(--layout__game-list-item-background-odd);
    background-color: #0000;
    background-position: bottom;
}

.game-grid-item__thumb__image {
    border: 0;
    box-shadow: unset;
}

.home-page__box-item--gotd-author {
    color: #117743;
    font-weight: 700;
}

.home-page__box-item--gotd-author > b {
    color: #800
}

.simple-button, .react-datepicker__input-container > input {
    background-color: buttonface;
    color: buttontext;
    border-color: rgb(118, 118, 118);
}

.react-datepicker__current-month, .react-datepicker__day-name, .react-datepicker__day {
    color: black;
}

.simple-button:hover:not(:disabled){
    background-color: #ddd;
}

.simple-button:disabled:hover {
    background-color: buttonface;
}

.react-datepicker {
    background-color: #eee;
    border: #000;
}

.react-datepicker__header {
    background-color: #ddd;
    border: #000;
    color: black;
}

.react-datepicker__day--selected {
    background-color: #aaa;
}

.react-datepicker__day--selected:hover, .react-datepicker__day:hover {
    background-color: #ccc;
}

.home-page__box-item--platforms>.simple-center__vertical-inner>p {
    font-size: 116%;
    font-weight: 700;
    margin-block-start: 1em;
    margin-block-end: 1em;
}

.home-page__platform-entry:hover {
    background-color: #0000;
}

/* Games / Animations */

.game-list-header__scroll-fill, .game-list-header-column__title,
.tag-list-header__scroll-fill, .tag-list-header-column__title {
    background: var(--layout__secondary-background);
}

.game-list-header-column>div,
.tag-list-header-column>div {
    background-color: #ea8;
    border: 1px solid #800;
}

.game-list-header__right>.game-list-header-column>div,
.tag-list-header__right>.tag-list-header-column>div {
    color: #800;
    font-weight: 700;
    margin-left: 2px;
    margin-right: 1px;
}

.game-list-header-column:not(.game-list-header-column--title):first-child>div {
    border-right: none;
    margin-right: 0;
}

.game-list-header-column:not(.game-list-header-column--title):nth-child(2)>div {
    border-left: none;
    margin-left: 0;
}

.game-list-header__right>div>div {
    justify-content: center;
}

.game-list-item {
    background-color: var(--layout__game-list-item-background-odd);
}

.game-list-item--even {
    background-color: var(--layout__game-list-item-background-even);
}

.game-list-item__field--title, .browse-right-sidebar__title-row__title {
    color: #cc1105;
    font-weight: 700;
}

.game-list-item__field--developer, .browse-right-sidebar__top .browse-right-sidebar__searchable {
    color: #117743;
    font-weight: 700;
}

.game-list-item:hover, .game-list-item--selected {
    background-color: #f0d6d6!important;
    color: inherit;
}

.game-browser__sidebar {
    background: unset;
    color: maroon;
}

.game-browser__sidebar__divider {
    background-color: unset;
}

.tag-static:before {
    content: "[ ";
}

.tag-static:after {
    content: " ]";
}

.tag-label {
    flex-grow: unset;
}

.input-dropdown {
    color: unset;
}

.tag-label:hover, .tag-static:hover, .browse-right-sidebar__searchable:hover {
    color: red!important;
}

.browse-right-sidebar__play-button--download, .browse-right-sidebar__play-button, .browse-right-sidebar__play-button--running {
    background-color: buttonface!important;
    color: buttontext!important;
    padding: 1px 6px!important;
    border-width: 2px!important;
    border-style: outset!important;
    border-color: buttonborder!important;
    border-image: initial!important;
}

.browse-right-sidebar__play-button--busy {
    background-color: rgba(239, 239, 239, 0.3)!important;
    color: rgba(16, 16, 16, 0.3)!important;
    border-color: rgba(118, 118, 118, 0.3)!important;
    cursor: wait!important;
}

.browse-right-sidebar__play-button--download:hover, 
.browse-right-sidebar__play-button:hover, 
.browse-right-sidebar__play-button--text:hover,
.browse-right-sidebar__play-button--dropdown:hover,
.browse-right-sidebar__play-button--running:hover {
    background-color: #ddd!important;
}

.browse-right-sidebar__play-button {
    background-color: var(--layout__primary-background);
    color: #00e;
}

.progress-bar__bar {
    display: none;
}

.progress-bar__top-text {
    background-color: white;
    font-family: monospace;
    text-align: left;
    font-size: 16px;
    padding: 1em;
}

.progress-bar__top-text:after {
    content: "...";
}

.placeholder-download-bar--title {
    margin-bottom: 0.5em;
}

.game-config-dialog .simple-dropdown-form__select-box {
    background-color: white;
    box-shadow: unset;
    padding: 0 !important;
}

.game-config-dialog .input-field-form {
    padding: 0 !important;
}

.game-config-dialog-new-middleware .simple-button {
    font-size: 1.6em !important;
}

.game-config-dialog__config {
    background-color: var(--layout__tertiary-background);
}

.game-config-dialog.simple-dropdown-form__select-text, .game-config-dialog .game-config-dialog-inputs, .game-config-dialog .simple-dropdown-button {
    padding: 0 0.4em;
}

.browse-left-sidebar {
    border: 1px solid #d9bfb7;
    margin: 12px;
}

.playlist-list-item {
    background-color: var(--layout__playlist-list-item-even-background);
}

.playlist-list-item--drag-over {
    background-color: var(--layout__playlist-list-item-even-background)!important;
}

.playlist-list-item:hover {
    background-color: var(--layout__playlist-list-item-even-background);
}

.playlist-list-fake-item * {
    font-weight: bold;
    cursor: default;
}

.playlist-list-fake-item:hover {
    background-color: var(--layout__playlist-list-item-even-background);
}

.playlist-list-fake-item:hover {
    --color: maroon;
}

.playlist-list-fake-item__inner__title {
    color: inherit;
    padding-left: 0;
}

.playlist-list-fake-item__inner__title:hover {
    color: red;
    cursor: pointer;
}

.playlist-list-fake-item__inner>svg, .playlist-list-fake-item__inner>svg>use {
    margin-right: 0.5rem;
}

.playlist-list-item--editing:nth-child(2n) {
    background-color: #d99f91;
}

.icon--question-mark>use {
    fill: maroon!important;
}

.playlist-list-item__head, .playlist-list-fake-item {
    cursor: default;
}

.playlist-list-item__title>.playlist-list-item__text-field {
    font-weight: normal;
    color: #00e;
    cursor: pointer;
}

.playlist-list-item__title>.playlist-list-item__text-field:hover {
    color: red;
    text-decoration: underline;
}

.playlist-list-item__text-field {
    color: inherit;
}

.playlist-list-item__divider>.simple-center__inner {
    font-style: italic;
}

.playlist-list-item__divider>.simple-center__inner:hover {
    color: maroon;
}

.playlist-list-item__author>.playlist-list-item__text-field {
    color: #117743;
    font-weight: 700;
}

.playlist-list-item__head:hover, .playlist-list-item--drag-over .playlist-list-item__head {
    color: inherit;
}

.playlist-list-content {
    background-color: #d99f91;
    color: maroon;
}

.playlist-list-content__buttons use {
    fill: maroon;
}

/* Tags */

.icon--arrow-right>use {
    fill: maroon;
}

.tag-list-item__field--name:before {
    content: "[";
}

.tag-list-item__field--name:after {
    content: "]";
}

/* Categories */

.tag-list-item--selected, .tag-list-item:hover, .tag-list-item--selected:hover {
    color: inherit;
}

.tag-categories__color-preview {
    color: white;
}

/* Logs */
.log {
    color: inherit;
    background-color: var(--layout__primary-background);
}

.log-page__bar {
    background-color: var(--layout__secondary-background);
}

/* Config */

.setting {
    background-color: var(--layout__playlist-list-item-even-background);        
    border: 1px solid inherit;
}

.setting__body {
    background-color: inherit;
    border: 0;
    border-radius: 0;
    border-top: 1px solid #d9bfb7;
    margin: 0 1%;
    box-shadow: unset;
}

.setting__title {
    font-size: 1.25em;
}

.setting__row__title {
    font-size: 13px;
}

.setting__row:not(:first-child) {
    border: 0;
}

.slider {
    background-color: #925f5f;
}

.slider-checked {
    background-color: #ffbc8e;
}

.setting__row__content--filepath-path .flashpoint-path__input--valid, .simple-input, .input-dropdown__input-field__back {
    background-color: white;
}

.setting__row__content--override-row__delete>use {
    fill: black;
}

.input-dropdown__input-field__button {
    height: 16px;
}

/* About */

.about-page__credits__profile {
    clip-path: unset;
}

.about-page__credits__tooltip {
  border-color: var(--layout__tertiary-background);
  background-color: var(--layout__primary-background);
  padding: 4px;
}

.about-page__credits__tooltip__title {
  color: #117743;
  font-weight: 700;
  margin-bottom: 0.25em;
}

.about-page__credits__tooltip__note {
  color: var(--layout__disabled-text-color);
  font-style: italic;
  margin-bottom: 0.5em;
}

.about-page__credits__tooltip__roles {
    list-style-type: none;
    padding: 0;
}

.about-page__credits__tooltip__roles p {
  background-color: var(--layout__primary-background);
  font-weight: 700;
}

.about-page__credits__tooltip__roles p:before {
    content: "## ";
}

/* Curate */

.curate-page-keybinds-box {
    background-color: var(--layout__primary-background);
}

.curate-page-keybinds-box h3 {
    margin-bottom: 0.5em;
}

.curate-page-keybinds-box-row td {
    display: inline;
    font-size: 13px;
}

.curate-page-keybinds-box-row td:first-child {
    border-right: 0;
}

.curate-page-keybinds-box-row td:first-child:after{
    content: "â€” "
}

.curate-page-keybinds-box-combo {
    background-color: #f7f7f7;
    border: 1px solid #ccc;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 1px 0 #ccc, 0 0 0 2px #fff inset;
    font-family: monospace;
    font-size: 11px;
    line-height: 1.4;
    padding: 0 5px;
    color: #000;
}

.curate-page__center {
    background: #ffe url(img/fade.png) top center repeat-x;
}

.curate-box__columns .simple-columns__column {
    background-color: #f0e0d6;
    border: 1px solid #d9bfb7!important;
}

.curate-page__center .curate-box-row__content {
    background-color: white;
    border: 1px solid maroon;
}

.curate-page__center .simple-input, .curate-page__center .input-dropdown__input-field__back {
    background-color: inherit;
}

.curate-page svg > use {
    fill: maroon;
}

.curate-box-row {
    margin: 1px;
}

.curate-box-row__title {
    background-color: #ea8;
    color: #800;
    font-weight: 700;
    border: 1px solid #800;
    padding: 0 5px;
    font-size: 10pt;
}

.input-dropdown__content {
    background-color: white;
    color: black;
}

.curate-box textarea, .curate-box .input-field, .curate-box .input-dropdown__input-field__back {
    margin: 0;
    padding: 2px 4px 3px;
    border: 1px solid #aaa;
    outline: none;
    font-family: arial,helvetica,sans-serif;
    font-size: 10pt;
}

.curate-box input[type=button], .curate-box input[type=submit] {
    padding: 1px 6px;
    background-color: buttonface;
    border-style: outset;
    border-radius: 3px;
}

.input-dropdown__input-field__button {
    background-image: url("img/down.png");
}

.input-dropdown__input-field__button:before {
    display: none;
}

.curate-box .curate-box-row__content {
    border: 0;
}

.curate-box .tag_alias-joiner {
    color: black;
    font-weight: normal;
}

.curate-box .tag_alias-joiner:before {
    content: "-";
}

.curate-box .tag-count {
    color: black;
}

.curate-tag {
    background-color: var(--layout__secondary-background);
}

.curate-tag:hover {
    background-color: var(--layout__tertiary-background);
}

/* Developer */

.service-box {
    background-color: var(--layout__secondary-background);
}

/* Scrollbar */
/* Copied from the Millenium theme made by MagnificentNoodle and modified */
.simple-scroll {
  --scrollbar-size: 16px;
  border: 1px solid;
  /* Inner Main Beveled Border */
  border-top-color: #0000;
  border-left-color: #ccc;
  border-bottom-color: #aaa;
  border-right-color: #aaa;
}
.simple-scroll::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}
.simple-scroll::-webkit-scrollbar-thumb {
  background-color: #d1d1d1;
  border-radius: 0px;
  border: 1px solid;
  /* Outer Beveled Border */
  border-left-color: #ccc;
  border-top-color: #ccc;
  border-right-color: #aaa;
  border-bottom-color: #aaa;
  /* Inner Beveled Border */
  box-shadow:
    1px 1px var(--layout__primary-background) inset,
    -1px -1px var(--theme__primary-border-color) inset;
}
.simple-scroll::-webkit-scrollbar-track {
  background-image: url('img/scrollbar_track_bg.png');
  box-shadow: none;
  border-radius: 0px;
}
.simple-scroll::-webkit-scrollbar-thumb:hover {
  background-color: #999;
}
::-webkit-scrollbar-button:single-button {
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-color: #d1d1d1;
  border: 1px solid;
  /* Outer Beveled Border */
  border-left-color: #ccc;
  border-top-color: #ccc;
  border-right-color: #aaa;
  border-bottom-color: #aaa;
  /* Inner Beveled Border */
  box-shadow:
    1px 1px var(--layout__primary-background) inset,
    -1px -1px var(--theme__primary-border-color) inset;
}
/* Scroll Bar Buttons */
::-webkit-scrollbar-button:single-button:active {
  border-color: #777;
  box-shadow: none;
  background-position: 1px 1px; /* 3D Depth Effect */
}
::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-image: url('img/up.png');
  background-position: -1px -1px;
}
::-webkit-scrollbar-button:single-button:vertical:decrement:active {
  background-position: 0px 0px; /* 3D Depth Effect */
}
::-webkit-scrollbar-button:single-button:vertical:increment {
  background-image: url('img/down.png');
  background-position: -1px -1px;
}
::-webkit-scrollbar-button:single-button:vertical:increment:active {
  background-position: 0px 0px; /* 3D Depth Effect */
}
::-webkit-scrollbar-button:single-button:horizontal:decrement {
  background-image: url('img/left.png');
  background-position: 4px 3px;
}
::-webkit-scrollbar-button:single-button:horizontal:decrement:active {
  background-position: 5px 4px; /* 3D Depth Effect */
}
::-webkit-scrollbar-button:single-button:horizontal:increment {
  background-image: url('img/right.png');
  background-position: 5px 3px;
}
::-webkit-scrollbar-button:single-button:horizontal:increment:active {
  background-position: 6px 4px; /* 3D Depth Effect */
}
