index.css

/**
 * This file is part of Feather Wiki.
 *
 * Feather Wiki is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
 *
 * Feather Wiki is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License along with Feather Wiki. If not, see https://www.gnu.org/licenses/.
 */
 html {
  font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
html, button, input, select, option, textarea {
  font-size: 12pt;
  background: #fff;
  color: #000;
}
html, body {
  margin: 0;
  padding: 0;
}

:focus {
  outline: 2px solid #000;
}

* {
  box-sizing: border-box;
  position: relative;
  max-width: 100vw;
}

* + *, p, li > ul, li > ol, .ed-uc > *:not(:first-child) { /* Consolidating .ed-uc here to reduce repetition */
  margin: .5rem 0;
}

main > * { padding: 1rem 1.5rem 2rem; }

#g:not([open]), .sb .n {
  display: none;
}

input, select, textarea {
  padding: .5rem;
  tab-size: 4;
}

/* Heading & title */
h1, h2, h3, h4, h5, h6, .t {
  font-weight: bold;
  margin: .5rem 0;
}
h1 {
  font-size: 1.8rem;
}
h2 {
  font-size: 1.65rem;
}
h3, .t {
  font-size: 1.5rem;
}
h4 {
  font-size: 1.35rem;
}
h5 {
  font-size: 1.2rem;
}
h6 {
  font-size: 1.05rem;
}

.np { max-width: 8rem; }
button, summary:is(.np, .b) {
  text-align: center;
  color: #fff;
  padding: 5px 12px;
  background-color: #65A;
  border: 0;
  border-radius: 1rem;
  z-index: 2;
}
a, button, summary, .noti { cursor: pointer; }
a {
  text-decoration: none;
  color: #65A;
}
:is(a, button):is(:hover, :active, :visited) {
  opacity: .8;
}
a.e {
  color: red;
}
a.l { visibility: hidden; }
:is(h1, h2, h3, h4, h5, h6):hover a.l, a.l:is(:focus, :active) {
  visibility: visible;
}
a:is([target="_blank"], .e):after {
  font-size: 70%;
  vertical-align: top;
  margin-left: 3px;
}
a[target="_blank"]:after {
  content: "\29C9"; /* two joined squares for external link */
}
a.e:after {
  content: "!";
}

nav ul { list-style: none; }
ul, ol { padding: 0 0 0 1rem; }
nav li summary { text-indent: -1rem; }

label { display: block; }

blockquote {
  margin-left: 2rem;
  padding-left: 1rem;
  border-left: 3px solid #888;
}
.uc pre {
  font-size: 80%;
  padding: 1em;
  border-radius: 6px;
  background-color: #eee;
  line-height: 1.5;
  overflow-x: auto;
}

abbr[title] { cursor: help; }

.sb { background: #ddd; }
/* default width for all widths is 100% for small screens—no columns */
.w1, .w34, .w12, .w14, .r, main { width: 100%; }
/* tabs */
.tabs > * {
  border: 2px solid #65A;
  border-bottom: 0;
  border-radius: .5rem .5rem 0 0;
  margin: 0;
}
.a {
  background: #87C;
  color: #fff;
}
@media(min-width:50rem) {
  /* row */
  .r, main {
      display: table;
      border-spacing: 1rem 0;
  }
  /* Row, no spacing */
  .r.ns, main { border-spacing: 0; }
  /* column */
  .c, main > * {
      display: table-cell !important;
      vertical-align: top;
  }
  /* sidebar */
  .sb {
    width: 20%;
    min-width: 200px;
    max-width: 500px;
    height: 100vh;
    overflow-y: auto;
  }
  .sb .n { display: unset; }
  /* sidebar toggle */
  .sbt { display: none; }
  /* fractional widths */
  .w34 { width: 75%; }
  .w12 { width: 50%; }
  .w13 { width: 33%; }
  .w14 { width: 25%; }

  body > footer {
    position: absolute;
    inset: auto 1.5rem 0;
  }

  form, .mw, #g, input, select, textarea, .ed { max-width: 1000px; }
  
  .tr { text-align: right; }
  .fr { float: right; }
}

/* screen reader only */
.sr {
  visibility: hidden;
  height: 0;
  width: 0;
  position: absolute;
}
/* Allow overriding on mobile (mobile left) */
.tr:not(.ml) { text-align: right; }
.fr:not(.ml) { float: right; }
.chg, .del {
  background: red;
}
.del {
  opacity: .8;
}
/* field help */
.h, .del { font-size: .8rem; }
.db { display: block; }
.il { display: inline; }
.ib { display: inline-block; }
.at { vertical-align: top; }


/* extra padding on bottom only */
.pb { margin: 0 0 1.5rem !important; }

/* User Content */
.uc a {
  text-decoration: underline;
}
.notis {
  position: fixed;
  inset: 1vw 40vw auto;
}
.noti {
  padding: 1em;
  box-shadow: 3px 3px 5px #555;
}

/**** ed edior ***/
#g, input, select, textarea, .ed, .noti {
  border: 1px solid #000;
  border-radius: 3px;
}
.ed * {
  margin: unset;
}

.ed-uc, textarea, #g, .g { /* g here stands for gallery :) */
  width: 100%;
  overflow-y: auto;
  padding: 10px;
  margin: 0 auto;
}
.ed-uc, textarea {
  height: 50vh;
  min-height: 300px;
  max-height: 600px;
}
.ed-uc nowiki {
  background: #EEE;
}
:is(.ed-uc, textarea, .uc) * { max-width: 100%; }

.ed-bar {
  border-bottom: 1px solid #000;
}

.ed-btn {
  background: transparent;
  color: #000;
  vertical-align: middle;
}

.ed-sel {
  background: #ddd;
}