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