WebUI: Add missing icons

This adds missing icons to WebUI (in tabs, buttons, etc.).

PR #21162.
This commit is contained in:
skomerko
2024-08-17 07:38:44 +02:00
committed by GitHub
parent efdc4af448
commit e069fbc37f
31 changed files with 217 additions and 64 deletions

View File

@@ -120,6 +120,10 @@ body {
color: var(--color-text-white);
}
#desktopNavbar a:hover img {
filter: var(--color-icon-hover);
}
#desktopNavbar ul li a.arrow-right,
#desktopNavbar ul li a:hover.arrow-right {
background-image: url("../images/arrow-right.gif");

View File

@@ -36,14 +36,21 @@ Required by:
float: left;
}
.tab-menu .selected img,
.tab-menu li:hover img {
filter: var(--color-icon-hover);
}
.tab-menu li a {
align-items: center;
background-color: var(--color-background-default);
border-radius: 5px 5px 0 0;
color: var(--color-text-default);
display: block;
display: flex;
font-weight: normal;
margin-left: 8px;
padding: 5px 16px;
gap: 5px;
margin-left: 6px;
padding: 5px 8px;
text-align: center;
}
@@ -55,5 +62,4 @@ Required by:
.tab-menu li.selected a {
background-color: var(--color-background-blue);
color: var(--color-text-white);
font-weight: bold;
}

View File

@@ -54,6 +54,7 @@ Required by:
}
.mochaTitlebar h3 {
background-size: 16px !important; /* override mocha titlebar logo inline style */
font-size: 12px;
font-weight: bold;
line-height: 15px;

View File

@@ -52,6 +52,11 @@ tr.dynamicTableHeader {
white-space: nowrap;
}
.dynamicTable tr.selected img,
.dynamicTable tr:hover img {
filter: var(--color-icon-hover);
}
.dynamicTable td {
padding: 4px 2px;
white-space: nowrap;

View File

@@ -16,6 +16,8 @@
--color-background-hover: hsl(26deg 80% 60%);
--color-border-blue: hsl(210deg 42% 48%);
--color-border-default: hsl(0deg 0% 85%);
--color-icon-hover: brightness(0) invert(100%) sepia(100%) saturate(0%)
hue-rotate(108deg) brightness(104%) contrast(104%);
}
:root {
@@ -46,4 +48,11 @@
--color-background-hover: hsl(26deg 50% 55%);
--color-border-default: hsl(0deg 0% 33%);
}
#rssButtonBar img,
#startSearchButton img,
#manageSearchPlugins img {
filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(1%)
hue-rotate(156deg) brightness(106%) contrast(101%);
}
}

View File

@@ -195,10 +195,6 @@ hr {
color: var(--color-text-white) !important;
}
.selectedFilter a {
color: var(--color-text-white) !important;
}
#properties {
background-color: var(--color-background-default);
}
@@ -239,10 +235,12 @@ a.propButton img {
}
.contextMenu li a {
align-items: center;
color: var(--color-text-default);
display: block;
display: flex;
font-family: Tahoma, Arial, sans-serif;
font-size: 12px;
gap: 7px;
padding: 5px 20px 5px 5px;
text-decoration: none;
white-space: nowrap;
@@ -253,6 +251,10 @@ a.propButton img {
color: var(--color-text-white);
}
.contextMenu li a:hover img {
filter: var(--color-icon-hover);
}
.contextMenu li a.disabled {
font-style: italic;
}
@@ -296,8 +298,6 @@ a.propButton img {
.contextMenu li img {
height: 16px;
margin-bottom: -4px;
margin-right: 0.5em; /* return missed padding */
width: 16px;
}
@@ -540,23 +540,29 @@ ul.filterList {
padding-left: 0;
}
ul.filterList li:hover img,
ul.filterList .selectedFilter img {
filter: var(--color-icon-hover);
}
ul.filterList a,
ul.filterList span.link {
color: var(--color-text-default);
align-items: center;
color: inherit;
cursor: pointer;
display: block;
display: flex;
overflow: hidden;
padding: 4px 6px;
text-overflow: ellipsis;
white-space: nowrap;
}
ul.filterList li:hover {
background-color: var(--color-background-hover);
color: var(--color-text-white);
ul.filterList li {
color: var(--color-text-default);
}
ul.filterList li:hover a {
ul.filterList li:hover {
background-color: var(--color-background-hover);
color: var(--color-text-white);
}