351 lines
6.7 KiB
SCSS
351 lines
6.7 KiB
SCSS
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
|
|
|
|
|
|
|
|
:root {
|
|
|
|
--smart: 688px;
|
|
--medium: 1048px;
|
|
--xs: 4px;
|
|
--s: 8px;
|
|
--m: 16px;
|
|
--l: 24px;
|
|
--xl: 36px;
|
|
--xxl: 48px;
|
|
|
|
--radius-1: 12px;
|
|
--radius-2: 20px;
|
|
--white: #ffffff;
|
|
--light: #F6F6F6;
|
|
|
|
|
|
--prime: #0070BA;
|
|
--prime-hov: #005799;
|
|
--prime-act: #004077;
|
|
--prime-dis: #A1CAE5;
|
|
|
|
|
|
|
|
--second: #6C6C6C;
|
|
--second-hov: #4D4D4D;
|
|
--second-act: #2D2D2D;
|
|
--second-dis: #C0C0C0;
|
|
|
|
|
|
--blue-0: #2EB2E8;
|
|
|
|
|
|
|
|
}
|
|
|
|
.style-color{
|
|
background-color: var(--light);
|
|
}
|
|
|
|
.mat-calendar-body-selected {
|
|
background-color: #0079c2;
|
|
}
|
|
|
|
button.mat-calendar-body-cell:hover{
|
|
background-color: transparent;
|
|
border: none;
|
|
font-weight: 400;
|
|
}
|
|
|
|
button.mat-calendar-body-cell{
|
|
font-weight: 400;
|
|
}
|
|
|
|
.mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){
|
|
background-color: rgba(0, 162, 255,0.3);
|
|
font-weight: 400;
|
|
}
|
|
|
|
.tox-promotion, .tox-statusbar__branding {
|
|
display: none!important;
|
|
}
|
|
|
|
|
|
*, ::after, ::before {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
* {scrollbar-color:transparent transparent; scrollbar-width:none;}
|
|
*::-webkit-scrollbar-track {background-color:transparent;}
|
|
*::-webkit-scrollbar {width:0; height:0; background-color:transparent;}
|
|
*::-webkit-scrollbar-thumb {background-color:transparent; border-radius:2rem;}
|
|
|
|
|
|
html {
|
|
height: 100%;
|
|
font-family: "PT Sans";
|
|
font-size: 16px;
|
|
-webkit-font-smoothing:antialiased;
|
|
}
|
|
|
|
body {
|
|
height: 100%;
|
|
padding: 0;
|
|
margin: 0;
|
|
color: var(--second-act);
|
|
background-color: var(--light);
|
|
.wrapper {
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.content {
|
|
flex-grow: 1;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 40px;
|
|
left-content{
|
|
flex-basis: 100%;
|
|
background-color: var(--light);
|
|
.background{
|
|
width: 100%;
|
|
height: 400px;
|
|
background-size: cover;
|
|
background-position: center;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
border-bottom: 1px solid var(--second-dis);
|
|
border-top: 1px solid var(--second-dis);
|
|
.left-content{
|
|
width: 100%;
|
|
height: 100%;
|
|
max-width: 1360px;
|
|
padding: 0 40px;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
.h1-jumbotron{
|
|
display: inline-block;
|
|
border-bottom: 12px solid var(--blue-0);
|
|
font-family: PT Sans Narrow;
|
|
font-size: 76px;
|
|
font-weight: 700;
|
|
line-height:100%;
|
|
letter-spacing: 0.76px;
|
|
color: white;
|
|
}
|
|
header-user-bar{
|
|
position: absolute;
|
|
right: 40px;
|
|
top: 32px;
|
|
}
|
|
.menu{
|
|
position: absolute;
|
|
left: 0px;
|
|
top: 32px;
|
|
}
|
|
}
|
|
}
|
|
.edit-field{
|
|
height: 58px;
|
|
width: 100%;
|
|
background-color: var(--white);
|
|
display: flex;
|
|
justify-content: center;
|
|
.edit-field-row{
|
|
width: 100%;
|
|
max-width: 1280px;
|
|
margin: 0 40px;
|
|
display: flex;
|
|
justify-content: right;
|
|
align-items: center;
|
|
font-size: 20px;
|
|
gap: 8px;
|
|
}
|
|
|
|
}
|
|
}
|
|
.main-content{
|
|
flex-basis: 840px;
|
|
.pages{
|
|
width: 100%;
|
|
}
|
|
}
|
|
right-content{
|
|
flex-basis: 400px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.limiter {
|
|
width: 100%;
|
|
max-width: 1280px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
|
|
h2 {
|
|
color: var(--second-act);
|
|
font-family: PT Sans Narrow;
|
|
font-size: 50px;
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
line-height: 60px; /* 120% */
|
|
letter-spacing: 0.5px;
|
|
padding-top: 16px;
|
|
margin:0;
|
|
}
|
|
h3 {
|
|
color: var(--second-act);
|
|
font-family: PT Sans Narrow;
|
|
font-size: 36px;
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
line-height: 60px; /* 120% */
|
|
letter-spacing: 0.36px;
|
|
padding-top: 8px;
|
|
margin:0;
|
|
}
|
|
h4 {
|
|
color: var(--second-act);
|
|
font-family: PT Sans Narrow;
|
|
font-size: 24px;
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
line-height: 44px; /* 133.333% */
|
|
letter-spacing: 0.24px;
|
|
padding-top: 8px;
|
|
margin:0;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: var(--prime);
|
|
cursor: pointer;
|
|
&:hover{
|
|
color: var(--prime-act);
|
|
};
|
|
&.document {
|
|
display: inline-flex;
|
|
|
|
&:before {
|
|
width: 20px;
|
|
height: 20px;
|
|
margin-right: 8px;
|
|
flex-shrink: 0;
|
|
background: transparent url('~projects/app-vniigaz/src/assets/images/icons/document/document_20.svg') 50% 50% no-repeat;
|
|
content: '';
|
|
}
|
|
}
|
|
}
|
|
|
|
span.link {
|
|
font-weight: normal;
|
|
color: #86898E;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.fullwidth {
|
|
width: calc(100% + 80px);
|
|
margin-left: -40px;
|
|
margin-right: -40px;
|
|
}
|
|
|
|
.loader {
|
|
margin-top: 32px;
|
|
text-align: center;
|
|
animation: fade-in-and-scale 0.5s infinite;
|
|
&:before {
|
|
display: inline-block;
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 100px;
|
|
background-image: radial-gradient(rgba(44,134,205,1), rgba(44,134,205,0));
|
|
content: '';
|
|
}
|
|
}
|
|
|
|
.op-63{
|
|
opacity: 0.63;
|
|
}
|
|
html-section ul{
|
|
padding: 0;
|
|
>li{
|
|
list-style: none;
|
|
&::before{
|
|
display: inline-block;
|
|
content: "";
|
|
width: 16px;
|
|
height: 2px;
|
|
background-color: var(--prime);
|
|
margin-bottom: 5px;
|
|
margin-right: 16px;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
@media screen and (min-width: 1330px) {
|
|
.fullwidth {
|
|
width: 100vw;
|
|
margin-left: calc((1160px - 100vw) / 2);
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
@keyframes slide-from-right {
|
|
0% {transform: translateX(100%);}
|
|
100% {transform: translateX(0);}
|
|
}
|
|
|
|
@keyframes slide-from-left {
|
|
0% {transform: translateX(-100%);}
|
|
100% {transform: translateX(0);}
|
|
}
|
|
|
|
@keyframes slide-from-top-and-fade-in {
|
|
0% {transform: translateY(-100%); opacity: 0}
|
|
100% {transform: translateY(0); opacity: 1}
|
|
}
|
|
|
|
@keyframes slide-from-bottom-and-fade-in {
|
|
0% {transform: translateY(100%); opacity: 0}
|
|
100% {transform: translateY(0); opacity: 1}
|
|
}
|
|
|
|
|
|
@keyframes fade-in-and-scale {
|
|
0% {transform:scale(0.3); opacity:0;}
|
|
100% {transform:scale(1); opacity:0.5;}
|
|
}
|
|
|
|
@media screen and (max-width: 480px) {
|
|
h2{
|
|
font-size: 36px;
|
|
line-height: 44px;
|
|
}
|
|
h3{
|
|
font-size: 24px;
|
|
line-height: 32px;
|
|
}
|
|
h4{
|
|
color:var(--second);
|
|
}
|
|
}
|
|
|
|
|
|
@media screen and (max-width: 1330px) {
|
|
.limiter {
|
|
padding: 0 24px;
|
|
}
|
|
.fullwidth {
|
|
width: calc(100% + 48px);
|
|
margin-left: -24px;
|
|
margin-right: -24px;
|
|
}
|
|
|
|
}
|