Avoid color sparkles when switching modes.
- the search bar (desktop view) - the site title.
This commit is contained in:
parent
9c3d3fdeed
commit
3f843f010a
4 changed files with 10 additions and 16 deletions
|
@ -80,7 +80,7 @@ $sidebar-display: "sidebar-display";
|
||||||
background: rgb(42, 30, 107);
|
background: rgb(42, 30, 107);
|
||||||
background: var(--sidebar-bg);
|
background: var(--sidebar-bg);
|
||||||
a {
|
a {
|
||||||
@include sidebar-icon;
|
@include sidebar-links;
|
||||||
}
|
}
|
||||||
.sidebar-bottom {
|
.sidebar-bottom {
|
||||||
.icon-border+a { // the icon behide mode-toggle
|
.icon-border+a { // the icon behide mode-toggle
|
||||||
|
@ -168,7 +168,7 @@ $sidebar-display: "sidebar-display";
|
||||||
|
|
||||||
#mode-toggle-wrapper {
|
#mode-toggle-wrapper {
|
||||||
i {
|
i {
|
||||||
@include sidebar-icon;
|
@include sidebar-links;
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
font-size: 1.05rem;
|
font-size: 1.05rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
@ -226,11 +226,10 @@ $sidebar-display: "sidebar-display";
|
||||||
img {
|
img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-size: cover;
|
-webkit-transition: transform .5s;
|
||||||
background-repeat: no-repeat;
|
-moz-transition: transform .5s;
|
||||||
-webkit-transition: all .5s !important;
|
transition: transform .5s;
|
||||||
-moz-transition: all .5s !important;
|
|
||||||
transition: all .5s !important;
|
|
||||||
&:hover {
|
&:hover {
|
||||||
-ms-transform: scale(1.2);
|
-ms-transform: scale(1.2);
|
||||||
-moz-transform: scale(1.2);
|
-moz-transform: scale(1.2);
|
||||||
|
@ -243,7 +242,7 @@ $sidebar-display: "sidebar-display";
|
||||||
#site-title {
|
#site-title {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
a {
|
a {
|
||||||
color: var(--site-title-color);
|
// color: var(--site-title-color);
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
letter-spacing: .5px;
|
letter-spacing: .5px;
|
||||||
|
@ -323,7 +322,6 @@ $sidebar-display: "sidebar-display";
|
||||||
border: 1px solid var(--search-wrapper-bg);
|
border: 1px solid var(--search-wrapper-bg);
|
||||||
background: var(--search-wrapper-bg);
|
background: var(--search-wrapper-bg);
|
||||||
padding: 0 .5rem;
|
padding: 0 .5rem;
|
||||||
transition: background-color .15s ease-in-out,border-color .15s ease-in-out;
|
|
||||||
i {
|
i {
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
font-size: .9rem;
|
font-size: .9rem;
|
||||||
|
@ -921,6 +919,7 @@ table {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
border-color: var(--input-focus-border-color) !important;
|
border-color: var(--input-focus-border-color) !important;
|
||||||
background: center !important;
|
background: center !important;
|
||||||
|
transition: background-color .15s ease-in-out,border-color .15s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*--- Responsive Design ---*/
|
/*--- Responsive Design ---*/
|
||||||
|
|
|
@ -62,8 +62,8 @@
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin sidebar-icon {
|
@mixin sidebar-links($color: rgba(255, 255, 255, 0.5)) {
|
||||||
color: rgba(255, 255, 255, 0.5);
|
color: $color;
|
||||||
transition: color 0.35s ease-in-out;
|
transition: color 0.35s ease-in-out;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
margin: 0 .25rem;
|
margin: 0 .25rem;
|
||||||
|
|
|
@ -37,7 +37,6 @@
|
||||||
--label-color: rgb(108, 117, 125);
|
--label-color: rgb(108, 117, 125);
|
||||||
|
|
||||||
/* Sidebar */
|
/* Sidebar */
|
||||||
--site-title-color: rgba(255, 255, 255, 0.5);
|
|
||||||
--nav-cursor-color: rgb(183, 182, 182);
|
--nav-cursor-color: rgb(183, 182, 182);
|
||||||
--sidebar-bg: radial-gradient(circle, #242424 0%, #1d1f27 100%);
|
--sidebar-bg: radial-gradient(circle, #242424 0%, #1d1f27 100%);
|
||||||
|
|
||||||
|
|
|
@ -44,8 +44,6 @@
|
||||||
|
|
||||||
/* Sidebar */
|
/* Sidebar */
|
||||||
|
|
||||||
--site-title-color: #b6b6b6;
|
|
||||||
|
|
||||||
--sidebar-bg: radial-gradient(
|
--sidebar-bg: radial-gradient(
|
||||||
circle, rgba(42, 30, 107, 1) 0%, rgba(35, 37, 46, 1) 100%);
|
circle, rgba(42, 30, 107, 1) 0%, rgba(35, 37, 46, 1) 100%);
|
||||||
|
|
||||||
|
@ -57,8 +55,6 @@
|
||||||
|
|
||||||
--topbar-text-color: rgb(78, 78, 78);
|
--topbar-text-color: rgb(78, 78, 78);
|
||||||
|
|
||||||
--search-wrapper-bg: #fff;
|
|
||||||
|
|
||||||
--search-wrapper-bg: #f5f5f5;
|
--search-wrapper-bg: #f5f5f5;
|
||||||
|
|
||||||
--search-tag-bg: #f8f9fa;
|
--search-tag-bg: #f8f9fa;
|
||||||
|
|
Loading…
Reference in a new issue