Below we analyse the `style.css` for the wiki client. You can find the original version over on github 
Here is an example of a custom style.css file to upload to the theme folder:
#welcome-visitors { width: 100vw; /* 100% of the viewport width */ box-sizing: border-box; /* Prevent overflow due to padding/border */ }
Below is the full default css:
.error { background: #eeeeee; padding: 0.8em; } pre.error { word-wrap: break-word; overflow-wrap: break-word; } a { text-decoration: none; } /* highlight links that have title starting or ending with a space. */ body:has(footer span[style=""]) a.spaced { text-decoration: wavy underline crimson; } a img { border: 0; } body { top: 0; left: 0; right: 0; bottom: 0; position: absolute; background: #eeeeee url("/images/crosses.png"); overflow: hidden; padding: 0; margin: 0; font-family: "Helvetica Neue", Verdana, helvetica, Arial, Sans; line-height: 1.3; color: #333333; } /* Better align sortable items. */ .ui-sortable-helper > p { margin: 0px; } .main { top: 0; left: 0; right: 0; bottom: 0; position: absolute; bottom: 60px; margin: 0; width: 10000%; } footer { border-top: 1px solid #3d3c43; box-shadow: inset 0px 0px 7px rgba(0, 0, 0, 0.8); background: #eeeeee url("/images/noise.png"); position: fixed; left: 0; right: 0; height: 20px; padding: 10px; font-size: 80%; z-index: 1000; color: #ccdcd2; } footer form, .footer-item { display: inline; } .item-placeholder { border: 2px dotted #bbb; background: #eee; } .footer-item { margin-left: 8px; } .no-results { font-style: italic; } .omitted-results { font-style: italic; } .incremental-search { position: absolute; background-color: white; color: black; display: inline-block; max-height: 300px; max-width: 430px; padding-top: 5px; padding-bottom: 5px; padding-right: 10px; padding-left: 10px; box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4); outline: none; overflow-y: auto; overflow-x: hidden; } .search-term { background-color: yellow; } .neighbor { float: right; padding-left: 8px; width: 16px; } img.remote, .neighbor img { width: 16px; height: 16px; background-color: #cccccc; } .neighbor .wait { -webkit-animation: rotatecw 2s linear infinite; -moz-animation: rotatecw 2s linear infinite; animation: rotatecw 2s linear infinite; } .neighbor .fetch { -webkit-animation: rotatecw .5s linear infinite; -moz-animation: rotatecw .5s linear infinite; animation: rotatecw .5s linear infinite; } .neighbor .fail { -webkit-transform: rotate(15deg); -moz-transform: rotate(15deg); transform: rotate(15deg); } @-webkit-keyframes rotatecw { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-moz-keyframes rotatecw { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotatecw { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } header { top: 0; } .page-handle { cursor: grab; } footer { bottom: 0; } .twins, .journal, .footer { min-height: 1em; opacity: 1; } .twins:hover, .journal:hover, .footer:hover { opacity: 1; } .story { padding-bottom: 5px; } .story .item { min-width: 40px; } .story blockquote { margin-left: 0; padding: 0 10px; color: #777; border-left: 4px solid #ddd; } .data, .chart, .image { overflow: auto; /* clearfix hack */ float: right; margin-left: 1.4px; margin-bottom: 0.4em; background: #eeeeee; padding: 11.2px; width: 183px; } .image.wide { width: 100%; margin-left: 0em; padding: 0em; padding-bottom: 0.8em; float: none; } .image.left { float: left; margin-left: 0em; margin-right: 2.8px; } .image :is(.thumbnail, .wide) { width: 100%; } /* image overlay */ div.image { position: relative; } .image img.overlay { width: 16px; height: 16px; position: relative; bottom: 22px; right: 2px; /* or -2px without float */ float: right; opacity: 0; transition: .7s ease; } .image:hover img.overlay { opacity: 1; } /* image plugin editor */ .imageEditing #image-options { margin-left: 4px; } /* end image plugin editor */ .backlinks { width: 420px; margin-top: 2px; clear: both; background-color: #eeeeee; padding: 1px; color: grey; font-size: 80%; } .backlinks summary { margin-top: 5px; margin-left: 5px; margin-bottom: 3px; } .backlinks div { margin-left: 5px; margin-right: 2px; } .backlinks a { color: steelblue; } .journal { /*width: 420px;*/ overflow-x: hidden; /* margin-top: 2px; */ clear: both; background-color: #eeeeee; padding: 1px; } .journal.ui-draggable { width: 420px; } .action.fork { color: black; } .action { font-size: 0.9em; background-color: #cccccc; background-size: 24px 24px; color: #666666; text-align: center; text-decoration: none; padding: 0.2em; margin: 3px; float: left; width: 18px; } .action.separator { background-color: #eeeeee; } .control-buttons { float: right; position: relative; right: 5px; overflow-x: visible; white-space: nowrap; } .button { /*from bootstrap*/ background-color: #f5f5f5; *background-color: #e6e6e6; background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6)); background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6); background-image: -o-linear-gradient(top, #ffffff, #e6e6e6); background-image: linear-gradient(top, #ffffff, #e6e6e6); background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6); background-repeat: repeat-x; border: 1px solid #cccccc; *border: 0; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); border-color: #e6e6e6 #e6e6e6 #bfbfbf; border-bottom-color: #b3b3b3; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); /*custom*/ display: inline-block; white-space: normal; position: relative; top: 2px; left: 3px; font-size: 0.9em; text-align: center; text-decoration: none; padding: 0.2em; margin-bottom: 2px; color: #2c3f39; width: 18px; } .button:hover { color: #d9a513; text-shadow: 0 0 1px #2c3f39; box-shadow: 0 0 7px #3d3c43; } .button:active { box-shadow: inset 0 0 7px #3d3c43; } .output-item { background-color:#eee; padding:15px; margin-block-start:1em; margin-block-end:1em; } .target { background-color: #ffffcc !important; } .consumed { outline: solid 2px orange !important; } .highlight { outline: solid 2px red; } .report p, .factory p, .data p, .chart p, .footer a, .image p, p.caption { text-align: center; margin-bottom: 0; color: gray; font-size: 70%; } .twins p { color: gray; } image.remote { width:16px; height:16px; } p.readout { text-align: center; font-size: 300%; color: black; font-weight: bold; margin: 0; } .footer { clear: both; margin-bottom: 1em; padding-bottom: 500px; } .page { float: left; /* inline-block preferred? */ margin: 8px; /* padding: 0 31px; */ width: 490px; background-color: white; height: 100%; overflow: auto; box-shadow: 2px 1px 4px rgba(0, 0, 0, 0.2); outline: none; } .page.active { box-shadow: 2px 1px 24px rgba(0, 0, 0, 0.4); z-index: 10; } .page.plugin > .paper { box-shadow: inset 0px 0px 40px 0px rgba(0,220,0,.5); } .page.local > .paper { box-shadow: inset 0px 0px 40px 0px rgba(220,180,0,.7); } .page.remote > .paper { box-shadow: inset 0px 0px 40px 0px rgba(0,180,220,.5); } .page.recycler > .paper { box-shadow: inset 0px 0px 40px 0px rgba(220,0,0,.5) } .paper { /*width: 430px;*/ padding: 30px; min-height: 100%; } .handle-parent { z-index: 0; position: relative; } .page-handle { z-index: 1; width: 100%; position: absolute; left: 0px; top: 0px; } /* make more specific than ghost style. */ div.pending-remove.page { opacity: 0.2; transition-property: opacity; transition-duration: 300ms; } .twins span { z-index: 2; position: relative; } .header span { z-index: 2; position: relative; } .factory { font-size: inherit; width: 100%; min-height: 150px; } textarea { font-size: inherit; margin-left: 2px; resize: vertical; width: calc(100% - 12px); min-height: 150px; } .clickable:hover { cursor: pointer; } @media all and (max-width: 490px) { .page { width: 1%; margin: 8px; padding: 0; } } * { scrollbar-width: thin; scrollbar-color: #ccc #eee; } ::-webkit-scrollbar { width: 10px; height: 10px; margin-right: 10px; } ::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment { height: 30px; display: block; background-color: transparent; } ::-webkit-scrollbar-track-piece { background-color: #eeeeee; -webkit-border-radius: 6px; } ::-webkit-scrollbar-thumb:vertical { height: 50px; background-color: #cccccc; border: 1px solid #eeeeee; -webkit-border-radius: 6px; } .factory { clear: both; margin-top: 5px; margin-bottom: 5px; background-color: #eeeeee; } .factory p { padding: 10px; } .bytebeat .play { display: inline-block; height: 14px; width: 11px; padding-left: 3px; font-size: 70%; color: #999999; border: 1px solid #999999; border-radius: 8px; } .bytebeat .symbol { color: #990000; } .video { margin-top: 16px; margin-bottom: 5px; } .revision { position: relative; font-size: 24px; color: rgba(128,32,16,0.7); /* #7b2106 */ font-weight: bold; } .revision span { background: rgba(255,255,255,0.8); padding: 10px; position: absolute; display: block; text-align: center; top: -40px; right: 10px; transform: rotate(-15deg); -webkit-transform: rotate(-15deg); -moz-transform: rotate(-15deg); } .favicon { position: relative; margin-bottom: -6px; } .ghost { opacity: 0.6; border-color: #eef2fe; }