boilerplate.css

/*
    Stylesheet Properties ---
    Modify these to change your stylesheet without having to change a line of CSS.
*/
:root {
    --fontSize: 16px;
    --lineHeight: 1.75; /* Keep this number unitless to avoid overlap and inheritance issues. */

    --headerFont: 'Geneva';
    --bodyFont: 'Arial';
    --monoFont: 'Lucida Console';

    --font: #000000;
    --foreground: #EAEAEA;
    --background: #FFFFFF;
    --border: #CECECE;
    --accent: #0000EE;
    --anchor: #0000EE;
    --anchor-visited: #551A8B;
    --selection: #0000EE;
    --scrollbar: #C1C1C1;
    --scrollbarTrack: #F1F1F1;
    --scrollbarHover: #A8A8A8;

    --success: #7CDC7C;
    --warning: #E86363;

    --transitionTimer: .2s;
}



/*
    Global Selectors ---
    These selectors affect all elements in the stylesheet.
*/
* {
    box-sizing: border-box; /* Standardizes how the box model is calculated across all elements. */
}
*::selection, *::-moz-selection, .selection {
    color: var(--background, #FFFFFF);
    background-color: var(--selection, #0000EE);
}
html, body {
    padding: 0; /* Remove unnecessary padding. */
    margin: 0; /* Remove unnecessary margin. */
}
body {
    -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS. */

    /* Default Background */
    background-color: var(--background, #FFFFFF);

    /* Global Inherited Defaults */
    font-family: var(--headerFont, 'Geneva'), 'Helvetica', serif;
    font-size: var(--fontSize, 16px);
    line-height: var(--lineHeight, 1.75);
    color: var(--font, #000000);
}
html:focus, body:focus {
    outline: none; /* Remove default agent outline focus from most browsers. */
}



/*
    HTML5 Page Building ---
    Common page building containers and elements. The following follows the W3C default spec.
*/
header, footer, main, section, article {
    display: block;
}
footer {
    padding: 20px;
    text-align: center;
}



/*
    HTML5 Content Handling ---
    Common text and media elements. The following follows the W3C default spec.
*/
h1, h2, h3, h4, h5, h6 {
    display: block;
    font-weight: bold;
    margin-bottom: 1.25em;
    font-family: var(--bodyFont, 'Arial'), 'Georgia', serif;
}
h1 {
    font-size: 3.75em;
}
h2 {
    font-size: 3.25em;
}
h3 {
    font-size: 2.8em;
}
h4 {
    font-size: 2.4em;
}
h5 {
    font-size: 2em;
}
h6 {
    font-size: 1.75em;
}
p {
    display: block;
    padding: 0;
    margin: 1em 0;
}
span {
    display: inline;
}
img {
    border-style: none; /* Removes forced border from IE 10. */
}
hr {
    display: block;
    margin: 0.5em auto;
    border: 1px inset var(--border, #CECECE);
}

/* Emphasis (italic) Text */
em {
    font-style: italic;
}

/* Strong Accessibility Text */
strong {
    font-weight: bolder;
}

/* Deleted (strike) and Insert (underline) */
del {
    text-decoration: line-through;
}
ins {
    text-decoration: underline;
}
del::before, del::after,
ins::before, ins::after { /* Hides before and active tag info. */
    clip-path: inset(100%);
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
} /* Accessibility Screen Reading Technology */
ins::before { content: " [insertion start] "; } ins::after { content: " [insertion end] "; }
del::before { content: " [deletion start] "; } del::after { content: " [deletion start] "; }

/* Inline Citation. */
cite {
    font-style: italic;
}

/* Small Text - Decreases font normal font size. */
small {
    font-size: 80%;
}

/* Superscript and Subscript */
sup {
    vertical-align: super;
}
sub {
    vertical-align: sub;
}
sub, sup {
    display: inline;
    font-size: 80%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

/* Anchor Links */
a,
a:link { /* :link is for anchor tags that have not been visited yet. */
    display: inline;
    cursor: pointer;
    color: var(--anchor, #0000EE);
    background-color: transparent; /* Remove the gray background on active links in IE 10. */
}
a:hover, a:focus {
    text-decoration: none;
}
a:hover, a:focus, a:visited, a:link:active, a:visited:active {
    color: var(--anchor-visited, #551A8B);
}

/* Preformatted Text, Code Blocks, and Sample Output. */
pre {
    font-family: var(--monoFont, 'Lucida Console'), monospace;
}
pre {
    display: block;
}
pre > code {
    padding: 20px;
    border-radius: 0;
    display: block;
}
code {
    padding: 0 5px;
    background-color: var(--foreground, #EAEAEA);
    border-radius: 10px;
}

/* Block Quotes */
blockquote {
    display: block;
    position: relative;
    padding: 0;
    margin: 1em 40px;
}
blockquote::before {
    position: absolute;
    top: -0.5em;
    left: -0.8em;
    content: open-quote;
    font-size: 3rem;
    height: 1em;
}
blockquote::after {
    position: absolute;
    bottom: -0.5em;
    right: -0.8em;
    content: close-quote;
    font-size: 3rem;
    height: 1em;
}

/* Inline Quotes */
q {
    display: inline;
}
q::before {
    content: open-quote;
}
q::after {
    content: close-quote;
}

/* Ordered and Underorderd Lists */
ol {
    display: block;
    list-style-type: decimal;
    margin: 1em 0;
    padding-left: 40px;
}
ul {
    display: block;
    list-style-type: disc;
    margin: 1em 0;
    padding-left: 40px;
}
li {
    display: list-item;
}



/*
    Scrollbar ---
    Customize the scrollbar. Only available in webkit support browsers; otherwise default is standard browser scrollbar
*/
::-webkit-scrollbar {
    width: 15px; /* Vertical Scroll Bar */
    height: 15px; /* Horizontal Scroll Bar */
}
::-webkit-scrollbar-button {
    height: 16px;
    width: 16px;
    background-color: var(--scrollbarTrack, #C1C1C1);
    background-size: 10px;
    background-repeat: no-repeat;
}
::-webkit-scrollbar-button:hover {
    background-color: var(--scrollbarHover, #A8A8A8);
}
::-webkit-scrollbar-button:single-button:vertical:increment,
::-webkit-scrollbar-button:single-button:vertical:decrement,
::-webkit-scrollbar-button:single-button:horizontal:decrement,
::-webkit-scrollbar-button:single-button:horizontal:increment {
    display: block;
}
::-webkit-scrollbar-button:single-button:vertical:increment {
    background-position: center 6px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='currentColor'><polygon points='0,0 100,0 50,50'/></svg>");
}
::-webkit-scrollbar-button:single-button:vertical:decrement {
    background-position: center 6px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='currentColor'><polygon points='50,00 0,50 100,50'/></svg>");
}
::-webkit-scrollbar-button:single-button:horizontal:decrement {
    background-position: 6px center;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='currentColor'><polygon points='0,50 50,100 50,0'/></svg>")
}
::-webkit-scrollbar-button:single-button:horizontal:increment {
    background-position: 6px center;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='currentColor'><polygon points='0,0 0,100 50,50'/></svg>");
}
::-webkit-scrollbar-corner {
    background-color: var(--scrollbarTrack);
}
::-webkit-scrollbar-track {
    background-color: var(--scrollbarTrack);
    box-shadow: inset 0 0 0 0 transparent;
}
::-webkit-scrollbar-track-piece {}
::-webkit-scrollbar-thumb {
    border-width: 0;
    background-color: var(--scrollbar, #C1C1C1);
    background-clip: padding-box;
    border-style: solid;
    border-color: var(--border, #CECECE);
}
::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active {
    background-color: var(--scrollbarHover, #A8A8A8);
}
::-webkit-resizer {
    background-color: var(--scrollbarTrack);
}



/*
    Form Control ---
    Handles form specific elements.
*/
form {
    display: block;
    padding: 25px 35px;
    border: 1px solid var(--border, #CECECE);
}
fieldset {
    display: block;
    padding: 0.75em 2.5% 1em 2.5%;
    margin: 0 0 1em 0;
    border-width: 1px;
    border-style: solid;
    border-color: var(--border, #CECECE);
    transition-duration: var(--transitionTimer, .2s);
}
legend {
    display: table;
    max-width: 100%;
    padding: 0 0.5em;
    margin: 0 0 0 -0.5em;
    white-space: normal;
    color: inherit;
    transition-duration: var(--transitionTimer, .2s);
}
label {
    display: inline-block;
    margin: 0;
    font-size: inherit;
    line-height: inherit;
    font-weight: bold;
}
input, select, textarea {
    display: block;
    width: 100%; /* Enforces normal display block logic across browsers. */
    padding: 5px 10px;
    margin: 0 0 1em 0;
    border: 1px solid var(--border, #CECECE);
    border-radius: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    background-color: transparent;
    outline: 0;
    box-shadow: none;
    transition-duration: var(--transitionTimer, .2s);
}
textarea {
    overflow: auto; /* Removes the forced scroll bar for some browsers. */
    max-width: 100%; /* Prevents it from busting out of parent container. */
}
input:focus, select:focus, textarea:focus,
input:active, select:active, textarea:active {
    border-color: var(--accent, #0000EE);
    outline-color: var(--anchor, #0000EE);
}
input:disabled, select:disabled, select:empty, textarea:disabled, option:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
input:read-only, textarea:read-only {
    cursor: not-allowed;
}
input::placeholder, textarea::placeholder {
    color: inherit;
    opacity: 0.5;
}
option, optgroup {
    padding: 0.25em;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

/* Various User Inputs Validation */
fieldset:invalid {
    border-color: var(--warning, #E86363);
}
fieldset:invalid > legend {
    color: var(--warning, #E86363);
}
input:not([value='']):not(:focus):invalid, select:not(:focus):invalid, textarea:not(:focus):invalid {
    border-color: var(--warning, #E86363);
}
input:not(:focus):required:valid, select:not(:focus):required:valid, textarea:not(:focus):required:valid {
    border-color: var(--success, #7CDC7C)
}

/* Search Box */
input[type="search"] {
    -webkit-appearance: none; /* Removes ugly browser styling in most modern browsers. */
    appearance: none; /* Removes ugly browser styling in most modern browsers. */
}
input[type="search"] {
    -webkit-appearance: textfield; /* Correct the odd appearance in Chrome and Safari. */
    outline-offset: -2px; /* Correct the outline style in Safari. */
}
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none; /* Remove the inner padding in Chrome and Safari on macOS. */
}

/* Checkbox and Radio */
input[type="radio"], input[type="checkbox"] {
    display: inline-block;
    position: relative;
    width: 1em;
    height: 1em;
    vertical-align: -2px; /* Adjusts the position of the checkboxes on the text baseline */
    color: var(--accent, #0000EE); /* Set here so that Windows' High-Contrast Mode can override */
    cursor: pointer;
    transition-duration: var(--transitionTimer, .2s);
}
input[type="radio"]:before, input[type="checkbox"]:before {
    content: ' '; /* Enables the following to work. */
    width: inherit;
    height: inherit;
    background-color: var(--background, #FFFFFF);
    outline: 1px solid var(--accent, #0000EE);
    position: absolute;
        top: 0;
        left: 0;
    transition-duration: inherit;
}
input[type="radio"]:checked:before, input[type="checkbox"]:checked:before {
    background-color: var(--accent, #0000EE);
}
input[type="radio"]:after, input[type="checkbox"]:after {
    color: transparent;
    transition-duration: inherit;

    /* Centers Checkmark */
    position: absolute;
        top: 50%;
        left: 50%;
    transform: translate(-50%, -50%);
}
input[type="radio"]:before {
    border-radius: 10px;
}
input[type="radio"]:checked:after {
    background-color: var(--background, #FFFFFF);
}
input[type="checkbox"]:after {
    content: '\2714'; /* CSS Checkmark Code */
}
input[type="checkbox"]:checked:after {
    color: var(--background, #FFFFFF);
}
input[type="radio"]:after {
    content: ' '; /* Don't leave blank. */
    width: 50%;
    height: 50%;
    background-color: transparent;
    border-radius: 100%;
    transition-duration: inherit;

    /* Centers Checkmark */
    position: absolute;
        top: 50%;
        left: 50%;
    transform: translate(-50%, -50%);
}

/* Color and Date Picker */
input[type="color"], input[type="date"] {
    cursor: pointer; /* Enforces Pointer Cursor; not all browsers do. */
}

/* Mutliselect */
select[multiple] {
    height: auto;
}

/* Buttons */
button, input[type="submit"], input[type="reset"], input[type="button"] {
    display: block;
    width: auto;
    padding: 7px 14px;
    margin: 0;
    border-width: 1px;
    font-family: inherit; /* Does not inherit by default. */
    font-size: inherit; /* Does not inherit by default. */
    line-height: inherit; /* Does not inherit by default. */
    overflow: visible; /* Ensures inner text is visible on all browsers. */
    cursor: pointer;
    color: var(--background, #000000);
    background-color: var(--accent, #0000EE);
    border-style: solid;
    border-color: transparent;
    -webkit-appearance: button; /* Correct the inability to style clickable types in iOS and Safari. */
    transition-duration: var(--transitionTimer, .2s);
}
button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover {
    color: var(--accent, #0000EE);
    background-color: transparent;
    border-color: var(--accent, #0000EE);
}
::-webkit-file-upload-button { /* Modifies file uploader button for webkit browsers. */
    -webkit-appearance: button; /* Correct the inability to style clickable types in iOS and Safari. */
    font: inherit; /* Change font properties to `inherit` in Safari. */
}