remoteview/public/styles/theme.css

Remote isolated browser platform by Dosyago

/** Comments **/
  /**
   *
   * (c) 2019 The Dosyago Corporation and ViewFinder
   *
   * Unless otherwise noted all styles are placed in document order
   * In sections arranged by different aspects, like layout, behaviour, 
   * components and elements.
  **/

@import url(/styles/fonts.css);

/** root theme **/
  :root, body {
    height: 100%;
    margin: 0;
    --system: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", system-ui, Arial, sans-serif;
    --header-text: F, sans-serif;
    --body-text: T, sans-serif;
    --form-text: DOS, sans-serif;
    --input-text: Plex, var(--system), sans-serif;
    font-family: var(--body-text);
    font-size: 17px;
    background: var(--white);
    color: var(--black);
  }

/** colors **/
  :root {
    --warm-c1: darkorange;
    --warm-c1: crimson;
    --warm-c2: gold;
    --cool-c1: dodgerblue;
    --cool-c2: mediumspringgreen;
    --c1: var(--cool-c1);
    --c2: var(--cool-c2);
    --c1: var(--warm-c1);
    --c2: var(--warm-c2);
    --white: #fff;
    --shadow1: whitesmoke;
    --shadow2: silver;
    --shadow3: #bbb;
    --shadow4: #555;
    --black: black;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --warm-c1: midnightblue;
      --warm-c2: indigo;
      --cool-c1: lime;
      --cool-c2: darkcyan;
      --c1: var(--cool-c1);
      --c2: var(--cool-c2);
      --c1: var(--warm-c1);
      --c2: var(--warm-c2);
      --white: black;
      --shadow1: midnightblue;
      --shadow2: navy;
      --shadow3: darkslategrey;
      --shadow4: darkgrey;
      --black: mediumspringgreen;
    }

    img {
      filter: invert(120%) hue-rotate(90deg);
      mix-blend-mode: screen;
    }

    .header-background header, footer {
      color: var(--cool-c2);
    }

    header form.registration > fieldset {
      background: var(--warm-c2);
      color: var(--black);
    }

    body header form fieldset input,
    body header form fieldset button {
      background: var(--white);
      color: var(--black);
      border-color: var(--white);
    }
  }