I know this is probably a really silly question, but I can’t seem to find the answer to it anywhere and I’ve messed around with numbers in the stylesheet but I just can’t change the width of the sidebar. Which numbers in the stylesheet am I supposed to change? Here’s what I’ve got at the moment:
#ui-bar-history [id|=history],#ui-bar-toggle{font-size:1.2em;line-height:inherit;color:#000000;background-color:transparent;border:0px solid #000000}#ui-bar-toggle{display:block;position:absolute;top:0;right:0;border-right:none;padding:.3em .40em .25em}#ui-bar.stowed #ui-bar-toggle{padding:.3em .30em .25em .40em}#ui-bar-toggle:hover{background-color:#000000;border-color:#000000}#ui-bar-history{margin:0 auto}#ui-bar-history [id|=history]{padding:.2em .30em .35em}#ui-bar-history #history-jumpto{padding:.2em .650em .35em}#ui-bar-history [id|=history]:not(:first-child){margin-left:1em}#ui-bar-history [id|=history]:hover{background-color:#000000;border-color:#000000}#ui-bar-history [id|=history]:disabled{color:#808080;background-color:transparent;border-color:#000000}#ui-bar-body{line-height:1.5;overflow:auto}#ui-bar-body>:not(:first-child){margin-top:2em}#story-title{margin:0;font-size:162.5%}#story-author{margin-top:2em;font-weight:700}#menu ul{margin:1em 0 0;padding:0;list-style:none;border:0px solid #000000}#menu ul:empty{display:none}#menu li{margin:0}#menu li:not(:first-child){border-top:0px solid #000000}#menu li a{display:block;padding:.25em .75em;border:0px solid transparent;color:#000000;text-transform:uppercase}#menu li a:hover{background-color:#000000;border-color:#eee}#menu a,#ui-bar-history [id|=history],#ui-bar-toggle{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#menu-core li[id|=menu-item] a:before,#ui-bar-history [id|=history],#ui-bar-toggle:before{font-family:tme-fa-icons!important;font-style:normal;font-weight:800;font-variant:normal;line-height:1;speak:never;text-rendering:auto;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:000000}#ui-bar-toggle:before{content:"\e81d"}#ui-bar.stowed #ui-bar-a:before{content:"\e82b\00a0"}#menu-item-settings a:before{content:"\e82d\00a0"}#menu-item-restart a:before{content:"\e82c\00a0"}#menu-item-share a:before{content:"\e82f\00a0"}
#menu-item-settings {
display: none;
}
#ui-bar-tray {
position: absolute;
top: 0.1em;
left: 0;
right: 0;
}
#ui-bar {
background-color: #24170b;
color: #808080;
font-family: Futura, sans-serif;
}
#ui-bar-history [id|=history], #ui-bar-toggle {
color: #808080;
}
#menu li a {
color: #808080;
}
body {
background-color: #404040;
color: #808080;
font-family: Futura, sans-serif;
font-size: 120%;
}
a {
color: #808080;
}
a:hover {
color: #808080;
text-decoration: underline;
border-bottom: 1px solid #808080;
}
/* Bottom Bar styling - Start */
#bottombar {
position: fixed;
left: 0;
bottom: 0;
width: 75%;
background-color: #000000;
border-top: 0px solid #000000;
box-shadow: 0 0 0px 0 #000000;
z-index: 40;
}
#bbblock {
margin-left: 15em;
margin-right: 2em;
-o-transition: margin .1s ease-in;
transition: margin .1s ease-in;
}
#bbtext {
text-align: center;
max-width: 45em;
margin: 0 auto;
}
#ui-bar.stowed~#story #bbblock {
margin-left: 2em;
}
@media screen and (max-width: 1130px) {
#bbblock {
margin-left: 13em;
margin-right: 1em;
}
#ui-bar.stowed~#story #bbblock {
margin-left: 3.5em;
}
}
@media screen and (max-width: 763px) {
#bbblock {
margin-left: 3em;
}
}
/* Bottom Bar styling - End */
#topbar {
position: fixed;
top: 0;
left: 0;
width: 75%;
background-color: #000000;
border-top: 0px solid #000000;
box-shadow: 0 0 0px 0 #000000;
z-index: 40;
}
/* Used to align label for volume slider */
input[type=range] {
vertical-align: middle;
}
.hide { display: none; }
.fadein {
opacity: 1;
animation-name: fadeInOpacity;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 0.5s;
}
@keyframes fadeInOpacity {
0% { opacity: 0; }
100% { opacity: 1; }
}
.--macro-ctp-hidden {
display: none;
}
.--macro-ctp-t8n {
animation: macro-ctp-t8n 400ms ease-in;
}
@keyframes macro-ctp-t8n {
from { opacity: 0; }
to { opacity: 1; }
}
input[type=range] {
width: 75%;
margin: 8px 0;
background-color: transparent;
-webkit-appearance: none;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
background: #7471a9;
border: 5px solid #010101;
width: 75%;
height: 0px;
cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
margin-top: -10px;
width: 6px;
height: 20px;
background: #000000;
border: 0.3px solid #ffffff;
border-radius: 1px;
cursor: pointer;
-webkit-appearance: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #8481b3;
}
input[type=range]::-moz-range-track {
background: #7471a9;
border: 5px solid #010101;
width: 75%;
height: 0px;
cursor: pointer;
}
input[type=range]::-moz-range-thumb {
width: 8px;
height: 20px;
background: #000000;
border: 0.3px solid #ffffff;
border-radius: 1px;
cursor: pointer;
}
input[type=range]::-ms-track {
background: transparent;
border-color: transparent;
border-width: 10px 0;
color: transparent;
width: 75%;
height: 0px;
cursor: pointer;
}
input[type=range]::-ms-fill-lower {
background: #64619f;
border: 5px solid #010101;
}
input[type=range]::-ms-fill-upper {
background: #7471a9;
border: 5px solid #010101;
}
input[type=range]::-ms-thumb {
width: 7px;
height: 20px;
background: #000000;
border: 0.3px solid #ffffff;
border-radius: 1px;
cursor: pointer;
margin-top: 0px;
/*Needed to keep the Edge thumb centred*/
}
input[type=range]:focus::-ms-fill-lower {
background: #7471a9;
}
input[type=range]:focus::-ms-fill-upper {
background: #8481b3;
}
/*TODO: Use one of the selectors from https://stackoverflow.com/a/20541859/7077589 and figure out
how to remove the virtical space around the range input in IE*/
@supports (-ms-ime-align:auto) {
/* Pre-Chromium Edge only styles, selector taken from hhttps://stackoverflow.com/a/32202953/7077589 */
input[type=range] {
margin: 0;
/*Edge starts the margin from the thumb, not the track as other browsers do*/
}
}
input[type=range] {
width: 100%;
margin: 10px 0;
background-color: transparent;
-webkit-appearance: none;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
background: #7471a9;
border: 5px solid #010101;
width: 100%;
height: 0px;
cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
margin-top: -15px;
width: 8px;
height: 20px;
background: #000000;
border: 0.3px solid #ffffff;
border-radius: 1px;
cursor: pointer;
-webkit-appearance: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #8481b3;
}
input[type=range]::-moz-range-track {
background: #7471a9;
border: 5px solid #010101;
width: 100%;
height: 0px;
cursor: pointer;
}
input[type=range]::-moz-range-thumb {
width: 8px;
height: 20px;
background: #000000;
border: 0.3px solid #ffffff;
border-radius: 1px;
cursor: pointer;
}
input[type=range]::-ms-track {
background: transparent;
border-color: transparent;
border-width: 10px 0;
color: transparent;
width: 100%;
height: 0px;
cursor: pointer;
}
input[type=range]::-ms-fill-lower {
background: #64619f;
border: 5px solid #010101;
}
input[type=range]::-ms-fill-upper {
background: #7471a9;
border: 5px solid #010101;
}
input[type=range]::-ms-thumb {
width: 8px;
height: 20px;
background: #000000;
border: 0.3px solid #ffffff;
border-radius: 1px;
cursor: pointer;
margin-top: 0px;
/*Needed to keep the Edge thumb centred*/
}
input[type=range]:focus::-ms-fill-lower {
background: #7471a9;
}
input[type=range]:focus::-ms-fill-upper {
background: #8481b3;
}
/*TODO: Use one of the selectors from https://stackoverflow.com/a/20541859/7077589 and figure out
how to remove the virtical space around the range input in IE*/
@supports (-ms-ime-align:auto) {
/* Pre-Chromium Edge only styles, selector taken from hhttps://stackoverflow.com/a/32202953/7077589 */
input[type=range] {
margin: 0;
/*Edge starts the margin from the thumb, not the track as other browsers do*/
}
}
.say {
border: 0px solid #24170b;
overflow: auto;
}
.say > img {
max-width: 20%;
float: left;
margin-right: 1em;
}
.say > p:first-of-type {
font-weight: bold;
margin: 0.2em 0;
border-bottom: 0px solid #24170b;
}
.say > p:last-of-type {
padding: 0.5em;
margin: 0;
}