extra/webapps/wiki/wiki.css

   1 input, textarea, select {
   2     font-size: 12pt;
   3     border: 1px solid #d5d5d5;
   4     border-radius: 5px;
   5     padding: 5px;
   6 }
   7
   8 textarea {
   9     width: 100%;
  10 }
  11
  12 table {
  13     table-layout: fixed;
  14 }
  15
  16 td {
  17     word-wrap: break-word;
  18 }
  19
  20 table.comparison {
  21     width: 100%;
  22 }
  23
  24 table.comparison th {
  25     width: 50%;
  26 }
  27
  28 table.comparison th, table.comparison td {
  29     border: 1px solid #d5d5d5;
  30 }
  31
  32 .insert {
  33     background-color: #9f9;
  34     color: black;
  35 }
  36
  37 .delete {
  38     background-color: #f99;
  39     color: black;
  40 }
  41
  42 table.revisions {
  43     width: 100%;
  44 }
  45
  46 table.revisions td, table.revisions th {
  47     margin: 0;
  48     padding: 4px;
  49 }
  50
  51 table.revisions, table.revisions th, table.revisions td {
  52     border: 1px solid #d5d5d5;
  53 }
  54
  55 /* Dark mode */
  56 @media (prefers-color-scheme: dark) {
  57     table.comparison, table.comparison th, table.comparison td {
  58         border-color: #666;
  59     }
  60
  61     table.revisions, table.revisions th, table.revisions td {
  62         border-color: #666;
  63     }
  64 }
  65
  66 .description {
  67     line-height: 150%;
  68 }
  69
  70 .description pre {
  71     padding: 0.5em;
  72     background-color: #f5f5f5;
  73 }
  74
  75 .description h1 { font-size: 1.5em; }
  76 .description h2 { font-size: 1.17em; }
  77 .description h3 { font-size: 1.0em; }
  78 .description h4 { font-size: 0.83em; }
  79 .description h5 { font-size: 0.67em; }
  80
  81 .description p:first-child { margin-top: 0px; }
  82 .description p:last-child { margin-bottom: 0px; }
  83
  84 #left {
  85     position: absolute;
  86     top: 0;
  87     left: calc(min(100vw - 200px, 800px));
  88     width: 200px;
  89     z-index: 99;
  90     border: none;
  91     border-left: 1px solid #d5d5d5;
  92 }
  93
  94 #right {
  95     width: calc(100vw - 200px);
  96     max-width: calc(min(100vw - 230px, 770px));
  97 }
  98
  99 .contents {
 100     font-size: 90%;
 101     margin: 0;
 102     padding: 15px;
 103     padding-top: 0px;
 104     line-height: 130%;
 105 }
 106
 107 .contents ul {
 108     list-style-type: none;
 109     margin: 0;
 110     padding-left: 20px;
 111 }
 112
 113 .page nav {
 114     margin: -15px;
 115     margin-top: 0px;
 116     background: none;
 117 }
 118
 119 .page img {
 120     max-width: 100%;
 121 }
 122
 123 .page hr {
 124     height: 1px;
 125 }
 126
 127 nav img {
 128     margin-right: 5px;
 129     display: none;
 130 }
 131
 132 nav input {
 133     border-radius: 3px;
 134     padding: 3px;
 135     margin-top: 0px;
 136     margin-bottom: 0px;
 137 }
 138
 139 .page nav {
 140     width: calc(100vw - 200px);
 141     max-width: 800px;
 142     left: 0;
 143     border-top: 1px solid #d5d5d5;
 144     border-bottom: 1px solid #d5d5d5;
 145     margin-top: 15px;
 146 }
 147
 148 .page footer {
 149     padding: 15px;
 150     padding-left: 0;
 151     padding-right: 0;
 152     font-size: smaller;
 153 }
 154
 155 @media screen and (max-width: 600px) {
 156     #left {
 157         position: absolute;
 158         display: none;
 159         left: 0;
 160         top: 0;
 161         background: #f5f5f5;
 162         border: none;
 163         border-right: 1px solid #d5d5d5;
 164         border-bottom: 1px solid #d5d5d5;
 165         padding-top: 0px;
 166         box-shadow: 5px 5px 10px #aaa;
 167     }
 168
 169     #right {
 170         width: 100%;
 171         max-width: 100%;
 172     }
 173
 174     nav img {
 175         display: inline;
 176     }
 177
 178     .page {
 179         width: 100%;
 180     }
 181
 182     .page nav {
 183         width: 100vw;
 184     }
 185 }
 186
 187 /* Dark mode */
 188 @media (prefers-color-scheme: dark) {
 189     nav img {
 190         filter: invert(80%);
 191     }
 192
 193     nav input {
 194         font-size: smaller;
 195     }
 196
 197     #left {
 198         border: none;
 199         border-left: 1px solid #666;
 200     }
 201
 202     .description pre {
 203         color: black;
 204         background-color: white;
 205         filter: invert(80%);
 206     }
 207
 208     .page nav {
 209         border-top: 1px solid #666;
 210         border-bottom: 1px solid #666;
 211     }
 212 }
 213
 214 @media screen and (max-width: 600px) and (prefers-color-scheme: dark) {
 215
 216     #left {
 217         background-color: #373e48;
 218         border: none;
 219         border-right: 1px solid #666;
 220         border-bottom: 1px solid #666;
 221         box-shadow: 5px 5px 10px #333;
 222     }
 223 }