165 lines
15 KiB
CSS
165 lines
15 KiB
CSS
/* Minimal, responsive grid layout */
|
|
:root{
|
|
/* Default theme colors - can be overridden by theme system */
|
|
--color-primary: #1a1a2e;
|
|
--color-secondary: #16213e;
|
|
--color-accent: #0f3460;
|
|
--color-text: #e4e4e4;
|
|
--color-text-muted: #a0a0a0;
|
|
--color-border: #2a2a3e;
|
|
--color-card-bg: rgba(30, 30, 46, 0.7);
|
|
--color-header-bg: rgba(26, 26, 46, 0.85);
|
|
--color-overlay-bg: rgba(60, 60, 60, 0.35);
|
|
|
|
/* Legacy variables for compatibility */
|
|
--bg: var(--color-primary);
|
|
--card: var(--color-card-bg);
|
|
--accent: #4f46e5;
|
|
--muted: var(--color-text-muted);
|
|
color-scheme: dark;
|
|
}
|
|
*{box-sizing:border-box}
|
|
html,body{height:100%;margin:0;font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;background:#001a2d;color:#e6eef8;overflow-x:hidden}
|
|
#galaxy-canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0}
|
|
#background-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(60,60,60,0.35);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:1;pointer-events:none}
|
|
header,main,footer{position:relative;z-index:10}
|
|
header{padding:24px 20px;text-align:center}
|
|
header h1{margin:0;font-size:28px}
|
|
.subtitle{color:var(--muted);margin-top:6px}
|
|
.search-container{margin-top:16px;max-width:400px;margin-left:auto;margin-right:auto;position:relative}
|
|
#search-input{width:100%;padding:10px 50px 10px 16px;border-radius:8px;border:1px solid rgba(255,255,255,0.15);background:rgba(0,15,30,0.8);color:#e6eef8;font-size:14px;outline:none;transition:all .3s ease;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
|
|
#search-input::placeholder{color:var(--muted)}
|
|
#search-input:focus{border-color:rgba(79,70,229,0.5);box-shadow:0 0 0 3px rgba(79,70,229,0.2);background:rgba(0,15,30,0.9)}
|
|
#ddg-search-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:none;background:rgba(79,70,229,0.3);border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.3s ease;padding:6px;backdrop-filter:blur(5px)}
|
|
#ddg-search-btn svg{width:20px;height:20px;color:#e6eef8}
|
|
#ddg-search-btn:hover{background:rgba(79,70,229,0.6);transform:translateY(-50%) scale(1.05)}
|
|
#ddg-search-btn:active{transform:translateY(-50%) scale(0.95)}
|
|
main{max-width:1100px;margin:18px auto;padding:12px}
|
|
.service-group{margin-bottom:32px}
|
|
.group-header{font-size:18px;font-weight:600;color:#e6eef8;margin:0 0 12px 0;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,0.1);position:relative}
|
|
.group-header::before{content:'';position:absolute;bottom:-1px;left:0;width:60px;height:2px;background:linear-gradient(90deg,rgba(79,70,229,0.8),rgba(139,92,246,0.5));border-radius:2px}
|
|
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
|
|
.card{display:flex;align-items:center;justify-content:center;padding:18px;border-radius:10px;background:linear-gradient(135deg, rgba(10,37,64,0.85), rgba(15,50,85,0.85), rgba(20,45,75,0.85));text-decoration:none;color:inherit;border:1px solid rgba(255,255,255,0.2);font-weight:600;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;position:relative;overflow:hidden;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px)}
|
|
.card::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent 30%,rgba(255,255,255,0.08) 50%,transparent 70%);transform:rotate(45deg);animation:shimmer 8s infinite linear;pointer-events:none}
|
|
@keyframes shimmer{0%{left:-100%}100%{left:100%}}
|
|
.card:hover::before{animation-duration:3s}
|
|
.card::after{content:'';position:absolute;inset:0;border-radius:10px;padding:1px;background:linear-gradient(135deg,rgba(79,70,229,0.5),rgba(139,92,246,0.3),rgba(236,72,153,0.5));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;pointer-events:none;opacity:0;transition:opacity .3s ease}
|
|
.card:hover{transform:translateY(-6px);box-shadow:0 10px 40px rgba(79,70,229,0.4),0 0 20px rgba(139,92,246,0.3);border-color:rgba(139,92,246,0.5)}
|
|
.card:hover::after{opacity:1}
|
|
.card.selected{transform:translateY(-4px);box-shadow:0 8px 30px rgba(79,70,229,0.5),0 0 15px rgba(139,92,246,0.4);border-color:rgba(139,92,246,0.7);outline:2px solid rgba(79,70,229,0.6);outline-offset:2px}
|
|
.card .logo,.service-card .logo{width:36px;height:36px;margin-right:12px;flex:0 0 36px;filter:brightness(0) invert(1)}
|
|
.card .label,.service-card .label{flex:1;text-align:left}
|
|
.status-dot{position:absolute;top:6px;right:6px;width:10px;height:10px;border-radius:50%;border:2px solid rgba(255,255,255,0.3);animation:pulse 2s infinite}
|
|
.status-dot.status-online{background:#10b981;box-shadow:0 0 8px rgba(16,185,129,0.6)}
|
|
.status-dot.status-offline{background:#ef4444;box-shadow:0 0 8px rgba(239,68,68,0.6);animation:none}
|
|
.status-dot.status-maintenance{background:#f59e0b;box-shadow:0 0 8px rgba(245,158,11,0.6)}
|
|
.status-dot.status-checking{background:#6b7280;box-shadow:0 0 8px rgba(107,114,128,0.6);animation:spin 1s linear infinite}
|
|
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.6}}
|
|
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
|
|
.info-btn{position:absolute;bottom:6px;right:6px;width:20px;height:20px;border-radius:50%;background:rgba(79,70,229,0.3);border:1px solid rgba(255,255,255,0.3);color:#fff;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;padding:0;line-height:1;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
|
|
.info-btn:hover{background:rgba(79,70,229,0.6);border-color:rgba(255,255,255,0.6);transform:scale(1.1)}
|
|
.notes{margin-top:18px;background:rgba(255,255,255,0.02);padding:12px;border-radius:8px;color:var(--muted)}
|
|
#readme-content{max-width:100%;overflow-x:auto}
|
|
#readme-content h1{font-size:24px;margin-top:0;margin-bottom:12px;color:#e6eef8}
|
|
#readme-content h2{font-size:20px;margin-top:24px;margin-bottom:10px;color:#e6eef8;border-bottom:1px solid rgba(255,255,255,0.1);padding-bottom:6px}
|
|
#readme-content h3{font-size:18px;margin-top:18px;margin-bottom:8px;color:#e6eef8}
|
|
#readme-content p{margin:10px 0;line-height:1.6}
|
|
#readme-content ul,#readme-content ol{margin:10px 0;padding-left:24px}
|
|
#readme-content li{margin:6px 0}
|
|
#readme-content code{background:rgba(79,70,229,0.15);padding:2px 6px;border-radius:4px;font-family:monospace;font-size:13px;color:#a5b4fc}
|
|
#readme-content pre{background:rgba(0,0,0,0.3);padding:12px;border-radius:6px;overflow-x:auto;margin:12px 0}
|
|
#readme-content pre code{background:none;padding:0;color:#e6eef8}
|
|
#readme-content a{color:#60a5fa;text-decoration:none}
|
|
#readme-content a:hover{text-decoration:underline}
|
|
#readme-content table{border-collapse:collapse;width:100%;margin:12px 0}
|
|
#readme-content th,#readme-content td{border:1px solid rgba(255,255,255,0.1);padding:8px;text-align:left}
|
|
#readme-content th{background:rgba(79,70,229,0.2);font-weight:600}
|
|
#readme-content blockquote{border-left:3px solid rgba(79,70,229,0.5);padding-left:12px;margin:12px 0;color:var(--muted)}
|
|
#readme-content img{max-width:100%;height:auto;border-radius:6px;margin:12px 0}
|
|
footer{padding:12px 20px;text-align:center;color:var(--muted);font-size:12px}
|
|
|
|
/* Service cards - updated class name */
|
|
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
|
|
.service-card{display:flex;align-items:center;justify-content:center;padding:18px;border-radius:10px;background:linear-gradient(135deg, rgba(10,37,64,0.85), rgba(15,50,85,0.85), rgba(20,45,75,0.85));text-decoration:none;color:inherit;border:1px solid rgba(255,255,255,0.2);font-weight:600;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;position:relative;overflow:hidden;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px)}
|
|
.service-card::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent 30%,rgba(255,255,255,0.08) 50%,transparent 70%);transform:rotate(45deg);animation:shimmer 8s infinite linear;pointer-events:none}
|
|
.service-card:hover::before{animation-duration:3s}
|
|
.service-card::after{content:'';position:absolute;inset:0;border-radius:10px;padding:1px;background:linear-gradient(135deg,rgba(79,70,229,0.5),rgba(139,92,246,0.3),rgba(236,72,153,0.5));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;pointer-events:none;opacity:0;transition:opacity .3s ease}
|
|
.service-card:hover{transform:translateY(-6px);box-shadow:0 10px 40px rgba(79,70,229,0.4),0 0 20px rgba(139,92,246,0.3);border-color:rgba(139,92,246,0.5)}
|
|
.service-card:hover::after{opacity:1}
|
|
.service-card.selected{transform:translateY(-4px);box-shadow:0 8px 30px rgba(79,70,229,0.5),0 0 15px rgba(139,92,246,0.4);border-color:rgba(139,92,246,0.7);outline:2px solid rgba(79,70,229,0.6);outline-offset:2px}
|
|
|
|
/* Drag and drop styles */
|
|
.service-card.drag-over{border-color:rgba(79,70,229,0.8);background:linear-gradient(135deg, rgba(79,70,229,0.2), rgba(139,92,246,0.2));transform:scale(1.05)}
|
|
.service-card[draggable="true"]{cursor:move}
|
|
|
|
/* Collapsible groups */
|
|
.group-toggle{display:inline-block;margin-right:8px;transition:transform 0.3s ease;cursor:pointer;user-select:none}
|
|
.group-toggle.collapsed{transform:rotate(-90deg)}
|
|
.services-grid.collapsed{display:none}
|
|
|
|
/* Theme selector */
|
|
.theme-selector{position:absolute;top:20px;right:20px}
|
|
.theme-toggle{background:var(--color-card-bg);border:1px solid var(--color-border);color:var(--color-text);padding:8px 12px;border-radius:8px;cursor:pointer;font-size:18px;transition:all 0.3s ease;backdrop-filter:blur(10px)}
|
|
.theme-toggle:hover{background:var(--color-accent);transform:scale(1.05)}
|
|
.theme-menu{position:absolute;top:100%;right:0;margin-top:8px;background:var(--color-card-bg);border:1px solid var(--color-border);border-radius:8px;padding:8px;min-width:160px;display:none;backdrop-filter:blur(15px);box-shadow:0 4px 20px rgba(0,0,0,0.3)}
|
|
.theme-menu.open{display:block}
|
|
.theme-option{padding:10px 14px;cursor:pointer;border-radius:6px;transition:all 0.2s ease;color:var(--color-text)}
|
|
.theme-option:hover{background:var(--color-accent);transform:translateX(4px)}
|
|
.theme-option.active{background:var(--color-accent);font-weight:600}
|
|
|
|
/* Import/Export controls */
|
|
.import-export-controls{position:absolute;top:20px;left:20px;display:flex;gap:8px}
|
|
.control-btn{background:var(--color-card-bg);border:1px solid var(--color-border);color:var(--color-text);padding:8px 14px;border-radius:8px;cursor:pointer;font-size:13px;transition:all 0.3s ease;backdrop-filter:blur(10px);font-weight:500}
|
|
.control-btn:hover{background:var(--color-accent);transform:translateY(-2px);box-shadow:0 4px 12px rgba(79,70,229,0.3)}
|
|
|
|
/* Notifications */
|
|
.notification{position:fixed;top:20px;left:50%;transform:translateX(-50%) translateY(-100px);background:var(--color-card-bg);border:1px solid var(--color-border);padding:16px 24px;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,0.3);backdrop-filter:blur(15px);z-index:1000;opacity:0;transition:all 0.3s ease}
|
|
.notification.show{opacity:1;transform:translateX(-50%) translateY(0)}
|
|
.notification-success{border-color:#10b981;background:rgba(16,185,129,0.2)}
|
|
.notification-error{border-color:#ef4444;background:rgba(239,68,68,0.2)}
|
|
.notification-info{border-color:#3b82f6;background:rgba(59,130,246,0.2)}
|
|
|
|
/* Modal */
|
|
.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);backdrop-filter:blur(5px);z-index:9999;display:flex;align-items:center;justify-content:center;animation:fadeIn 0.3s ease}
|
|
.modal-content{background:var(--color-card-bg);border:1px solid var(--color-border);border-radius:12px;max-width:500px;width:90%;max-height:80vh;overflow:auto;box-shadow:0 10px 40px rgba(0,0,0,0.5);backdrop-filter:blur(20px)}
|
|
.modal-header{padding:20px;border-bottom:1px solid var(--color-border);display:flex;justify-content:space-between;align-items:center}
|
|
.modal-header h2{margin:0;color:var(--color-text)}
|
|
.modal-close{background:none;border:none;color:var(--color-text-muted);font-size:24px;cursor:pointer;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:all 0.2s ease}
|
|
.modal-close:hover{background:var(--color-accent);color:var(--color-text)}
|
|
.modal-body{padding:20px}
|
|
.modal-footer{padding:20px;border-top:1px solid var(--color-border);display:flex;gap:12px;justify-content:flex-end}
|
|
.modal-footer button{padding:10px 20px;border-radius:8px;border:none;cursor:pointer;font-weight:500;transition:all 0.3s ease}
|
|
.btn-save{background:var(--color-accent);color:var(--color-text)}
|
|
.btn-save:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(79,70,229,0.4)}
|
|
.btn-cancel{background:var(--color-border);color:var(--color-text)}
|
|
.btn-cancel:hover{background:var(--color-accent);transform:translateY(-2px)}
|
|
.widget-setting{margin-bottom:16px}
|
|
.widget-setting label{display:flex;align-items:center;gap:8px;cursor:pointer;color:var(--color-text);font-weight:500}
|
|
.widget-setting input[type="checkbox"]{width:18px;height:18px;cursor:pointer}
|
|
.widget-subsetting{margin-top:8px;margin-left:26px;display:flex;flex-direction:column;gap:8px}
|
|
.widget-subsetting input{padding:8px 12px;border-radius:6px;border:1px solid var(--color-border);background:var(--color-secondary);color:var(--color-text);font-size:13px}
|
|
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
|
|
|
|
/* Widgets */
|
|
.widgets-container{display:flex;gap:16px;margin-top:20px;flex-wrap:wrap;justify-content:center}
|
|
.widget{background:var(--color-card-bg);border:1px solid var(--color-border);border-radius:10px;padding:16px;backdrop-filter:blur(15px);box-shadow:0 4px 12px rgba(0,0,0,0.2);min-width:200px}
|
|
.widget-clock{text-align:center}
|
|
.widget-time{font-size:32px;font-weight:700;color:var(--color-text);font-variant-numeric:tabular-nums;letter-spacing:-1px}
|
|
.widget-date{font-size:13px;color:var(--color-text-muted);margin-top:4px}
|
|
.widget-weather{min-width:220px}
|
|
.weather-info{text-align:center}
|
|
.weather-location{font-size:14px;color:var(--color-text-muted);margin-bottom:8px}
|
|
.weather-temp{font-size:36px;font-weight:700;color:var(--color-text);margin:8px 0}
|
|
.weather-desc{font-size:14px;color:var(--color-text-muted);text-transform:capitalize;margin-bottom:12px}
|
|
.weather-details{display:flex;gap:16px;justify-content:center;font-size:13px;color:var(--color-text-muted)}
|
|
.widget-quote{max-width:400px}
|
|
.quote-text{font-size:15px;font-style:italic;color:var(--color-text);margin:0 0 12px 0;line-height:1.6}
|
|
.quote-author{font-size:13px;color:var(--color-text-muted);text-align:right;margin:0}
|
|
.widget-loading{text-align:center;color:var(--color-text-muted);font-size:14px}
|
|
.widget-error{text-align:center;color:#ef4444;font-size:13px}
|
|
.widget-error a{color:#60a5fa}
|
|
|
|
@media (max-width:420px){.card{padding:14px;font-size:14px}}
|
|
@media (max-width:768px){.theme-selector,.import-export-controls{position:static;margin:10px auto;justify-content:center}.widgets-container{flex-direction:column;align-items:center}}
|
|
|