userstyles/meine-fahrschule.user.css

/* ==UserStyle==
@name           Dracula for Meine Fahrschul-App
@namespace      git.m3.fyi/Marsn3
@version        1.0.0
@description    A dark Theme for Meine Fahrschul-App
@author         Marsn3
@homepageURL https://git.m3.fyi/Marsn3/custom-css
@updateURL https://git.m3.fyi/projects/22/raw/main/meine-fahrschule.user.css
@license MIT
==/UserStyle== */

@-moz-document domain("meine-fahrschulapp.de") {
  /*~~~~~ Base Colors ~~~~~*/
  :root {
    --txtPrimaryColor: #f8f8f2;
    --txtHintColor: #7b81a6;
    --txtDisabledColor: #9599b7;
    --primaryColor: #969dca;
    --bodyColor: #282a36;
    --baseColor: #282a36;
    --baseAlt1Color: #585b74;
    --baseAlt2Color: #4d5166;
    --baseAlt3Color: #424457;
    --baseAlt4Color: #373949;
    --infoColor: #8be9fd;
    --infoAltColor: #8be9fd;
    --successColor: #50fa7b;
    --successAltColor: #50fa7b;
    --dangerColor: #ff5555;
    --dangerAltColor: #ff5555;
    --warningColor: #f1fa8c;
    --warningAltColor: #ffffa5;
    --overlayColor: rgba(65, 82, 105, 0.25);
    --tooltipColor: rgba(255, 255, 255, 0.85);
    --shadowColor: rgba(0, 0, 0, 0.05);
    accent-color: var(--primaryColor);
  }

  * .tab-container,
  #text,
  .background-stable,
  .question-selector,
  .row.tab-body,
  .button,
  ion-content.examination,
  a.button.question-field,
  div,
  a,
  ion-header-bar,
  label,
  ion-nav-view,
  select,
  button,
  ion-content.examination a.button.question-field,
  ion-content.examination .header,
  ion-content.examination .list.card,
  body > div:nth-child(1) > ion-nav-view > ion-view > ion-nav-bar,
  body
    > div:nth-child(1)
    > ion-nav-view
    > ion-view
    > ion-nav-bar
    > div:nth-child(3)
    > ion-header-bar,
  .pane,
  .view,
  .tabs-training .tab-nav,
  .item {
    background-color: var(--bodyColor) !important;
    color: var(--txtPrimaryColor) !important;
    text-shadow: 1px 1px var(--baseAlt4Color);
  }
  ion-content.examination,
  ion-content.examination-result,
  ion-content.background-stable {
    background-repeat: no-repeat;
    background-size: cover;
  }

  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  #answer_value1 {
    color: var(--textPrimaryColor) !important;
    text-shadow: 1px 1px var(--baseAlt4Color);
  }
  body
    > div:nth-child(1)
    > ion-nav-view
    > ion-view
    > ion-content
    > div.scroll
    > div.question-selector
    > div.row.tab-body {
    background-color: var(--bodyColor) !important;
  }
  ion-content.examination a.button.tab-header.selected,
  ion-content.examination a.button.question-field.answered {
    background-color: var(--baseAlt3Color) !important;
    color: var(--textPrimaryColor) !important;
    text-shadow: 1px 1px var(--baseAlt4Color);
    border: none !important;
  }
  ion-content.examination a.button.tab-header,
  ion-content.examination a.button.question-field {
    background-color: var(--baseAlt3Color) !important;
    color: var(--textPrimaryColor) !important;
    text-shadow: 1px 1px var(--baseAlt4Color);
    border: none !important;
  }
  .question-video,
  body
    > div:nth-child(1)
    > ion-nav-view
    > ion-view
    > ion-content
    > div.scroll
    > question
    > div
    > div,
  body
    > div:nth-child(1)
    > ion-nav-view
    > ion-view
    > ion-content
    > div.scroll
    > div.question-selector,
  body
    > div:nth-child(1)
    > ion-nav-view
    > ion-view
    > ion-content
    > div.scroll
    > question
    > div
    > question-video
    > div:nth-child(1),
  body
    > div:nth-child(1)
    > ion-nav-view
    > ion-view
    > ion-content
    > div.scroll
    > question
    > div
    > question-video
    > div:nth-child(4),
  body
    > div:nth-child(1)
    > ion-nav-view
    > ion-view
    > ion-content
    > div.scroll
    > question
    > div
    > question-video
    > div:nth-child(2)
    > div
    > div,
  .bar-header.has-tabs-top {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
  }

  body
    > div:nth-child(1)
    > ion-nav-view
    > ion-view
    > ion-content
    > div.scroll
    > question
    > div
    > question-video
    > div:nth-child(2)
    > div
    > div
    > button {
    border-right: none !important;
  }
  ion-content.examination a.button.question-field.selected,
  .training-level-tab.selected {
    background-color: var(--infoColor) !important;
    color: var(--textPrimaryColor) !important;
  }
  .question-image {
    position: relative;
    z-index: 10;
    transition: width 0.5s ease;
  }
  .question-image:hover {
    width: 200%;
    height: auto;
  }
  ion-content.examination-result .question-icon.correctly-answered {
    background: var(--successColor) !important;
    color: var(--textPrimaryColor) !important;
  }
  ion-content.examination-result .question-icon.wrongly-answered {
    background: var(--dangerColor) !important;
    color: var(--textPrimaryColor) !important;
  }

  body
    > div:nth-child(1)
    > ion-nav-view
    > ion-view
    > ion-content
    > div.scroll
    > div.row.header {
    padding-top: 5%;
  }
  .balanced,
  a.balanced {
    color: var(--successColor);
  }
  a.button.tab-header.marked:before,
  ion-content.examination a.button.question-field.marked:before {
    border-left: 10px solid var(--warningColor);
  }
  .bar {
    background-color: var(--baseColor);
  }
  .training-level-tabs {
    background-color: var(--baseAlt3Color) !important;
  }
  hr,
  .toggle.toggle-positive input:checked + .track {
    color: var(--infoColor) !important;
    background-color: var(--infoColor) !important;
    border-color: var(--infoColor);
  }
  .toggle input:checked + .track {
    color: var(--successColor) !important;
    background-color: var(--successColor) !important;
    border-color: var(--successColor);
  }
  .item-radio .radio-icon {
    color: var(--successColor) !important;
  }
  .ion-log-out:before {
    color: var(--dangerColor);
  }
  .positive {
    color: var(--infoColor);
  }
  ion-content.examination a.button.tab-header.selected,
  ion-content.examination a.button.question-field.answered {
    background-color: var(--successColor) !important;
  }
}