1 | /* DEFINING CSS VARIABLES - redefining them from weebly site (variables.less used in header.less)
|
---|
2 | https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
|
---|
3 |
|
---|
4 | BUT UNFORTUNATELY, we can't use css variables in media query declarations:
|
---|
5 | https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries
|
---|
6 | */
|
---|
7 | :root {
|
---|
8 | --height-header: 120px;
|
---|
9 | --bp-small: 1025px;
|
---|
10 | --bp-small-max: 1024px; /* 1 less */
|
---|
11 | --a-link-color: rgb(86, 154, 189);
|
---|
12 | --content-padding: 2rem;
|
---|
13 | }
|
---|
14 |
|
---|
15 | /* Override core styles to suit */
|
---|
16 |
|
---|
17 | body {
|
---|
18 | background-color: initial;
|
---|
19 | }
|
---|
20 |
|
---|
21 | #gs_content {
|
---|
22 | padding: var(--content-padding);
|
---|
23 | }
|
---|
24 |
|
---|
25 |
|
---|
26 | .sectionHeader {
|
---|
27 | font-family: 'Montserrat', sans-serif;
|
---|
28 | }
|
---|
29 |
|
---|
30 | div#rightSidebar {
|
---|
31 | min-width: initial;
|
---|
32 | float: initial;
|
---|
33 | margin: initial;
|
---|
34 | }
|
---|
35 |
|
---|
36 | /* Within the page that loads in iframe, want a spacer (for now 120px high) that
|
---|
37 | will take up the space of the whakatohea navbar. Want the scrollbar shifted from
|
---|
38 | body element into (an) element that spatially immediately follows the vertical spacer.*/
|
---|
39 | body#top {
|
---|
40 | overflow-y: hidden;
|
---|
41 | margin: 0;
|
---|
42 | border: none;
|
---|
43 | }
|
---|
44 |
|
---|
45 | div#spacer-for-nav
|
---|
46 | {
|
---|
47 | height: var(--height-header); /*120px;*/
|
---|
48 | width: auto;
|
---|
49 | } /* margin-top:120px; Why did height not have any effect? Because of self-closing div. Need explicit closing div. But an empty opening + closing div is dangerous in GS3, try using gsf:div element (not sure if class attribute will work on it) if xml equivalent of nbsp entity inside empty op+closing div doesn't work.*/
|
---|
50 |
|
---|
51 |
|
---|
52 | /* https://www.w3schools.com/cssref/css_units.asp
|
---|
53 | https://css-tricks.com/a-complete-guide-to-calc-in-css/
|
---|
54 | Need spaces around (arithmetic) operator in calc() equations
|
---|
55 | */
|
---|
56 |
|
---|
57 | .shifted-frame {
|
---|
58 | overflow: auto;
|
---|
59 | height: calc(100vh - var(--height-header)); /*calc(100vh - 120px);*/
|
---|
60 | width: auto;
|
---|
61 | } /* Why does height calc(100% -120px) instead of using 100vh not work? */
|
---|
62 |
|
---|
63 |
|
---|
64 | /* Want to have the full size bg banner image on the main page listing the Pou-s,
|
---|
65 | but on each Pou landing page and each collection landing page, want a vertically
|
---|
66 | narrower banner img. Achieved by cropping same image.
|
---|
67 | https://www.w3schools.com/cssref/pr_background-image.asp
|
---|
68 | and https://www.w3schools.com/cssref/pr_background-position.asp
|
---|
69 | */
|
---|
70 | div.wsite-section-bg-image {
|
---|
71 | /*Can't set background-image as url contains variable: interfaces/{$interface_name}/images/digital-library.jpg*/
|
---|
72 | background-color: transparent; /* Used if the image is unavailable. OR: grey */
|
---|
73 | background-repeat: no-repeat; /* Do not repeat the image */
|
---|
74 | background-size: cover; /* Resize the background image to cover the entire container */
|
---|
75 | }
|
---|
76 |
|
---|
77 | div.full-bg {
|
---|
78 | height: auto;
|
---|
79 | background-position: 50.00% 21.94%;
|
---|
80 | /*background-size: 100%;*/
|
---|
81 | }
|
---|
82 |
|
---|
83 |
|
---|
84 | a, span#addNewMD, span#clearSaved {
|
---|
85 | text-decoration: none;
|
---|
86 | font-weight: normal;
|
---|
87 | color: var(--a-link-color); /* a light blue */
|
---|
88 | }
|
---|
89 |
|
---|
90 | /* rgb(79, 79, 78);*/ /* a dark black/grey */
|
---|
91 |
|
---|
92 | a:hover, span#addNewMD:hover, span#clearSaved:hover {
|
---|
93 | color: rgb(250, 138, 0); /*orange*/
|
---|
94 | }
|
---|
95 |
|
---|
96 | /* Selecting the children ensures that there is space between them */
|
---|
97 | div.outer > * {
|
---|
98 | padding: var(--content-padding);
|
---|
99 | }
|
---|
100 |
|
---|
101 | /*
|
---|
102 | Acts as a gridded container for the side nav-bar and the main content
|
---|
103 | */
|
---|
104 | div.outer.collectionDisplay {
|
---|
105 | display: grid;
|
---|
106 | grid-template-columns: 1fr 2.8fr 1fr;
|
---|
107 | }
|
---|
108 |
|
---|
109 | div.outer.collectionDisplay > * {
|
---|
110 | border-right: 1px solid #eaecef;
|
---|
111 | }
|
---|
112 |
|
---|
113 | div.outer.collectionDisplay > :last-child {
|
---|
114 | border-right: none;
|
---|
115 | }
|
---|
116 |
|
---|
117 | .side-navbar {
|
---|
118 | display: flex;
|
---|
119 | flex-direction: column;
|
---|
120 | }
|
---|
121 |
|
---|
122 | .side-navbar ul {
|
---|
123 | padding-left: 1em;
|
---|
124 | }
|
---|
125 |
|
---|
126 | /* The active class is added to nav elements when their content is displayed */
|
---|
127 | .side-navbar a.active {
|
---|
128 | font-weight: bold;
|
---|
129 |
|
---|
130 | /* Override core styles */
|
---|
131 | background-color: inherit;
|
---|
132 | }
|
---|
133 |
|
---|
134 | /* Intended to be applied to an <hr /> element. */
|
---|
135 | .side-navbar-separator {
|
---|
136 | appearance: none;
|
---|
137 | width: 100%;
|
---|
138 | border: 1px solid #d9dbdf;
|
---|
139 | }
|
---|
140 |
|
---|
141 | div.img-and-desc {
|
---|
142 | position: relative;
|
---|
143 | width:100%;
|
---|
144 | height:100%;
|
---|
145 | display: block;
|
---|
146 | }
|
---|
147 |
|
---|
148 | div.img-and-desc a img {
|
---|
149 | border: none;
|
---|
150 | }
|
---|
151 |
|
---|
152 | /*
|
---|
153 | .container {
|
---|
154 | clear: right;
|
---|
155 | clear: left;
|
---|
156 | padding-top: 0;
|
---|
157 | }
|
---|
158 | */
|
---|
159 |
|
---|
160 | #gs_content pre {
|
---|
161 | white-space: pre-wrap;
|
---|
162 | }
|
---|
163 |
|
---|
164 | #gs_content, #gs_content paragraph, #gs_content p {
|
---|
165 | clear: both;
|
---|
166 | line-height: 1.7rem !important; /*1.3rem*/
|
---|
167 | }
|
---|
168 |
|
---|
169 | #gs_content a {
|
---|
170 | line-height: 1.7rem;
|
---|
171 | }
|
---|
172 |
|
---|
173 | /*
|
---|
174 | #gs_content a:visited {
|
---|
175 | color:DarkGrey;
|
---|
176 | }*/
|
---|
177 |
|
---|
178 | .wsite-content-title a {
|
---|
179 | color: white;
|
---|
180 | font-weight: bold;
|
---|
181 | }
|
---|
182 | div#coll-name-link a {
|
---|
183 | color: white;
|
---|
184 | }
|
---|
185 |
|
---|
186 | /* overriding */
|
---|
187 | .wsite-image {
|
---|
188 | position: relative;
|
---|
189 | }
|
---|
190 | /* overriding */
|
---|
191 | #wsite-content div.img-and-desc div.paragraph {
|
---|
192 | position: absolute;
|
---|
193 | top: 0.5rem;
|
---|
194 | text-align: center;
|
---|
195 | color: white !important;
|
---|
196 | margin: 0.25rem 1.5rem 0.5rem 1.5rem;
|
---|
197 | font-size: 10pt !important;
|
---|
198 | }
|
---|
199 |
|
---|
200 | span.pou-group-title { /* if overriding: #wsite-content div.img-and-desc div.paragraph a {*/
|
---|
201 | font-variant: small-caps;
|
---|
202 | color: white;
|
---|
203 | font-size:1.5rem;
|
---|
204 | }
|
---|
205 |
|
---|
206 | div#wmtb-footer {
|
---|
207 | text-align: right;
|
---|
208 | margin: 0 2rem 2rem 2rem;
|
---|
209 | }
|
---|
210 |
|
---|
211 | div#wmtb-footer a {
|
---|
212 | text-decoration: none;
|
---|
213 | font-weight: normal;
|
---|
214 | }
|
---|
215 |
|
---|
216 | div#topline {
|
---|
217 | line-height: 1rem; /*overriding*/
|
---|
218 | padding-top: 0.5rem;
|
---|
219 | }
|
---|
220 |
|
---|
221 | div#topline ul {
|
---|
222 | text-align: right;
|
---|
223 | }
|
---|
224 |
|
---|
225 | div#topline li, div#topnav li, .query-form-links li, #wizardBar li {
|
---|
226 | display: inline;
|
---|
227 | /*text-transform: capitalize;*/ /* Will Titlecase all menus including Browsing Classifiers */
|
---|
228 | }
|
---|
229 |
|
---|
230 | div#topline li, .query-form-links li, #wizardBar li {
|
---|
231 | margin: 0 0.5rem;
|
---|
232 | }
|
---|
233 |
|
---|
234 | /* Special case: div#topnav li stretches over multiple lines as it contains a nested ul
|
---|
235 | on its own separate line, since (the nested) ul is displayed as a block by default.
|
---|
236 | Adding a positive right margin to div#topnav li means that after the nested ul block
|
---|
237 | there's now a newline with margin space. We don't want this additional newline, so set
|
---|
238 | margin-RIGHT of this outer li to 0 to prevent it. */
|
---|
239 | div#topnav li {
|
---|
240 | margin: 0 0 0 1rem;
|
---|
241 | }
|
---|
242 |
|
---|
243 | /*
|
---|
244 | div#topnav li, .query-form-links li {
|
---|
245 | line-height: 2rem;
|
---|
246 | }
|
---|
247 | */
|
---|
248 |
|
---|
249 | div#wizardContainer {
|
---|
250 | padding: 0rem 0 2rem 0;
|
---|
251 | }
|
---|
252 |
|
---|
253 | /* To insert a | between nav menu links */
|
---|
254 | /*div#topnav li::after, .query-form-links li::after {
|
---|
255 | content: " | ";
|
---|
256 | }*/
|
---|
257 |
|
---|
258 | div#topnav {
|
---|
259 | float: left;
|
---|
260 | }
|
---|
261 |
|
---|
262 | div#search, div#quicksearcharea {
|
---|
263 | float: right;
|
---|
264 | }
|
---|
265 | div.query-form-links ul, #advanced {
|
---|
266 | clear: right;
|
---|
267 | float: right;
|
---|
268 | }
|
---|
269 |
|
---|
270 | div#coll-menus {
|
---|
271 | text-align:center;
|
---|
272 | }
|
---|
273 |
|
---|
274 | div#topbar {
|
---|
275 | margin: 0 auto;
|
---|
276 | line-height: 1rem;
|
---|
277 | }
|
---|
278 |
|
---|
279 | hr.spacer {
|
---|
280 | border: none; /*border-top: 1px solid black;*/
|
---|
281 | clear: right;
|
---|
282 | clear: left;
|
---|
283 | padding-bottom: 1rem;
|
---|
284 | }
|
---|
285 |
|
---|
286 |
|
---|
287 | #quickSearchSubmitButton {
|
---|
288 | width: 3rem;
|
---|
289 | }
|
---|
290 |
|
---|
291 | #browse-search-bars {
|
---|
292 | max-width: 100vw;
|
---|
293 | /*padding: 1rem;*/
|
---|
294 | /*height: 10vh;*/ /* useful for selecting div in dev tools */
|
---|
295 | /* max-height: 10vh; */
|
---|
296 | height: auto;
|
---|
297 | padding: 0.5rem 0rem; /* have to set the rest to 0 */
|
---|
298 | /*background-color: rgba(255, 255, 255, 0.9);*/ /* https://stackoverflow.com/questions/10422949/css-background-opacity */
|
---|
299 | position: absolute; bottom: 0; left: 0; /* or: top: 60%; left: 0; */
|
---|
300 | /*Or: margin-top: -6rem; */
|
---|
301 | z-index:2;
|
---|
302 | background-color: rgba(255, 255, 255, 0.7); /* https://stackoverflow.com/questions/10422949/css-background-opacity */
|
---|
303 | }
|
---|
304 |
|
---|
305 | #browse-search-bars #topbar {
|
---|
306 | line-height: 1rem;
|
---|
307 | /*margin:auto;*/
|
---|
308 | width: 90vw;
|
---|
309 | }
|
---|
310 |
|
---|
311 | div.paramLabel, div.paramValue {
|
---|
312 | display: inline;
|
---|
313 | line-height: 2rem;
|
---|
314 | }
|
---|
315 |
|
---|
316 | /* overriding main_style.css */
|
---|
317 | .main-wrap .wsite-section-wrap:first-child .container {
|
---|
318 | padding-top: 0;
|
---|
319 | }
|
---|
320 |
|
---|
321 | ul.drop-down-list {
|
---|
322 | padding-top: 0.5rem;
|
---|
323 | }
|
---|
324 | #advanced {
|
---|
325 | padding-top:0.2rem;
|
---|
326 | }
|
---|
327 |
|
---|
328 | /* Non-mobile settings. */
|
---|
329 | @media screen and (min-width: 1025px) { /* bp-small */
|
---|
330 | div.crop-bg {
|
---|
331 | height: 230px; /* You must set a specified height */
|
---|
332 | background-position: center -100px; /* OR: center OR: center 20% */
|
---|
333 | /*display: block;*/ /* div with bg image needs to change from display: table-cell
|
---|
334 | to display: block when cropping bg image, as table-cell setting
|
---|
335 | overrides height customisation */
|
---|
336 | }
|
---|
337 |
|
---|
338 | /* Restyle .container *descendant* of .crop-bg:
|
---|
339 | Padding can not be 100px as it is when .full-bg is in effect,
|
---|
340 | and should be no greater than 95px for .crop-bg, else there
|
---|
341 | appears a bottom border of sorts under the cropped image. */
|
---|
342 | /* .crop-bg div.container {
|
---|
343 | padding: 50px 0;
|
---|
344 | } */
|
---|
345 |
|
---|
346 | /* Override: padding had made the login/search/browse nav buttons unavailable */
|
---|
347 | .banner-wrap .crop-bg .container {
|
---|
348 | padding: 0px;
|
---|
349 | }
|
---|
350 |
|
---|
351 | #gs_content {
|
---|
352 | max-width: 70vw;
|
---|
353 | }
|
---|
354 | }
|
---|
355 |
|
---|
356 | /* Mobile settings
|
---|
357 | Hardcoded values copied from weebly site theme's variables.less file called in header.less */
|
---|
358 | @media screen and (max-width: 1024px) { /* bp-small-max */
|
---|
359 |
|
---|
360 | /*
|
---|
361 | body { overflow: auto; }
|
---|
362 | */
|
---|
363 |
|
---|
364 | :root {
|
---|
365 | --height-header: 93px;
|
---|
366 | }
|
---|
367 |
|
---|
368 | div.outer.collectionDisplay {
|
---|
369 | display: grid;
|
---|
370 | grid-template-columns: none;
|
---|
371 | grid-template-rows: auto 1fr;
|
---|
372 | }
|
---|
373 |
|
---|
374 | #rightSidebar {
|
---|
375 | display: none;
|
---|
376 | }
|
---|
377 |
|
---|
378 | /* Maybe undo any changes made below for full-screen version so mobile unaffected*/
|
---|
379 | /*
|
---|
380 | div.crop-bg {
|
---|
381 | height: 100px;
|
---|
382 | background-position: center 20%;
|
---|
383 | }
|
---|
384 |
|
---|
385 | .crop-bg div.container {
|
---|
386 | padding: 100px 0;
|
---|
387 | }
|
---|
388 | */
|
---|
389 | }
|
---|
390 |
|
---|
391 |
|
---|
392 | /* metadata table */
|
---|
393 | .metadataTable tr:nth-child(odd) {
|
---|
394 | background: #dddddd;
|
---|
395 | }
|
---|
396 | .metadataTable tr:nth-child(even) {
|
---|
397 | background: #f5f3e5;
|
---|
398 | }
|
---|
399 | .metadataTable i {
|
---|
400 | font-style: italic;
|
---|
401 | }
|
---|
402 | .metadataTable td {
|
---|
403 | padding: 2px;
|
---|
404 | }
|
---|