miker/Compose-Files
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated files

Browse Source
This commit is contained in:
Mike McFetridge
2026-07-25 08:45:38 -04:00
parent b78378565a
commit dc6edd21da
37 changed files with 1424 additions and 1120 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Docker-Compose/Homepage/config/custom.css
+347 -478
View File
@@ -1,516 +1,385 @@
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz@9..40&family=Fira+Code&family=Poppins&family=Source+Code+Pro&family=Work+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Code&family=Orbitron:wght@500;700;900&family=Poppins:wght@300;400;500;600&family=Rajdhani:wght@500;600;700&display=swap');
.theme-gray {
font-family: 'DM Sans', sans-serif;
/* APPLY STYLING AND THEME VARIABLES GLOBALLY & ON ACTIVE THEMES */
:root, .dark, .theme-gray, .theme-slate, .theme-zinc {
font-family: 'Poppins', sans-serif;
/* DRACULA COLORS */
--dracula-background: #282a36;
--dracula-background-dark: #15161d;
--dracula-foreground: #44475a;
/* DRACULA & CYBERPUNK COLOR SYSTEM */
--dracula-background: #181923;
--dracula-background-dark: #0f1015;
--dracula-foreground: #2d3142;
--dracula-text: #f8f8f2;
--dracula-slate: #6272a4;
--dracula-cyan: #8be9fd;
--dracula-green: #50fa7ae8;
--dracula-green: #50fa7b;
--dracula-orange: #ffb86c;
--dracula-pink: #ff79c6;
--dracula-purple: #bd93f9;
--dracula-red: #ff5555;
--dracula-yellow: #f1fa8c;
/* Theme preset colors */
/* Theme preset colors (RGB values for Tailwind transparency support) */
--color-50: 249 250 251;
--color-100: 243 244 246;
--color-200: 248 248 242; /* Text Color - use Dracula text color */
--color-200: 248 248 242; /* Text Color */
--color-300: 209 213 219;
--color-400: 156 163 175;
--color-500: 107 114 128;
--color-600: 75 85 99;
--color-700: 55 65 81;
--color-800: 40 42 54; /* Background color - use Dracula theme color */
--color-900: 21 22 29; /* Dracula specific */
--color-logo-start: 156 163 175;
--color-logo-stop: 55 65 81;
--color-700: 45 49 66;
--color-800: 24 25 35; /* Main container background */
--color-900: 15 16 21; /* Core background */
--color-logo-start: 189 147 249;
--color-logo-stop: 139 233 253;
--standard-bg: #44475a8e;
--standard-bg: rgba(45, 49, 66, 0.45);
/* INFO WIDGET COLORS */
--info-widgets: var(--dracula-purple);
--resource-bar-bg: var(--standard-bg);
--resource-bar-fg: var(--dracula-green);
--info-widgets: var(--dracula-cyan);
--resource-bar-bg: rgba(98, 114, 164, 0.2);
--resource-bar-fg: var(--dracula-cyan);
--widget-border: var(--dracula-foreground);
--widget-border: rgba(139, 233, 253, 0.2);
/* SERVICES COLORS */
--service-group: var(--dracula-purple);
--service-name: var(--dracula-text);
--service-description: var(--dracula-purple);
--service-description: #a9b1d6;
--service-block-bg: #232530;
--service-block-bg: rgba(15, 16, 21, 0.7);
--service-block-text: var(--dracula-pink);
/* BOOKMARKS COLORS */
--bookmark-group: var(--dracula-purple);
--bookmark-icon-bg: #44475a60;
--bookmark-icon-bg: rgba(189, 147, 249, 0.15);
--bookmark-icon: var(--dracula-purple);
--bookmark-name: var(--dracula-text);
/* ALL CARD COLORS */
--card-color: #44475a46;
--card-color-hover: #44475a91;
/* FOOTER COLORS */
--footer-items: var(--dracula-pink);
/* ALL CARD COLORS (GLASSMORPHISM DEFAULT) */
--card-color: rgba(30, 32, 48, 0.55);
--card-color-hover: rgba(40, 44, 68, 0.8);
/* FOOTER COLORS */
--footer-items: var(--dracula-purple);
--scrollbar-fg: var(--dracula-purple);
--scrollbar-bg: var(--standard-bg);
/*Class color values */
.service-tags .dark\:bg-theme-900\/50 {
background-color: rgb(var(--color-900) / 0.3) !important;
}
/*******************************
* INFORMATION WIDGETS STYLES *
*******************************/
#information-widgets {
border-color: var(--widget-border);
}
#information-widgets * {
color: var(--info-widgets);
}
.resource-usage {
background-color: var(--resource-bar-bg);
}
.resource-usage > div {
background-color: var(--resource-bar-fg);
}
/*******************************
* SERVICES STYLES *
*******************************/
.service-group-icon > div {
background: var(--service-group) !important; /* group label ICON color */
}
.service-group-name {
color: var(--service-group); /* group label NAME color */
}
.services-group > button > svg {
color: var(--service-group); /* group label EXPAND/COLLAPSE ICON color */
}
.service-card {
background-color: var(--card-color);
}
.service-card:hover {
background-color: var(--card-color-hover);
}
.service-name.text-sm {
font-size: 0.95rem;
color: var(--service-name);
}
.service-description.text-xs {
font-size: 0.75rem;
color: var(--service-description);
}
.service img {
border-radius: 25%;
}
.service-block {
background: var(--service-block-bg);
}
.service-block .uppercase {
color: var(--service-block-text);
}
.service-block .font-thin {
color: var(--dracula-text);
}
/*******************************
* BOOKMARK STYLES *
*******************************/
.bookmark-group-name {
color: var(--bookmark-group);
}
.bookmark-icon {
background-color: var(--bookmark-icon-bg) !important;
}
.bookmark-icon > div > div {
background: var(
--bookmark-icon
) !important; /* If using si or md icons, make default purple */
}
.bookmark-name.text-xs {
font-size: 0.85rem;
color: var(--bookmark-name);
}
li.bookmark > a {
background-color: var(--card-color);
}
li.bookmark > a:hover {
background-color: var(--card-color-hover);
}
/*******************************
* CALENDAR STYLES *
*******************************/
#dracula-calendar .flex.justify-between.flex-wrap span {
color: var(--dracula-purple);
}
/*******************************
* FOOTER STYLES *
*******************************/
#footer svg {
color: var(--footer-items);
}
/*******************************
* SCROLLBAR STYLES *
*******************************/
* {
--scrollbar-thumb: var(--scrollbar-fg);
--scrollbar-track: var(--scrollbar-bg);
}
/*******************************
* GLANCES STYLES *
*******************************/
li[id^='glances-'] .recharts-surface > g:nth-of-type(1) path:nth-child(1) {
fill: var(--dracula-green);
fill-opacity: 0.15;
}
li[id^='glances-'] .recharts-surface g:nth-of-type(1) path:nth-child(2) {
stroke: var(--dracula-green);
stroke-opacity: 0.5;
}
li[id^='glances-'] .recharts-surface g:nth-of-type(2) path:nth-child(1) {
fill: var(--dracula-purple);
fill-opacity: 0.15;
}
li[id^='glances-'] .recharts-surface g:nth-of-type(2) path:nth-child(2) {
stroke: var(--dracula-purple);
stroke-opacity: 0.5;
}
li[id^='glances-'] .bottom-3.left-3 {
color: var(--dracula-pink);
}
li[id^='glances-'] .bottom-3.right-3 .opacity-75 {
color: var(--dracula-cyan);
opacity: 1;
font-size: 0.8rem;
}
li[id^='glances-'] .top-3.right-3 .opacity-50 {
color: var(--dracula-cyan);
opacity: 1;
font-size: 0.8rem;
}
li[id^='glances-'] .opacity-50 {
opacity: 0.8;
}
li[id^='glances-'] .flex.items-center.text-xs .text-right {
color: var(--dracula-cyan);
}
li[id^='glances-'] .flex.items-center .opacity-25.w-14.text-right {
color: var(--dracula-purple);
opacity: 0.85;
}
li[id^='glances-']
.bottom-4.right-3.left-3.z-20
.w-3.h-3.mr-1\.5.opacity-50
> div {
background: var(--dracula-green) !important;
opacity: 1;
}
li[id^='glances-'] .bottom-4.right-3.left-3.z-20 .opacity-75.grow {
color: var(--dracula-pink) !important;
opacity: 0.75;
}
/*******************************
* HOMEPAGE PRESETS *
*******************************/
.bg-amber-500 {
background-color: var(--dracula-orange);
}
.bg-black {
background-color: rgb(0 0 0);
}
.bg-blue-500 {
background-color: var(--dracula-cyan);
}
.bg-cyan-500 {
background-color: var(--dracula-cyan);
}
.bg-emerald-500 {
background-color: var(--dracula-green);
}
.bg-fuchsia-500 {
background-color: var(--dracula-pink);
}
.bg-gray-500 {
background-color: var(--dracula-foreground);
}
.bg-green-500 {
background-color: var(--dracula-green);
}
.bg-indigo-500 {
background-color: var(--dracula-purple);
}
.bg-lime-500 {
background-color: var(--dracula-green);
}
.bg-neutral-500 {
background-color: rgb(115 115 115);
}
.bg-orange-400 {
background-color: var(--dracula-orange);
}
.bg-orange-500 {
background-color: var(--dracula-orange);
}
.bg-pink-500 {
background-color: var(--dracula-pink);
}
.bg-purple-500 {
background-color: var(--dracula-purple);
}
.bg-red-500 {
background-color: var(--dracula-red);
}
.bg-rose-100 {
background-color: rgb(255, 205, 205);
}
.bg-rose-500 {
background-color: var(--dracula-red);
}
.bg-rose-900\/80 {
background-color: var(--dracula-red);
}
.bg-sky-500 {
background-color: var(--dracula-cyan);
}
.bg-slate-500 {
background-color: var(--dracula-slate);
}
.bg-stone-500 {
background-color: rgb(120 113 108);
}
.bg-teal-500 {
background-color: rgb(20 184 166);
}
.bg-violet-500 {
background-color: var(--dracula-purple);
}
.bg-white {
background-color: var(--dracula-text);
}
.bg-white\/50 {
background-color: hsla(0, 0%, 100%, 0.5);
}
.bg-yellow-500 {
background-color: var(--dracula-yellow);
}
.bg-zinc-500 {
background-color: rgb(113 113 122);
}
.text-amber-800 {
color: var(--dracula-orange);
}
.text-black {
color: rgb(0 0 0);
}
.text-black\/20 {
color: rgba(0, 0, 0, 0.2);
}
.text-blue-500\/80 {
color: rgba(139, 233, 253, 0.8);
}
.text-emerald-300 {
color: var(--dracula-green);
}
.text-emerald-500\/80 {
color: rgba(80, 250, 123, 0.8);
}
.text-gray-500 {
color: rgb(107 114 128);
}
.text-green-500 {
color: var(--dracula-green);
}
.text-orange-400\/50 {
color: rgba(255, 184, 108, 0.5);
}
.text-red-400 {
color: var(--dracula-red);
}
.text-red-500 {
color: var(--dracula-red);
}
.text-red-500\/40 {
color: rgba(255, 85, 85, 0.4);
}
.text-rose-300 {
color: var(--dracula-red);
}
.text-rose-500 {
color: var(--dracula-red);
}
.text-rose-500\/80 {
color: rgba(255, 85, 85, 0.8);
}
.text-rose-900 {
color: var(--dracula-red);
}
.text-white {
color: var(--dracula-text);
}
--scrollbar-bg: var(--dracula-background-dark);
}
/* ********************************************************************************************* */
/* CARD COLOURING - DONE VIA "ID:" TAGS IN SERVICES.YAML */
.service-card::before {
content: "";
opacity: 0.40;
position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 0;
/* ==========================================
* FUTURISTIC SCIFI HUD OVERLAY
* ========================================== */
body {
background-color: #0c0d12 !important;
position: relative;
overflow-x: hidden;
}
/* DARK */
#red .dark\:hover\:bg-white\/10:is(.dark *).service-card::before { background-color: #812020; }
#yellow .dark\:hover\:bg-white\/10:is(.dark *).service-card::before { background-color: #818120; }
#green .dark\:hover\:bg-white\/10:is(.dark *).service-card::before { background-color: #208120; }
#cyan .dark\:hover\:bg-white\/10:is(.dark *).service-card::before { background-color: #208181; }
#blue .dark\:hover\:bg-white\/10:is(.dark *).service-card::before { background-color: #202081; }
#purple .dark\:hover\:bg-white\/10:is(.dark *).service-card::before { background-color: #812081; }
#black .dark\:hover\:bg-white\/10:is(.dark *).service-card::before { background-color: #000000; }
#white .dark\:hover\:bg-white\/10:is(.dark *).service-card::before { background-color: #ffffff; }
/* LIGHT */
#red .hover\:bg-theme-300\/20.service-card::before { background-color: #ff0000; }
#yellow .hover\:bg-theme-300\/20.service-card::before { background-color: #ffff00; }
#green .hover\:bg-theme-300\/20.service-card::before { background-color: #00ff00; }
#cyan .hover\:bg-theme-300\/20.service-card::before { background-color: #00ffff; }
#blue .hover\:bg-theme-300\/20.service-card::before { background-color: #0000ff; }
#purple .hover\:bg-theme-300\/20.service-card::before { background-color: #ff00ff; }
#black .hover\:bg-theme-300\/20.service-card::before { background-color: #ffffff; }
#white .hover\:bg-theme-300\/20.service-card::before { background-color: #000000; }
#orange .hover\:bg-theme-300\/20.service-card::before { background-color: #ffa500; }
#pink .hover\:bg-theme-300\/20.service-card::before { background-color: #ffc0cb; }
#teal .hover\:bg-theme-300\/20.service-card::before { background-color: #008080; }
#magenta .hover\:bg-theme-300\/20.service-card::before { background-color: #ff00ff; }
#lime .hover\:bg-theme-300\/20.service-card::before { background-color: #00ff00; }
#navy .hover\:bg-theme-300\/20.service-card::before { background-color: #000080; }
#maroon .hover\:bg-theme-300\/20.service-card::before { background-color: #800000; }
#olive .hover\:bg-theme-300\/20.service-card::before { background-color: #808000; }
#silver .hover\:bg-theme-300\/20.service-card::before { background-color: #c0c0c0; }
#gray .hover\:bg-theme-300\/20.service-card::before { background-color: #808080; }
#gold .hover\:bg-theme-300\/20.service-card::before { background-color: #ffd700; }
#coral .hover\:bg-theme-300\/20.service-card::before { background-color: #ff7f50; }
#salmon .hover\:bg-theme-300\/20.service-card::before { background-color: #fa8072; }
#indigo .hover\:bg-theme-300\/20.service-card::before { background-color: #4b0082; }
#violet .hover\:bg-theme-300\/20.service-card::before { background-color: #ee82ee; }
#turquoise .hover\:bg-theme-300\/20.service-card::before { background-color: #40e0d0; }
#plum .hover\:bg-theme-300\/20.service-card::before { background-color: #dda0dd; }
#orchid .hover\:bg-theme-300\/20.service-card::before { background-color: #da70d6; }
#tan .hover\:bg-theme-300\/20.service-card::before { background-color: #d2b48c; }
#beige .hover\:bg-theme-300\/20.service-card::before { background-color: #f5f5dc; }
#mint .hover\:bg-theme-300\/20.service-card::before { background-color: #98ff98; }
#lavender .hover\:bg-theme-300\/20.service-card::before { background-color: #e6e6fa; }
#chocolate .hover\:bg-theme-300\/20.service-card::before { background-color: #d2691e; }
#crimson .hover\:bg-theme-300\/20.service-card::before { background-color: #dc143c; }
#khaki .hover\:bg-theme-300\/20.service-card::before { background-color: #f0e68c; }
#aqua .hover\:bg-theme-300\/20.service-card::before { background-color: #00ffff; }
#azure .hover\:bg-theme-300\/20.service-card::before { background-color: #f0ffff; }
#bisque .hover\:bg-theme-300\/20.service-card::before { background-color: #ffe4c4; }
#bronze .hover\:bg-theme-300\/20.service-card::before { background-color: #cd7f32; }
#charcoal .hover\:bg-theme-300\/20.service-card::before { background-color: #36454f; }
#emerald .hover\:bg-theme-300\/20.service-card::before { background-color: #50c878; }
#ivory .hover\:bg-theme-300\/20.service-card::before { background-color: #fffff0; }
#jade .hover\:bg-theme-300\/20.service-card::before { background-color: #00a86b; }
#peach .hover\:bg-theme-300\/20.service-card::before { background-color: #ffe5b4; }
#rose .hover\:bg-theme-300\/20.service-card::before { background-color: #ff007f; }
#ruby .hover\:bg-theme-300\/20.service-card::before { background-color: #e0115f; }
#sapphire .hover\:bg-theme-300\/20.service-card::before { background-color: #0f52ba; }
#sepia .hover\:bg-theme-300\/20.service-card::before { background-color: #704214; }
#steel .hover\:bg-theme-300\/20.service-card::before { background-color: #4682b4; }
#amber .hover\:bg-theme-300\/20.service-card::before { background-color: #ffbf00; }
#cerulean .hover\:bg-theme-300\/20.service-card::before { background-color: #007ba7; }
#periwinkle .hover\:bg-theme-300\/20.service-card::before { background-color: #ccccff; }
#scarlet .hover\:bg-theme-300\/20.service-card::before { background-color: #ff2400; }
#slate .hover\:bg-theme-300\/20.service-card::before { background-color: #708090; }
body::before {
content: "";
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background:
linear-gradient(rgba(12, 13, 18, 0.75), rgba(12, 13, 18, 0.85)),
linear-gradient(90deg, rgba(139, 233, 253, 0.02) 1px, transparent 1px),
linear-gradient(rgba(139, 233, 253, 0.02) 1px, transparent 1px);
background-size: 100% 100%, 50px 50px, 50px 50px;
pointer-events: none;
z-index: -1;
animation: gridPan 120s linear infinite;
}
/* Add a neon scanline effect */
body::after {
content: "";
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
background-size: 100% 4px, 6px 100%;
pointer-events: none;
z-index: 9999;
opacity: 0.15;
}
@keyframes gridPan {
from { background-position: 0 0, 0 0, 0 0; }
to { background-position: 0 0, 1000px 1000px, 1000px 1000px; }
}
/* ==========================================
* TYPOGRAPHY & TITLE STYLES
* ========================================== */
.service-group-name, .bookmark-group-name, #widgets-title {
font-family: 'Orbitron', sans-serif !important;
font-weight: 700 !important;
letter-spacing: 0.15em !important;
text-transform: uppercase !important;
text-shadow: 0 0 10px rgba(189, 147, 249, 0.6) !important;
color: var(--dracula-purple) !important;
}
.service-name {
font-family: 'Rajdhani', sans-serif !important;
font-weight: 700 !important;
font-size: 1.15rem !important;
letter-spacing: 0.03em !important;
color: var(--dracula-text) !important;
}
.service-description {
font-family: 'Poppins', sans-serif !important;
font-size: 0.8rem !important;
color: #a9b1d6 !important;
}
/* ==========================================
* GLASSMORPHISM CARDS & ANIMATIONS
* ========================================== */
.service-card, li.bookmark > a, #information-widgets, #dracula-calendar {
background: var(--card-color) !important;
backdrop-filter: blur(14px) !important;
-webkit-backdrop-filter: blur(14px) !important;
border: 1px solid rgba(255, 255, 255, 0.06) !important;
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4) !important;
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
position: relative;
overflow: hidden;
}
/* Hover base styling */
.service-card:hover, li.bookmark > a:hover {
transform: translateY(-4px) scale(1.02);
background: var(--card-color-hover) !important;
border-color: rgba(139, 233, 253, 0.4) !important;
box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.6), 0 0 15px rgba(139, 233, 253, 0.2) !important;
}
/* Subtle corner tech border lines for hover */
.service-card::after {
content: "";
position: absolute;
top: 0; left: 0; width: 4px; height: 4px;
border-top: 2px solid transparent;
border-left: 2px solid transparent;
transition: all 0.3s;
}
.service-card:hover::after {
border-top-color: var(--dracula-cyan);
border-left-color: var(--dracula-cyan);
width: 15px; height: 15px;
}
/* Service Images */
.service img {
border-radius: 20%;
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 2px;
background: rgba(0, 0, 0, 0.2);
transition: all 0.4s;
}
.service-card:hover img {
transform: rotate(5deg) scale(1.05);
border-color: rgba(139, 233, 253, 0.4);
}
/* ==========================================
* PULSING STATUS / ONLINE DOTS
* ========================================== */
.bg-green-500, .bg-emerald-500, .text-green-500, .text-emerald-500 {
position: relative;
background-color: var(--dracula-green) !important;
box-shadow: 0 0 10px var(--dracula-green) !important;
}
/* Create glowing animation rings */
.bg-green-500::after, .bg-emerald-500::after {
content: "";
position: absolute;
top: -2px; left: -2px; right: -2px; bottom: -2px;
border-radius: 50%;
border: 1.5px solid var(--dracula-green);
animation: statusPulse 2s infinite ease-out;
opacity: 0;
pointer-events: none;
}
@keyframes statusPulse {
0% { transform: scale(1); opacity: 0.8; }
100% { transform: scale(2.4); opacity: 0; }
}
.bg-red-500, .text-red-500 {
position: relative;
background-color: var(--dracula-red) !important;
box-shadow: 0 0 10px var(--dracula-red) !important;
}
.bg-red-500::after {
content: "";
position: absolute;
top: -2px; left: -2px; right: -2px; bottom: -2px;
border-radius: 50%;
border: 1.5px solid var(--dracula-red);
animation: statusPulse 2s infinite ease-out;
opacity: 0;
pointer-events: none;
}
/* ==========================================
* WIDGET & SCROLLBAR CUSTOMS
* ========================================== */
#information-widgets {
border-color: var(--widget-border) !important;
margin-bottom: 2rem;
}
#information-widgets * {
font-family: 'Rajdhani', sans-serif !important;
font-weight: 600;
color: var(--info-widgets) !important;
}
.resource-usage {
background-color: var(--resource-bar-bg) !important;
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 4px;
height: 8px !important;
overflow: hidden;
}
.resource-usage > div {
background: linear-gradient(90deg, var(--dracula-cyan), var(--dracula-purple)) !important;
box-shadow: 0 0 8px rgba(139, 233, 253, 0.6);
height: 100%;
}
.service-block {
background: var(--service-block-bg) !important;
border-radius: 6px;
border: 1px solid rgba(255, 255, 255, 0.05) !important;
}
.service-block .uppercase {
color: var(--service-block-text) !important;
font-family: 'Orbitron', sans-serif;
font-size: 0.7rem;
letter-spacing: 0.08em;
}
.service-block .font-thin {
color: var(--dracula-text) !important;
font-family: 'Fira Code', monospace;
}
/* Bookmarks styling */
.bookmark-icon {
background-color: var(--bookmark-icon-bg) !important;
border: 1px solid rgba(189, 147, 249, 0.2);
}
.bookmark-icon > div > div {
background: var(--bookmark-icon) !important;
}
.bookmark-name {
font-family: 'Poppins', sans-serif !important;
font-weight: 500;
}
/* Calendar widget tweaks */
#dracula-calendar .flex.justify-between.flex-wrap span {
color: var(--dracula-purple) !important;
font-family: 'Rajdhani', sans-serif;
font-weight: 700;
}
#footer svg {
color: var(--footer-items) !important;
filter: drop-shadow(0 0 5px rgba(189, 147, 249, 0.5));
}
* {
--scrollbar-thumb: var(--scrollbar-fg);
--scrollbar-track: var(--scrollbar-bg);
}
/* Custom styling for the search input widget */
#search-input, .search-container input {
background: rgba(15, 23, 42, 0.6) !important;
border: 1px solid rgba(56, 189, 248, 0.3) !important;
color: #e2e8f0 !important;
font-family: 'Courier New', Courier, monospace !important;
border-radius: 8px !important;
backdrop-filter: blur(8px) !important;
}
#search-input:focus, .search-container input:focus {
border-color: rgba(56, 189, 248, 0.8) !important;
box-shadow: 0 0 15px rgba(56, 189, 248, 0.4) !important;
outline: none !important;
}
/* ==========================================
* CUSTOM COLOR INTEGRATION BY ID
* ========================================== */
/* Setup distinct neon glow values on hover for individual service IDs */
#blue:hover .service-card { border-color: #6272a4 !important; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4), 0 0 20px rgba(98, 114, 164, 0.45) !important; }
#yellow:hover .service-card { border-color: #f1fa8c !important; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4), 0 0 20px rgba(241, 250, 140, 0.45) !important; }
#red:hover .service-card { border-color: #ff5555 !important; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 85, 85, 0.45) !important; }
#cyan:hover .service-card { border-color: #8be9fd !important; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4), 0 0 20px rgba(139, 233, 253, 0.45) !important; }
#purple:hover .service-card { border-color: #bd93f9 !important; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4), 0 0 20px rgba(189, 147, 249, 0.45) !important; }
#white:hover .service-card { border-color: #f8f8f2 !important; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4), 0 0 20px rgba(248, 248, 242, 0.45) !important; }
#gold:hover .service-card { border-color: #ffd700 !important; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 215, 0, 0.45) !important; }
#green:hover .service-card { border-color: #50fa7b !important; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4), 0 0 20px rgba(80, 250, 123, 0.45) !important; }
#lime:hover .service-card { border-color: #a3e635 !important; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4), 0 0 20px rgba(163, 230, 53, 0.45) !important; }
#cobalt:hover .service-card { border-color: #3b82f6 !important; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4), 0 0 20px rgba(59, 130, 246, 0.45) !important; }
#gray:hover .service-card { border-color: #9ca3af !important; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4), 0 0 20px rgba(156, 163, 175, 0.45) !important; }
#crimson:hover .service-card { border-color: #dc143c !important; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4), 0 0 20px rgba(220, 20, 60, 0.45) !important; }
#lavender:hover .service-card { border-color: #e6e6fa !important; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4), 0 0 20px rgba(230, 230, 250, 0.45) !important; }
#teal:hover .service-card { border-color: #008080 !important; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 128, 128, 0.45) !important; }
#violet:hover .service-card { border-color: #7c3aed !important; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4), 0 0 20px rgba(124, 58, 237, 0.45) !important; }
#aqua:hover .service-card { border-color: #00ffff !important; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 255, 255, 0.45) !important; }
#navy:hover .service-card { border-color: #000080 !important; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 0, 128, 0.45) !important; }
#beige:hover .service-card { border-color: #f5f5dc !important; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4), 0 0 20px rgba(245, 245, 220, 0.45) !important; }
#slate:hover .service-card { border-color: #708090 !important; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4), 0 0 20px rgba(112, 128, 144, 0.45) !important; }
#burgundy:hover .service-card { border-color: #800020 !important; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4), 0 0 20px rgba(128, 0, 32, 0.45) !important; }
#emerald:hover .service-card { border-color: #50c878 !important; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4), 0 0 20px rgba(80, 200, 120, 0.45) !important; }
#salmon:hover .service-card { border-color: #fa8072 !important; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4), 0 0 20px rgba(250, 128, 114, 0.45) !important; }
#jade:hover .service-card { border-color: #00a86b !important; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 168, 107, 0.45) !important; }
#indigo:hover .service-card { border-color: #4b0082 !important; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4), 0 0 20px rgba(75, 0, 130, 0.45) !important; }
#charcoal:hover .service-card { border-color: #36454f !important; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4), 0 0 20px rgba(54, 69, 79, 0.45) !important; }
#cerulean:hover .service-card { border-color: #007ba7 !important; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 123, 167, 0.45) !important; }
#rose:hover .service-card { border-color: #ff007f !important; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 0, 127, 0.45) !important; }
#coral:hover .service-card { border-color: #ff7f50 !important; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 127, 80, 0.45) !important; }
/* Keep active indicators styled cleanly inside the cards */
#blue:hover .service-card::after { border-top-color: #6272a4; border-left-color: #6272a4; }
#yellow:hover .service-card::after { border-top-color: #f1fa8c; border-left-color: #f1fa8c; }
#red:hover .service-card::after { border-top-color: #ff5555; border-left-color: #ff5555; }
#cyan:hover .service-card::after { border-top-color: #8be9fd; border-left-color: #8be9fd; }
#purple:hover .service-card::after { border-top-color: #bd93f9; border-left-color: #bd93f9; }
#white:hover .service-card::after { border-top-color: #f8f8f2; border-left-color: #f8f8f2; }
#gold:hover .service-card::after { border-top-color: #ffd700; border-left-color: #ffd700; }
#green:hover .service-card::after { border-top-color: #50fa7b; border-left-color: #50fa7b; }
#lime:hover .service-card::after { border-top-color: #a3e635; border-left-color: #a3e635; }
#cobalt:hover .service-card::after { border-top-color: #3b82f6; border-left-color: #3b82f6; }
#gray:hover .service-card::after { border-top-color: #9ca3af; border-left-color: #9ca3af; }
#crimson:hover .service-card::after { border-top-color: #dc143c; border-left-color: #dc143c; }
#lavender:hover .service-card::after { border-top-color: #e6e6fa; border-left-color: #e6e6fa; }
#teal:hover .service-card::after { border-top-color: #008080; border-left-color: #008080; }
#violet:hover .service-card::after { border-top-color: #7c3aed; border-left-color: #7c3aed; }
#aqua:hover .service-card::after { border-top-color: #00ffff; border-left-color: #00ffff; }
#navy:hover .service-card::after { border-top-color: #000080; border-left-color: #000080; }
#beige:hover .service-card::after { border-top-color: #f5f5dc; border-left-color: #f5f5dc; }
#slate:hover .service-card::after { border-top-color: #708090; border-left-color: #708090; }
#burgundy:hover .service-card::after { border-top-color: #800020; border-left-color: #800020; }
#emerald:hover .service-card::after { border-top-color: #50c878; border-left-color: #50c878; }
#salmon:hover .service-card::after { border-top-color: #fa8072; border-left-color: #fa8072; }
#jade:hover .service-card::after { border-top-color: #00a86b; border-left-color: #00a86b; }
#indigo:hover .service-card::after { border-top-color: #4b0082; border-left-color: #4b0082; }
#charcoal:hover .service-card::after { border-top-color: #36454f; border-left-color: #36454f; }
#cerulean:hover .service-card::after { border-top-color: #007ba7; border-left-color: #007ba7; }
#rose:hover .service-card::after { border-top-color: #ff007f; border-left-color: #ff007f; }
#coral:hover .service-card::after { border-top-color: #ff7f50; border-left-color: #ff7f50; }
Docker-Compose/Homepage/config/custom.js
BIN
View File
Binary file not shown.
Docker-Compose/Homepage/config/custom.css.old → Docker-Compose/Homepage/config/logs/test.txt
View File
Docker-Compose/Homepage/config/services.yaml
+127 -99
View File
@@ -1,7 +1,7 @@
---
######################################### HOME TAB SERVICES ######################################################################
- Infrastructure:
- Proxmox 1:
- Proxmox 1: # Main Virt Server
id: blue
tab: Home
href: https://192.168.2.1:8006
@@ -37,30 +37,36 @@
description: Authentik SSO
widget:
type: authentik
url: https://192.168.2.3:9543
url: https://192.168.2.6:9543
key: NW5ldUK8qDRY91ny67dE6ckWCMXThF9nwj6EZw7pKbS5FzXx5wouAo4sC19n
version: 2
- Dockhand:
id: cyan
tab: Home
href: http://192.168.2.3:3200
href: http://192.168.2.6:3200
icon: dockhand.png
description: Dockhand
widget:
type: dockhand
url: http://192.168.2.3:3200
url: http://192.168.2.6:3200
username: mmcfetridge
password: "!Sucyetat123"
fields: ["running", "total", "pending_updates", "paused"]
- Applications:
- OwnCloud:
id: purple
- Mailcow:
id: cyan
tab: Home
icon: owncloud.png
href: https://owncloud.mcfetridge.us
description: File Sync & Share
href: https://216.144.227.142/admin
icon: mailcow.png
description: mailcow
widget:
type: mailcow
url: https://mail.mmcfetridge.net
key: 2C3DAF-9DA97F-22FF12-851295-2A7E37
############################################## APPS TAB Services ###########################################################
- Applications:
- Immich:
id: white
tab: Home
@@ -69,49 +75,61 @@
description: Photos Server
widget:
type: immich
url: http://192.168.2.3:2283
url: http://192.168.2.6:2283
key: "MLbcal27A67J6FZV1PIb3AdMsRf8xZC1uruOLB7js"
fields: ["users", "photos", "storage"]
version: 2
- Trilium:
id: gold
tab: Home
href: http://192.168.2.3:8180
icon: trilium.png
description: Trilium Server
widget:
type: trilium
url: http://192.168.2.3:8180
key: "Z0qLO33tMHgy_c0nq/pZAJMR/8Em5xrwOEJ6EfiyNEWkMurMSnRdVdtM="
- Forgejo:
id: green
tab: Home
href: https://forgejo.mikemcfetridge.com
icon: forgejo.png
description: Forgejo Git & CICD
- MySpeed:
id: lime
tab: Home
icon: myspeed.png
href: http://192.168.2.3:5216
href: http://192.168.2.13:5216
widget:
type: myspeed
url: http://192.168.2.3:5216
url: http://192.168.2.13:5216
password: "!Sucyetat123" # only required if password is set
- mealie:
id: cobalt
tab: Home
icon: mealie.png
href: http://192.168.2.7:9000/
href: http://192.168.2.13:9200/
widget:
type: mealie
url: http://192.168.2.7:9000
key: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJsb25nX3Rva2VuIjp0cnVlLCJpZCI6IjVlYzIwNTk2LTEyY2QtNDFkMS05MTc5LWUzOWFkYjk3OWE2MyIsIm5hbWUiOiJob21lcGFnZSIsImludGVncmF0aW9uX2lkIjoiZ2VuZXJpYyIsImV4cCI6MTkzNjU0MzE3N30.C1PWK51JOpmzHwR9zmlvVShWC7sasKv0aO6PS47LQqo
url: http://192.168.2.13:9200
key: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJsb25nX3Rva2VuIjp0cnVlLCJpZCI6IjMxNWM4ZmNjLWI1Y2ItNDMyMy1hNDNmLTIyNjAwYjU2ZTJlOSIsIm5hbWUiOiJob21lcGFnZSIsImludGVncmF0aW9uX2lkIjoiZ2VuZXJpYyIsImV4cCI6MTk0MjI2NjU4NH0.iPE6newlQ3PVqdbgDCDdsAqZrwZ6glROWI1kvq5zb_I
version: 2 # only required if version > 1, defaults to 1
- Nextcloud:
id: gold
tab: Home
href: https://next.mcfetridge.us
icon: nextcloud.png
description: Nextcloud Server
widget:
type: nextcloud
url: https://next.mcfetridge.us
username: mmcfetridge
password: "!Sucyetat123"
- MyGitea:
id: navy
tab: Home
icon: gitea.png
href: https://gitea.mikemcfetridge.com/
widget:
type: gitea
url: https://gitea.mikemcfetridge.com/
key: 6cac00dd2f58fcc1bcdeae858f896b1995a19fd9
- BookStack:
id: slate
tab: Home
icon: bookstack.png
href: https://book.mikemcfetridge.com/
############################################## MEDIA TAB Services ###########################################################
- Media downloader:
- Calendar:
@@ -131,39 +149,51 @@
service_group: Media downloader
service_name: Radarr
- Gluetun:
id: jade
tab: System
href: http://192.168.2.8:8000
icon: gluetun.png
description: Media VPN Server
widget:
type: gluetun
url: http://192.168.2.8:8000
fields: ["public_ip", "region", "country"]
version: 2 # optional, default is 1
- Sonarr:
id: crimson
tab: Media
href: http://192.168.2.16:8989
href: http://192.168.2.8:8989
icon: sonarr.png
description: TV Show Service
widget:
type: sonarr
url: http://192.168.2.16:8989
key: 8746f486831545e3b6c9014657ac9c11
url: http://192.168.2.8:8989
key: b4227fd07fd046f094d620b88d92e494
fields: ["wanted", "queued", "series"]
- Radarr:
id: lavender
tab: Media
href: http://192.168.2.16:7878
href: http://192.168.2.8:7878
icon: radarr.png
description: Movie Service
widget:
type: radarr
url: http://192.168.2.16:7878
key: ee95503f6fca4cf7b9c8c3f3fc45df39
url: http://192.168.2.8:7878
key: 9b0e1202f7b94907ba92a1ea23304fa4
fields: ["wanted", "missing", "queued", "movies"]
- Qbittorrent:
id: teal
tab: Media
href: http://192.168.2.16:8118
href: http://192.168.2.8:8080
icon: qbittorrent.png
description: Download Client
widget:
type: qbittorrent
url: http://192.168.2.16:8118
url: http://192.168.2.8:8080
username: admin
password: "!Sucyetat123"
@@ -171,36 +201,36 @@
- Jellyfin:
id: violet
tab: Media
href: http://192.168.2.16:8096
href: http://192.168.2.8:8096
icon: jellyfin.png
description: Movies & TV Shows
widget:
type: jellyfin
url: http://192.168.2.16:8096
key: 617cc65c15da4b3eaac10568c25a8c36
url: http://192.168.2.8:8096
key: ffe8e2b31fd24464ac779121e920ac25
enableBlocks: true
enableNowPlaying: true
- Jellyseerr:
id: aqua
tab: Media
href: http://192.168.2.16:5055
href: http://192.168.2.8:5055
icon: jellyseerr.png
description: Movie/show Database
widget:
type: jellyseerr
url: http://192.168.2.16:5055
key: MTc1NDI2NTczOTQyMDA2ODRjOWY0LWJmZmEtNGE1OC05MzM2LTAwMDM4OWRmYmQ3Yg==
url: http://192.168.2.8:5055
key: MTc4MzM0NDc0OTI1OWY1YzJkYWJkLTA0OWEtNDY0NS05ZTMwLTI3NjFkZjYxNjdhZQ==
fields: ["pending", "approved", "available"]
- Navidrome:
id: navy
tab: Media
icon: navidrome.png
href: http://192.168.2.16:4533
href: http://192.168.2.8:4533
widget:
type: navidrome
url: http://192.168.2.16:4533
url: http://192.168.2.8:4533
user: mmcfetridge
token: 05dee16046666bb05d98291b9c6e39d3
salt: 50c05a
@@ -208,51 +238,26 @@
- AudioBookShelf:
id: beige
tab: Media
href: http://192.168.2.16:13378
href: http://192.168.2.8:13378
icon: audiobookshelf.png
description: Index Server
widget:
type: audiobookshelf
url: http://192.168.2.16:13378
key: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiI4MDQ5Y2U4Mi0xZjlmLTRiYTEtOWY3Zi03N2U4YmRiYjg0OGEiLCJ1c2VybmFtZSI6Im1tY2ZldHJpZGdlIiwiaWF0IjoxNzQ4MTk4NzUyfQ.Tey3wxo61euuJEwc2ziE_PukdOUz7pNZKG8SmOdWB-c"
url: http://192.168.2.8:13378
key: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJrZXlJZCI6IjU1MzViZDFiLTI3NGUtNGNjOC1iMWZkLTNiZWFiNjg0NDQ1YiIsIm5hbWUiOiJob21lcGFnZSIsInR5cGUiOiJhcGkiLCJpYXQiOjE3ODM0NjE1NjJ9.BYvicD24tA3lEx_ktwmf6Igme6dpLj1SUrc0Y9ISBMs"
fields: ["podcasts", "books"]
##################################### Network & System TAB Services ##############################################################
- Network:
- Pi-hole:
id: slate
tab: Network
href: http://192.168.2.8/admin/login
icon: pi-hole.png
widget:
type: pihole
url: http://192.168.2.8
version: 6
key: "!Sucyetat123"
fields: ["queries", "blocked", "blocked_percent", "gravity"]
- Technitium:
id: burgundy
tab: Network
href: http://192.168.2.9:5380
icon: technitium.png
description: Technitium DNS Server
widget:
type: technitium
url: http://192.168.2.9:5380
key: 03348d06cd472fbd091d8232b1c13321ff70a8628dad7b0c23dd4512a18fb34b
range: LastDay
fields: ["totalQueries", "totalAuthoritative", "totalCached", "totalServerFailure"]
- Proxy Manager:
- Nginx Proxy Manager:
id: emerald
tab: Network
href: http://192.168.2.3:81
href: http://192.168.2.12:81
icon: nginx-proxy-manager.png
description: Nginx Proxy Manager
widget:
type: npm
url: http://192.168.2.3:81
url: http://192.168.2.12:81
username: mmcfetridg@aol.com
password: "!Sucyetat123"
fields: ["enabled", "disabled", "total"]
@@ -261,25 +266,17 @@
id: salmon
tab: Network
icon: pangolin.png
href: https://pangolin.mmcfetridge.net
href: https://app.pangolin.net
description: External network
widget:
type: pangolin
url: https://api.mmcfetridge.net/v1
key: "2o4g9gak61mig2i.5s5yxu4o2ek7haepzumar2ldl4mmzqpbrcfnpqdf"
org: homelab
url: https://api.pangolin.net
key: "w3f8ong2hz7a3da.dappsg2veyo36my5ibsmrmnzd2c2626lyrok7inn"
org: org_lsxd0ocafwikxgs
fields: ["sites", "resources", "targets"]
######################################## System TAB Services ######################################################################
- Systems:
- Gluetun:
id: jade
tab: System
href: http://192.168.2.16:8000
icon: gluetun.png
description: Media VPN Server
widget:
type: gluetun
url: http://192.168.2.16:8000
fields: ["public_ip", "region", "country"]
- Public IP:
icon: mdi-web
@@ -294,6 +291,37 @@
label: WAN IP
format: text
- Technitium:
id: burgundy
tab: Network
href: http://192.168.2.3:5380
icon: technitium.png
description: Technitium DNS Server
widget:
type: technitium
url: http://192.168.2.3:5380
key: 03348d06cd472fbd091d8232b1c13321ff70a8628dad7b0c23dd4512a18fb34b
range: LastDay
fields: ["totalQueries", "totalAuthoritative", "totalCached", "totalServerFailure"]
- PatchMon:
id: cyan
tab: Network
href: https://patch.mikemcfetridge.com
description: PatchMon Statistics
icon: https://patch.mikemcfetridge.com/assets/logo_square_default.svg
widget:
type: customapi
url: https://patch.mikemcfetridge.com/api/v1/gethomepage/stats
headers:
Authorization: Basic cGF0Y2htb25fYWVfNTIxMmM5ZDg4M2E1NzA0NGIzZmJhZDdhMzQyYjVlODg6MTI0YzlhYzQ3ZTBlM2EzYWZiMTdjOTE5MWExYzU5M2YxOGJhNDdkYWQ0NjBjZmU2MDJmZDQ5MzE2ZDM0MTQ1Ng==
mappings:
- field: total_hosts
label: Total Hosts
- field: hosts_needing_updates
label: Needs Updates
- field: security_updates
label: Security Updates
############################################## Bookmark TAB Services #############################################################
- Bookmarks:
@@ -313,7 +341,7 @@
description: Web Bookmarker
widget:
type: linkwarden
url: http://192.168.2.12:3000
url: http://192.168.2.10:3000
key: "eyJhbGciOiJkaXIiLCJlbmMiOiJBMjU2R0NNIn0..ZLJgig_ol-n3i1tv.vhWCnMSHVd81bdidL85-imXKpxGC0U3mHlvmkQyIJqJvcFRRJVBAasw9C0cmfSXVPq08HT-B-3zUAmftnPRymPHMJCkfo8pv_XBbEPneIFH-n59_dg26.qcXSK2REP3M_Vdgp0aOqcA"
fields: ["links", "collections"]
@@ -321,14 +349,14 @@
id: cerulean
tab: Bookmarks
icon: semaphore.png
href: http://192.168.2.11:3000
href: http://192.168.2.13:3020
description: CI/CD Automation
- Wg-Easy:
id: rose
tab: Bookmarks
icon: wireguard.png
href: http://192.168.2.3:10086
href: http://192.168.2.13:10086
description: Wireguard VPN
- YouTube:
@@ -338,4 +366,4 @@
href: https://youtube.com/
description: Video Platform
#
Docker-Compose/Homepage/config/widgets.yaml
+5 -5
View File
@@ -34,9 +34,9 @@
hour12: true
timeZone: 'America/New_York'
# /config/widgets.yaml
- search:
provider: custom
url: http://localhost:8080/search?q=
focus: true
target: _blank
showSearchSuggestions: true
provider: google # google, duckduckgo, bing, baidu, brave or custom
focus: true # Optional, will set focus to the search bar on page load
showSearchSuggestions: true # Optional, will show search suggestions. Defaults to false
target: _blank # One of _self, _blank, _parent or _top