updated files
This commit is contained in:
Mike McFetridge
@@ -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; }
|
||||
Reference in New Issue
Block a user