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 | height: 2.5rem;
|
---|
55 | color: var(--gs-fg-primary-col);
|
---|
56 | background: linear-gradient(to right, rgba(13, 17, 22, 0.64), rgba(17, 21, 28, 0.64));
|
---|
57 | text-align: center;
|
---|
58 | display: none;
|
---|
59 | }
|
---|
60 |
|
---|
61 | #gs-control-bar-toggle {
|
---|
62 | position: absolute;
|
---|
63 | left: 0px;
|
---|
64 | top: 0px;
|
---|
65 | background-color: var(--gs-bg-primary-col);
|
---|
66 | padding: 0.8rem;
|
---|
67 | }
|
---|
68 |
|
---|
69 |
|
---|
70 | /*
|
---|
71 | #fixed-height {
|
---|
72 | height: 40px;
|
---|
73 | color: white;
|
---|
74 | background: linear-gradient(to right, rgba(13, 17, 22, 0.64), rgba(17, 21, 28, 0.64));
|
---|
75 | text-align: center;
|
---|
76 | }
|
---|
77 |
|
---|
78 | #remaining-height {
|
---|
79 | overflow: hidden;
|
---|
80 | position: absolute;
|
---|
81 | top: 40px;
|
---|
82 | bottom: 0;
|
---|
83 | width: 100%;
|
---|
84 | }
|
---|
85 | */
|
---|
86 |
|
---|
87 |
|
---|
88 | .info-window {
|
---|
89 | min-height: 6.5em;
|
---|
90 | margin: 0.5em;
|
---|
91 |
|
---|
92 | background-color: var(--gs-bg-primary-col);
|
---|
93 | color: var(--gs-fg-primary-col);
|
---|
94 |
|
---|
95 | font-size: 1.2rem;
|
---|
96 |
|
---|
97 | border-radius: 0.6em;
|
---|
98 | padding: 1em;
|
---|
99 |
|
---|
100 | touch-action: none;
|
---|
101 | user-select: none;
|
---|
102 | transform: translate(0px, 0px);
|
---|
103 |
|
---|
104 | /* This makes things *much* easier */
|
---|
105 | box-sizing: border-box;
|
---|
106 |
|
---|
107 | }
|
---|
108 |
|
---|
109 | /* currently nothing specific for resize-drag that info-window does already do */
|
---|
110 | /*
|
---|
111 | .resize-drag {
|
---|
112 | }
|
---|
113 | */
|
---|
114 |
|
---|
115 |
|
---|
116 | #scale-element {
|
---|
117 | display: block;
|
---|
118 | max-width: 100%;
|
---|
119 | margin: 1rem auto;
|
---|
120 | touch-action: none;
|
---|
121 | }
|
---|
122 |
|
---|
123 |
|
---|
124 | .button {
|
---|
125 | display: inline-block;
|
---|
126 | background-color: var(--gs-bg-primary-col);
|
---|
127 | color: var(--gs-fg-primary-col);;
|
---|
128 | width: auto;
|
---|
129 | border-radius: 10px;
|
---|
130 | padding: 15px 25px;
|
---|
131 | cursor: pointer;
|
---|
132 | }
|
---|