Add client-side icon replacement, Dashboard fixes, and Apps page styling
- Add JS icon replacement module to sidebar.js that swaps container icons with selfh.st CDN versions on Docker page and Dashboard via MutationObserver - Fix Dashboard container name extraction (Strategy 2: span.inner > span) for containers whose original icon was missing (question.png fallback) - Add CSS filter for Dashboard folder icons (folder-img-docker class) - Add icon mappings for containers without CDN matches (netdisco→networking-toolbox, urbackup→networking-toolbox, seekandwatch→databasement, unmarr→homarr, dockhand→docker) - Fix shadowed netdisco-web/netdisco-backend entries in update-icons.sh - Add Community Applications (Apps page) glass theme overrides Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Kaloyan Danchev
389
style.css
389
style.css
@@ -1490,6 +1490,16 @@ span.folder-outer {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
/* Folder category icons (SVG on the folder row itself) — make white */
|
||||
tr.folder > td.folder-name img.folder-img {
|
||||
filter: brightness(0) invert(1) !important;
|
||||
}
|
||||
|
||||
/* Dashboard folder category icons — make white (same SVGs, different DOM) */
|
||||
img.folder-img-docker {
|
||||
filter: brightness(0) invert(1) !important;
|
||||
}
|
||||
|
||||
/* Folder dropdown button */
|
||||
button[class*="dropDown-"] {
|
||||
background: rgba(255, 255, 255, 0.06) !important;
|
||||
@@ -1623,3 +1633,382 @@ div.clone-settings {
|
||||
background: rgba(126, 184, 218, 0.3);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
COMMUNITY APPLICATIONS (APPS PAGE) OVERRIDES
|
||||
============================================ */
|
||||
|
||||
/* --- Override CA gray theme variables for glass look --- */
|
||||
:root {
|
||||
--template-background: rgba(255, 255, 255, 0.06);
|
||||
--template-hover-background: rgba(255, 255, 255, 0.12);
|
||||
--template-favourite: rgba(255, 255, 255, 0.10);
|
||||
--border-color: rgba(255, 255, 255, 0.12);
|
||||
--sidebar-background: rgba(255, 255, 255, 0.08);
|
||||
--sidebar-text: var(--glass-text);
|
||||
--ca-legacy-background-color: transparent;
|
||||
--support-popup-text: var(--glass-text);
|
||||
--support-popup-background: rgba(255, 255, 255, 0.10);
|
||||
}
|
||||
|
||||
/* --- Apps page left sidebar menu --- */
|
||||
.menuItems {
|
||||
background-color: transparent !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
ul.caMenu,
|
||||
ul.nonselectMenu {
|
||||
color: var(--glass-text) !important;
|
||||
}
|
||||
|
||||
li.caMenuItem,
|
||||
a.caMenuItem {
|
||||
color: var(--glass-text-muted) !important;
|
||||
}
|
||||
|
||||
.caMenuItem:hover {
|
||||
color: var(--glass-accent) !important;
|
||||
}
|
||||
|
||||
.selectedMenu {
|
||||
color: var(--glass-accent) !important;
|
||||
}
|
||||
|
||||
.menuItems hr {
|
||||
border-color: rgba(255, 255, 255, 0.08) !important;
|
||||
}
|
||||
|
||||
/* --- Search area bar --- */
|
||||
.searchArea {
|
||||
background-color: transparent !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.searchAreaHolder {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
#searchBox {
|
||||
background: rgba(255, 255, 255, 0.08) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12) !important;
|
||||
border-radius: 10px !important;
|
||||
color: var(--glass-text) !important;
|
||||
backdrop-filter: blur(20px) !important;
|
||||
-webkit-backdrop-filter: blur(20px) !important;
|
||||
}
|
||||
|
||||
#searchBox::placeholder {
|
||||
color: var(--glass-text-muted) !important;
|
||||
}
|
||||
|
||||
.searchSubmit {
|
||||
background: rgba(255, 255, 255, 0.06) !important;
|
||||
border: none !important;
|
||||
color: var(--glass-text-muted) !important;
|
||||
border-radius: 0 10px 10px 0 !important;
|
||||
}
|
||||
|
||||
/* --- App cards (ca_holder) --- */
|
||||
.ca_holder,
|
||||
.dockerHubHolder {
|
||||
background: rgba(255, 255, 255, 0.06) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.10) !important;
|
||||
border-radius: 16px !important;
|
||||
backdrop-filter: blur(30px) saturate(1.3) !important;
|
||||
-webkit-backdrop-filter: blur(30px) saturate(1.3) !important;
|
||||
overflow: hidden;
|
||||
transition: background 0.2s, border-color 0.2s, box-shadow 0.2s !important;
|
||||
}
|
||||
|
||||
.ca_holder:hover,
|
||||
.dockerHubHolder:hover {
|
||||
background: rgba(255, 255, 255, 0.12) !important;
|
||||
border-color: rgba(255, 255, 255, 0.18) !important;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
|
||||
}
|
||||
|
||||
.ca_holderFav {
|
||||
background: rgba(255, 255, 255, 0.10) !important;
|
||||
}
|
||||
|
||||
/* Card text */
|
||||
.ca_applicationName {
|
||||
color: var(--glass-text-heading) !important;
|
||||
}
|
||||
|
||||
.cardDescription,
|
||||
.cardDesc {
|
||||
color: var(--glass-text-muted) !important;
|
||||
}
|
||||
|
||||
.ca_author {
|
||||
color: var(--glass-text-muted) !important;
|
||||
}
|
||||
|
||||
.ca_categories,
|
||||
a.ca_categories {
|
||||
color: var(--glass-text-muted) !important;
|
||||
}
|
||||
|
||||
/* Card description fade-out gradient — match glass bg */
|
||||
.cardDesc::after {
|
||||
background: linear-gradient(to right,
|
||||
transparent 0%,
|
||||
rgba(255, 255, 255, 0.03) 50%,
|
||||
rgba(30, 30, 40, 0.6) 100%) !important;
|
||||
}
|
||||
|
||||
/* --- Buttons (caButton) --- */
|
||||
.caButton,
|
||||
.popupRepoDescription,
|
||||
.popupDescription {
|
||||
background: rgba(255, 255, 255, 0.10) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12) !important;
|
||||
color: var(--glass-text) !important;
|
||||
border-radius: 10px !important;
|
||||
backdrop-filter: blur(15px) !important;
|
||||
-webkit-backdrop-filter: blur(15px) !important;
|
||||
}
|
||||
|
||||
.caButton:hover {
|
||||
background: var(--glass-accent) !important;
|
||||
border-color: var(--glass-accent) !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.caButton:hover a,
|
||||
a.caButton:hover {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.caButton a {
|
||||
color: var(--glass-text) !important;
|
||||
}
|
||||
|
||||
/* --- Home templates section headers --- */
|
||||
.ca_homeTemplatesHeader {
|
||||
color: var(--glass-text-heading) !important;
|
||||
}
|
||||
|
||||
.ca_homeTemplatesLine2 {
|
||||
color: var(--glass-text-muted) !important;
|
||||
}
|
||||
|
||||
/* --- Home templates horizontal scroll area --- */
|
||||
.ca_homeTemplates {
|
||||
scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
|
||||
}
|
||||
|
||||
/* --- Alternate view (app detail popup) --- */
|
||||
#alternateView {
|
||||
background-color: rgba(15, 15, 25, 0.92) !important;
|
||||
backdrop-filter: blur(60px) saturate(1.5) !important;
|
||||
-webkit-backdrop-filter: blur(60px) saturate(1.5) !important;
|
||||
color: var(--glass-text) !important;
|
||||
border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
|
||||
}
|
||||
|
||||
#alternateView table {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.popupCloseArea {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.popupName {
|
||||
color: var(--glass-text-heading) !important;
|
||||
}
|
||||
|
||||
.popupAuthor,
|
||||
.popupAuthorMain {
|
||||
color: var(--glass-text-muted) !important;
|
||||
}
|
||||
|
||||
.popupInfoSection {
|
||||
color: var(--glass-text) !important;
|
||||
}
|
||||
|
||||
/* Popup description box */
|
||||
.popupDescription {
|
||||
background: rgba(255, 255, 255, 0.06) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.10) !important;
|
||||
border-radius: 14px !important;
|
||||
color: var(--glass-text) !important;
|
||||
}
|
||||
|
||||
.popupRepoDescription {
|
||||
background: rgba(255, 255, 255, 0.06) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.10) !important;
|
||||
border-radius: 14px !important;
|
||||
color: var(--glass-text) !important;
|
||||
}
|
||||
|
||||
/* --- Sidebar detail panel (sidenav) --- */
|
||||
.sidenav {
|
||||
background-color: rgba(15, 15, 25, 0.90) !important;
|
||||
backdrop-filter: blur(50px) saturate(1.5) !important;
|
||||
-webkit-backdrop-filter: blur(50px) saturate(1.5) !important;
|
||||
color: var(--glass-text) !important;
|
||||
}
|
||||
|
||||
/* --- Mobile overlay --- */
|
||||
.mobileOverlay.menuShowing {
|
||||
background-color: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
|
||||
/* --- Multi-install bottom bar --- */
|
||||
.multi_installDiv {
|
||||
background-color: rgba(15, 15, 25, 0.85) !important;
|
||||
backdrop-filter: blur(40px) !important;
|
||||
-webkit-backdrop-filter: blur(40px) !important;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
|
||||
}
|
||||
|
||||
/* --- Card badge triangles — keep visible but soften --- */
|
||||
.installedCardBackground {
|
||||
background-color: rgba(50, 47, 255, 0.75) !important;
|
||||
}
|
||||
|
||||
.officialCardBackground,
|
||||
.spotlightCardBackground {
|
||||
background-color: rgba(133, 65, 83, 0.75) !important;
|
||||
}
|
||||
|
||||
.betaCardBackground {
|
||||
background-color: rgba(255, 140, 47, 0.7) !important;
|
||||
}
|
||||
|
||||
.warningCardBackground {
|
||||
background-color: rgba(129, 0, 0, 0.75) !important;
|
||||
}
|
||||
|
||||
.greenCardBackground {
|
||||
background-color: rgba(0, 129, 0, 0.75) !important;
|
||||
}
|
||||
|
||||
/* --- Links inside CA --- */
|
||||
.popUpLink,
|
||||
a.popUpLink {
|
||||
color: var(--glass-accent) !important;
|
||||
}
|
||||
|
||||
.popUpLink:hover,
|
||||
a.popUpLink:hover {
|
||||
color: var(--glass-accent-hover) !important;
|
||||
}
|
||||
|
||||
/* --- Sort icons --- */
|
||||
.sortIcons {
|
||||
color: var(--glass-text-muted) !important;
|
||||
}
|
||||
|
||||
.sortIcons:hover {
|
||||
color: var(--glass-accent) !important;
|
||||
}
|
||||
|
||||
/* --- Page navigation --- */
|
||||
.pageNumber {
|
||||
color: var(--glass-text-muted) !important;
|
||||
}
|
||||
|
||||
.pageNumber:hover {
|
||||
color: var(--glass-accent) !important;
|
||||
}
|
||||
|
||||
.pageSelected {
|
||||
color: var(--glass-accent) !important;
|
||||
}
|
||||
|
||||
/* --- Template display area --- */
|
||||
.ca_template {
|
||||
background-color: rgba(255, 255, 255, 0.06) !important;
|
||||
color: var(--glass-text) !important;
|
||||
border-radius: 16px !important;
|
||||
}
|
||||
|
||||
/* --- Statistics / no-apps-found text --- */
|
||||
.ca_NoAppsFound,
|
||||
.ca_NoDockerAppsFound {
|
||||
color: var(--glass-text-muted) !important;
|
||||
}
|
||||
|
||||
/* --- Repo table --- */
|
||||
.repoTable {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
/* --- Screenshot borders --- */
|
||||
.screen {
|
||||
border-color: var(--glass-accent) !important;
|
||||
}
|
||||
|
||||
/* --- Mod comment --- */
|
||||
.modComment {
|
||||
border-color: rgba(207, 49, 49, 0.5) !important;
|
||||
background: rgba(207, 49, 49, 0.08) !important;
|
||||
border-radius: 12px !important;
|
||||
}
|
||||
|
||||
/* --- Category display --- */
|
||||
#Category {
|
||||
color: var(--glass-text-muted) !important;
|
||||
}
|
||||
|
||||
/* --- Docker card background (inside cards) --- */
|
||||
.dockerCardBackground {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
/* --- Favourite button styles --- */
|
||||
.fav {
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
transparent 0%,
|
||||
rgba(0, 0, 0, 0.3) 100%
|
||||
),
|
||||
linear-gradient(
|
||||
to right,
|
||||
rgba(0, 153, 0, 0.7) 0%,
|
||||
rgba(0, 153, 0, 0.85) 50%,
|
||||
rgba(0, 153, 0, 0.7) 100%
|
||||
) !important;
|
||||
}
|
||||
|
||||
.nonfav {
|
||||
background-color: rgba(255, 255, 255, 0.10) !important;
|
||||
}
|
||||
|
||||
/* --- Icon display inside popup --- */
|
||||
img.displayIcon,
|
||||
img.popupIcon {
|
||||
border-radius: 12px !important;
|
||||
}
|
||||
|
||||
/* --- Spinner overlay --- */
|
||||
.spinnerBackground {
|
||||
background: rgba(0, 0, 0, 0.3) !important;
|
||||
backdrop-filter: blur(5px) !important;
|
||||
-webkit-backdrop-filter: blur(5px) !important;
|
||||
}
|
||||
|
||||
/* --- Readmore gradient mask fix for dark theme --- */
|
||||
.readmore-js-collapsed {
|
||||
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,1)), to(rgba(255,255,255,0.1))) !important;
|
||||
}
|
||||
|
||||
/* --- Credits page --- */
|
||||
.credits {
|
||||
color: var(--glass-text) !important;
|
||||
}
|
||||
|
||||
.ca_creditTitle,
|
||||
.ca_creditheader {
|
||||
color: var(--glass-text-heading) !important;
|
||||
}
|
||||
|
||||
.ca_credit {
|
||||
color: var(--glass-text-muted) !important;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user