extra/webapps/wiki/wiki.css

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