87a51129b8
* Add back "Resize to window" link. * Add Z shortcut for resize to window link (mnemonic: Z for zoom image). * Resize images to screen width by default on both desktop and mobile. * Make it so that notes are nested directly inside the .image-container element with the image, instead of inside a separate .note-container element. This means .image-container and .note-container are now the same element. This is so that the size of the .note-container is driven by the size of the image, which ensures that notes are automatically resized as the image is resized.
172 lines
2.6 KiB
SCSS
172 lines
2.6 KiB
SCSS
@import "../base/000_vars.scss";
|
|
|
|
body {
|
|
color: var(--text-color);
|
|
background-color: var(--body-background-color);
|
|
font-family: $base_font_family;
|
|
font-size: 87.5%;
|
|
line-height: 1.25em;
|
|
}
|
|
|
|
abbr[title=required] {
|
|
display: none;
|
|
}
|
|
|
|
code {
|
|
font-family: monospace;
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
dd {
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
dt {
|
|
font-weight: bold;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: Tahoma, Verdana, Helvetica, sans-serif;
|
|
line-height: 1.5em;
|
|
color: var(--header-color);
|
|
}
|
|
|
|
h1 {
|
|
font-size: $h1_size;
|
|
}
|
|
|
|
h2 {
|
|
font-size: $h2_size;
|
|
}
|
|
|
|
h3, h4, h5, h6 {
|
|
font-size: $h3_size;
|
|
}
|
|
|
|
fieldset {
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
header {
|
|
margin: 0 0 1em 0;
|
|
padding: 0;
|
|
}
|
|
|
|
img {
|
|
border: none;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
input, select, textarea {
|
|
background: var(--form-input-background);
|
|
border: var(--form-input-border);
|
|
color: var(--form-input-text-color);
|
|
padding-left: 0.25em;
|
|
}
|
|
|
|
input[type="button"], input[type="submit"], button {
|
|
border-radius: 3px;
|
|
padding: 0.25em 1em;
|
|
|
|
background: var(--form-button-background);
|
|
border: var(--form-button-border);
|
|
color: var(--form-button-text-color);
|
|
|
|
&:hover {
|
|
box-shadow: var(--form-button-hover-box-shadow);
|
|
background: var(--form-button-hover-background);
|
|
}
|
|
|
|
&:active {
|
|
box-shadow: var(--form-button-hover-box-shadow);
|
|
background: var(--form-button-active-background);
|
|
}
|
|
}
|
|
|
|
/* placeholder text in <input type="text"> elements */
|
|
::placeholder {
|
|
color: var(--form-input-placeholder-text-color);
|
|
font-size: 0.9em;
|
|
padding-left: 0.5em;
|
|
}
|
|
|
|
/* Highlight link anchor targets (e.g. /forum_topics/123#forum_post_456). Use !important to override even table row backgrounds. */
|
|
:target {
|
|
background: var(--target-background) !important;
|
|
}
|
|
|
|
menu {
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
li {
|
|
margin: 0;
|
|
padding: 0 0.2em;
|
|
display: inline;
|
|
}
|
|
}
|
|
|
|
p {
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
table tfoot {
|
|
margin-top: 2em;
|
|
}
|
|
|
|
.fineprint {
|
|
color: var(--muted-text-color);
|
|
font-style: italic;
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
.text-small {
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
.fixed-width-container {
|
|
max-width: 70em;
|
|
}
|
|
|
|
.column-container {
|
|
display: flex;
|
|
|
|
.column-expand { flex: 1; }
|
|
.column-shrink { flex: 0; }
|
|
@media (max-width: 660px) { display: block; }
|
|
}
|
|
|
|
ul.list-bulleted {
|
|
list-style: inside disc;
|
|
}
|
|
|
|
ul.list-inline {
|
|
&, li {
|
|
display: inline;
|
|
}
|
|
}
|
|
|
|
.fit-width {
|
|
max-width: 100%;
|
|
height: auto !important;
|
|
}
|
|
|
|
.fit-height {
|
|
max-height: 90vh;
|
|
height: auto !important;
|
|
}
|
|
|
|
.mobile-only {
|
|
display: none;
|
|
@media (max-width: 660px) { display: initial; }
|
|
}
|
|
|
|
.desktop-only {
|
|
@media (max-width: 660px) { display: none; }
|
|
}
|