feat(ui): improve the design for top bar

This commit is contained in:
Cotes Chung 2023-03-29 05:01:25 +08:00
parent 83bbe4ac93
commit 83f1c34f92
No known key found for this signature in database
GPG key ID: 0D9E54843167A808
4 changed files with 28 additions and 14 deletions

View file

@ -423,7 +423,7 @@ i {
.post {
h1 {
margin-top: 3rem;
margin-top: 2rem;
margin-bottom: 1.5rem;
}
@ -966,12 +966,23 @@ $btn-mb: 0.5rem;
right: 0;
transition: top 0.2s ease-in-out;
z-index: 50;
border-bottom: 1px solid rgba(0, 0, 0, 0.07);
background-color: var(--topbar-wrapper-bg);
background-color: var(--topbar-bg);
[data-topbar-visible='false'] & {
top: -$topbar-height; /* same as topbar height. */
}
&::before {
$blur: 12px;
content: '';
position: absolute;
width: 100%;
height: $topbar-height;
z-index: -1;
-webkit-backdrop-filter: blur($blur);
backdrop-filter: blur($blur);
}
}
#topbar {
@ -1010,7 +1021,7 @@ $btn-mb: 0.5rem;
width: 100%;
border-radius: 1rem;
border: 1px solid var(--search-wrapper-border-color);
background: var(--search-wrapper-bg);
background: var(--main-bg);
padding: 0 0.5rem;
i {
@ -1039,7 +1050,6 @@ $btn-mb: 0.5rem;
&:focus {
box-shadow: none;
background: center;
&.form-control {
&::-moz-placeholder {
@ -1430,7 +1440,7 @@ $btn-mb: 0.5rem;
display: none;
~ .post-content {
margin-top: 3rem;
margin-top: 2.5rem;
}
}
} /* max-width: 849px */
@ -1479,6 +1489,12 @@ $btn-mb: 0.5rem;
max-width: $main-content-max-width;
}
.post {
h1 {
margin-top: 3rem;
}
}
div.post-content .table-wrapper > table {
min-width: 70%;
}

View file

@ -43,10 +43,9 @@
--avatar-border-color: rgb(206, 206, 206, 0.9);
/* Topbar */
--topbar-bg: rgb(27, 27, 30, 0.64);
--topbar-text-color: var(--text-color);
--topbar-wrapper-bg: rgb(39, 40, 43);
--search-wrapper-bg: rgb(34, 34, 39);
--search-wrapper-border-color: rgb(34, 34, 39);
--search-wrapper-border-color: rgb(55, 55, 55);
--search-icon-color: rgb(100, 102, 105);
--input-focus-border-color: rgb(112, 114, 115);

View file

@ -45,13 +45,12 @@
--avatar-border-color: white;
/* Topbar */
--topbar-bg: rgb(255, 255, 255, 0.7);
--topbar-text-color: rgb(78, 78, 78);
--topbar-wrapper-bg: white;
--search-wrapper-bg: rgb(245, 245, 245, 0.5);
--search-wrapper-border-color: rgb(245, 245, 245);
--search-wrapper-border-color: rgb(240, 240, 240);
--search-tag-bg: #f8f9fa;
--search-icon-color: #c2c6cc;
--input-focus-border-color: var(--btn-border-color);
--input-focus-border-color: #b8b8b8;
/* Home page */
--post-list-text-color: dimgray;

View file

@ -3,7 +3,7 @@
*/
#post-list {
margin-top: 1.75rem;
margin-top: 2rem;
a.card-wrapper {
display: block;