/* wdbPlus: basic element layout – used by all pages
 * created: 2019-03-07
 * creator: DK Dario Kampkaspar <dario.kampkaspar@oeaw.ac.at>
 *          DK Dario Kampkaspar <dario.kampkaspar@tu-darmstadt.de>
 * sources: https://github.com/dariok/wdbplus 
 *
 * changes:
 * 2019-06-06 DK: Move to a grid-based layout
 * 2019-09-13 DK: use CSS custom properties to make responsive styling easier
 * 2020-08-14 DK: styling for annotation dialogue
 * 2021-02-01 DK: some additions for release 1.5
 * 2021-12-04 DK: move styles for body > footer, body > header here from view.css
 */

/* declare a global custom property to determine the width of the browser window
 * below which we start using a mobile friendly design */
/*@env {
  --mobile-width: 768px;
}*/
:root {
  --wdb-link-colour: #098AB2;
  --wdb-function-bg: lightgrey;
}

@font-face {
  font-family: 'mufi';
  src: url('Junicode.woff') format('woff');
  font-display: swap;
}

/* Main layout: wide header, rest below, each scrolling on its own */
html {
  height: 100vh;
}

body {
  margin: 0;
  height: 100vh;
  
  overflow: hidden;
  
  font-family: mufi;
  font-size: 1rem;
  line-height: 1.4rem;
  
  display: grid;
  grid-template-areas: 'header header'
                       'left right'
                       'bottom bottom';
  grid-template-rows: min-content auto min-content;
}

/* main header */
body > header {
  background-color: white;
  border-bottom: 0.5px solid lightgrey;
  display: grid;
  grid-area: header;
  grid-template-areas: 'hl hc hr';
  padding: 0 0.5%;
}

/* main footer */
body > footer {
  background-color: var(--wdb-function-bg);
  display: block;
  flex: 1 1 auto;
  grid-area: bottom;
  padding: 1em;
}

/* right/left and centre, respectively, of the header section
 * these are used when no preject specific is given or they use the right/centre/left functions */
.headerSide:first-of-type {
  grid-area: hl;
}
.headerSide:last-of-type {
  grid-area: hr;
}
.headerCentre {
  grid-area: hc;
  flex: 1 0 auto;
}

body > header h1 {
  font-size: 1.1em;
  text-align: center;
  letter-spacing: 0.09em;
  
  color: #900129;
  
  margin-bottom: 0.5em;
  margin-top: 0.5em;
}
body > header h2 {
  letter-spacing: 0.3em;
  font-size: 1em;
  font-weight: normal;
  
  padding: 0;
  margin: 0;
  
  display: inline-block;
}

/* controls (e.g. buttons) within header */
.dispOpts {
  line-height: 1.4rem;
  font-family: sans-serif;
}
.dispOpts:before {
  content: ' [';
}
.dispOpts:after {
  content: ']';
}

/* parts of the header which act as dropdown menus, e.g. navigation */
.menuItem {
  background-color: white;
  border: 0.1px solid;
  padding: .5em;
  position: absolute;
  top: 5em;
  z-index: 99;
}

/* animation during AJAX requests 
 * Taken from @Sampson, https://stackoverflow.com/questions/1964839/how-can-i-create-a-please-wait-loading-animation-using-jquery
 * Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.loadingModal {
  display: none;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(255, 255, 255, .8) url('../FhHRx.gif') 50% 50% no-repeat;
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .loadingModal {
  display: block;
}

/* Navigation */
nav {
  position: absolute;
  overflow-y: auto;
  max-height: 75vh;
}

nav h2 {
  width: 100%;
  text-align: center;
}
nav ul {
  margin: 0;
  padding-left: 0;
  list-style-type: none;
}

nav li ul {
  margin-left: 1.25em;
}

nav a {
  font-family: sans-serif;
}

nav button {
  appearance: auto;
  border: none;
  background-color: white;
  padding: 0;
  font-size: 1rem;
  color: #098AB2;
  cursor: pointer;
}

/* login dialogue (usually placed in header) */
#auth {
    display: inline-block;
}

#auth button {
    background-color: transparent;
    cursor: pointer;
    color: #098AB2;
    border: 0;
    font-size: 1rem;
}

a {
  overflow-wrap: anywhere;
  color: var(--wdb-link-colour);
  text-decoration: none;
}

button[aria-label] {
  border: none;
  background-color: white;
  display: contents;
  padding: 0;
  font-size: 1rem;
  font-family: 'mufi';
  cursor: pointer;
  color: var(--wdb-link-colour);
}

/* Annotation dialogue */
#annotationDialog h2 {
  color: initial;
}
#annotationDialog div:last-child span {
  margin-top: 10px;
}
#annoAuth {
  float: left;
}
#annoInfo {
  display: inline-block;
  width: 80%;
  float: right;
  text-align: right;
  padding-right: 2px;
}

@media screen and (max-width: 768px) {
  h1 {
    font-size: 1.1em;
  }
  h2 {
    font-size: 1.0em;
  }
  aside p, main p {
    font-size: 0.9em;
  }
  body > header span {
    padding-bottom: 0;
    line-height: 1.2em;
    font-size: 0.9em;
  }
}