389 lines
6.7 KiB
CSS
389 lines
6.7 KiB
CSS
/*========== VARIABLES CSS ==========*/
|
|
:root {
|
|
--header-height: 60px;
|
|
--nav-width: 200px;
|
|
|
|
/*========== Colors ==========*/
|
|
--first-color: #FFFFFF;
|
|
--first-color-light: #ff0000;
|
|
--title-color: #990000;
|
|
--text-color: #404040;
|
|
--text-color-light: #990000;
|
|
--body-color: #FFFFFF;
|
|
--container-color: #ff0000;
|
|
|
|
/*========== Font and typography ==========*/
|
|
--body-font: 'Arial', sanf-serif;
|
|
--large-font-size: 1.5rem;
|
|
--normal-font-size: 1.0rem;
|
|
--small-font-size: .9rem;
|
|
--smaller-font-size: .8rem;
|
|
|
|
/*========== Font weight ==========*/
|
|
--font-medium: 500;
|
|
--font-semi-bold: 600;
|
|
|
|
/*========== z index ==========*/
|
|
--z-fixed: 100;
|
|
}
|
|
|
|
@media screen and (min-width: 1024px) {
|
|
:root {
|
|
--normal-font-size: 1.0rem;
|
|
--small-font-size: .9rem;
|
|
--smaller-font-size: .8rem;
|
|
}
|
|
}
|
|
|
|
/*========== BASE ==========*/
|
|
*, ::before, ::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: var(--header-height) 0 0 0;
|
|
padding: 0 0 0;
|
|
font-family: var(--body-font);
|
|
font-size: var(--normal-font-size);
|
|
background-color: var(--body-color);
|
|
color: var(--text-color);
|
|
}
|
|
|
|
h3 {
|
|
margin: 0;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
/*========== HEADER ==========*/
|
|
.header {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
background-color: var(--container-color);
|
|
box-shadow: 0 1px 0 rgba(22, 8, 43, 0.1);
|
|
padding: 0 1rem;
|
|
z-index: var(--z-fixed);
|
|
}
|
|
|
|
.header__container {
|
|
display: flex;
|
|
align-items: center;
|
|
height: var(--header-height);
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.header__img {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 5%;
|
|
}
|
|
|
|
.header__logo {
|
|
color: var(--title-color);
|
|
font-weight: var(--font-medium);
|
|
font-size: var(--large-font-size);
|
|
|
|
margin-left: 150px;
|
|
display: none;
|
|
}
|
|
|
|
.header__icon,
|
|
.header__toggle {
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.header__toggle {
|
|
color: var(--title-color);
|
|
cursor: pointer;
|
|
}
|
|
|
|
/*========== NAV ==========*/
|
|
.nav {
|
|
position: fixed;
|
|
top: 0;
|
|
left: -100%;
|
|
height: 100vh;
|
|
padding: 1rem 1rem 0;
|
|
background-color: var(--container-color);
|
|
box-shadow: 1px 0 0 rgba(22, 8, 43, 0.1);
|
|
z-index: var(--z-fixed);
|
|
transition: .4s;
|
|
}
|
|
|
|
.nav__container {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
padding-bottom: 3rem;
|
|
overflow: auto;
|
|
scrollbar-width: none; /* For mozilla */
|
|
}
|
|
|
|
/* For Google Chrome and others */
|
|
.nav__container::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.nav__logo {
|
|
font-weight: var(--font-semi-bold);
|
|
margin-bottom: 2.5rem;
|
|
}
|
|
|
|
.nav__list,
|
|
.nav__items {
|
|
display: grid;
|
|
}
|
|
|
|
.nav__list {
|
|
row-gap: 2.5rem;
|
|
}
|
|
|
|
.nav__items {
|
|
row-gap: 1.5rem;
|
|
}
|
|
|
|
.nav__subtitle {
|
|
font-size: var(--normal-font-size);
|
|
text-transform: uppercase;
|
|
letter-spacing: .1rem;
|
|
color: var(--text-color-light);
|
|
}
|
|
|
|
.nav__link {
|
|
display: flex;
|
|
align-items: center;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.nav__link:hover {
|
|
color: var(--first-color);
|
|
}
|
|
|
|
.nav__icon {
|
|
font-size: 1.2rem;
|
|
margin-right: .5rem;
|
|
}
|
|
|
|
.nav__name {
|
|
font-size: var(--small-font-size);
|
|
font-weight: var(--font-medium);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.nav__logout {
|
|
margin-top: 5rem;
|
|
}
|
|
|
|
/* Dropdown */
|
|
.nav__dropdown {
|
|
overflow: hidden;
|
|
max-height: 21px;
|
|
transition: .4s ease-in-out;
|
|
}
|
|
|
|
.nav__dropdown-collapse {
|
|
background-color: var(--first-color-light);
|
|
border-radius: .5rem;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.nav__dropdown-content {
|
|
display: grid;
|
|
row-gap: .5rem;
|
|
padding: .75rem 2.5rem .75rem 2.5rem;
|
|
}
|
|
|
|
.nav__dropdown-item {
|
|
font-size: var(--small-font-size);
|
|
font-weight: var(--font-medium);
|
|
color: var(--text-color);
|
|
margin: 3px 3px;
|
|
}
|
|
|
|
.nav__dropdown-item:hover {
|
|
color: var(--first-color);
|
|
}
|
|
|
|
.nav__dropdown-icon {
|
|
margin-left: auto;
|
|
transition: .4s;
|
|
}
|
|
|
|
/* Show dropdown collapse */
|
|
.nav__dropdown:hover {
|
|
max-height: 100rem;
|
|
}
|
|
|
|
/* Rotate icon arrow */
|
|
.nav__dropdown:hover .nav__dropdown-icon {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
/*===== Show menu =====*/
|
|
.show-menu {
|
|
left: 0;
|
|
}
|
|
|
|
/*===== Active link =====*/
|
|
.active {
|
|
color: var(--first-color);
|
|
}
|
|
|
|
/* ========== MEDIA QUERIES ==========*/
|
|
/* For small devices reduce search*/
|
|
@media screen and (max-width: 320px) {
|
|
.header__search {
|
|
width: 70%;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 768px) {
|
|
body {
|
|
padding: 0 0 0 4rem;
|
|
}
|
|
.header {
|
|
padding: 0 3rem 0 4rem;
|
|
}
|
|
.header__container {
|
|
height: calc(var(--header-height) + .5rem);
|
|
}
|
|
.header__search {
|
|
width: 300px;
|
|
padding: .55rem .75rem;
|
|
}
|
|
.header__toggle {
|
|
display: none;
|
|
}
|
|
.header__logo {
|
|
display: block;
|
|
}
|
|
.header__img {
|
|
width: 40px;
|
|
height: 40px;
|
|
order: 1;
|
|
}
|
|
.nav {
|
|
left: 0;
|
|
padding: 1.2rem 1.2rem 0;
|
|
width: 4.0rem; /* Reduced navbar */
|
|
}
|
|
.nav__items {
|
|
row-gap: 2.0rem;
|
|
}
|
|
.nav__icon {
|
|
font-size: 1.0rem;
|
|
}
|
|
|
|
/* Element opacity */
|
|
.nav__logo-name,
|
|
.nav__name,
|
|
.nav__subtitle,
|
|
.nav__dropdown-icon {
|
|
opacity: 0;
|
|
transition: .3s;
|
|
}
|
|
|
|
|
|
/* Navbar expanded */
|
|
.nav:hover {
|
|
width: var(--nav-width);
|
|
}
|
|
|
|
/* Visible elements */
|
|
.nav:hover .nav__logo-name {
|
|
opacity: 1;
|
|
}
|
|
.nav:hover .nav__subtitle {
|
|
opacity: 1;
|
|
}
|
|
.nav:hover .nav__name {
|
|
opacity: 1;
|
|
}
|
|
.nav:hover .nav__dropdown-icon {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.rl{text-align:right;}
|
|
|
|
input, .btn, .lab, textarea {
|
|
font:.8rem consolas,monospace;
|
|
padding-left:3px;
|
|
border:solid 1px #CCCCCC;
|
|
border-radius: 5px;
|
|
height:2.0rem;
|
|
margin: 3px 3px;
|
|
vertical-align: middle;
|
|
}
|
|
.btn{min-width:100px;}
|
|
.btn:active{background-color: #CCCCCC;}
|
|
.btn:hover {border:solid 1px #999999;}
|
|
|
|
.lab {border: none;}
|
|
|
|
textarea {
|
|
height: 4.0rem;
|
|
margin:auto;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.stg td{width:auto;padding:1px;margin:0}
|
|
.stg input, select {height:25px}
|
|
input[type="radio"] { margin-top: -1px; vertical-align: middle;}
|
|
.stg table{margin: 5px auto}
|
|
.dot {height: 30px;
|
|
width: 30px;
|
|
background-color: #d0d0d0;
|
|
border-radius: 40%;
|
|
display: inline-block;
|
|
margin: 7px 20px}
|
|
|
|
.cntr {
|
|
margin:auto;
|
|
font: .8rem consolas, monospace;}
|
|
|
|
.mlhdr {
|
|
font:16px consolas,monospace;
|
|
font-weight:bold;
|
|
color: var(--title-color);
|
|
margin: auto;
|
|
}
|
|
|
|
.mlp {
|
|
break-inside: avoid;
|
|
padding:5px;
|
|
|
|
}
|
|
.mlpc {
|
|
margin: 10px 0;
|
|
padding: 10px;
|
|
border-radius: 10px;
|
|
border:solid 1px #CCCCCC;
|
|
}
|
|
|
|
.ml {
|
|
column-count: 1;
|
|
column-gap: 0;
|
|
}
|
|
@media (min-width: 768px) {
|
|
.ml {
|
|
column-count: 2;
|
|
}
|
|
}
|
|
@media (min-width: 1200px) {
|
|
.ml {
|
|
column-count: 3;
|
|
}
|
|
}
|
|
|