Last change
on this file since 47 was 47, checked in by dev, 4 years ago |
Improve interface with simple drag and drop capability
|
File size:
1.4 KB
|
Line | |
---|
1 | body {
|
---|
2 | padding: 5%;
|
---|
3 | margin: auto;
|
---|
4 | max-width: 540px;
|
---|
5 | font-family: serif;
|
---|
6 | font-size: 1.5rem;
|
---|
7 | text-align: center;
|
---|
8 | background-color: #eeeeee;
|
---|
9 | color: #222222;
|
---|
10 | }
|
---|
11 |
|
---|
12 | header {
|
---|
13 | display: flex;
|
---|
14 | flex-direction: column;
|
---|
15 | flex-wrap: wrap-reverse;
|
---|
16 | align-items: center;
|
---|
17 | align-content: center;
|
---|
18 | }
|
---|
19 |
|
---|
20 | section {
|
---|
21 | display: flex;
|
---|
22 | justify-content: flex-end;
|
---|
23 | font-size: initial;
|
---|
24 | }
|
---|
25 |
|
---|
26 | section#formsettings > * {
|
---|
27 | margin-top: 20px;
|
---|
28 | margin-left: 20px;
|
---|
29 | }
|
---|
30 |
|
---|
31 | img#logo {
|
---|
32 | height: 100%;
|
---|
33 | max-height: 30vh;
|
---|
34 | }
|
---|
35 |
|
---|
36 | h1 {
|
---|
37 | font-size: 4.0rem;
|
---|
38 | }
|
---|
39 |
|
---|
40 | ul {
|
---|
41 | list-style: none;
|
---|
42 | text-align: left;
|
---|
43 | display: inline-block;
|
---|
44 | }
|
---|
45 |
|
---|
46 | .dropzone {
|
---|
47 | padding-top: 60px;
|
---|
48 | padding-bottom: 60px;
|
---|
49 | border: 2px dashed #888888;
|
---|
50 | border-radius: 8px;
|
---|
51 | text-align: center;
|
---|
52 | margin: auto;
|
---|
53 | color: #888888;
|
---|
54 | }
|
---|
55 |
|
---|
56 | .dropzone.dragover {
|
---|
57 | color: #222222;
|
---|
58 | border-color: #222222;
|
---|
59 | }
|
---|
60 |
|
---|
61 | /* font attributes are not inherited by default */
|
---|
62 | input, input::file-selector-button {
|
---|
63 | text-align: inherit;
|
---|
64 | font-family: inherit;
|
---|
65 | font-size: inherit;
|
---|
66 | }
|
---|
67 |
|
---|
68 | @media (min-aspect-ratio: 18/9) {
|
---|
69 | header {
|
---|
70 | flex-direction: row;
|
---|
71 | }
|
---|
72 | h1 { font-size: 3rem; margin-right: 10px; }
|
---|
73 | img#logo {
|
---|
74 | height: 50%;
|
---|
75 | max-height: 20vh;
|
---|
76 | order: 2;
|
---|
77 | }
|
---|
78 | }
|
---|
79 |
|
---|
80 | @media (prefers-color-scheme: light) {
|
---|
81 | a { color: black; }
|
---|
82 | body {
|
---|
83 | color: #222222;
|
---|
84 | background-color: #eeeeee;
|
---|
85 | }
|
---|
86 | }
|
---|
87 |
|
---|
88 | @media (prefers-color-scheme: dark) {
|
---|
89 | a { color: white; }
|
---|
90 | body {
|
---|
91 | color: #eeeeee;
|
---|
92 | background-color: #222222;
|
---|
93 | }
|
---|
94 | }
|
---|
Note:
See
TracBrowser
for help on using the repository browser.