client/src/standalone/videos/test-embed.scss

   1
   2 * {
   3   font-family: sans-serif;
   4 }
   5
   6 html {
   7   width: 100%;
   8   overflow-x: hidden;
   9   overflow-y: auto;
  10 }
  11
  12 body {
  13   margin: 0;
  14   padding: 0;
  15 }
  16
  17 iframe {
  18   border: none;
  19   border-radius: 8px;
  20   min-width: 200px;
  21   width: 100%;
  22   height: 100%;
  23   pointer-events: none;
  24 }
  25
  26 aside {
  27   width: 33vw;
  28   margin: 0 .5em .5em 0;
  29   height: calc(33vw * 0.5625);
  30 }
  31
  32 .logo {
  33   font-size: 150%;
  34   height: 100%;
  35   font-weight: bold;
  36   display: flex;
  37   flex-direction: row;
  38   align-items: center;
  39   margin-right: 0.5em;
  40
  41   .icon {
  42     height: 100%;
  43     padding: 0 18px 0 32px;
  44     background: white;
  45     display: flex;
  46     align-items: center;
  47     margin-right: 0.5em;
  48   }
  49 }
  50
  51 main {
  52   padding: 0 1em;
  53   display: flex;
  54   align-items: flex-start;
  55 }
  56
  57 .spacer {
  58   flex: 1;
  59 }
  60
  61 header {
  62   width: 100%;
  63   height: 3.2em;
  64   background-color: #F1680D;
  65   color: white;
  66   //background-image: url(../../assets/images/backdrop/network-o.png);
  67   display: flex;
  68   flex-direction: row;
  69   align-items: center;
  70   margin-bottom: 1em;
  71   box-shadow: 1px 0px 10px rgba(0,0,0,0.6);
  72   background-size: 50%;
  73   background-position: top left;
  74   padding-right: 1em;
  75
  76   h1 {
  77     margin: 0;
  78     padding: 0 1em 0 0;
  79     font-size: inherit;
  80     font-weight: 100;
  81     position: relative;
  82     top: 2px;
  83   }
  84 }
  85
  86 #options {
  87   display: flex;
  88   flex-wrap: wrap;
  89
  90   & > * {
  91     flex-grow: 0;
  92   }
  93 }
  94
  95 fieldset {
  96   border: none;
  97   min-width: 8em;
  98   legend {
  99     border-bottom: 1px solid #ccc;
 100     width: 100%;
 101   }
 102 }
 103
 104 button {
 105   background: #F1680D;
 106   color: white;
 107   font-weight: bold;
 108   border-radius: 5px;
 109   margin: 0;
 110   padding: 1em 1.25em;
 111   border: none;
 112 }
 113
 114 a {
 115   text-decoration: none;
 116
 117   &:hover {
 118     text-decoration: underline;
 119   }
 120
 121   &, &:hover, &:focus, &:visited, &:active {
 122     color: #F44336;
 123   }
 124 }
 125
 126 @media (max-width: 900px) {
 127   aside {
 128     width: 50vw;
 129     height: calc(50vw * 0.5625);
 130   }
 131 }
 132
 133 @media (max-width: 600px) {
 134   main {
 135     flex-direction: column;
 136   }
 137
 138   aside {
 139     width: calc(100vw - 2em);
 140     height: calc(56.25vw - 2em * 0.5625);
 141   }
 142 }
 143
 144 @media (min-width: 1800px) {
 145   aside {
 146     width: 50vw;
 147     height: calc(50vw * 0.5625);
 148   }
 149 }