multi-project/projects/app-root/src/assets/css/basics.scss

256 lines
4.0 KiB
SCSS

@import "~@angular/material/prebuilt-themes/indigo-pink.css";
:root {
// --radius-1: 12px;
// --radius-2: 20px;
--white: #ffffff;
--dark: #222;
--prime: #0079C2;
--active: #005e99;
--danger: #C20017;
--disabled: #A3D1EB;
--second: #7D7D7D;
--smart: 688px;
--medium: 1048px;
--xs: 4px;
--s: 8px;
--m: 16px;
--l: 24px;
--xl: 36px;
--xxl: 48px;
}
* {
font-family: "Roboto";
font-weight: 300;
}
.style-color{
}
.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: "Roboto";
font-size: 15px;
-webkit-font-smoothing:antialiased;
}
body {
height: 100%;
padding: 0;
margin: 0;
color: var(--dark);
}
.limiter {
width: 100%;
max-width: 900px;
margin: 0 auto;
}
p{
margin-top: 4px;
margin-bottom: 4px;
}
b, strong {
font-weight: 500;
}
h1 {
font-size: 48px;
margin: 32px 0;
line-height: 140%;
}
h2 {
font-size: 32px;
margin: 24px 0;
line-height: 125%;
}
h3 {
font-size: 24px;
margin: 15px 0;
line-height: 120%;
}
h4 {
font-size: 18px;
margin: 10px 0;
}
a {
text-decoration: none;
color: var(--prime);
cursor: pointer;
&:hover{
color: var(--active);
};
}
hr {
border: 0;
border-bottom: 1px solid var(--second);
background: transparent;
}
.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;
}
.image-hidden {
img, svg {
visibility: hidden !important;
}
*, *::after, *::before {
background-image: none !important;
}
}
.style-brown {
filter: sepia(150%) !important;
}
.style-white-black {
filter: grayscale(100%) !important;;
}
.style-black-white {
filter: grayscale(100%) invert(100%) !important;;
}
@media screen and (min-width: 1360px) {
.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 (var(--smart)) {
.limiter {
}
.fullwidth {
width: calc(100% + 48px);
margin-left: -24px;
margin-right: -24px;
}
}
@media screen and (var(--medium)) {
.limiter {
}
.fullwidth {
width: calc(100% + 32px);
margin-left: -16px;
margin-right: -16px;
}
h2 {
font-size: 24px;
margin: 15px 0;
}
h3 {
font-size: 21px;
margin: 10px 0;
}
h4 {
font-size: 18px;
margin: 8px 0;
}
}