]>
Commit | Line | Data |
---|---|---|
99941732 WL |
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 | } |