papyrus.css

   1 /*      PAPYRUS skin for PmWiki
   2         Copyright 2019 Said Achmiz
   3
   4         Version:    2019-01-28-2
   5
   6         More info at these URLs:
   7
   8         * https://www.pmwiki.org/wiki/Skins/Papyrus
   9         * https://www.pmwiki.org/wiki/Profiles/SaidAchmiz
  10
  11         The Papyrus skin includes:
  12
  13         * papyrus.css (this file)
  14         * papyrus.jpg (background pattern)
  15         * papyrus.tmpl (skin template)
  16         * papyrus.php (skin script file)
  17         * ReadMe.txt (instructions & info)
  18         */
  19
  20 /*************/
  21 /* VARIABLES */
  22 /*************/
  23
  24 :root {
  25         --papyrus-sidebar-width: 200px;
  26         --papyrus-sidebar-padding: 10px;
  27         --papyrus-content-padding: 20px;
  28         --papyrus-page-header-height: 50px;
  29 }
  30
  31 /***********/
  32 /* GENERAL */
  33 /***********/
  34
  35 html {
  36         font-size: 16px;
  37
  38         box-sizing: border-box;
  39 }
  40 *, *::before, *::after {
  41         box-sizing: inherit;
  42 }
  43
  44 /*==========*/
  45 /*= Layout =*/
  46 /*==========*/
  47
  48 body {
  49         margin: 0;
  50         padding: 0;
  51         display: grid;
  52         grid-template:
  53                 var(--papyrus-page-header-height) 1fr /
  54                 1fr var(--papyrus-sidebar-width);
  55         grid-template-areas:
  56                 "header header"
  57                 "main sidebar";
  58 }
  59
  60 @media only screen and (max-width: 900px) {
  61         :root {
  62                 --papyrus-content-padding: 10px;
  63         }
  64         body {
  65                 grid-template:
  66                         auto 1fr auto /
  67                         100%;
  68                 grid-template-areas:
  69                         "header"
  70                         "main"
  71                         "sidebar";
  72         }
  73 }
  74
  75 /*===========*/
  76 /*= Styling =*/
  77 /*===========*/
  78
  79 body {
  80         font-family: Verdana, Arial, sans-serif;
  81         background-color: Beige;
  82         background-image: url('papyrus.jpg');
  83         tab-size: 4;
  84 }
  85
  86 #main,
  87 #sidebar,
  88 #header {
  89         font-size: 0.75rem;
  90 }
  91
  92 /****************/
  93 /* MAIN CONTENT */
  94 /****************/
  95
  96 #main {
  97         grid-area: main;
  98
  99         padding: var(--papyrus-content-padding);
 100         display: flex;
 101         flex-flow: column;
 102         min-width: 0;
 103 }
 104
 105 /*======================*/
 106 /*= Page title & group =*/
 107 /*======================*/
 108
 109 #pageTitle {
 110         overflow: auto;
 111         position: relative;
 112         z-index: 1;
 113         margin-bottom: 20px;
 114         font-weight: bold;
 115 }
 116 #pageTitle a {
 117         font-weight: bold;
 118 }
 119
 120 /*===============*/
 121 /*= Page footer =*/
 122 /*===============*/
 123
 124 #footer {
 125         margin: 30px 0 0 0;
 126         border-color: #ccc;
 127         border-style: dotted;
 128         border-width: 1px 0 0 0;
 129         padding: 1px 12px 0 0;
 130         display: flex;
 131         flex-flow: row wrap;
 132 }
 133
 134 #footer .page-actions {
 135         margin: 0 12px 0 1px;
 136 }
 137
 138 @media only screen and (max-width: 900px) {
 139         #footer {
 140                 border-width: 1px 0;
 141                 padding: 2px 0;
 142                 justify-content: space-around;
 143                 align-items: center;
 144                 font-size: 0.875rem;
 145         }
 146         #footer .page-actions {
 147                 text-align: center;
 148                 margin: 2px;
 149         }
 150         #footer a {
 151                 display: inline-block;
 152                 padding: 5px 3px;
 153         }
 154         #footer a::before {
 155                 content: "[ ";
 156         }
 157         #footer a::after {
 158                 content: " ]";
 159         }
 160 }
 161
 162 /*==================*/
 163 /*= Wiki page text =*/
 164 /*==================*/
 165
 166 #wikitext {
 167         line-height: 1.5;
 168         hyphens: auto;
 169 }
 170
 171 #wikitext p {
 172         margin: 1em 0;
 173 }
 174
 175 /**********/
 176 /* HEADER */
 177 /**********/
 178
 179 #header {
 180         grid-area: header;
 181
 182         display: flex;
 183 }
 184
 185 /*=============*/
 186 /*= Page logo =*/
 187 /*=============*/
 188
 189 #pageLogo {
 190         padding: 10px;
 191 }
 192 #pageLogo img {
 193         max-width: 100%;
 194         max-height: 100%;
 195 }
 196
 197 /*================*/
 198 /*= Page actions =*/
 199 /*================*/
 200
 201 #pageActions {
 202         padding: 5px 10px 0 0;
 203         flex: 1 1 auto;
 204 }
 205 #pageActions ul {
 206         display: flex;
 207         list-style-type: none;
 208         list-style-image: none;
 209         margin: 0;
 210         padding: 0;
 211         justify-content: flex-end;
 212 }
 213 #pageActions li {
 214         margin: 0 0 0 10px;
 215 }
 216
 217 @media only screen and (max-width: 900px) {
 218         #header {
 219                 border-bottom: 1px solid #ccc;
 220                 flex-flow: row wrap;
 221         }
 222         #pageLogo {
 223                 flex-basis: calc(var(--papyrus-page-header-height) + var(--papyrus-sidebar-width) + 10px);
 224                 height: var(--papyrus-page-header-height);
 225         }
 226         #pageActions {
 227                 align-self: center;
 228                 padding: 10px;
 229         }
 230         #pageActions li {
 231                 margin: 2px;
 232         }
 233         #pageActions a {
 234                 display: inline-block;
 235                 border: 1px solid #ccc;
 236                 padding: 3px 6px;
 237         }
 238 }
 239
 240 /***********/
 241 /* SIDEBAR */
 242 /***********/
 243
 244 #sidebar {
 245         grid-area: sidebar;
 246
 247         padding: var(--papyrus-sidebar-padding);
 248         line-height: 1.5;
 249 }
 250
 251 .sidehead,
 252 .sidehead a {
 253         font-weight: bold;
 254 }
 255
 256 #sidebar p {
 257         margin: 20px 2px 2px 2px;
 258         font-size: 1.1em;
 259 }
 260 #sidebar ul {
 261         list-style-type: none;
 262         padding: 0px;
 263         margin: 0px;
 264 }
 265 #sidebar li {
 266         padding-left: 6px;
 267 }
 268
 269 @media only screen and (max-width: 900px) {
 270         #sidebar ul {
 271                 font-size: 0.875rem;
 272                 line-height: 1.8;
 273                 display: flex;
 274                 flex-flow: row wrap;
 275                 justify-content: center;
 276         }
 277         #sidebar li {
 278                 flex: 1 1 auto;
 279                 text-align: center;
 280                 padding: 0;
 281         }
 282         #sidebar li a {
 283                 display: block;
 284                 background-color: #c3571b;
 285                 color: Beige;
 286                 padding: 5px 8px;
 287                 margin: 3px;
 288         }
 289         #sidebar ul li:only-child a {
 290                 max-width: 50%;
 291                 margin: 3px auto;
 292         }
 293 }
 294
 295 /*======================*/
 296 /*= Sidebar search box =*/
 297 /*======================*/
 298
 299 #sideSearch {
 300         margin: 20px 0 0 0;
 301         display: flex;
 302         align-items: stretch;
 303 }
 304 #sideSearch .searchbox {
 305         flex: 1 1 auto;
 306 }
 307 #sideSearch .searchbutton {
 308         color: transparent;
 309         width: 2.5em;
 310         padding: 0;
 311         margin: 0 0 0 2px;
 312         background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAANCAAAAAC4QtCeAAAAAnRSTlMA/1uRIrUAAABpSURBVHgBY/j//+7c2tq5d/8DAcP//TlgsB/EuZuXv+fjxz35efeBnElgMaD8FCCnLOcLiPMlpwyZU4yiDGLAwU+fDoIMQBidswvIAVlaXT23GsgDciDgfSeQB+P8/zkzZxWc8//vtc8AJiB5qbEm4UgAAAAASUVORK5CYII=');
 313         background-position: center center;
 314         background-repeat: no-repeat;
 315         font-size: inherit;
 316         cursor: pointer;
 317 }
 318
 319 @media only screen and (max-width: 900px) {
 320         #sideSearch {
 321                 position: absolute;
 322                 top: 0;
 323                 left: var(--papyrus-page-header-height);
 324                 height: var(--papyrus-page-header-height);
 325                 padding: calc((var(--papyrus-page-header-height) - 1.5rem) / 2);
 326                 margin: 0 20px;
 327         }
 328 }
 329
 330 /*************/
 331 /* EDIT VIEW */
 332 /*************/
 333
 334 #wikiedit textarea {
 335         font-size: inherit;
 336         width: 100%;
 337 }
 338 #wikiedit .edit-summary input[type='text'] {
 339         width: 100%;
 340 }
 341
 342 #wikiedit input[type='text'],
 343 #wikiedit input[type='submit'] {
 344         -webkit-appearance: none;
 345         -moz-appearance: none;
 346 }
 347
 348 .preview-warning {
 349         color: #c00;
 350         font-weight: bold;
 351         font-size: 1.25em;
 352 }
 353 #wikitext .preview-begin,
 354 #wikitext .preview-end {
 355         text-align: center;
 356         text-transform: uppercase;
 357         font-weight: bold;
 358         color: #c00;
 359 }
 360 #wikitext .preview-begin {
 361         border-bottom: 2px solid #c00;
 362 }
 363 #wikitext .preview-end {
 364         border-top: 2px solid #c00;
 365 }
 366
 367 #wikiedit .edit-action-buttons {
 368         display: flex;
 369         justify-content: center;
 370 }
 371 #wikiedit .edit-action-buttons input {
 372         margin: 0 4px;
 373 }
 374
 375 #wikiedit input {
 376         font-size: 1.125rem;
 377 }
 378
 379 @media only screen and (max-width: 900px) {
 380         #wikiedit input {
 381                 font-size: 1.25rem;
 382         }
 383 }
 384
 385 /*===================*/
 386 /*= GUIEdit buttons =*/
 387 /*===================*/
 388
 389 @media only screen and (max-width: 900px) {
 390         #wikiedit .guibuttons {
 391                 margin: 0 0 4px 0;
 392         }
 393         #wikiedit .guibuttons a,
 394         #wikiedit .guibuttons > img {
 395                 margin: 2px;
 396                 padding: 6px;
 397                 display: inline-block;
 398                 vertical-align: text-bottom;
 399                 border: 1px solid #ddd;
 400                 background-color: #fff;
 401         }
 402 }
 403
 404 /**********/
 405 /* FRAMES */
 406 /**********/
 407
 408 .frame {
 409         border: 1px solid #cccccc;
 410         padding: 4px;
 411         background-color: #f9f9f9;
 412         max-width: 50%;
 413 }
 414
 415 .lfloat {
 416         float: left;
 417         margin-right: 0.5em;
 418 }
 419
 420 .rfloat {
 421         float: right;
 422         margin-left: 0.5em;
 423 }
 424
 425 /*********/
 426 /* LINKS */
 427 /*********/
 428
 429 a {
 430         text-decoration: none;
 431         font-weight: normal;
 432         color: #a74000;
 433 }
 434 #wikitext a {
 435         overflow-wrap: break-word;
 436         word-break: break-all;
 437 }
 438
 439 a:visited {
 440         text-decoration: none;
 441         font-weight: normal;
 442 }
 443 #wikitext a:visited {
 444         color: #765193;
 445 }
 446
 447 a:hover {
 448         text-decoration: underline;
 449         color: #e00004;
 450 }
 451
 452 a.createlinktext {
 453         color: red;
 454 }
 455
 456 /*********/
 457 /* LISTS */
 458 /*********/
 459
 460 ul {
 461         list-style-type: square;
 462         margin: 0px 0px 10px 10px;
 463         padding-left: 10px;
 464 }
 465
 466 /********/
 467 /* MISC */
 468 /********/
 469
 470 hr {
 471         height: 0;
 472         border-width: 0;
 473         border-bottom: 1px solid #aaa;
 474 }
 475
 476 h2 {
 477         font-size: 1.7em;
 478         font-weight: normal;
 479 }
 480
 481 .frame h2 {
 482         margin-top: 0;
 483 }
 484
 485 pre {
 486         white-space: pre-wrap;
 487 }
 488
 489 input {
 490         font-size: inherit;
 491         font-family: inherit;
 492         font-weight: inherit;
 493         font-variant: inherit;
 494 }