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