aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/standalone/videos/test-embed.scss
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/standalone/videos/test-embed.scss')
-rw-r--r--client/src/standalone/videos/test-embed.scss149
1 files changed, 149 insertions, 0 deletions
diff --git a/client/src/standalone/videos/test-embed.scss b/client/src/standalone/videos/test-embed.scss
new file mode 100644
index 000000000..df3d69f21
--- /dev/null
+++ b/client/src/standalone/videos/test-embed.scss
@@ -0,0 +1,149 @@
1
2* {
3 font-family: sans-serif;
4}
5
6html {
7 width: 100%;
8 overflow-x: hidden;
9 overflow-y: auto;
10}
11
12body {
13 margin: 0;
14 padding: 0;
15}
16
17iframe {
18 border: none;
19 border-radius: 8px;
20 min-width: 200px;
21 width: 100%;
22 height: 100%;
23 pointer-events: none;
24}
25
26aside {
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
51main {
52 padding: 0 1em;
53 display: flex;
54 align-items: flex-start;
55}
56
57.spacer {
58 flex: 1;
59}
60
61header {
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
95fieldset {
96 border: none;
97 min-width: 8em;
98 legend {
99 border-bottom: 1px solid #ccc;
100 width: 100%;
101 }
102}
103
104button {
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
114a {
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} \ No newline at end of file