185 lines
2.9 KiB
SCSS
185 lines
2.9 KiB
SCSS
// --------------------------------------------------
|
|
// Base styles for HTML elements
|
|
// --------------------------------------------------
|
|
|
|
html {
|
|
color: var(--primary);
|
|
font-family: $base-font-family;
|
|
font-size: $base-font-size;
|
|
line-height: $line-height-large;
|
|
background-color: var(--secondary);
|
|
overflow-y: scroll;
|
|
direction: ltr;
|
|
|
|
&.text-size-smallest {
|
|
font-size: $base-font-size-smallest;
|
|
}
|
|
|
|
&.text-size-smaller {
|
|
font-size: $base-font-size-smaller;
|
|
}
|
|
|
|
&.text-size-larger {
|
|
font-size: $base-font-size-larger;
|
|
}
|
|
|
|
&.text-size-largest {
|
|
font-size: $base-font-size-largest;
|
|
}
|
|
}
|
|
|
|
// Links
|
|
// --------------------------------------------------
|
|
|
|
a {
|
|
color: var(--tertiary);
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
&:visited {
|
|
color: var(--tertiary);
|
|
}
|
|
&:hover {
|
|
color: var(--tertiary);
|
|
}
|
|
&:active {
|
|
color: var(--tertiary);
|
|
}
|
|
}
|
|
|
|
// Typography
|
|
// --------------------------------------------------
|
|
|
|
hr {
|
|
display: block;
|
|
height: 1px;
|
|
margin: 1em 0;
|
|
border: 0;
|
|
border-top: 1px solid var(--primary-low);
|
|
padding: 0;
|
|
}
|
|
|
|
// Lists
|
|
// --------------------------------------------------
|
|
|
|
ul,
|
|
dd {
|
|
margin: 1em 0 1em 1.25em;
|
|
padding: 0;
|
|
}
|
|
|
|
.cooked ul,
|
|
.cooked ol,
|
|
.cooked dd {
|
|
clear: both;
|
|
}
|
|
|
|
.cooked ul,
|
|
.d-editor-preview ul {
|
|
padding-left: 1.25em;
|
|
}
|
|
|
|
li,
|
|
.cooked li,
|
|
.d-editor-preview li {
|
|
> ul,
|
|
> ol {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
// Embedded content
|
|
// --------------------------------------------------
|
|
|
|
img {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
// Forms
|
|
// --------------------------------------------------
|
|
|
|
fieldset {
|
|
margin: 0;
|
|
border: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
pre code {
|
|
overflow: auto;
|
|
-moz-tab-size: 4;
|
|
tab-size: 4;
|
|
&.lang-markdown {
|
|
white-space: pre-wrap;
|
|
}
|
|
}
|
|
|
|
// TODO figure out a clean place to put stuff like this
|
|
.row:before,
|
|
.row:after {
|
|
display: table;
|
|
content: "";
|
|
}
|
|
.row:after {
|
|
clear: both;
|
|
}
|
|
|
|
// Tables
|
|
// --------------------------------------------------
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
tbody {
|
|
border-top: 3px solid var(--primary-low);
|
|
}
|
|
|
|
tr {
|
|
border-bottom: 1px solid var(--primary-low);
|
|
&.highlighted {
|
|
animation: background-fade-highlight 2.5s ease-out;
|
|
}
|
|
}
|
|
|
|
// https://en.wikipedia.org/wiki/Ruby_character
|
|
ruby > rt {
|
|
font-size: 72%; // ~10px with 14px base
|
|
}
|
|
|
|
// Buttons (was in normalized)
|
|
// --------------------------------------------------
|
|
|
|
button,
|
|
html input[type="button"],
|
|
input[type="reset"],
|
|
input[type="submit"] {
|
|
cursor: pointer;
|
|
}
|
|
|
|
// Inline form
|
|
// --------------------------------------------------
|
|
|
|
.inline-form {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
&.full-width {
|
|
display: flex;
|
|
}
|
|
|
|
> input[type="text"] {
|
|
display: inline-flex;
|
|
flex: 1;
|
|
}
|
|
|
|
> .select-kit,
|
|
> input[type="text"],
|
|
> label,
|
|
> .btn {
|
|
margin-bottom: 0.5em; // for when items wrap (mobile, narrow windows)
|
|
margin-right: 0.5em;
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|