330 lines
6.5 KiB
SCSS
330 lines
6.5 KiB
SCSS
@import "~bulma/sass/utilities/_all";
|
|
$color:(
|
|
primary: #4285F4,
|
|
findata: #ff8829,
|
|
white: #FFFFFF,
|
|
dark: #686868
|
|
);
|
|
$size: (
|
|
one: 14.5px,
|
|
two: 17px,
|
|
three: 30px,
|
|
four: 40px,
|
|
five: 50px,
|
|
six: 60px
|
|
);
|
|
@mixin cbox($width, $height, $font, $background) {
|
|
display:flex;
|
|
width: $width;
|
|
height: $height;
|
|
border: 1.5px solid #ff8829;
|
|
font-size: $font;
|
|
-webkit-border-radius: 50%;
|
|
-moz-border-radius: 50%;
|
|
-ms-border-radius: 50%;
|
|
border-radius: 50%;
|
|
color: #ff8829;
|
|
font-weight: bold;
|
|
background-color: $background;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
}
|
|
@each $name, $hex in $color {
|
|
@each $n, $v in $size {
|
|
.cbox-#{$name}-#{$n}{
|
|
@include cbox($v*2, $v*2, $v*1.1, white);
|
|
border-color: $hex ;
|
|
color: $hex;
|
|
}
|
|
}
|
|
}
|
|
@each $name, $hex in $color {
|
|
@each $n, $v in $size {
|
|
.cbox-fill-#{$name}-#{$n}{
|
|
@include cbox($v*2, $v*2, $v, $hex);
|
|
border-color: $hex ;
|
|
color: findColorInvert($hex);
|
|
}
|
|
}
|
|
}
|
|
@for $i from 10 through 40 {
|
|
.fs-#{$i} {
|
|
font-size: $i + px;
|
|
}
|
|
}
|
|
@for $i from 10 through 40 {
|
|
.fsb-#{$i} {
|
|
font-size: $i + px;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
.number-circle {
|
|
width: 120px;
|
|
height: 120px;
|
|
border: 1.5px solid #ff8829;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 60px;
|
|
}
|
|
|
|
.number-circle-1 {
|
|
width: 32px;
|
|
height: 32px;
|
|
margin: auto;
|
|
border: 1.5px solid #E8E8E8;;
|
|
-webkit-border-radius: 50%;
|
|
-moz-border-radius: 50%;
|
|
-ms-border-radius: 50%;
|
|
border-radius: 50%;
|
|
padding: 0;
|
|
display: table;
|
|
font-size: 32px;
|
|
line-height: 32px;
|
|
background-color: #E8E8E8;
|
|
}
|
|
|
|
.close-button{
|
|
float:right;
|
|
cursor: pointer;
|
|
line-height: 20px;
|
|
z-index: 999;
|
|
}
|
|
|
|
.text-image {
|
|
position: absolute; /* Position the background text */
|
|
bottom: 0; /* At the bottom. Use top:0 to append it to the top */
|
|
background: rgb(0, 0, 0); /* Fallback color */
|
|
background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
|
|
color: #f1f1f1; /* Grey text */
|
|
width: 100%; /* Full width */
|
|
padding: 10px; /* Some padding */
|
|
}
|
|
.btn-circle {
|
|
height: 36px;
|
|
width: 36px;
|
|
line-height: 36px;
|
|
font-size: 24px;
|
|
border-radius: 50%;
|
|
background-color: white;
|
|
color: red;
|
|
text-align: center;
|
|
border: none;
|
|
cursor: pointer;
|
|
z-index: 1;
|
|
box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
|
|
}
|
|
.tagborder {
|
|
border: 1px solid hsl(0, 0%, 88%);
|
|
font-size: 13px !important;
|
|
color: hsl(0, 0%, 21%) !important;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.border-bottom {
|
|
border-bottom: 1px solid hsl(0, 0%, 88%);
|
|
}
|
|
|
|
.pointer {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.vertical-center {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.header-logo{
|
|
background: url('/symbol.png') no-repeat center center;
|
|
background-size: 68px;
|
|
width: 60px
|
|
}
|
|
|
|
.header-logo-main{
|
|
background: url('/logo1.png') no-repeat center center;
|
|
background-size: 140px;
|
|
width: 180px;
|
|
}
|
|
|
|
.header-logo-main1{
|
|
background: url('/logo1.png') no-repeat center center;
|
|
background-size: 120px;
|
|
width: 150px;
|
|
}
|
|
|
|
.hyperlink {
|
|
cursor: pointer;
|
|
position: relative;
|
|
}
|
|
.hyperlink:hover{
|
|
color: #4285F4 !important;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.pointer {
|
|
cursor: pointer;
|
|
position: relative;
|
|
}
|
|
|
|
.has-background-ceiling {background-color: #d602e3;}
|
|
.has-background-floor {background-color: #08cfda;}
|
|
.has-background-up {background-color: #09b007;}
|
|
.has-background-down {background-color: #df0325; }
|
|
.has-background-ref {background-color: #ff8829;}
|
|
.has-text-ceiling {color: #ff25ff !important;}
|
|
.has-text-floor {color: #1eeeee !important;}
|
|
.has-text-up {color: #0f0 !important;}
|
|
.has-text-down {color: #ff3737 !important;}
|
|
.has-text-ref {color:#ffd900 !important;}
|
|
|
|
/* scrollbar */
|
|
:root {
|
|
--code-color: darkred;
|
|
--code-bg-color: #696969;
|
|
--code-font-size: 16px;
|
|
--code-line-height: 1.4;
|
|
--scroll-bar-color: #4285F4; //#696969;
|
|
--scroll-bar-bg-color: #f6f6f6;
|
|
}
|
|
|
|
pre {
|
|
color: var(--code-color);
|
|
font-size: var(--code-font-size);
|
|
line-height: var(--code-line-height);
|
|
background-color: var(--code-bg-color);
|
|
}
|
|
|
|
.code-block {
|
|
max-height: 100px;
|
|
overflow: auto;
|
|
padding: 8px 7px 5px 15px;
|
|
margin: 0px 0px 0px 0px;
|
|
border-radius: 7px;
|
|
}
|
|
|
|
::-webkit-scrollbar-corner { background: rgba(0,0,0,0.5); }
|
|
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--scroll-bar-color) var(--scroll-bar-bg-color);
|
|
}
|
|
|
|
/* Works on Chrome, Edge, and Safari */
|
|
*::-webkit-scrollbar {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
*::-webkit-scrollbar-track {
|
|
background: var(--scroll-bar-bg-color);
|
|
}
|
|
|
|
*::-webkit-scrollbar-thumb {
|
|
background-color: var(--scroll-bar-color);
|
|
border-radius: 20px;
|
|
border: 3px solid var(--scroll-bar-bg-color);
|
|
}
|
|
|
|
@mixin pulsating($color) {
|
|
position: absolute;
|
|
transform: translateX(-50%) translateY(-50%);
|
|
width: 12px;
|
|
height: 12px;
|
|
|
|
&:before {
|
|
content: '';
|
|
position: relative;
|
|
display: block;
|
|
width: 300%;
|
|
height: 300%;
|
|
box-sizing: border-box;
|
|
margin-left: -100%;
|
|
margin-top: -100%;
|
|
border-radius: 45px;
|
|
background-color: $color;
|
|
animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
|
|
}
|
|
|
|
&:after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: $color;
|
|
border-radius: 15px;
|
|
box-shadow: 0 0 8px rgba(0,0,0,.3);
|
|
animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -.4s infinite;
|
|
}
|
|
}
|
|
|
|
.pulsating-red {
|
|
@include pulsating(#FF0000)
|
|
}
|
|
|
|
.pulsating-yellow {
|
|
@include pulsating(#E96F1D)
|
|
}
|
|
|
|
.pulsating-blue {
|
|
@include pulsating(#09B412)
|
|
}
|
|
|
|
.pulsating-circle {
|
|
position: absolute;
|
|
transform: translateX(-50%) translateY(-50%);
|
|
width: 12px;
|
|
height: 12px;
|
|
|
|
&:before {
|
|
content: '';
|
|
position: relative;
|
|
display: block;
|
|
width: 300%;
|
|
height: 300%;
|
|
box-sizing: border-box;
|
|
margin-left: -100%;
|
|
margin-top: -100%;
|
|
border-radius: 45px;
|
|
background-color: #FF0000;
|
|
animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
|
|
}
|
|
|
|
&:after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #FF0000;
|
|
border-radius: 15px;
|
|
box-shadow: 0 0 8px rgba(0,0,0,.3);
|
|
animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -.4s infinite;
|
|
}
|
|
}
|
|
|
|
@keyframes pulse-ring {
|
|
0% {
|
|
transform: scale(.33);
|
|
}
|
|
80%, 100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes pulse-dot {
|
|
0% {
|
|
transform: scale(.8);
|
|
}
|
|
50% {
|
|
transform: scale(1);
|
|
}
|
|
100% {
|
|
transform: scale(.8);
|
|
}
|
|
} |