Skip to content

Commit

Permalink
Improved: Theme nord more improvement (#5719)
Browse files Browse the repository at this point in the history 
* new article banner

* optimize side nav bar: close button, width, background

* fix dropdown menu little arrows

* active buttons dropdown menu

---------

Co-authored-by: math-gh <>
  • Loading branch information
@math-GH
math-GH committed Oct 23, 2023
1 parent af854f0 commit 41d7005
Show file tree
Hide file tree
Showing 2 changed files with 134 additions and 30 deletions.
82 changes: 67 additions & 15 deletions p/themes/Nord/nord.css
View file
Expand Up @@ -28,7 +28,7 @@
/* --nord12-aurora: #d08770; */
--nord13-aurora: #ebcb8b;
--nord14-aurora: #a3be8c;
/* --nord15-aurora: #b48ead; */
--nord15-aurora: #b48ead;

--bg: var(--nordX-background);
--accent-bg: var(--nord0-polarnight);
Expand Down Expand Up @@ -199,12 +199,20 @@ table th, table td {
line-height: 25px;
}

.btn.active,
div:target ~ .btn {
.btn.active {
background-color: var(--bg);
border: 1px solid var(--accent);
}

div:target ~ .btn {
background-color: var(--highlight);
border: 1px solid var(--highlight);
}

div:target ~ .btn .icon {
filter: brightness(30%);
}

.btn:hover {
color: var(--highlight);
border: 1px solid var(--highlight);
Expand Down Expand Up @@ -329,6 +337,25 @@ svg:hover {
text-align: left;
}

.aside .toggle_aside,
#overlay .close,
.dropdown-menu .toggle_aside,
#slider .toggle_aside,
.dropdown-header-close a {
background: var(--accent-bg);
border: 1px solid var(--nord0-polarnight);
box-sizing: border-box;
transition: 0.2s;
}

.aside .toggle_aside:hover,
#slider .toggle_aside:hover,
#overlay .close:hover,
.dropdown-menu .toggle_aside:hover {
background-color: var(--bg) !important;
border-color: var(--highlight) !important;
}

.dropdown-menu .item > a,
.dropdown-menu .item > span,
.dropdown-menu .item > .as-link {
Expand Down Expand Up @@ -401,8 +428,10 @@ svg:hover {
}

.dropdown-target:target ~ .dropdown-toggle::after {
background-color: var(--accent-bg);
background-color: var(--dropdown-bg);
border: none;
right: 13px;
bottom: -14px;
}

.dropdown-menu-scrollable .dropdown-close {
Expand Down Expand Up @@ -689,11 +718,19 @@ li.item.active {
}

#new-article > a {
margin: 1rem auto;
width: 90%;
color: var(--nord15-aurora);
border: 2px solid var(--nord15-aurora);
border-radius: 6px;
line-height: 3em;
font-weight: bold;
transition: 0.2s background-color, .2s color;
}

#new-article > a:hover {
background-color: var(--nord15-aurora);
color: var(--bg);
text-decoration: none;
}

Expand Down Expand Up @@ -921,6 +958,7 @@ li.item.active {
text-align: center;
}

.header .configure .btn.dropdown-toggle,
.nav_menu .btn {
margin: .125rem;
}
Expand Down Expand Up @@ -1063,13 +1101,7 @@ option {

/*=== Dropdown */
.dropdown-menu::after {
position: absolute;
top: -6px;
right: 13px;
width: 10px;
height: 10px;
z-index: -10;
transform: rotate(45deg);
top: -5px;
border: none;
}

Expand Down Expand Up @@ -1160,8 +1192,9 @@ option {
/*===========*/

@media (max-width: 840px) {
.aside:target + .close-aside {
background: rgba(0, 0, 0, 0.2);
.aside:target + .close-aside,
.configure .dropdown-target:target ~ .dropdown-close {
backdrop-filter: grayscale(60%) blur(1px);
display: block;
font-size: 0;
position: fixed;
Expand Down Expand Up @@ -1191,6 +1224,15 @@ option {
padding: 0;
}

.nav.aside {
max-width: 300px;
border-radius: 0;
}

.configure .dropdown .dropdown-menu {
max-width: 300px;
}

.aside:target,
.reader .aside:target {
width: 90%;
Expand Down Expand Up @@ -1230,8 +1272,6 @@ option {
}

#slider.active {
left: 0;
top: 50px;
background-color: var(--bg);
}

Expand Down Expand Up @@ -1296,4 +1336,16 @@ option {
.notification a.close .icon {
display: none;
}

.dropdown-menu {
margin: 0;
}

.dropdown-target:target ~ .dropdown-toggle:not(.btn) ~ .dropdown-menu {
margin-top: 7px;
}

.dropdown .dropdown-menu {
border-radius: 6px;
}
}
82 changes: 67 additions & 15 deletions p/themes/Nord/nord.rtl.css
View file
Expand Up @@ -28,7 +28,7 @@
/* --nord12-aurora: #d08770; */
--nord13-aurora: #ebcb8b;
--nord14-aurora: #a3be8c;
/* --nord15-aurora: #b48ead; */
--nord15-aurora: #b48ead;

--bg: var(--nordX-background);
--accent-bg: var(--nord0-polarnight);
Expand Down Expand Up @@ -199,12 +199,20 @@ table th, table td {
line-height: 25px;
}

.btn.active,
div:target ~ .btn {
.btn.active {
background-color: var(--bg);
border: 1px solid var(--accent);
}

div:target ~ .btn {
background-color: var(--highlight);
border: 1px solid var(--highlight);
}

div:target ~ .btn .icon {
filter: brightness(30%);
}

.btn:hover {
color: var(--highlight);
border: 1px solid var(--highlight);
Expand Down Expand Up @@ -329,6 +337,25 @@ svg:hover {
text-align: right;
}

.aside .toggle_aside,
#overlay .close,
.dropdown-menu .toggle_aside,
#slider .toggle_aside,
.dropdown-header-close a {
background: var(--accent-bg);
border: 1px solid var(--nord0-polarnight);
box-sizing: border-box;
transition: 0.2s;
}

.aside .toggle_aside:hover,
#slider .toggle_aside:hover,
#overlay .close:hover,
.dropdown-menu .toggle_aside:hover {
background-color: var(--bg) !important;
border-color: var(--highlight) !important;
}

.dropdown-menu .item > a,
.dropdown-menu .item > span,
.dropdown-menu .item > .as-link {
Expand Down Expand Up @@ -401,8 +428,10 @@ svg:hover {
}

.dropdown-target:target ~ .dropdown-toggle::after {
background-color: var(--accent-bg);
background-color: var(--dropdown-bg);
border: none;
left: 13px;
bottom: -14px;
}

.dropdown-menu-scrollable .dropdown-close {
Expand Down Expand Up @@ -689,11 +718,19 @@ li.item.active {
}

#new-article > a {
margin: 1rem auto;
width: 90%;
color: var(--nord15-aurora);
border: 2px solid var(--nord15-aurora);
border-radius: 6px;
line-height: 3em;
font-weight: bold;
transition: 0.2s background-color, .2s color;
}

#new-article > a:hover {
background-color: var(--nord15-aurora);
color: var(--bg);
text-decoration: none;
}

Expand Down Expand Up @@ -921,6 +958,7 @@ li.item.active {
text-align: center;
}

.header .configure .btn.dropdown-toggle,
.nav_menu .btn {
margin: .125rem;
}
Expand Down Expand Up @@ -1063,13 +1101,7 @@ option {

/*=== Dropdown */
.dropdown-menu::after {
position: absolute;
top: -6px;
left: 13px;
width: 10px;
height: 10px;
z-index: -10;
transform: rotate(-45deg);
top: -5px;
border: none;
}

Expand Down Expand Up @@ -1160,8 +1192,9 @@ option {
/*===========*/

@media (max-width: 840px) {
.aside:target + .close-aside {
background: rgba(0, 0, 0, 0.2);
.aside:target + .close-aside,
.configure .dropdown-target:target ~ .dropdown-close {
backdrop-filter: grayscale(60%) blur(1px);
display: block;
font-size: 0;
position: fixed;
Expand Down Expand Up @@ -1191,6 +1224,15 @@ option {
padding: 0;
}

.nav.aside {
max-width: 300px;
border-radius: 0;
}

.configure .dropdown .dropdown-menu {
max-width: 300px;
}

.aside:target,
.reader .aside:target {
width: 90%;
Expand Down Expand Up @@ -1230,8 +1272,6 @@ option {
}

#slider.active {
right: 0;
top: 50px;
background-color: var(--bg);
}

Expand Down Expand Up @@ -1296,4 +1336,16 @@ option {
.notification a.close .icon {
display: none;
}

.dropdown-menu {
margin: 0;
}

.dropdown-target:target ~ .dropdown-toggle:not(.btn) ~ .dropdown-menu {
margin-top: 7px;
}

.dropdown .dropdown-menu {
border-radius: 6px;
}
}

0 comments on commit 41d7005

Please sign in to comment.