PlexSheep
/
krata
1
1
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases Wiki Activity

Avoid color sparkles when switching modes. 

- the search bar (desktop view)
- the site title.
This commit is contained in:
Cotes Chung 2020-05-05 04:57:40 +08:00
parent 9c3d3fdeed
commit 3f843f010a
4 changed files with 10 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
assets/css/_addon/main.scss
View File

@ -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 ---*/

4
assets/css/_addon/module.scss
View File

@ -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;

1
assets/css/_colors/dark-typography.scss
View File

@ -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%);

4
assets/css/_colors/light-typography.scss
View File

@ -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;