feat(ui): improve the design for top bar
This commit is contained in:
parent
83bbe4ac93
commit
83f1c34f92
4 changed files with 28 additions and 14 deletions
|
@ -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%;
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
*/
|
||||
|
||||
#post-list {
|
||||
margin-top: 1.75rem;
|
||||
margin-top: 2rem;
|
||||
|
||||
a.card-wrapper {
|
||||
display: block;
|
||||
|
|
Loading…
Reference in a new issue