Base Login
This commit is contained in:
ThienPhamVan
48
assets/styles/main.scss
Normal file
48
assets/styles/main.scss
Normal file
@@ -0,0 +1,48 @@
|
||||
// Import Bulma's core
|
||||
@import "~bulma/sass/utilities/_all";
|
||||
|
||||
// Set your colors
|
||||
$primary: #107FFB; // #4285F4; // #0F9D58; // #009047;
|
||||
$primary-invert: findColorInvert($primary);
|
||||
$twitter: #3392ec;
|
||||
$twitter-invert: findColorInvert($twitter);
|
||||
$findata: #ff8829; //#F4F7F8;
|
||||
$findata-invert: findColorInvert($findata);
|
||||
$sidebar-width: 35%;
|
||||
//$family-primary: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
$family-primary: Arial, sans-serif;
|
||||
|
||||
// Setup $colors to use as bulma classes (e.g. 'is-twitter')s
|
||||
$colors: (
|
||||
"white": ($white, $black),
|
||||
"black": ($black, $white),
|
||||
"light": ($light, $light-invert),
|
||||
"dark": ($dark, $dark-invert),
|
||||
"primary": ($primary, $primary-invert),
|
||||
"info": ($info, $info-invert),
|
||||
"link": ($link, $link-invert),
|
||||
"success": ($success, $success-invert),
|
||||
"warning": ($warning, $warning-invert),
|
||||
"danger": ($danger, $danger-invert),
|
||||
"twitter": ($twitter, $twitter-invert),
|
||||
"findata": ($findata, $findata-invert)
|
||||
);
|
||||
|
||||
// Links
|
||||
$link: $primary;
|
||||
$link-invert: $primary-invert;
|
||||
$link-focus-border: $primary;
|
||||
$body-family: $family-primary;
|
||||
$body-size: 15px !default;
|
||||
|
||||
$site-color: hsl(0, 0%, 14%);
|
||||
$body-color: $site-color;
|
||||
|
||||
$tabborder: #107FFB; //#4285F4;
|
||||
$tabs-boxed-link-active-border-color: $tabborder;
|
||||
$tabs-border-bottom-color: $tabborder;
|
||||
$tabs-link-active-color: $tabborder;
|
||||
|
||||
// Import Bulma and Buefy styles
|
||||
@import "~bulma";
|
||||
@import "~buefy/src/scss/buefy"
|
||||
330
assets/styles/style.scss
Normal file
330
assets/styles/style.scss
Normal file
@@ -0,0 +1,330 @@
|
||||
@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);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user