]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blame_incremental - client/src/standalone/videos/test-embed.scss
Translated using Weblate (Toki Pona (tok))
[github/Chocobozzz/PeerTube.git] / client / src / standalone / videos / test-embed.scss
... / ...
CommitLineData
1@use '_variables' as *;
2@use '_mixins' as *;
3
4* {
5 font-family: sans-serif;
6}
7
8html {
9 width: 100%;
10 overflow-x: hidden;
11 overflow-y: auto;
12}
13
14body {
15 margin: 0;
16 padding: 0;
17}
18
19iframe {
20 border: 0;
21 border-radius: 8px;
22 min-width: 200px;
23 width: 100%;
24 height: 100%;
25 pointer-events: none;
26}
27
28aside {
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
55main {
56 padding: 0 1em;
57 display: flex;
58 align-items: flex-start;
59}
60
61.spacer {
62 flex: 1;
63}
64
65header {
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
100fieldset {
101 border: 0;
102 min-width: 8em;
103 legend {
104 border-bottom: 1px solid #ccc;
105 width: 100%;
106 }
107}
108
109button {
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
119a {
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}