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

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