/*
 * Copyright (c) 2019-2024, Peter Ljung <peter@uniply.eu>
 */

/* General */

@font-face {
  font-family: 'Source Sans Pro';
  src: url('/fonts/SourceSans3-VariableFont_wght.ttf');
}

@font-face {
  font-family: 'Rubik';
  src: url('/fonts/Rubik-VariableFont_wght.ttf');
}

body { font-family: 'Source Sans Pro'; }
h1, h2, h3 { font-family: 'Rubik'; }

div#main {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  max-width: 960px;
  min-height: 700px;
}

form.pure-form label {
  display: block;
  float: left;
  min-width: 8em;
}

blockquote {
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 1.5em;
  padding: 0.5em;
}

#main img {
  max-width: 90%;
}

/* Upload */

#dropzone {
  border-style: solid;
  border-width: 2px;
  border-radius: 20px;
  border-color: lightgrey;
  width: 50%;
  height: 200px;
  padding-left: 10px;
  margin-top: 20px;
}

#uploaded img, #uploaded audio, #uploaded video {
  max-width: 80%;
  max-height: 600px;
}

#linkText { width: 25em; }

/* all page */

li.page { margin-bottom: 0.4em; margin-bottom: 0.4em; }
ul.links { margin-bottom: 0.4em; margin-bottom: 0.4em; }
li.page:has(input.more)         .links { display: none; }
li.page:has(input.more:checked) .links { display: block; }

/* hack to enable toggle visibility without inline JS */
input.more {
  appearance: none;
  padding: 8px;
  margin-left: 5px;
  margin-right: 5px;
}

input.more         { background-image: url(/images/icons/plus-circle.svg); }
input.more:checked { background-image: url(/images/icons/dash-circle.svg); }

/* Editor */

#markup textarea { width: 100%; }

div.actions { 
  margin-top: 1em; 
  margin-bottom: 1em;
}
.actions input {
  margin: 0.5em;
  min-width: 5em;
}

.toolbar ul {
  margin: 10px;
  padding: 0;
}

.toolbar li {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-size: 20px 20px;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
  padding: 5px;
  margin-right: 10px;
}
.toolbar li:hover {
  background-color: lightgray;
}

li#wf-template      { background-image: url(/images/editor/layout-text-window-reverse.svg); }
li#md-h1            { background-image: url(/images/editor/type-h1.svg); }
li#md-h2            { background-image: url(/images/editor/type-h2.svg); }
li#md-bold          { background-image: url(/images/editor/type-bold.svg); }
li#md-italic        { background-image: url(/images/editor/type-italic.svg); }
li#md-citation      { background-image: url(/images/editor/quote.svg); }
li#md-list          { background-image: url(/images/editor/list-ul.svg); }
li#md-list-numbered { background-image: url(/images/editor/list-ol.svg); }
li#md-code          { background-image: url(/images/editor/code-square.svg); }
li#md-link          { background-image: url(/images/editor/link-45deg.svg); }
li#md-link-page     { background-image: url(/images/editor/file-earmark-plus.svg); }
li#md-link-image    { background-image: url(/images/editor/file-earmark-image.svg); }
li#wf-section       { background-image: url(/images/editor/view-list.svg); }
li#md-table         { background-image: url(/images/editor/table.svg); }
li#md-help          { background-image: url(/images/editor/info-circle.svg); }

/* Mobile fixes */

textarea#markup { width: 100%; }

@media screen and (max-width: 980px) {
  div#main {
    margin: 0.5em;
    padding: 0;
  }
  div#content { padding: 0.5em; }
  img { max-width: 100%; }
}

/* header */

div#header { 
}

div#logo img {
  margin-top: 1em;
  width: 120px;
}

div#menu ul {
  list-style: none;
  padding-left: 0;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

div#menu li {
  display: inline-block;
  margin-right: 1.5em;
}

div#edit {
  position: absolute;
  top: 1em;
  right: 2em;
}

div#edit a {
  padding-left: 26px;
  background: url(/images/edit-note.svg) left top no-repeat;
}

div#header a { text-decoration: none; }
div#header a:link, div#header a:visited, div#header a:active, div#header a:hover { color: black; }