pushing all files
This commit is contained in:
308
public/assets/sass/default/_dark.scss
Normal file
308
public/assets/sass/default/_dark.scss
Normal file
@ -0,0 +1,308 @@
|
||||
/*==========================================================================
|
||||
Dark CSS
|
||||
==========================================================================*/
|
||||
.light-n {
|
||||
display: none;
|
||||
}
|
||||
.light {
|
||||
display: none;
|
||||
}
|
||||
.dark-mode {
|
||||
color: var(--color-20);
|
||||
background: var(--dark-one);
|
||||
--text-heading-color: #FFFFFF;
|
||||
--color-2: #808287;
|
||||
--color-6: #222429;
|
||||
--color-7: #343434;
|
||||
--color-10: #343434;
|
||||
--color-12: #343434;
|
||||
--color-13: #808287;
|
||||
--color-15: #343434;
|
||||
--color-16: #343434;
|
||||
--border-color-1: #343434;
|
||||
--border-color-2: #343434;
|
||||
--border-color-3: #343434;
|
||||
--border-color-4: #343434;
|
||||
--bg-white: #1C1E22;
|
||||
.dark__image img {
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
.light-n {
|
||||
display: inline-block;
|
||||
}
|
||||
.dark-n {
|
||||
display: none;
|
||||
}
|
||||
.blog__two-item-content .btn-six,
|
||||
.btn-two {
|
||||
border-color: #343434;
|
||||
}
|
||||
//========== Banner ==========\\
|
||||
.banner__three {
|
||||
background-image: url("../../assets/img/shape/dark-bg.jpg") !important;
|
||||
}
|
||||
//========== Header ==========\\
|
||||
.header__two {
|
||||
&::before {
|
||||
background: url("../../assets/img/shape/before-dark.png");
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
}
|
||||
&::after {
|
||||
background: url("../../assets/img/shape/after-dark.png");
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
}
|
||||
}
|
||||
.header__area-menubar-right-sidebar-popup-icon::before {
|
||||
opacity: 0.2;
|
||||
}
|
||||
.header__area-menubar-center-menu ul li.menu-item-has-children {
|
||||
> a {
|
||||
&::before {
|
||||
background: var(--text-white);
|
||||
}
|
||||
&::after {
|
||||
background: var(--text-white);
|
||||
}
|
||||
}
|
||||
}
|
||||
.header__area-menubar-center-menu {
|
||||
ul li.menu-item-has-children:hover > a::after {
|
||||
background: var(--primary-color-1);
|
||||
}
|
||||
&.two {
|
||||
ul {
|
||||
li {
|
||||
&.menu-item-has-children {
|
||||
&:hover > a {
|
||||
&::after {
|
||||
background: var(--primary-color-2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.three {
|
||||
ul {
|
||||
li {
|
||||
&.menu-item-has-children {
|
||||
&:hover > a {
|
||||
&::after {
|
||||
background: var(--primary-color-3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.header__sticky-sticky-menu {
|
||||
box-shadow: 0 0 50px var(--color-12);
|
||||
}
|
||||
.header__area-menubar.two .header__area-menubar-left-logo .two {
|
||||
display: none;
|
||||
}
|
||||
//========== Contact ==========\\
|
||||
.contact__four-info {
|
||||
background: var(--dark-two);
|
||||
&::after {
|
||||
opacity: 0;
|
||||
}
|
||||
&:hover {
|
||||
background: var(--bg-heading-color);
|
||||
&::after {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
.contact__four-form,
|
||||
.contact__page-form {
|
||||
background: var(--dark-two);
|
||||
input,
|
||||
textarea {
|
||||
background: var(--dark-two);
|
||||
}
|
||||
}
|
||||
.contact__two-box {
|
||||
box-shadow: 0 0 80px var(--color-18);
|
||||
}
|
||||
//========== Features ==========\\
|
||||
.features-area-item.features-area-item-hover {
|
||||
background: var(--primary-color-3);
|
||||
}
|
||||
//========== Services ==========\\
|
||||
.banner__one-image::before,
|
||||
.portfolio__three::before,
|
||||
.page__banner::before,
|
||||
.services__two-item::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
background: var(--text-white);
|
||||
mix-blend-mode: color;
|
||||
}
|
||||
.services__three-item-content::after {
|
||||
background: var(--dark-two);
|
||||
}
|
||||
//========== Pricing ==========\\
|
||||
.pricing__area-item {
|
||||
box-shadow: none;
|
||||
background: var(--dark-two);
|
||||
&::after {
|
||||
content: none;
|
||||
}
|
||||
&-title .text-two {
|
||||
color: var(--color-20);
|
||||
}
|
||||
}
|
||||
//========== Experience ==========\\
|
||||
.copyright__three p,
|
||||
.experience__area-right-skill-item-count.text-two {
|
||||
color: var(--color-20);
|
||||
}
|
||||
//========== Get In Touch ==========\\
|
||||
.getIn__touch-three-right {
|
||||
background: var(--dark-two);
|
||||
input,
|
||||
textarea {
|
||||
border-color: var(--body-color);
|
||||
&:focus {
|
||||
border-color: var(--primary-color-3);
|
||||
}
|
||||
}
|
||||
}
|
||||
.getIn__touch-left {
|
||||
box-shadow: 0 0 60px var(--color-11);
|
||||
}
|
||||
//========== Team ==========\\
|
||||
.team__three-item-image-info-icon::after {
|
||||
background-image: url("../../assets/img/icon/union-dark.png");
|
||||
}
|
||||
.testimonial__area-item-client-image img,
|
||||
.news__standard-left-item-image img,
|
||||
.testimonial__two-item-bottom > img,
|
||||
.all__sidebar-help-image > img,
|
||||
.team__three-item-image > img,
|
||||
.team__two-item-image > img,
|
||||
.faq__two-left-image > img,
|
||||
.blog__two-item-image img,
|
||||
.project__area-item > img,
|
||||
.project__one-item > img,
|
||||
.post__item-image img {
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
.header__area-menubar-center-menu ul li .sub-menu,
|
||||
.testimonial__two-item-bottom::before,
|
||||
.news__standard-left-item-content,
|
||||
.solutions__two-item-icon,
|
||||
.blog__three-item-content,
|
||||
.team__area-item-content,
|
||||
.blog__two-item-content,
|
||||
.features-area-item,
|
||||
.testimonial__two-item {
|
||||
background: var(--dark-two);
|
||||
}
|
||||
input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea {
|
||||
color: var(--text-white);
|
||||
}
|
||||
.mode__switch::before {
|
||||
left: calc(100% - 31px);
|
||||
}
|
||||
.mode__switch span {
|
||||
&::before {
|
||||
background-image: url('../../assets/img/icon/sun-white.png');
|
||||
}
|
||||
&::after {
|
||||
background-image: url("../../assets/img/icon/moon-dark.png");
|
||||
}
|
||||
}
|
||||
}
|
||||
/*==========================================================================
|
||||
Dark Light Switch CSS
|
||||
==========================================================================*/
|
||||
.switch__tab {
|
||||
position: fixed;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
right: 0;
|
||||
top: 52%;
|
||||
transform: translateY(-50%) translateX(50px) rotate(90deg);
|
||||
z-index: 3;
|
||||
cursor: pointer;
|
||||
}
|
||||
.light-mode-title,
|
||||
.dark-mode-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--text-heading-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.mode__switch {
|
||||
height: 34px;
|
||||
width: 80px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
margin: 0 10px;
|
||||
background: var(--primary-color-1);
|
||||
transform: translateY(0px);
|
||||
border-radius: 35px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease-out 0s;
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 3px;
|
||||
top: 3px;
|
||||
background: var(--text-white);
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
z-index: -1;
|
||||
border-radius: 50%;
|
||||
transition: all 0.3s ease-out 0s;
|
||||
}
|
||||
&.two {
|
||||
background: var(--primary-color-2);
|
||||
}
|
||||
&.three {
|
||||
background: var(--primary-color-3);
|
||||
}
|
||||
}
|
||||
.mode__switch span {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 80px;
|
||||
height: 34px;
|
||||
display: block;
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 54px;
|
||||
background-image: url('../../assets/img/icon/sun.png');
|
||||
background-repeat: no-repeat;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background-size: cover;
|
||||
}
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 54px;
|
||||
background-image: url("../../assets/img/icon/moon.png");
|
||||
background-repeat: no-repeat;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user