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