High-Contrast-Dark-Theme-Userscript.user.js

// ==UserScript==
// @name         AniList High-Contrast Dark-Theme
// @description  Adjusts the dark-theme to have higher contrast and some other tweaks.
// @match        https://anilist.co/*
// @match        https://anichart.net/*
// @author       Reina
// @namespace    https://github.com/Reinachan
// @homepageURL  https://github.com/Reinachan/AniList-High-Contrast-Dark-Theme
// @supportURL   https://anilist.co/user/Reina/
// @downloadURL  https://github.com/Reinachan/AniList-High-Contrast-Dark-Theme/raw/main/High-Contrast-Dark-Theme-Userscript.user.js
// @version      1.9.0
// @license      MIT
// @grant        GM_addStyle
// @weight       900
// ==/UserScript==
const css = `

  :root {
    --color-background: 14, 18, 22;
    --color-blue: 120, 180, 255;
    --color-shadow-blue: 0, 0, 0;
    --color-foreground: 20, 25, 31;
    --color-foreground-alt: 18, 23, 29;
    --color-foreground-blue: 26, 33, 45;
    --color-foreground-grey: 15, 22, 28;
    --color-foreground-grey-dark: 6, 12, 13;
    --color-background-300: 30, 42, 56;
    --color-background-100: 19, 24, 32;
    --color-background-200: 14, 18, 22;
    --color-text: 240, 240, 240;
    --color-text-light: 220, 230, 240;
    --color-text-lighter: 230, 230, 240;
    --color-text-bright: 255, 255, 255;
    --color-blue-100: 247, 250, 252;
    --color-blue-200: 236, 246, 254;
    --color-blue-300: 201, 232, 255;
    --color-blue-400: 143, 215, 255;
    --color-blue-500: 111, 200, 255;
    --color-blue-600: 61, 180, 242;
    --color-blue-700: 8, 143, 214;
    --color-blue-800: 12, 101, 166;
    --color-blue-900: 11, 70, 113;
    --color-blue-1000: 16, 61, 85;
    --color-gray-1200: 251, 251, 251;
    --color-gray-1100: 240, 243, 246;
    --color-gray-1000: 221, 230, 238;
    --color-gray-900: 201, 215, 227;
    --color-gray-800: 173, 192, 210;
    --color-gray-700: 139, 160, 178;
    --color-gray-600: 116, 136, 153;
    --color-gray-500: 100, 115, 128;
    --color-gray-400: 81, 97, 112;
    --color-gray-300: 30, 42, 56;
    --color-gray-100: 21, 31, 46;
    --color-gray-200: 11, 22, 34;
  }
  .site-theme-dark {
    --color-blue: 120, 180, 255;
    --color-shadow-blue: 8, 10, 16, 0.5;
    --color-foreground: 20, 25, 31;
    --color-foreground-alt: 18, 23, 29;
    --color-background: 14, 18, 22;
    --color-foreground-blue: 26, 33, 45;
    --color-foreground-grey: 15, 22, 28;
    --color-foreground-grey-dark: 6, 12, 13;
  }
  .site-theme-dark {
    /* Notification Dropdown */
    --color-background-300: 30, 42, 56;
    --color-background-100: 19, 24, 32;
    --color-background-200: 14, 18, 22;
    /* Text */
    --color-text: 240, 240, 240;
    --color-text-light: 220, 230, 240;
    --color-text-lighter: 230, 230, 240;
    --color-text-bright: 255, 255, 255;
    /* Blue Colours */
    --color-blue-100: 247, 250, 252;
    --color-blue-200: 236, 246, 254;
    --color-blue-300: 201, 232, 255;
    --color-blue-400: 143, 215, 255;
    --color-blue-500: 111, 200, 255;
    --color-blue-600: 61, 180, 242;
    --color-blue-700: 8, 143, 214;
    --color-blue-800: 12, 101, 166;
    --color-blue-900: 11, 70, 113;
    --color-blue-1000: 16, 61, 85;
  }
  /* Navbar */
  #app .nav-unscoped {
    background: #14191f;
    color: #eaeeff;
  }
  #app .nav-unscoped.transparent {
    background: rgba(20, 25, 31, 0.5);
    color: #eaeeff;
  }
  #app .nav-unscoped.transparent:hover {
    background: #14191f;
    color: #eaeeff;
  }
  #app .nav-unscoped .dropdown::before {
    border-bottom-color: rgb(var(--color-background-100));
  }
  .nav[data-v-e2f25004] {
    background: #181a32;
  }
  .banner-image[data-v-e2f25004] {
    filter: grayscale(50%);
  }
  /* Mobile and small screens adjustments */
  @media screen and (max-width: 760px) {
    .page-content > .container,
    .page-content > .user > .container {
      padding-left: 2px;
      padding-right: 2px;
    }
  }
  /* Increase font size */
  @media screen and (max-width: 760px) {
    html {
      font-size: 11px;
    }
  }
  /* Enable edit button on mobile */
  @media screen and (max-width: 760px) {
    .media.media-page-unscoped .sidebar {
      display: grid;
      gap: 20px;
      margin-bottom: 20px;
    }
    .media.media-page-unscoped .sidebar > * {
      grid-column: span 2;
    }
    .media.media-page-unscoped .sidebar .review.button {
      grid-row: 1;
      grid-column: 2;
      width: 100%;
      height: 40px;
      margin: 0;
      display: flex;
    }
    .media.media-page-unscoped .sidebar .review.button.edit {
      grid-column: 1;
    }
    .media.media-page-unscoped .sidebar .review.button.edit span::after {
      content: ' Database Entry';
    }
    .media.media-page-unscoped .sidebar .data {
      margin-bottom: 0;
    }
    .media.media-page-unscoped .sidebar .rankings {
      grid-row: 4;
      display: grid;
      gap: 10px;
    }
    .media.media-page-unscoped .sidebar .rankings .ranking {
      margin-bottom: 0;
    }
    .media.media-page-unscoped .sidebar .rankings .ranking.rated {
      grid-column: 1;
    }
    .media.media-page-unscoped .sidebar .rankings .ranking.popular {
      grid-column: 2;
    }
  }
  @media screen and (max-width: 450px) {
    .media.media-page-unscoped .sidebar .rankings .ranking.rated {
      grid-column: 1;
      grid-row: 1;
    }
    .media.media-page-unscoped .sidebar .rankings .ranking.popular {
      grid-column: 1;
      grid-row: 2;
    }
  }
  /* Profile page mobile edits */
  @media screen and (max-width: 760px) {
    .user.user-page-unscoped .overview .section .about {
      padding: 10px;
    }
  }
  @media screen and (max-width: 1040px) {
    .tooltip {
      display: none !important;
    }
    .user.user-page-unscoped .overview .desktop {
      display: grid;
    }
    .user.user-page-unscoped .overview .desktop.favourites.preview .favourites-wrap {
      display: grid;
      grid-auto-flow: column;
      justify-content: unset;
      width: unset;
      margin: 0;
      overflow-x: scroll;
    }
    .user.user-page-unscoped .overview .desktop.favourites.preview .favourites-wrap a {
      margin: 0;
      margin-bottom: 10px;
    }
    .user.user-page-unscoped .overview .desktop.favourites.preview .favourites-wrap a:last-of-type {
      margin-right: 15px;
    }
    .user.user-page-unscoped .overview .desktop.favourites.preview .favourites-wrap.studios {
      display: flex;
      flex-wrap: nowrap;
    }
    .user.user-page-unscoped .overview .desktop.favourites.preview .favourites-wrap.studios a {
      flex-grow: 1;
      flex-shrink: 0;
      margin-bottom: 6px;
    }
    .user.user-page-unscoped .overview > .section:nth-of-type(2) .stats-wrap {
      display: none;
    }
  }
  /* Coloured Text */
  .name[data-v-5e514b1e] {
    color: rgb(var(--color-blue));
  }
  .site-theme-dark .user-page-unscoped.pink {
    --color-blue: 252, 157, 214;
  }
  /* Dropdown menu arrows */
  .el-dropdown-menu.el-popper[x-placement^='top'] .popper__arrow::after,
  .el-select-dropdown.el-popper[x-placement^='top'] .popper__arrow::after {
    bottom: 0;
  }
  .el-dropdown-menu.el-popper[x-placement^='bottom'] .popper__arrow::after,
  .el-select-dropdown.el-popper[x-placement^='bottom'] .popper__arrow::after {
    top: 0;
  }
  .el-dropdown-menu.el-popper .popper__arrow,
  .el-select-dropdown.el-popper .popper__arrow,
  .el-dropdown-menu.el-popper .popper__arrow::after,
  .el-select-dropdown.el-popper .popper__arrow::after {
    border-top-color: rgb(var(--color-foreground-grey-dark));
    border-bottom-color: rgb(var(--color-foreground-grey-dark));
  }
  .el-dropdown-menu.el-popper.activity-extras-dropdown[x-placement^='top'] .popper__arrow::after {
    bottom: 0;
  }
  .el-dropdown-menu.el-popper.activity-extras-dropdown[x-placement^='bottom'] {
    transform: translateY(25px);
  }
  .el-dropdown-menu.el-popper.activity-extras-dropdown[x-placement^='bottom'] .popper__arrow {
    top: -5px;
  }
  /* Dropdown menu */
  .el-dropdown-menu.el-popper {
    text-align: center;
    background-color: rgb(var(--color-foreground-grey-dark));
    box-shadow: 0 1px 10px 0 rgba(var(--color-shadow-blue));
  }
  .el-dropdown-menu.el-popper.el-dropdown-menu--medium {
    width: 150px;
  }
  .el-dropdown-menu.el-popper.el-dropdown-menu--medium.activity-extras-dropdown {
    text-align: left;
  }
  .el-dropdown-menu.el-popper.el-dropdown-menu--medium .el-dropdown-menu__item:hover {
    background-color: rgb(var(--color-foreground-alt)) !important;
  }
  .el-dropdown-menu.el-popper .el-dropdown-menu__item--divided {
    border-top: 3px solid rgb(var(--color-foreground-alt));
    margin: auto;
  }
  .el-dropdown-menu.el-popper .el-dropdown-menu__item--divided::before {
    background-color: rgb(var(--color-foreground-grey-dark)) !important;
  }
  /* List editor dropdown menu */
  .el-select-dropdown.el-popper {
    background-color: rgb(var(--color-foreground-grey-dark)) !important;
  }
  .el-select-dropdown {
    box-shadow: 0 1px 10px 0 rgba(var(--color-shadow-blue));
  }
  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    background-color: rgb(var(--color-background)) !important;
  }
  /* Activity Textareas */
  .activity-edit .input.el-textarea textarea {
    box-shadow: none;
    will-change: height;
    transition: height 0s;
  }
  /* Activity Feed Sort */
  .feed-select .el-dropdown,
  .section-header .el-dropdown {
    margin-right: 10px;
  }
  .feed-select .el-dropdown .feed-filter,
  .section-header .el-dropdown .feed-filter,
  .feed-select .el-dropdown .el-dropdown-link,
  .section-header .el-dropdown .el-dropdown-link {
    display: none;
  }
  .feed-select .el-dropdown .el-dropdown-menu,
  .section-header .el-dropdown .el-dropdown-menu {
    display: flex !important;
    position: relative;
    text-align: center;
    margin: 0;
    padding: 0;
    box-shadow: none;
    background-color: rgb(var(--color-foreground));
    border-radius: 3px;
  }
  .feed-select .el-dropdown .el-dropdown-menu .el-dropdown-menu__item,
  .section-header .el-dropdown .el-dropdown-menu .el-dropdown-menu__item {
    line-height: inherit;
    font-size: 1.2rem;
    font-weight: 400;
    white-space: nowrap;
    flex-grow: 1;
    margin: 0;
    padding: 6px 10px;
    color: rgb(var(--color-text-lighter));
    border-radius: 3px;
  }
  .feed-select .el-dropdown .el-dropdown-menu .el-dropdown-menu__item:hover,
  .section-header .el-dropdown .el-dropdown-menu .el-dropdown-menu__item:hover {
    background-color: inherit;
    color: rgb(var(--color-blue));
  }
  .feed-select .el-dropdown .el-dropdown-menu .el-dropdown-menu__item.active,
  .section-header .el-dropdown .el-dropdown-menu .el-dropdown-menu__item.active,
  .feed-select .el-dropdown .el-dropdown-menu .el-dropdown-menu__item:active,
  .section-header .el-dropdown .el-dropdown-menu .el-dropdown-menu__item:active,
  .feed-select .el-dropdown .el-dropdown-menu .el-dropdown-menu__item:focus,
  .section-header .el-dropdown .el-dropdown-menu .el-dropdown-menu__item:focus {
    font-weight: 500;
    background-color: rgb(var(--color-foreground-blue));
    color: rgb(var(--color-text));
    border-radius: 0;
  }
  .feed-select .el-dropdown .el-dropdown-menu .el-dropdown-menu__item.active:hover,
  .section-header .el-dropdown .el-dropdown-menu .el-dropdown-menu__item.active:hover,
  .feed-select .el-dropdown .el-dropdown-menu .el-dropdown-menu__item:active:hover,
  .section-header .el-dropdown .el-dropdown-menu .el-dropdown-menu__item:active:hover,
  .feed-select .el-dropdown .el-dropdown-menu .el-dropdown-menu__item:focus:hover,
  .section-header .el-dropdown .el-dropdown-menu .el-dropdown-menu__item:focus:hover {
    background-color: rgb(var(--color-foreground-blue));
  }
  .feed-select .el-dropdown .el-dropdown-menu .el-dropdown-menu__item:active:first-of-type,
  .section-header .el-dropdown .el-dropdown-menu .el-dropdown-menu__item:active:first-of-type,
  .feed-select .el-dropdown .el-dropdown-menu .el-dropdown-menu__item:first-of-type.active,
  .section-header .el-dropdown .el-dropdown-menu .el-dropdown-menu__item:first-of-type.active,
  .feed-select .el-dropdown .el-dropdown-menu .el-dropdown-menu__item:focus:first-of-type,
  .section-header .el-dropdown .el-dropdown-menu .el-dropdown-menu__item:focus:first-of-type {
    border-radius: 3px 0 0 3px;
  }
  .feed-select .el-dropdown .el-dropdown-menu .el-dropdown-menu__item:active:last-of-type,
  .section-header .el-dropdown .el-dropdown-menu .el-dropdown-menu__item:active:last-of-type,
  .feed-select .el-dropdown .el-dropdown-menu .el-dropdown-menu__item:last-of-type.active,
  .section-header .el-dropdown .el-dropdown-menu .el-dropdown-menu__item:last-of-type.active,
  .feed-select .el-dropdown .el-dropdown-menu .el-dropdown-menu__item:focus:last-of-type,
  .section-header .el-dropdown .el-dropdown-menu .el-dropdown-menu__item:focus:last-of-type {
    border-radius: 0 3px 3px 0;
  }
  .overview .section-header {
    align-items: center;
    display: flex;
  }
  .overview .section-header .el-dropdown {
    margin-right: 0px;
    margin-left: auto;
    padding-right: 0;
  }
  /* Announcement */
  .announcement {
    background-color: rgb(var(--color-blue-800)) !important;
  }
  /* Date Picker */
  .el-picker-panel {
    border: 1px solid rgb(var(--color-foreground));
    background-color: rgb(var(--color-foreground-grey-dark));
    color: rgb(var(--color-text-bright));
  }
  .el-picker-panel .el-date-picker__header-label {
    color: rgb(var(--color-text));
  }
  .el-picker-panel .el-picker-panel__icon-btn,
  .el-picker-panel .el-date-table th {
    color: rgb(var(--color-text-light));
  }
  .el-picker-panel .el-date-table td.current:not(.disabled) span {
    background-color: rgb(var(--color-blue-700));
  }
  .el-picker-panel .el-date-table th {
    border-bottom: 1px solid #60656c;
    padding: 1px;
  }
  .el-picker-panel .el-date-table td.next-month,
  .el-picker-panel .el-date-table td.prev-month {
    color: #76777a;
  }
  .el-picker-panel .el-date-table tbody tr:nth-of-type(2) td {
    padding-top: 10px;
  }
  .el-picker-panel .popper__arrow::after {
    border-bottom-color: rgb(var(--color-foreground-grey-dark)) !important;
    border-top-color: rgb(var(--color-foreground-grey-dark)) !important;
  }
  /* hoh styling */
  #hohSettings .hohCategories {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    text-align: center;
    margin: 0;
    padding: 0;
    box-shadow: none;
    background-color: rgb(var(--color-background));
    border-radius: 3px;
  }
  #hohSettings .hohCategories .hohCategory {
    border: none;
    line-height: inherit;
    font-size: 1.2rem;
    font-weight: 400;
    white-space: nowrap;
    flex-grow: 1;
    margin: 0;
    padding: 6px 10px;
    color: rgb(var(--color-text-lighter));
    border-radius: 3px;
  }
  #hohSettings .hohCategories .hohCategory:hover {
    background-color: inherit;
    color: rgb(var(--color-blue));
  }
  #hohSettings .hohCategories .hohCategory.active,
  #hohSettings .hohCategories .hohCategory:active,
  #hohSettings .hohCategories .hohCategory:focus {
    font-weight: 500;
    background-color: rgb(var(--color-foreground-blue));
    color: rgb(var(--color-text));
    border-radius: 0;
  }
  #hohSettings .hohCategories .hohCategory.active:hover,
  #hohSettings .hohCategories .hohCategory:active:hover,
  #hohSettings .hohCategories .hohCategory:focus:hover {
    background-color: rgb(var(--color-foreground-blue));
  }
  #hohSettings .hohCategories .hohCategory:active:first-of-type,
  #hohSettings .hohCategories .hohCategory:first-of-type.active,
  #hohSettings .hohCategories .hohCategory:focus:first-of-type {
    border-radius: 3px 0 0 3px;
  }
  #hohSettings .hohCategories .hohCategory:active:last-of-type,
  #hohSettings .hohCategories .hohCategory:last-of-type.active,
  #hohSettings .hohCategories .hohCategory:focus:last-of-type {
    border-radius: 0 3px 3px 0;
  }
  #hohSettings .hohDisplayBox {
    border-color: #0e1216;
    border-radius: 5px;
  }
  #hohSettings .scrollableContent {
    padding: 30px;
    padding-top: 35px;
    padding-left: 15px;
  }
  #hohSettings .hohDisplayBoxTitle {
    top: 25px;
    left: 35px;
    font-weight: bold;
    font-size: 1.7em;
  }
  #hohSettings .hohResizePearl {
    right: 10px;
    bottom: 10px;
  }
  #hohSettings .hohDisplayBoxClose {
    padding: 4px;
    border-radius: 20px;
    border-width: 2px;
    border-color: #900;
    width: 30px;
    height: 30px;
    text-align: center;
    vertical-align: bottom;
    font-weight: bold;
  }
  #hohSettings input,
  #hohSettings select {
    height: 40px;
    border-radius: 4px;
    color: rgb(var(--color-text));
    outline: 0;
    transition: 0.2s;
    border: 0;
    background: rgb(var(--color-background));
    box-shadow: none;
    padding-right: 10px;
    padding-left: 15px;
  }
  #hohSettings textarea {
    border-radius: 4px;
    color: rgb(var(--color-text));
    outline: 0;
    transition: 0.2s;
    border: 0;
    background: rgb(var(--color-background));
    box-shadow: none;
    padding: 10px;
    width: 100%;
    height: 200px;
  }
  .hohNativeInput {
    height: 40px;
    border-radius: 4px;
    color: rgb(var(--color-text));
    outline: 0;
    transition: 0.2s;
    border: 0;
    background: rgb(var(--color-background));
    box-shadow: none;
    padding-right: 10px;
    padding-left: 15px;
  }
  .info.hasMeter {
    position: absolute !important;
    width: 100%;
    left: 0 !important;
    bottom: 0 !important;
    padding: 12px;
  }
  .info.hasMeter meter {
    border-radius: 4px;
    width: 100%;
    height: 5px;
  }
  .info.hasMeter meter::-moz-meter-bar {
    border-radius: 4px;
  }
  .activity-entry {
    border-radius: 4px;
    margin-right: 0 !important;
  }
  /* Like heart */
  .action.likes .button,
  .like-wrap.thread_comment .button {
    color: rgb(var(--color-blue-dim));
  }
  .action.likes .button:hover,
  .like-wrap.thread_comment .button:hover {
    color: rgb(var(--color-blue));
  }
  .action.likes .button .fa-heart,
  .like-wrap.thread_comment .button .fa-heart {
    color: #0000;
    stroke: rgb(var(--color-blue-dim));
    stroke-width: 70;
    stroke-alignment: inner;
    font-size: 0.87em;
    padding-bottom: 0.08em;
    padding-top: 0.05em;
  }
  .action.likes .button .fa-heart:hover,
  .like-wrap.thread_comment .button .fa-heart:hover {
    stroke: rgb(var(--color-blue));
  }
  .action.likes .button.liked,
  .like-wrap.thread_comment .button.liked {
    color: rgb(var(--color-red));
  }
  .action.likes .button.liked:hover,
  .like-wrap.thread_comment .button.liked:hover {
    --color-red: 246, 124, 144;
    color: rgb(var(--color-red));
  }
  .action.likes .button.liked:hover .fa-heart,
  .like-wrap.thread_comment .button.liked:hover .fa-heart {
    color: rgb(var(--color-red));
  }
  .action.likes .button.liked .fa-heart,
  .like-wrap.thread_comment .button.liked .fa-heart {
    color: var(--color-red);
    stroke: rgba(0, 0, 0, 0);
    stroke-width: 0;
    font-size: 0.875em;
    padding-bottom: 0;
    padding-top: 0;
  }
  .action.likes .button.liked .fa-heart:hover,
  .like-wrap.thread_comment .button.liked .fa-heart:hover {
    color: rgb(var(--color-red));
  }
  /* forum thread, favourite like heart */
  .like-wrap.thread .button .fa-heart,
  .actions .favourite .fa-heart {
    color: #0000;
    stroke: rgb(var(--color-white));
    stroke-width: 70;
  }
  .like-wrap.thread .button.liked .fa-heart,
  .actions .favourite.liked .fa-heart,
  .like-wrap.thread .button.isFavourite .fa-heart,
  .actions .favourite.isFavourite .fa-heart {
    color: rgb(var(--color-white)) !important;
    stroke: rgba(0, 0, 0, 0) !important;
  }
  /* Scrollbar */
  * {
    scrollbar-color: rgb(var(--color-blue)) rgba(0, 0, 0, 0.2);
    scrollbar-width: thin;
  }
  ::-webkit-scrollbar {
    width: 4px;
    height: 8px;
  }
  ::-webkit-scrollbar-button {
    display: none;
  }
  ::-webkit-scrollbar-track {
    background-color: #1110;
    width: 0px;
  }
  ::-webkit-scrollbar-track-piece {
    display: none;
  }
  ::-webkit-scrollbar-thumb {
    background-color: rgb(var(--color-blue));
  }
  .activity-markdown .markdown {
    overflow-y: scroll !important;
    scrollbar-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
  }
  .activity-markdown .markdown:hover {
    scrollbar-color: rgb(var(--color-blue)) rgba(0, 0, 0, 0);
  }
  .activity-markdown .markdown::-webkit-scrollbar-thumb,
  .activity-markdown .markdown .about .content-wrap::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0);
  }
  .activity-markdown .markdown:hover::-webkit-scrollbar-thumb,
  .activity-markdown .markdown .about .content-wrap:hover::-webkit-scrollbar-thumb {
    background-color: rgb(var(--color-blue));
  }
  ::-webkit-scrollbar-corner {
    display: none;
  }
  ::-webkit-resizer {
    display: none;
  }
  .about .content-wrap {
    overflow-y: scroll !important;
    scrollbar-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
  }
  .about .content-wrap .markdown {
    overflow: hidden !important;
  }
  .about .content-wrap:hover {
    overflow-y: scroll !important;
    scrollbar-color: rgb(var(--color-blue)) rgba(0, 0, 0, 0);
  }
  .about .content-wrap .markdown::after {
    content: '';
    display: block;
    height: 10px;
    width: 10px;
  }
  .list-editor .custom-lists {
    overflow-y: auto;
  }
  .list-editor .custom-lists:hover {
    margin-right: 0;
  }
  /* Forum */
  .comment-wrap {
    border-left: 7px solid rgba(var(--color-foreground-blue));
  }
  .comment-wrap .child.odd {
    border-left: 7px solid rgba(var(--color-foreground-grey-dark));
  }
  /* Staff/character page header */
  .character-wrap .header,
  .staff-wrap .header {
    background: rgb(var(--color-foreground));
  }
  .character-wrap .header .name,
  .staff-wrap .header .name {
    color: rgb(var(--color-gray-900));
  }
  .character-wrap .header .name-alt,
  .staff-wrap .header .name-alt {
    color: rgb(var(--color-gray-800));
  }
  .character-wrap .header .edit,
  .staff-wrap .header .edit {
    color: rgb(var(--color-gray-800));
  }
  /* ------ Database Tools ------ */
  .media.container {
    /* General form inputs */
    /* Character page */
    /* Images */
  }
  @media screen and (max-width: 800px) {
    .media.container {
      grid-template-columns: auto;
      gap: 20px;
      min-width: 250px;
      /* Popup modal */
      /* Navigation tabs */
    }
    .media.container .el-dialog__wrapper.dialog .el-dialog {
      width: 98%;
    }
    .media.container .pages {
      grid-column: 1;
      grid-row: 1;
    }
    .media.container > div:last-of-type {
      grid-column: 1;
      grid-row: 2;
    }
  }
  .media.container .submission-form .col-2 {
    gap: 0 10px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
  .media.container .submission-form .col-3 {
    gap: 0 10px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
  .media.container .submission-form.select-group .col-3 {
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 250px));
  }
  .media.container .character-row {
    grid-template-columns: 1fr 1.3fr 0.1fr;
  }
  @media screen and (min-width: 1000px) {
    .media.container .character-row {
      grid-template-columns: 0.6fr 1.3fr 0.1fr;
    }
  }
  @media screen and (max-width: 450px) {
    .media.container .character-row {
      grid-template-columns: auto auto 40px;
      grid-template-rows: auto;
      gap: 10px;
    }
    .media.container .character-row .character.col {
      grid-row: 1;
    }
    .media.container .character-row .actor.col {
      grid-row: 2;
    }
    .media.container .character-row .actions {
      grid-column: 3;
      grid-row: 1 / span 2;
    }
  }
  @media screen and (min-width: 550px) {
    .media.container .images .submission-form:first-of-type {
      display: grid;
      grid-template-columns: min-content;
    }
    .media.container .images .submission-form:first-of-type .el-input {
      grid-column: 2;
      grid-row: 1;
    }
    .media.container .images .submission-form:first-of-type .cover {
      margin-right: 15px;
      grid-column: 1;
      grid-row: 1;
    }
  }
  .media.container .images .submission-form .cover.banner {
    width: 100%;
  }
  
`;
if (typeof GM_addStyle === 'function'){
	GM_addStyle(css);
} else {
	const style = document.createElement('style');
	style.type = 'text/css';
	style.textContent = css;
	document.body.appendChild(style);
}