1 | :root {
|
---|
2 | --gs-fg-primary-col: #fff;
|
---|
3 | --gs-bg-primary-col: #29e;
|
---|
4 | }
|
---|
5 |
|
---|
6 |
|
---|
7 | html {
|
---|
8 | background: #102010 url(backgrounds/unsplash--dark-green-fern--overview.jpg) no-repeat center center fixed;
|
---|
9 | background-size: cover;
|
---|
10 | }
|
---|
11 |
|
---|
12 | html, body {
|
---|
13 | overflow: hidden;
|
---|
14 | height: 100%;
|
---|
15 | width: 100%;
|
---|
16 | margin: 0;
|
---|
17 | padding: 0;
|
---|
18 | border: 0;
|
---|
19 | }
|
---|
20 |
|
---|
21 | body {
|
---|
22 | font-family: Helvetica, Arial, "Open Sans", OpenSans, sans-serif;
|
---|
23 | color: var(--gs-fg-primary-col);
|
---|
24 | }
|
---|
25 |
|
---|
26 |
|
---|
27 |
|
---|
28 | .box {
|
---|
29 | display: flex;
|
---|
30 | flex-flow: column;
|
---|
31 | height: 100%;
|
---|
32 | }
|
---|
33 |
|
---|
34 | /* construction lines to help show what is going on */
|
---|
35 | /*
|
---|
36 | .box .row {
|
---|
37 | border: 1px dotted #0313fc;
|
---|
38 | }
|
---|
39 | */
|
---|
40 |
|
---|
41 | .box .row.header {
|
---|
42 | flex: 0 1 auto;
|
---|
43 | }
|
---|
44 |
|
---|
45 | .box .row.content {
|
---|
46 | flex: 1 1 auto;
|
---|
47 | }
|
---|
48 |
|
---|
49 | .box .row.footer {
|
---|
50 | flex: 0 1 40px;
|
---|
51 | }
|
---|
52 |
|
---|
53 | #gs-control-bar {
|
---|
54 | position: absolute;
|
---|
55 | z-index: 5;
|
---|
56 | height: 2.5rem;
|
---|
57 | color: var(--gs-fg-primary-col);
|
---|
58 | background: linear-gradient(to right, rgba(13, 17, 22, 0.64), rgba(17, 21, 28, 0.64));
|
---|
59 | text-align: center;
|
---|
60 | display: none;
|
---|
61 | }
|
---|
62 |
|
---|
63 | #gs-control-bar-toggle {
|
---|
64 | z-index: 6;
|
---|
65 | position: absolute;
|
---|
66 | left: 0px;
|
---|
67 | top: 0px;
|
---|
68 | background-color: var(--gs-bg-primary-col);
|
---|
69 | padding: 0.8rem;
|
---|
70 | }
|
---|
71 |
|
---|
72 |
|
---|
73 | /*
|
---|
74 | #fixed-height {
|
---|
75 | height: 40px;
|
---|
76 | color: white;
|
---|
77 | background: linear-gradient(to right, rgba(13, 17, 22, 0.64), rgba(17, 21, 28, 0.64));
|
---|
78 | text-align: center;
|
---|
79 | }
|
---|
80 |
|
---|
81 | #remaining-height {
|
---|
82 | overflow: hidden;
|
---|
83 | position: absolute;
|
---|
84 | top: 40px;
|
---|
85 | bottom: 0;
|
---|
86 | width: 100%;
|
---|
87 | }
|
---|
88 | */
|
---|
89 |
|
---|
90 |
|
---|
91 | .info-window {
|
---|
92 | min-height: 6.5em;
|
---|
93 | margin: 0.5em;
|
---|
94 |
|
---|
95 | background-color: var(--gs-bg-primary-col);
|
---|
96 | color: var(--gs-fg-primary-col);
|
---|
97 |
|
---|
98 | font-size: 1.2rem;
|
---|
99 |
|
---|
100 | border-radius: 0.6em;
|
---|
101 | padding: 1em;
|
---|
102 |
|
---|
103 | touch-action: none;
|
---|
104 | user-select: none;
|
---|
105 | transform: translate(0px, 0px);
|
---|
106 |
|
---|
107 | /* This makes things *much* easier */
|
---|
108 | box-sizing: border-box;
|
---|
109 |
|
---|
110 | }
|
---|
111 |
|
---|
112 | /* currently nothing specific for resize-drag that info-window does already do */
|
---|
113 | /*
|
---|
114 | .resize-drag {
|
---|
115 | }
|
---|
116 | */
|
---|
117 |
|
---|
118 |
|
---|
119 | #scale-element {
|
---|
120 | display: block;
|
---|
121 | max-width: 100%;
|
---|
122 | margin: 1rem auto;
|
---|
123 | touch-action: none;
|
---|
124 | }
|
---|
125 |
|
---|
126 |
|
---|
127 | .button {
|
---|
128 | display: inline-block;
|
---|
129 | background-color: var(--gs-bg-primary-col);
|
---|
130 | color: var(--gs-fg-primary-col);;
|
---|
131 | width: auto;
|
---|
132 | border-radius: 10px;
|
---|
133 | padding: 15px 25px;
|
---|
134 | cursor: pointer;
|
---|
135 | }
|
---|