osseous/docs/2.5.1/osseous.css

A bony CSS framework without guts.

/*!
  * Osseous CSS v2.5.1
  * https://amdelamar.com/osseous
  * MIT License
  */
@charset "UTF-8";
:root {
  --primary:rgb(51,195,240); /*#33c3f0*/
  --danger:rgb(239,50,91); /*#ef325b*/
  --success:rgb(50,239,135); /*#32ef87*/
  --secondary:rgb(85,85,85); /*#555*/
  --tertiary:rgb(223,223,223); /*#dfdfdf*/
  --black:rgb(34,34,34); /*#222*/
  --white:rgb(255,255,255); /*#fff*/
  --light-grey:rgb(247,247,247); /*#f7f7f7*/
  --highlight:rgb(239,239,50); /*#efef32*/
  --background-color:var(--white);
  --border-color:var(--tertiary);
  --font-color:var(--black);
  --table-highlight:var(--light-grey);
  --font-default:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-monospace:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,"Courier New",monospace;
}

/* Defaults and Basics */
*{box-sizing:border-box;}
html{font-size:62.5%;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}
body{font-family:var(--font-default);font-size:1.5em;font-weight:400;color:var(--font-color);line-height:1.6;background-color:var(--background-color);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin:0;}
article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block;}
audio,canvas,progress,video{display:inline-block}progress{vertical-align:baseline;}
audio:not([controls]){display:none;height:0}[hidden],template{display:none;}
a{color:var(--primary);text-decoration:none;background-color:transparent;-webkit-text-decoration-skip:objects;}
a:active,a:hover{opacity:0.9;text-decoration:underline;outline-width:0;}
abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}
dfn{font-style:italic}mark{background:var(--highlight);}
small{font-size:0.75em}sub,sup{font-size:0.75em;line-height:0;position:relative;vertical-align:baseline;}
sub{bottom:-0.25em}sup{top:-0.5em}figure{margin:1em 4rem;}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
img{border-style:none}svg:not(:root){overflow:hidden;}
b,strong{font-weight:inherit;font-weight:bolder;}
details,menu{display:block;}summary{display:list-item;}
code,kbd,pre,samp{font-family:var(--font-monospace);font-size:1.4rem;}
code{padding:.2rem .5rem;margin:0 .2rem;font-size:90%;white-space:nowrap;background:var(--light-grey);border:1px solid;border-color:var(--tertiary);border-radius:4px;}
pre > code{display:block;padding:1rem 1.5rem;white-space:pre;overflow-x:auto;}
pre,dl,figure,table,p,ul,ol,form{margin-bottom:2.5rem;}
hr{box-sizing:content-box;margin-top:4rem;margin-bottom:4rem;height:0;border-width:0;border-top:1px solid;border-color:var(--tertiary);overflow:visible;}
blockquote,.blockquote{margin:2.5rem 0px 2.5rem 0px;padding:0.2rem 0.5rem 0.2rem 2.5rem;border-left:0.5rem solid;border-color:var(--tertiary);}

/* Headings */
h1, h2, h3, h4, h5, h6{margin-top:0;margin-bottom:2rem;font-weight:300;}
h1{font-size:4.0rem;line-height:1.2;letter-spacing:-.1rem;}
h2{font-size:3.6rem;line-height:1.25;letter-spacing:-.1rem;}
h3{font-size:3.0rem;line-height:1.3;letter-spacing:-.1rem;}
h4{font-size:2.4rem;line-height:1.35;letter-spacing:-.08rem;}
h5{font-size:1.8rem;line-height:1.5;letter-spacing:-.05rem;}
h6{font-size:1.5rem;line-height:1.6;letter-spacing:0;}
@media (min-width:550px){
  h1{font-size:5.0rem;}
  h2{font-size:4.2rem;}
  h3{font-size:3.6rem;}
  h4{font-size:3.0rem;}
  h5{font-size:2.4rem;}
  h6{font-size:1.5rem;}
}

/* Lists */
ul{list-style:circle inside;}
ol{list-style:decimal inside;}
ol, ul{padding-left:0;margin-top:0;}
ul ul,ul ol,ol ol,ol ul{margin:1.5rem 0 1.5rem 3rem;font-size:.9em;}
li{margin-bottom:1rem;}

/* Forms, Buttons, Inputs */
button,input{overflow:visible}button,select{text-transform:none;}optgroup{font-weight:bold;}
button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button;}
button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner{border-style:none;padding:0;}
button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring{outline:1px dotted ButtonText;}
progress{display:inline-block;vertical-align:baseline;}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto;}
[type=search]{-webkit-appearance:textfield;outline-offset:-0.2rem;}
[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none;}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}
::-webkit-input-placeholder{color:inherit;opacity:0.54;}
.button{
  display:inline-block;height:4rem;padding:0 1.2em;color:var(--secondary);text-align:center;font-size:1.1rem;font-weight:700;
  line-height:3.8rem;letter-spacing:.1rem;text-transform:uppercase;text-decoration:none;box-sizing:border-box;white-space:nowrap;
  background-color:transparent;border-radius:0.5rem;border:1px solid;border-color:var(--secondary);cursor:pointer;
}
.button-small {
  font-size:.75em;height:3rem;padding:0 1em;line-height:2.8rem;
}
.button-large {
  font-size:1.5em;height:5rem;padding:0 1.2em;line-height:4.8rem;
}
.button:hover,.button:focus{
  box-shadow:inset 0 0 100px 100px rgba(255, 255, 255, 0.1);
}
a.button:hover,a.button:focus{
  text-decoration:none;
}
.button:active{
  box-shadow:inset 0 0 3px 2px rgba(0,0,0,.15);
}
.button:active:disabled{box-shadow:unset;}
button:disabled,.button:disabled,.button-blue:disabled,.button-green:disabled,.button-red:disabled,[type="submit"]:disabled,[type="button"]:disabled,[type="reset"]:disabled,
button:disabled:hover,.button:disabled:hover,.button-blue:disabled:hover,.button-green:disabled:hover,.button-red:disabled:hover,[type="submit"]:disabled:hover,[type="button"]:disabled:hover,[type="reset"]:disabled:hover{
  color:var(--secondary);
  border-color:var(--tertiary);
  background-color:var(--light-grey);
}

/* Alternative Coloring */
.text-primary{color:var(--primary)!important;}
.text-secondary{color:var(--secondary)!important;}
.text-tertiary{color:var(--tertiary)!important;}
.text-success{color:var(--success)!important;}
.text-danger{color:var(--danger)!important;}

.background-primary{background-color:var(--primary)!important;}
.background-secondary{background-color:var(--secondary)!important;}
.background-tertiary{background-color:var(--tertiary)!important;}
.background-success{background-color:var(--success)!important;}
.background-danger{background-color:var(--danger)!important;}

.border-primary{border-color:var(--primary)!important;}
.border-secondary{border-color:var(--secondary)!important;}
.border-tertiary{border-color:var(--tertiary)!important;}
.border-success{border-color:var(--success)!important;}
.border-danger{border-color:var(--danger)!important;}

.button-primary{color:var(--white);background-color:var(--primary);border-color:var(--primary);}
.button-secondary{color:var(--white);background-color:var(--secondary);border-color:var(--secondary);}
.button-tertiary{color:var(--secondary);background-color:transparent;border-color:var(--white);}
.button-success{color:var(--white);background-color:var(--success);border-color:var(--success);}
.button-danger{color:var(--white);background-color:var(--danger);border-color:var(--danger);}

.button-primary:hover,.button-primary:focus{color:var(--white);}
.button-secondary:hover,.button-secondary:focus{color:var(--white);}
.button-tertiary:hover,.button-tertiary:focus{color:var(--secondary);}
.button-success:hover,.button-success:focus{color:var(--white);}
.button-danger:hover,.button-danger:focus{color:var(--white);}

/* Inputs */
input[type="email"],input[type="number"],input[type="search"],input[type="text"],input[type="tel"],input[type="url"],input[type="password"],input[type="date"],input[type="time"],textarea,select{
  height:3.8rem;min-width:10rem;margin-bottom:1rem;padding:.6rem 1rem;background-color:transparent;font-family:var(--font-default);
  border:0.1rem solid;border-color:var(--tertiary);border-radius:0.4rem;box-shadow:none;box-sizing:border-box;}
textarea{min-height:65px;overflow:auto;font-size:0.85em;}
input[type="email"]:focus,input[type="number"]:focus,input[type="search"]:focus,input[type="text"]:focus,input[type="tel"]:focus,input[type="url"]:focus,input[type="password"]:focus,input[type="date"]:focus,input[type="time"]:focus,textarea:focus,select:focus,
input[type="email"]:hover,input[type="number"]:hover,input[type="search"]:hover,input[type="text"]:hover,input[type="tel"]:hover,input[type="url"]:hover,input[type="password"]:hover,input[type="date"]:hover,input[type="time"]:hover,textarea:hover,select:hover{
	border-color:var(--primary);}
label,legend{display:block;margin-bottom:.5rem;font-weight:600;}
legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}
fieldset{border:0.1rem solid;border-color:var(--tertiary);border-radius:0.4rem;padding:6px 10px;}
[type="checkbox"]:not(:checked),[type="checkbox"]:checked,[type="radio"]:not(:checked),[type="radio"]:checked {
  position:absolute;left:-9999px;display:inline;
}
[type="checkbox"]:not(:checked) + label,[type="checkbox"]:checked + label,[type="radio"]:not(:checked) + label,[type="radio"]:checked + label {
  position:relative;padding-left:2.5rem;cursor:pointer;
}
[type="checkbox"]:not(:checked) + label:before,[type="checkbox"]:checked + label:before,[type="radio"]:not(:checked) + label:before,[type="radio"]:checked + label:before {
  content:'';position:absolute;cursor:pointer;
  left:0;top:3px;width:1.8rem;height:1.8rem;
  background-color:transparent;
  border:0.1rem solid;
	border-color:var(--tertiary);
	border-radius:0.4rem;
}
[type="checkbox"]:hover + label:before,[type="checkbox"]:hover + label:before,
[type="radio"]:hover + label:before,[type="radio"]:hover + label:before,
[type="checkbox"]:focus + label:before,[type="checkbox"]:hover + label:before,
[type="radio"]:focus + label:before,[type="radio"]:hover + label:before {
  border-color:var(--primary) !important;
}
[type="radio"]:not(:checked) + label:before,[type="radio"]:checked + label:before {
  border-radius:50%;
}
[type="checkbox"]:not(:checked) + label:after,[type="checkbox"]:checked + label:after,
[type="radio"]:not(:checked) + label:after,[type="radio"]:checked + label:after {
  content:'✔';position:absolute;
  top:0;left:3px;transition:all .2s;
}
[type="checkbox"]:not(:checked) + label:after,[type="radio"]:not(:checked) + label:after {
  opacity:0;transform:scale(0);
}
[type="checkbox"]:checked + label:after,[type="radio"]:checked + label:after {
  opacity:1;transform:scale(1);
}

/* Disabled Inputs */
input[type="email"]:disabled,input[type="number"]:disabled,input[type="search"]:disabled,input[type="text"]:disabled,input[type="tel"]:disabled,input[type="url"]:disabled,input[type="password"]:disabled,input[type="date"]:disabled,input[type="time"]:disabled,textarea:disabled,select:disabled{
  color:var(--secondary);
  border-color:var(--tertiary);
  background-color:var(--light-grey);
}
[type="checkbox"]:disabled + label:before,[type="radio"]:disabled + label:before {
	color:var(--secondary);
	background-color:var(--light-grey);
}
[type="checkbox"]:disabled + label,[type="radio"]:disabled + label {
	color:var(--secondary);
}
[type="checkbox"][readonly] + label:before,[type="radio"][readonly] + label:before,
[type="checkbox"][readonly] + label:after,[type="radio"][readonly] + label:after{
  pointer-events:none;
}
[type="checkbox"]:disabled:hover + label:before,[type="radio"]:disabled:hover + label:before,
[type="checkbox"]:disabled:focus + label:before,[type="radio"]:disabled:focus + label:before,{
  border-color:var(--tertiary) !important;
}

/* Tabs */
.tabs {
  padding: 0;
  margin: auto;
  align-items: flex-end;
  height: 100%;
  min-height: 6.5rem;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.tabs .tab {
  border:1px solid;
  border-color:var(--tertiary);
  border-bottom: unset;
  border-right: unset;
  margin: 0;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.tabs .tab:last-child {
  border-right: 1px solid;
}

/* Tables */
.table{width:100%;border-collapse:collapse;table-layout:fixed;margin-bottom:16px}
.table thead{position:absolute;clip:rect(1px,1px,1px,1px);overflow:hidden}
.table thead th{font-weight:600;}
.table tbody,.table td,.table th,.table tr{white-space:normal;padding:12px 6px;}
.table tbody tr{margin-bottom:1em}
.table tbody tr:last-of-type{margin-bottom:0}
.table tbody td[data-type=currency]{text-align:right}
.table tbody td[data-title]:before{content:attr(data-title);float:left}
.table{vertical-align:middle;text-align:left;}
@media (min-width:480px){
  .table thead{position:relative;clip:auto;height:auto;width:auto;overflow:auto}
  .table th{font-weight:600}
  .table tbody{display:table-row-group}
  .table tbody tr{display:table-row;border-width:1px}
  .table tbody th[scope=row]{text-align:left}
  .table tbody td[data-title]:before{content:none}
  .table tr{display:table-row}
  .table td,.table th{display:table-cell}
}
@media (max-width:480px){
  .table tbody,.table td,.table th,.table tr{padding:0;line-height:24px}
  .table tbody img,.table td img,.table th img,.table tr img{width:12px}
}
.table.row-alternating tr:nth-child(even){background-color:var(--table-highlight);}
.table.row-borders tr{border-bottom:1px solid;border-color:var(--tertiary);}
.table.row-first tbody tr:first-child{background-color:var(--table-highlight);}
.table.row-last tbody tr:last-child{background-color:var(--table-highlight);}
.table.column-alternating tr td:nth-child(even),.table.column-alternating tr th:nth-child(even){background-color:var(--table-highlight);}
.table.column-borders td,.table.column-borders th{border-right:1px solid;border-color:var(--tertiary);}
.table.column-first tr td:first-child{background-color:var(--table-highlight);}
.table.column-last tr td:last-child{background-color:var(--table-highlight);}

/* Container and Section */
.container{position:relative;width:100%;max-width:960px;margin:0 auto;padding:0 20px;box-sizing:border-box;}
@media (min-width:400px){.container{width:85%;padding:0;}}
.section{padding-top:6.5rem;padding-bottom:4rem;}

/* Columns */
.column,.columns{width:100%;float:left;box-sizing:border-box;}
.row{display:inline-block;width:100%;}
@media (min-width:550px){
  .container{width:80%;}
  .column, .columns{margin-left:4%;}
  .column:first-child, .columns:first-child{margin-left:0;}
  .one.column, .one.columns{width:4.66666666667%;}
  .two.columns{width:13.3333333333%;}
  .three.columns{width:22%;}
  .four.columns{width:30.6666666667%;}
  .five.columns{width:39.3333333333%;}
  .six.columns{width:48%;}
  .seven.columns{width:56.6666666667%;}
  .eight.columns{width:65.3333333333%;}
  .nine.columns{width:74.0%;}
  .ten.columns{width:82.6666666667%;}
  .eleven.columns{width:91.3333333333%;}
  .twelve.columns{width:100%;margin-left:0;}
  .one-third.column{width:30.6666666667%;}
  .two-thirds.column{width:65.3333333333%;}
  .one-half.column{width:48%;}
  .offset-by-one.column, .offset-by-one.columns{margin-left:8.66666666667%;}
  .offset-by-two.column, .offset-by-two.columns{margin-left:17.3333333333%;}
  .offset-by-three.column, .offset-by-three.columns{margin-left:26%;}
  .offset-by-four.column, .offset-by-four.columns{margin-left:34.6666666667%;}
  .offset-by-five.column, .offset-by-five.columns{margin-left:43.3333333333%;}
  .offset-by-six.column, .offset-by-six.columns{margin-left:52%;}
  .offset-by-seven.column, .offset-by-seven.columns{margin-left:60.6666666667%;}
  .offset-by-eight.column, .offset-by-eight.columns{margin-left:69.3333333333%;}
  .offset-by-nine.column, .offset-by-nine.columns{margin-left:78.0%;}
  .offset-by-ten.column, .offset-by-ten.columns{margin-left:86.6666666667%;}
  .offset-by-eleven.column, .offset-by-eleven.columns{margin-left:95.3333333333%;}
  .offset-by-one-third.column, .offset-by-one-third.columns{margin-left:34.6666666667%;}
  .offset-by-two-thirds.column, .offset-by-two-thirds.columns{margin-left:69.3333333333%;}
  .offset-by-one-half.column, .offset-by-one-half.columns{margin-left:52%;}
}

/* Header and Sidebar */
.sidebar{height:100%;width:15%;min-width:200px;z-index:100;background-color:inherit;;position:fixed!important;overflow:auto;display:none;}
.navbar{position:fixed;top:0;left:0;width:100%;height:6.5rem;z-index:99;background:inherit;}
.navbar-body{height:100%;display:flex;align-items:center;justify-content:space-between;background:transparent;}
.navbar a,.sidebar a{color:var(--secondary);transition:all .08s;}
.nav-group{display:flex;align-items:center;height:100%;}
.nav-list{display:flex;flex-direction:column;align-items:center;width:100%;}
.nav-item{display:flex;}
.nav-group .nav-item{height:100%;margin:0 1rem;padding:2rem 1.2rem;}
.nav-list .nav-item{display:inline-block;width:100%;margin:1rem 0;padding:0rem 1.2rem;}
.nav-item-logo{height:100%;display:flex;align-items:center;}
.nav-item-logo img{height:100%;max-height:4rem;vertical-align:bottom;}
.nav-item-close{display:inline-block;padding:1rem 1.2rem;width:100%;}
@media (min-width:640px) and (max-width:919px){.nav-item{margin:0 24px;}}
.nav-group .nav-item:first-child{margin-left:0;}
.nav-group .nav-item:last-child{margin-right:0;}
.nav-list .nav-item:first-child{margin-top:0;}
.nav-list .nav-item:last-child{margin-bottom:0;}
@media (min-width:640px){.nav-small-menu{display:none;}}
@media (max-width:640px){.nav-large-menu{display:none;}}

/* Dropdowns */
.dropdown{position:relative;display:inline-block;white-space:unset;}
.dropdown-body {
  display:none;z-index:1;position:absolute;min-width:6rem;padding:1.6rem;background:var(--background-color);
  font-size:initial;font-weight:initial;line-height:initial;letter-spacing:initial;text-transform:initial;
}
.dropdown-body > a {
  display:inline-block;width:100%;height:32px;line-height:32px;padding:0 1.2rem;box-sizing:border-box;white-space:nowrap;
}
.dropdown:hover .dropdown-body,.dropdown:focus .dropdown-body {display:block;}

/* Utilities */
.full-width{width:100%;box-sizing:border-box;}
.full-height{height:100%;}
.max-full-width{max-width:100%;box-sizing:border-box;}
.float-right,.right{float:right;}
.float-left,.left{float:left;}
.round{border-radius:1rem;}
.square{border-radius:unset;}
.circle{border-radius:50%;}
.text-wrap{white-space:pre-line;word-break:normal;}
.text-nowrap{white-space:nowrap;word-break:unset;}
.text-largest{font-size:3em;height:2em;}
.text-large{font-size:2em;height:1.9em;}
.text-medium{font-size:1.5em;height:1.8em;}
.text-regular{font-size:1em;height:1em;}
.text-small{font-size:0.75em;}
.text-tiny{font-size:0.5em;}
.text-thin{font-weight:300;}
.text-unbold{font-weight:400;}
.text-bold{font-weight:700;}
.text-bolder{font-weight:800;}
.text-wide{letter-spacing:.4rem;}
.text-uppercase{text-transform:uppercase;}
.text-lowercase{text-transform:lowercase;}
.text-capitalize{text-transform:capitalize;}
.text-center{text-align:center;}
.text-right{text-align:right;}
.text-left{text-align:left;}
.margin{margin:1rem;}
.margin-top{margin-top:1rem;}
.margin-bottom{margin-bottom:1rem;}
.margin-left{margin-left:1rem;}
.margin-right{margin-right:1rem;}
.margin-large{margin:4rem;}
.margin-top-large{margin-top:4rem;}
.margin-bottom-large{margin-bottom:4rem;}
.margin-left-large{margin-left:4rem;}
.margin-right-large{margin-right:4rem;}
.margin-none{margin:0;}
.padding{padding:1rem;}
.padding-top{padding-top:1rem;}
.padding-bottom{padding-bottom:1rem;}
.padding-left{padding-left:1rem;}
.padding-right{padding-right:1rem;}
.padding-large{padding:4rem;}
.padding-top-large{padding-top:4rem;}
.padding-bottom-large{padding-bottom:4rem;}
.padding-left-large{padding-left:4rem;}
.padding-right-large{padding-right:4rem;}
.padding-none{padding:0;}
.border{border:1px solid;border-color:var(--border-color);}
.border-top{border-top:1px solid;border-color:var(--border-color);}
.border-bottom{border-bottom:1px solid;border-color:var(--border-color);}
.border-left{border-left:1px solid;border-color:var(--border-color);}
.border-right{border-right:1px solid;border-color:var(--border-color);}
.border-none{border:0;}
.shade{box-shadow: 0 4px 4px 0 rgba(0,0,0,0.15);}
.shadow{box-shadow: 0 0 4px 1px rgba(0,0,0,0.15);}
.shadow-top{box-shadow: 0 -4px 1px rgba(0,0,0,.15);}
.shadow-bottom{box-shadow: 0 4px 1px rgba(0,0,0,.15);}
.shadow-left{box-shadow: -4px 0 1px rgba(0,0,0,.15);}
.shadow-right{box-shadow: 4px 0 1px rgba(0,0,0,.15);}
.shadow-none{box-shadow:none;}