433 lines
8.0 KiB
CSS
433 lines
8.0 KiB
CSS
:root {
|
|
--blue: #007bff;
|
|
--indigo: #6610f2;
|
|
--purple: #6f42c1;
|
|
--pink: #e83e8c;
|
|
--red: #dc3545;
|
|
--orange: #fd7e14;
|
|
--yellow: #ffc107;
|
|
--green: #28a745;
|
|
--teal: #20c997;
|
|
--cyan: #17a2b8;
|
|
--white: #fff;
|
|
--gray: #6c757d;
|
|
--gray-dark: #343a40;
|
|
--secondary: #6c757d;
|
|
--success: #28a745;
|
|
--info: #17a2b8;
|
|
--warning: #ffc107;
|
|
--danger: #dc3545;
|
|
--light: #f8f9fa;
|
|
--dark: #343a40;
|
|
|
|
--theme-green: #658D1B;
|
|
--theme-green-accent: #436e24;
|
|
--theme-yellow-green: #C4D600;
|
|
--theme-tan: #F2F0A1;
|
|
--theme-gray: #A2B2C8;
|
|
--theme-blue: #071D49;
|
|
--theme-white: #e3e3e3;
|
|
--theme-white-accent: #bababa;
|
|
--theme-black: #2D2926;
|
|
--theme-black-accent: #000000;
|
|
|
|
--breakpoint-xs: 0;
|
|
--breakpoint-sm: 576px;
|
|
--breakpoint-md: 768px;
|
|
--breakpoint-lg: 992px;
|
|
--breakpoint-xl: 1200px;
|
|
--font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
|
|
--font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
|
|
|
|
--trans-dur-fast: 0.3s;
|
|
--trans-dur: 0.75s;
|
|
--trans-dur-slow: 1.5s;
|
|
}
|
|
|
|
:root[data-applied-mode="light"] {
|
|
color-scheme: light;
|
|
--text-color: var(--theme-black-accent);
|
|
--text-color-negative: var(--white);
|
|
--background-color: var(--white);
|
|
}
|
|
|
|
:root[data-applied-mode="dark"] {
|
|
color-scheme: dark;
|
|
--text-color: var(--white);
|
|
--text-color-negative: var(--theme-black-accent);
|
|
--background-color: var(--theme-black);
|
|
}
|
|
|
|
*, ::after, ::before {
|
|
box-sizing: inherit;
|
|
}
|
|
|
|
html {
|
|
font-family: sans-serif;
|
|
line-height: 1.15;
|
|
-webkit-text-size-adjust: 100%;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
|
|
font-size: 1rem;
|
|
font-weight: 400;
|
|
line-height: 1.5;
|
|
text-align: left;
|
|
color: var(--text-color);
|
|
background-color: var(--background-color);
|
|
}
|
|
header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background-color: var(--theme-blue);
|
|
}
|
|
|
|
main {
|
|
margin: 4em 10em;
|
|
}
|
|
|
|
footer {
|
|
text-align: center;
|
|
font-size: 12px;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
button {
|
|
margin: 0;
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
line-height: inherit;
|
|
overflow: visible;
|
|
text-transform: none;
|
|
}
|
|
|
|
input {
|
|
margin: 0;
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
line-height: inherit;
|
|
overflow: visible;
|
|
}
|
|
|
|
textarea {
|
|
margin: 0;
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
line-height: inherit;
|
|
background-color: var(--background-color);
|
|
}
|
|
|
|
select {
|
|
margin: 0;
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
line-height: inherit;
|
|
text-transform: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
label {
|
|
display: inline-block;
|
|
margin-bottom: .5rem;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
margin-top: 0;
|
|
margin-bottom: .5rem;
|
|
}
|
|
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
|
|
margin-bottom: .5rem;
|
|
font-family: inherit;
|
|
font-weight: 500;
|
|
line-height: 1.2;
|
|
color: inherit;
|
|
}
|
|
.h1, h1 {
|
|
font-size: 2.5rem;
|
|
}
|
|
.h2, h2 {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.title {
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.btn {
|
|
display: inline-block;
|
|
font-weight: 400;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
vertical-align: middle;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
border: 1px solid transparent;
|
|
padding: .375rem .75rem;
|
|
font-size: 1rem;
|
|
line-height: 1.5;
|
|
border-radius: .25rem;
|
|
transition: color var(--trans-dur) ease-in-out, background-color var(--trans-dur) ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
|
|
}
|
|
.btn-primary {
|
|
color: #fff;
|
|
background-color: var(--theme-green);
|
|
border-color: var(--theme-green-accent);
|
|
}
|
|
.btn-primary:hover:not(:disabled):not(.disabled) {
|
|
background-color: var(--theme-green-accent);
|
|
}
|
|
.btn:not(:disabled):not(.disabled) {
|
|
cursor: pointer;
|
|
}
|
|
|
|
select.form-control:not([size]):not([multiple]) {
|
|
height: calc(2.25rem + 2px);
|
|
}
|
|
|
|
input[type="checkbox"], input[type="radio"] {
|
|
box-sizing: border-box;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
[type="reset"], [type="submit"], button, html [type="button"] {
|
|
-webkit-appearance: button;
|
|
}
|
|
|
|
/*--------------------------------------*/
|
|
|
|
.text-center {
|
|
text-align: center !important;
|
|
}
|
|
|
|
.mt {
|
|
margin-top: 1rem !important;
|
|
}
|
|
|
|
.mb {
|
|
margin-bottom: 1rem !important;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 1rem;
|
|
}
|
|
.form-control {
|
|
display: block;
|
|
width: 100%;
|
|
padding: .375rem .75rem;
|
|
font-size: 1rem;
|
|
line-height: 1.5;
|
|
color: var(--text-color);
|
|
background-color: var(--background-color);
|
|
background-clip: padding-box;
|
|
border: 1px solid #ced4da;
|
|
border-radius: .25rem;
|
|
}
|
|
|
|
.logo {
|
|
display: inline-block;
|
|
padding-top: 0.25em;
|
|
padding-bottom: 0.25em;
|
|
padding-left: 0.5em;
|
|
}
|
|
|
|
.navbar {
|
|
margin-top: -5px;
|
|
}
|
|
.navbar ul {
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
background-color: var(--theme-green);
|
|
}
|
|
.navbar li {
|
|
float: left;
|
|
}
|
|
.navbar li:first-child {
|
|
margin-left: 10em;
|
|
}
|
|
.navbar li:last-child {
|
|
margin-right: 10em;
|
|
}
|
|
.navbar li a {
|
|
display: block;
|
|
color: var(--white);
|
|
text-align: center;
|
|
padding: 1.5em;
|
|
text-decoration: none;
|
|
transition: color ease-in-out var(--trans-dur-fast), background-color ease-in-out var(--trans-dur-fast);
|
|
}
|
|
.navbar li a:hover:not(.active) {
|
|
color: var(--theme-black-accent);
|
|
background-color: var(--white);
|
|
transition: color ease-in-out var(--trans-dur-fast), background-color ease-in-out var(--trans-dur-fast);
|
|
}
|
|
.active {
|
|
background-color: var(--theme-green-accent);
|
|
}
|
|
.float-left {
|
|
float:left !important;
|
|
}
|
|
.float-right {
|
|
float: right !important;
|
|
}
|
|
|
|
.navbar-brand{
|
|
padding-top:.3125rem;
|
|
padding-bottom:.3125rem;
|
|
margin-right:1rem;
|
|
font-size:1.25rem;
|
|
line-height:inherit;
|
|
white-space:nowrap
|
|
}
|
|
|
|
.navbar-brand:focus, .navbar-brand:hover {
|
|
text-decoration:none;
|
|
}
|
|
|
|
.missing-info {
|
|
border: solid 2px var(--danger) !important;
|
|
border-radius: .25rem;
|
|
}
|
|
|
|
.card {
|
|
margin: auto;
|
|
width: 404px;
|
|
height: 225px;
|
|
border: solid 2px var(--theme-gray)
|
|
}
|
|
.card canvas {
|
|
position: absolute;
|
|
height: auto;
|
|
}
|
|
|
|
.fade {
|
|
position: absolute;
|
|
top: 0;
|
|
height: 100vh;
|
|
left: 0;
|
|
right: 0;
|
|
background-color: white;
|
|
opacity: 50%;
|
|
}
|
|
|
|
.x {
|
|
border-radius: 50%;
|
|
padding: .75em;
|
|
background: var(--theme-green);
|
|
border: 2px solid var(--theme-green-accent);
|
|
position: absolute;
|
|
right: -1.5em;
|
|
top: -1.5em;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.x div {
|
|
height: 16px;
|
|
width: 16px;
|
|
font-size: 1.5rem;
|
|
text-align: center;
|
|
color: var(--text-color);
|
|
line-height: 8px !important;
|
|
}
|
|
|
|
.upload {
|
|
opacity: 100% !important;
|
|
border-radius: .5rem;
|
|
padding: 1em;
|
|
border: solid 2px var(--theme-black);
|
|
background-color: var(--background-color);
|
|
position: fixed;
|
|
flex-direction: column;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 999;
|
|
width: 32em;
|
|
height: 20em;
|
|
left: 50%;
|
|
top: 14em;
|
|
margin-left: -20em;
|
|
}
|
|
|
|
.upload img {
|
|
width: 20em;
|
|
height: fit-content;
|
|
margin-left: 5% !important;
|
|
margin-right: 10% !important;
|
|
}
|
|
|
|
.upload button {
|
|
width: 93%;
|
|
margin-top: 1em;
|
|
}
|
|
|
|
.disabled {
|
|
opacity: 75%;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.hovering {
|
|
border-width: 3px !important;
|
|
font-weight: bold !important;
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.dotted {
|
|
display: flex;
|
|
border: dotted 2px var(--theme-black);
|
|
width: 100%;
|
|
height: 100%;
|
|
text-align: center;
|
|
align-items: center;
|
|
transition: color ease-in-out var(--trans-dur), background-color ease-in-out var(--trans-dur);
|
|
}
|
|
|
|
.dotted label {
|
|
margin-left: 20%;
|
|
margin-right: 20%;
|
|
}
|
|
|
|
.with-img {
|
|
margin-left: 10% !important;
|
|
margin-right: 5% !important;
|
|
}
|
|
|
|
/*--------------------------------------*/
|
|
|
|
.container {
|
|
width: 100%;
|
|
padding-right: 15px;
|
|
padding-left: 15px;
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
}
|
|
@media (min-width: 576px) {
|
|
.container {
|
|
max-width: 540px;
|
|
}
|
|
}
|
|
@media (min-width: 768px) {
|
|
.container {
|
|
max-width: 720px;
|
|
}
|
|
}
|
|
@media (min-width: 992px) {
|
|
.container {
|
|
max-width: 960px;
|
|
}
|
|
}
|
|
@media (min-width: 1200px) {
|
|
.container {
|
|
max-width: 1140px;
|
|
}
|
|
}
|