Files
danbooru/app/javascript/src/styles/base/020_base.scss
2019-10-28 21:57:49 -05:00

158 lines
2.4 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;
}
.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;
}
}
.mobile-only {
display: none;
@media (max-width: 660px) { display: initial; }
}
.desktop-only {
@media (max-width: 660px) { display: none; }
}