872 lines
14 KiB
CSS
872 lines
14 KiB
CSS
@import url('_variables.css');
|
|
|
|
/* ------------------------------ *\
|
|
* peachcloud.css
|
|
*
|
|
* Index
|
|
* - ALIGNMENT
|
|
* - BUTTONS
|
|
* - CARDS
|
|
* - CAPSULES
|
|
* - CIRCLES
|
|
* - COLORS
|
|
* - GRIDS
|
|
* - HTML
|
|
* - FLASH MESSAGE
|
|
* - FONTS
|
|
* - ICONS
|
|
* - INPUTS
|
|
* - LABELS
|
|
* - LINKS
|
|
* - LISTS
|
|
* - METERS
|
|
* - NAVIGATION
|
|
* - RADIAL MENU
|
|
* - SWITCHES / SLIDERS
|
|
* - PARAGRAPHS
|
|
*
|
|
\* ------------------------------ */
|
|
|
|
/*
|
|
* ALIGNMENT
|
|
*/
|
|
|
|
.center {
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.center-text {
|
|
text-align: center;
|
|
}
|
|
|
|
.center-vert {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.push-right {
|
|
margin-left: auto;
|
|
padding-right: 0;
|
|
}
|
|
|
|
.top-left {
|
|
/* place-self combines align-self and justify-self */
|
|
place-self: end center;
|
|
}
|
|
|
|
@media only screen and (min-width: 600px) {
|
|
.top-left {
|
|
place-self: end;
|
|
}
|
|
}
|
|
|
|
.top-right {
|
|
place-self: end center;
|
|
}
|
|
|
|
@media only screen and (min-width: 600px) {
|
|
.top-right {
|
|
place-self: end start;
|
|
}
|
|
}
|
|
|
|
.top-middle {
|
|
place-self: center;
|
|
}
|
|
|
|
@media only screen and (min-width: 600px) {
|
|
.top-middle {
|
|
padding-bottom: 2rem;
|
|
place-self: center;
|
|
}
|
|
}
|
|
|
|
.middle {
|
|
place-self: center;
|
|
grid-column-start: 1;
|
|
grid-column-end: 4;
|
|
}
|
|
|
|
.bottom-middle {
|
|
place-self: center;
|
|
}
|
|
|
|
@media only screen and (min-width: 600px) {
|
|
.bottom-middle {
|
|
padding-top: 2rem;
|
|
place-self: center;
|
|
}
|
|
}
|
|
|
|
.bottom-left {
|
|
place-self: start center;
|
|
}
|
|
|
|
@media only screen and (min-width: 600px) {
|
|
.bottom-left {
|
|
place-self: start end;
|
|
}
|
|
}
|
|
|
|
.bottom-right {
|
|
place-self: start center;
|
|
}
|
|
|
|
@media only screen and (min-width: 600px) {
|
|
.bottom-right {
|
|
place-self: start;
|
|
}
|
|
}
|
|
|
|
/*
|
|
* BUTTONS
|
|
*/
|
|
|
|
.button {
|
|
border: 1px solid var(--near-black);
|
|
border-radius: var(--border-radius-2);
|
|
/* Needed to render inputs & buttons of equal width */
|
|
-moz-box-sizing: border-box;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
color: var(--near-black);
|
|
cursor: pointer;
|
|
padding: 10px;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
font-size: var(--font-size-5);
|
|
font-family: var(--sans-serif);
|
|
width: 80%;
|
|
margin-top: 5px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.button-primary {
|
|
background-color: var(--light-gray);
|
|
}
|
|
|
|
.button-primary:hover {
|
|
background-color: var(--primary);
|
|
}
|
|
|
|
.button-primary:focus {
|
|
background-color: var(--primary);
|
|
outline: none;
|
|
}
|
|
|
|
.button-secondary {
|
|
background-color: var(--light-gray);
|
|
}
|
|
|
|
.button-secondary:hover {
|
|
background-color: var(--light-silver);
|
|
}
|
|
|
|
.button-secondary:focus {
|
|
background-color: var(--light-silver);
|
|
outline: none;
|
|
}
|
|
|
|
.button-warning {
|
|
background-color: var(--light-gray);
|
|
}
|
|
|
|
.button-warning:hover {
|
|
background-color: var(--light-red);
|
|
}
|
|
|
|
.button-warning:focus {
|
|
background-color: var(--light-red);
|
|
outline: none;
|
|
}
|
|
|
|
/*
|
|
* CAPSULES
|
|
*/
|
|
|
|
.capsule {
|
|
padding: 1rem;
|
|
border: var(--border-width-1) solid;
|
|
border-radius: var(--border-radius-3);
|
|
background-color: var(--light-gray);
|
|
margin-top: 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
/*
|
|
* CARDS
|
|
*/
|
|
|
|
.card {
|
|
min-height: 50vh;
|
|
max-height: 90vh;
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
@media only screen and (min-width: 600px) {
|
|
.card {
|
|
min-height: 50vh;
|
|
max-height: 90vh;
|
|
width: 20rem;
|
|
}
|
|
}
|
|
|
|
.card-container {
|
|
justify-content: center;
|
|
padding-top: 1rem;
|
|
padding-bottom: 1rem;
|
|
}
|
|
|
|
.card-text {
|
|
margin: 0;
|
|
font-size: var(--font-size-5);
|
|
padding-bottom: 0.3rem;
|
|
}
|
|
|
|
.container {
|
|
display: grid;
|
|
grid-template-columns: 2fr 5fr 2fr;
|
|
grid-template-rows: auto;
|
|
grid-row-gap: 1rem;
|
|
align-items: center;
|
|
justify-items: center;
|
|
margin-bottom: 1rem;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
/*
|
|
* CIRCLES
|
|
*/
|
|
|
|
.circle {
|
|
align-items: center;
|
|
border-radius: 50%;
|
|
box-shadow: var(--box-shadow-3);
|
|
display: flex;
|
|
justify-content: center;
|
|
position: relative;
|
|
}
|
|
|
|
.circle-small {
|
|
height: 5rem;
|
|
width: 5rem;
|
|
}
|
|
|
|
.circle-medium {
|
|
height: 8rem;
|
|
width: 8rem;
|
|
}
|
|
|
|
.circle-large {
|
|
height: 13rem;
|
|
width: 13rem;
|
|
}
|
|
|
|
.circle-success {
|
|
background-color: var(--success);
|
|
color: var(--white);
|
|
font-size: var(--font-size-4);
|
|
}
|
|
|
|
.circle-warning {
|
|
background-color: var(--warning);
|
|
color: var(--white);
|
|
font-size: var(--font-size-4);
|
|
}
|
|
|
|
.circle-error {
|
|
background-color: var(--danger);
|
|
color: var(--white);
|
|
font-size: var(--font-size-4);
|
|
}
|
|
|
|
/* quartered-circle: circle for the center of radial-menu */
|
|
|
|
.quartered-circle {
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
|
|
.quarter {
|
|
width: 50%;
|
|
height: 50%;
|
|
}
|
|
|
|
.quarter-link {
|
|
left: 50%;
|
|
margin: -2em;
|
|
top: 50%;
|
|
}
|
|
|
|
.quarter-icon {
|
|
position: absolute;
|
|
bottom: 1em;
|
|
left: 1.5em;
|
|
}
|
|
|
|
/*
|
|
* COLORS
|
|
*/
|
|
|
|
.primary-bg {
|
|
background-color: var(--primary);
|
|
}
|
|
|
|
.secondary-bg {
|
|
background-color: var(--secondary);
|
|
}
|
|
|
|
.success-bg {
|
|
background-color: var(--success);
|
|
}
|
|
|
|
.info-bg {
|
|
background-color: var(--info);
|
|
}
|
|
|
|
.warning-bg {
|
|
background-color: var(--warning);
|
|
}
|
|
|
|
.danger-bg {
|
|
background-color: var(--danger);
|
|
}
|
|
|
|
.light-bg {
|
|
background-color: var(--light);
|
|
}
|
|
|
|
.primary-border {
|
|
border-color: var(--primary);
|
|
}
|
|
|
|
.success-border {
|
|
border-color: var(--success);
|
|
}
|
|
|
|
.info-border {
|
|
border-color: var(--info);
|
|
}
|
|
|
|
.warning-border {
|
|
border-color: var(--warning);
|
|
}
|
|
|
|
.danger-border {
|
|
border-color: var(--danger);
|
|
}
|
|
|
|
.dark-gray-border {
|
|
border-color: var(--dark-gray);
|
|
}
|
|
|
|
/*
|
|
* GRIDS
|
|
*/
|
|
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: 2fr 1fr 2fr;
|
|
grid-template-rows: 2fr 1fr 2fr;
|
|
height: 80vh;
|
|
}
|
|
|
|
.flex-grid {
|
|
display: flex;
|
|
align-content: space-between;
|
|
align-items: baseline;
|
|
justify-content: center;
|
|
}
|
|
|
|
.two-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
grid-template-rows: auto;
|
|
align-items: center;
|
|
justify-content: center;
|
|
justify-items: center;
|
|
margin-right: 2rem;
|
|
margin-left: 2rem;
|
|
padding-top: 1.5rem;
|
|
padding-bottom: 1rem;
|
|
}
|
|
|
|
.three-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
grid-template-rows: auto;
|
|
grid-gap: 10px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.stack {
|
|
display: grid;
|
|
align-items: flex-end;
|
|
justify-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.three-grid-icon-1 {
|
|
align-self: center;
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
justify-self: center;
|
|
margin-bottom: 10px;
|
|
max-width: 55%;
|
|
text-align: center;
|
|
}
|
|
|
|
.three-grid-icon-2 {
|
|
align-self: center;
|
|
grid-column: 2;
|
|
grid-row: 1;
|
|
justify-self: center;
|
|
margin-bottom: 10px;
|
|
max-width: 55%;
|
|
text-align: center;
|
|
}
|
|
|
|
.three-grid-icon-3 {
|
|
align-self: center;
|
|
grid-column: 3;
|
|
grid-row: 1;
|
|
justify-self: center;
|
|
margin-bottom: 10px;
|
|
max-width: 55%;
|
|
text-align: center;
|
|
}
|
|
|
|
.three-grid-label-1 {
|
|
align-self: center;
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
justify-self: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.three-grid-label-2 {
|
|
align-self: center;
|
|
grid-column: 2;
|
|
grid-row: 1;
|
|
justify-self: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.three-grid-label-3 {
|
|
align-self: center;
|
|
grid-column: 3;
|
|
grid-row: 1;
|
|
justify-self: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.grid-column-1 {
|
|
grid-column: 1;
|
|
}
|
|
|
|
.grid-column-2 {
|
|
grid-column: 2;
|
|
justify-self: left;
|
|
}
|
|
|
|
.grid-column-3 {
|
|
grid-column: 3;
|
|
}
|
|
|
|
/*
|
|
* HTML
|
|
*/
|
|
|
|
/* Push bottom nav bar to bottom of screen on larger displays */
|
|
@media only screen and (min-width: 600px) {
|
|
html {
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
/*
|
|
* FLASH MESSAGE
|
|
*/
|
|
|
|
.flash-message {
|
|
display: block;
|
|
font-family: var(--sans-serif);
|
|
font-size: var(--font-size-7);
|
|
margin-bottom: 0px;
|
|
padding-top: 10px;
|
|
padding-bottom: 0px;
|
|
padding-left: 5px;
|
|
padding-right: 5px;
|
|
}
|
|
|
|
/*
|
|
* FONTS
|
|
*/
|
|
|
|
.font-near-black {
|
|
color: var(--near-black);
|
|
}
|
|
|
|
.font-gray {
|
|
color: var(--mid-gray);
|
|
}
|
|
|
|
.font-light-gray {
|
|
color: var(--silver);
|
|
}
|
|
|
|
.font-success {
|
|
color: var(--success);
|
|
}
|
|
|
|
.font-warning {
|
|
color: var(--warning);
|
|
}
|
|
|
|
.font-failure {
|
|
color: var(--danger);
|
|
}
|
|
|
|
/*
|
|
* ICONS
|
|
*/
|
|
|
|
.icon {
|
|
width: 3rem;
|
|
}
|
|
|
|
.icon-small {
|
|
width: 1rem;
|
|
}
|
|
|
|
.icon-medium {
|
|
width: 2rem;
|
|
}
|
|
|
|
.icon-large {
|
|
width: 3rem;
|
|
}
|
|
|
|
.icon-100 {
|
|
width: 100%;
|
|
}
|
|
|
|
/* icon-active: sets color of icon svg to near-black */
|
|
.icon-active {
|
|
filter: invert(0%) sepia(1%) saturate(4171%) hue-rotate(79deg) brightness(86%) contrast(87%);
|
|
}
|
|
|
|
/* icon-inactive: sets color of icon svg to gray */
|
|
.icon-inactive {
|
|
filter: invert(72%) sepia(8%) saturate(14%) hue-rotate(316deg) brightness(93%) contrast(92%);
|
|
}
|
|
|
|
/*
|
|
* INPUTS
|
|
*/
|
|
|
|
.input {
|
|
/* Needed to render inputs & buttons of equal width */
|
|
-moz-box-sizing: border-box;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
margin-top: 0.5rem;
|
|
margin-bottom: 1rem;
|
|
padding-left: 5px;
|
|
line-height: 1.5rem;
|
|
width: 80%;
|
|
}
|
|
|
|
.alert-input {
|
|
/* Needed to render inputs & buttons of equal width */
|
|
-moz-box-sizing: border-box;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
margin-right: 0.25rem;
|
|
padding-right: 0.25rem;
|
|
text-align: right;
|
|
width: 7rem;
|
|
}
|
|
|
|
/*
|
|
* LABELS
|
|
*/
|
|
|
|
.label-small {
|
|
font-family: var(--sans-serif);
|
|
font-size: var(--font-size-7);
|
|
display: block;
|
|
}
|
|
|
|
.label-medium {
|
|
font-size: var(--font-size-3);
|
|
display: block;
|
|
}
|
|
|
|
.label-large {
|
|
font-size: var(--font-size-2);
|
|
display: block;
|
|
}
|
|
|
|
/*
|
|
* LINKS
|
|
*/
|
|
|
|
.link {
|
|
text-decoration: none;
|
|
color: var(--font-near-black);
|
|
}
|
|
|
|
/*
|
|
* LISTS
|
|
*/
|
|
|
|
.list {
|
|
padding-left: 0;
|
|
margin-left: 0;
|
|
max-width: var(--max-width-6);
|
|
border: 1px solid var(--light-silver);
|
|
border-radius: var(--border-radius-2);
|
|
list-style-type: none;
|
|
font-family: var(--sans-serif);
|
|
}
|
|
|
|
.list-container {
|
|
width: var(--max-width-5);
|
|
}
|
|
|
|
.list-icon {
|
|
align-self: center;
|
|
justify-self: right;
|
|
grid-column: 2;
|
|
grid-row: 1/3;
|
|
}
|
|
|
|
.list-item {
|
|
display: grid;
|
|
padding: 1rem;
|
|
border-bottom-color: var(--light-silver);
|
|
border-bottom-style: solid;
|
|
border-bottom-width: 1px;
|
|
}
|
|
|
|
.list-text {
|
|
justify-self: left;
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
margin: 0;
|
|
font-size: var(--font-size-5);
|
|
}
|
|
|
|
.list-label {
|
|
justify-self: left;
|
|
grid-column: 1;
|
|
grid-row: 2;
|
|
}
|
|
|
|
/*
|
|
* METERS
|
|
*/
|
|
|
|
meter {
|
|
border: 1px solid #ccc;
|
|
border-radius: 3px;
|
|
display: block;
|
|
/* height: 1rem; */
|
|
margin: 0 auto;
|
|
margin-bottom: 1rem;
|
|
width: 100%;
|
|
/* remove default styling */
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
|
|
/* Firefox */
|
|
background: none; /* remove default background */
|
|
background-color: var(--near-white);
|
|
box-shadow: 0 5px 5px -5px #333 inset;
|
|
}
|
|
|
|
meter::-webkit-meter-bar {
|
|
background: none; /* remove default background */
|
|
background-color: var(--near-white);
|
|
box-shadow: 0 5px 5px -5px #333 inset;
|
|
}
|
|
|
|
meter::-webkit-meter-optimum-value {
|
|
background-size: 100% 100%;
|
|
box-shadow: 0 5px 5px -5px #999 inset;
|
|
transition: width .5s;
|
|
}
|
|
|
|
/* Firefox styling */
|
|
meter::-moz-meter-bar {
|
|
background: var(--mid-gray);
|
|
background-size: 100% 100%;
|
|
box-shadow: 0 5px 5px -5px #999 inset;
|
|
}
|
|
|
|
.meter-gauge {
|
|
background-color: var(--near-white);
|
|
border: 1px solid #ccc;
|
|
border-radius: 3px;
|
|
box-shadow: 0 5px 5px -5px #333 inset;
|
|
display: block;
|
|
}
|
|
|
|
/* Chrome styling */
|
|
.meter-gauge > span {
|
|
background: var(--mid-gray);
|
|
background-size: 100% 100%;
|
|
box-shadow: 0 5px 5px -5px #999 inset;
|
|
display: block;
|
|
height: inherit;
|
|
text-indent: -9999px;
|
|
}
|
|
|
|
/*
|
|
* NAVIGATION
|
|
*/
|
|
|
|
.nav-bar {
|
|
background-color: var(--moon-gray);
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 2em;
|
|
padding-top: 1.5rem;
|
|
padding-bottom: 1.5rem;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.nav-title {
|
|
font-family: var(--sans-serif);
|
|
font-size: var(--font-size-4);
|
|
font-weight: normal;
|
|
margin: 0;
|
|
}
|
|
|
|
.nav-icon {
|
|
width: auto;
|
|
height: 90%;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.nav-icon-left {
|
|
float: left;
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.nav-icon-right {
|
|
float: right;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
.nav-item {
|
|
display: inline-block;
|
|
list-style-type: none;
|
|
}
|
|
|
|
/*
|
|
* SWITCHES / SLIDERS
|
|
*/
|
|
|
|
/* switch: the box around the slider */
|
|
.switch {
|
|
display: inline-block;
|
|
height: 34px;
|
|
position: relative;
|
|
width: 60px;
|
|
}
|
|
|
|
/* hide default HTML checkbox */
|
|
.switch input {
|
|
height: 0;
|
|
opacity: 0;
|
|
width: 0;
|
|
}
|
|
|
|
.switch-icon-left {
|
|
align-self: center;
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
justify-self: center;
|
|
}
|
|
|
|
.switch-icon-right {
|
|
align-self: center;
|
|
grid-column: 3;
|
|
grid-row: 1;
|
|
justify-self: center;
|
|
}
|
|
|
|
.slider {
|
|
background-color: var(--moon-gray);
|
|
bottom: 0;
|
|
cursor: pointer;
|
|
left: 0;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
transition: .4s;
|
|
-webkit-transition: .4s;
|
|
}
|
|
|
|
.slider:before {
|
|
background-color: var(--white);
|
|
bottom: 4px;
|
|
content: "";
|
|
height: 26px;
|
|
left: 4px;
|
|
position: absolute;
|
|
transition: .4s;
|
|
-webkit-transition: .4s;
|
|
width: 26px;
|
|
}
|
|
|
|
input:checked + .slider {
|
|
background-color: var(--near-black);
|
|
}
|
|
|
|
input:focus + .slider {
|
|
box-shadow: 0 0 1px var(--near-black);
|
|
}
|
|
|
|
input:checked + .slider:before {
|
|
-ms-transform: translateX(26px);
|
|
transform: translateX(26px);
|
|
-webkit-transform: translateX(26px);
|
|
}
|
|
|
|
.slider.round {
|
|
border-radius: 34px;
|
|
}
|
|
|
|
.slider.round:before {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
/*
|
|
* TITLES
|
|
*/
|
|
|
|
.title-medium {
|
|
font-size: var(--font-size-4);
|
|
font-family: var(--sans-serif);
|
|
max-width: var(--max-width-6);
|
|
}
|
|
|
|
/*
|
|
* PARAGRAPHS
|
|
*/
|
|
|
|
p {
|
|
font-family: var(--sans-serif);
|
|
overflow-wrap: anywhere;
|
|
}
|