cphipps/changedetection.io
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI - New "Search List" icon and functionality (#1580)

Browse Source
This commit is contained in:
dgtlmoon
2023-05-16 23:01:32 +02:00
parent e9057cb851
commit a021ba87fa
9 changed files with 139 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
changedetectionio/static/styles/scss/styles.scss
View File

@@ -54,8 +54,47 @@ a.github-link {
}
}
button.toggle-theme {
width: 4rem;
#toggle-light-mode {
width: 3rem;
.icon-dark {
display: none;
}
&.dark {
.icon-light {
display: none;
}
.icon-dark {
display: block;
}
}
}
#toggle-search {
width: 2rem;
}
#search-q {
opacity: 0;
-webkit-transition: all .9s ease;
-moz-transition: all .9s ease;
transition: all .9s ease;
width: 0;
display: none;
&.expanded {
width: auto;
display: inline-block;
opacity: 1;
}
}
#search-result-info {
color: #fff;
}
button.toggle-button {
vertical-align: middle;
background: transparent;
border: none;
cursor: pointer;
@@ -74,19 +113,7 @@ button.toggle-theme {
display: block;
}
.icon-dark {
display: none;
}
&.dark {
.icon-light {
display: none;
}
.icon-dark {
display: block;
}
}
}
.pure-menu-horizontal {

43
changedetectionio/static/styles/styles.css
View File

@@ -331,23 +331,44 @@ a.github-link {
a.github-link:hover {
color: var(--color-icon-github-hover); }
button.toggle-theme {
width: 4rem;
#toggle-light-mode {
width: 3rem; }
#toggle-light-mode .icon-dark {
display: none; }
#toggle-light-mode.dark .icon-light {
display: none; }
#toggle-light-mode.dark .icon-dark {
display: block; }
#toggle-search {
width: 2rem; }
#search-q {
opacity: 0;
-webkit-transition: all .9s ease;
-moz-transition: all .9s ease;
transition: all .9s ease;
width: 0;
display: none; }
#search-q.expanded {
width: auto;
display: inline-block;
opacity: 1; }
#search-result-info {
color: #fff; }
button.toggle-button {
vertical-align: middle;
background: transparent;
border: none;
cursor: pointer;
color: var(--color-icon-github); }
button.toggle-theme:hover {
button.toggle-button:hover {
color: var(--color-icon-github-hover); }
button.toggle-theme svg {
button.toggle-button svg {
fill: currentColor; }
button.toggle-theme .icon-light {
display: block; }
button.toggle-theme .icon-dark {
display: none; }
button.toggle-theme.dark .icon-light {
display: none; }
button.toggle-theme.dark .icon-dark {
button.toggle-button .icon-light {
display: block; }
.pure-menu-horizontal {