API tools faq
paste
Guest User

Unraid Theme Future

a guest
Dec 14th, 2025
378
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 13.97 KB | None | 0 0
raw download clone embed print report
  1. /* --- 1. FONTY & ZÁKLADNÍ NASTAVENÍ --- */
  2. @import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&display=swap');
  3. @import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');
  4.  
  5. :root {
  6.     /* --- BARVY ROKU 3500 --- */
  7.     --scifi-bg: #030508;
  8.     --scifi-panel-bg: rgba(10, 15, 25, 0.75);
  9.     --scifi-cyan: #00f3ff;
  10.     --scifi-cyan-dim: rgba(0, 243, 255, 0.15);
  11.     --scifi-pink: #bc13fe;
  12.     --scifi-red: #ff2a2a;
  13.     --scifi-yellow: #ffae00;
  14.     --scifi-text: #e0e6ed;
  15.     --scifi-text-dim: #8fa1b3;
  16.    
  17.     /* --- EFEKTY --- */
  18.     --glass-blur: blur(12px);
  19.     --neon-glow: 0 0 10px var(--scifi-cyan-dim), 0 0 5px var(--scifi-cyan);
  20.     --border-glow: 1px solid rgba(0, 243, 255, 0.3);
  21.    
  22.     /* --- PŘEPSÁNÍ UNRAID PROMĚNNÝCH --- */
  23.     --background-color: var(--scifi-bg);
  24.     --text-color: var(--scifi-text);
  25.     --header-text-color: var(--scifi-cyan);
  26.     --header-background-color: transparent;
  27.     --table-border-color: rgba(255, 255, 255, 0.05);
  28.     --mild-background-color: transparent;
  29.    
  30.     /* Oprava fontů */
  31.     --font-sans: 'Rajdhani', sans-serif;
  32.     --font-mono: 'Share Tech Mono', monospace;
  33. }
  34.  
  35. /* --- GLOBÁLNÍ STYLY --- */
  36. body {
  37.     font-family: var(--font-sans) !important;
  38.     background-color: var(--scifi-bg) !important;
  39.     background-image:
  40.         radial-gradient(circle at 15% 50%, rgba(188, 19, 254, 0.05) 0%, transparent 25%),
  41.         radial-gradient(circle at 85% 30%, rgba(0, 243, 255, 0.05) 0%, transparent 25%),
  42.         linear-gradient(rgba(0, 243, 255, 0.03) 1px, transparent 1px),
  43.         linear-gradient(90deg, rgba(0, 243, 255, 0.03) 1px, transparent 1px);
  44.     background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px;
  45.     background-attachment: fixed;
  46.     color: var(--scifi-text);
  47.     letter-spacing: 0.5px;
  48. }
  49.  
  50. /* --- 2. HEADER (Holografická lišta) --- */
  51. #header {
  52.     background: rgba(5, 10, 18, 0.85) !important;
  53.     backdrop-filter: var(--glass-blur);
  54.     border-bottom: 1px solid var(--scifi-cyan);
  55.     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
  56.     height: 70px !important;
  57.     position: sticky;
  58.     top: 0;
  59.     z-index: 1000;
  60. }
  61.  
  62. /* Logo - Svítící efekt */
  63. #header .logo svg {
  64.     filter: drop-shadow(0 0 5px var(--scifi-red));
  65.     height: 35px;
  66. }
  67.  
  68. /* User Profile (vpravo nahoře) */
  69. #UserProfile {
  70.     font-family: var(--font-mono);
  71.     color: var(--scifi-cyan);
  72.     text-shadow: 0 0 5px var(--scifi-cyan);
  73. }
  74.  
  75. /* --- 3. MENU (Navigace) --- */
  76. #menu {
  77.     background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0, 243, 255, 0.05) 50%, rgba(0,0,0,0) 100%);
  78.     border-bottom: 1px solid rgba(0, 243, 255, 0.1);
  79.     padding: 10px 0;
  80.     margin-bottom: 20px;
  81. }
  82.  
  83. .nav-item a {
  84.     font-family: var(--font-mono);
  85.     text-transform: uppercase;
  86.     color: var(--scifi-text-dim) !important;
  87.     font-size: 14px !important;
  88.     border: 1px solid transparent;
  89.     padding: 5px 15px !important;
  90.     transition: all 0.3s ease;
  91.     background: transparent !important;
  92.     clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  93. }
  94.  
  95. .nav-item.active a, .nav-item a:hover {
  96.     color: #fff !important;
  97.     background: var(--scifi-cyan-dim) !important;
  98.     border: 1px solid var(--scifi-cyan);
  99.     box-shadow: 0 0 10px var(--scifi-cyan-dim);
  100.     text-shadow: 0 0 5px var(--scifi-cyan);
  101. }
  102.  
  103. /* --- 4. DASHBOARD (Datové panely) --- */
  104. /* Odstranění původních rámečků */
  105. .tile, table.dashboard tbody {
  106.     border: none !important;
  107.     background: transparent !important;
  108. }
  109.  
  110. /* Hlavní kontejner pro každý blok (CPU, Docker, atd.) */
  111. table.dashboard {
  112.     background: var(--scifi-panel-bg) !important;
  113.     backdrop-filter: var(--glass-blur);
  114.     border: 1px solid rgba(255, 255, 255, 0.1);
  115.     box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  116.     margin-bottom: 20px !important;
  117.     position: relative;
  118.     /* Sci-fi roh (zkosený vpravo nahoře) */
  119.     clip-path: polygon(
  120.         0 0,
  121.         calc(100% - 20px) 0,
  122.         100% 20px,
  123.         100% 100%,
  124.         0 100%
  125.     );
  126. }
  127.  
  128. /* Dekorativní linka nahoře */
  129. table.dashboard::before {
  130.     content: "";
  131.     position: absolute;
  132.     top: 0;
  133.     left: 0;
  134.     width: 100px;
  135.     height: 2px;
  136.     background: var(--scifi-cyan);
  137.     box-shadow: 0 0 10px var(--scifi-cyan);
  138. }
  139.  
  140. /* Hlavička bloku */
  141. .tile-header {
  142.     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  143.     padding: 10px 15px !important;
  144.     background: linear-gradient(90deg, rgba(0, 243, 255, 0.05) 0%, transparent 100%);
  145. }
  146.  
  147. .tile-header h3 {
  148.     font-family: var(--font-mono);
  149.     font-size: 18px !important;
  150.     color: var(--scifi-cyan) !important;
  151.     text-transform: uppercase;
  152.     letter-spacing: 2px;
  153. }
  154.  
  155. .tile-header i {
  156.     color: var(--scifi-pink) !important; /* Ikony v purpurové */
  157. }
  158.  
  159. /* Obsah tabulek */
  160. table.dashboard td {
  161.     border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  162.     color: var(--scifi-text);
  163.     font-size: 14px;
  164.     padding: 8px 12px;
  165. }
  166.  
  167. /* Odkazy v tabulkách */
  168. table.dashboard a {
  169.     color: var(--scifi-cyan) !important;
  170.     text-decoration: none;
  171.     transition: 0.2s;
  172. }
  173. table.dashboard a:hover {
  174.     color: #fff !important;
  175.     text-shadow: 0 0 8px var(--scifi-cyan);
  176. }
  177.  
  178. /* --- 5. STAVOVÉ INDIKÁTORY & BARY --- */
  179. /* Texty */
  180. .green-text { color: var(--scifi-cyan) !important; }
  181. .red-text { color: var(--scifi-red) !important; text-shadow: 0 0 5px var(--scifi-red); }
  182. .orange-text { color: var(--scifi-yellow) !important; }
  183.  
  184. /* Progress Bary - Holografický styl */
  185. .usage-bar, .usage-disk {
  186.     background: rgba(0, 0, 0, 0.5) !important;
  187.     border: 1px solid rgba(255, 255, 255, 0.1) !important;
  188.     border-radius: 0 !important;
  189.     height: 8px !important;
  190.     box-shadow: none !important;
  191. }
  192.  
  193. .usage-bar span, .usage-disk span {
  194.     border-radius: 0 !important;
  195.     position: relative;
  196. }
  197.  
  198. /* Glow efekt pro bary */
  199. .greenbar { background: var(--scifi-cyan) !important; box-shadow: 0 0 10px var(--scifi-cyan); }
  200. .orangebar { background: var(--scifi-yellow) !important; box-shadow: 0 0 10px var(--scifi-yellow); }
  201. .redbar { background: var(--scifi-red) !important; box-shadow: 0 0 10px var(--scifi-red); }
  202.  
  203. /* Ikony stavu (kolečka) */
  204. .fa-circle { font-size: 8px !important; vertical-align: middle; }
  205. .green-orb { color: var(--scifi-cyan) !important; text-shadow: 0 0 5px var(--scifi-cyan); }
  206. .red-orb { color: var(--scifi-red) !important; text-shadow: 0 0 5px var(--scifi-red); }
  207.  
  208. /* --- 6. FOOTER --- */
  209. #footer {
  210.     background: rgba(0, 0, 0, 0.8) !important;
  211.     border-top: 1px solid rgba(0, 243, 255, 0.2);
  212.     font-family: var(--font-mono);
  213.     color: var(--scifi-text-dim) !important;
  214.     font-size: 11px !important;
  215.     padding: 15px !important;
  216. }
  217.  
  218. /* --- 7. DOCKER KONTEJNERY (Speciální úprava) --- */
  219. /* Změna ikonek stavu na čtvercové "LED" diody */
  220. .outer.solid {
  221.     border-radius: 0 !important;
  222.     background: transparent !important;
  223.     border: 1px solid rgba(255,255,255,0.05);
  224.     transition: 0.2s;
  225. }
  226. .outer.solid:hover {
  227.     background: rgba(0, 243, 255, 0.05) !important;
  228.     border-color: var(--scifi-cyan);
  229. }
  230.  
  231. .outer img {
  232.     filter: grayscale(80%); /* Odbarvit ikony pro jednotný vzhled */
  233.     transition: 0.3s;
  234. }
  235. .outer:hover img {
  236.     filter: grayscale(0%);
  237. }
  238.  
  239. /* --- 8. SKRYTÍ STARÝCH PRVKŮ A CLEANUP --- */
  240. ::-webkit-scrollbar {
  241.     width: 8px;
  242.     background: #000;
  243. }
  244. ::-webkit-scrollbar-thumb {
  245.     background: #333;
  246.     border: 1px solid #555;
  247. }
  248. ::-webkit-scrollbar-thumb:hover {
  249.     background: var(--scifi-cyan);
  250. }
  251.  
  252. /* Switch Button (Start/Stop) */
  253. .switch-button-background {
  254.     background: #222 !important;
  255.     border: 1px solid #444;
  256. }
  257. .switch-button-button {
  258.     background: var(--scifi-cyan) !important;
  259.     box-shadow: 0 0 5px var(--scifi-cyan);
  260. }
  261.  
  262. /* Modální okna (Dialogy) */
  263. .sweet-alert, .ui-dialog {
  264.     background: rgba(10, 15, 25, 0.95) !important;
  265.     backdrop-filter: blur(20px);
  266.     border: 1px solid var(--scifi-cyan) !important;
  267.     box-shadow: 0 0 50px rgba(0, 243, 255, 0.2) !important;
  268.     color: #fff !important;
  269.     font-family: var(--font-sans) !important;
  270. }
  271. .sweet-alert h2, .ui-dialog-title {
  272.     color: var(--scifi-cyan) !important;
  273.     font-family: var(--font-mono) !important;
  274.     text-transform: uppercase;
  275. }
  276. .sweet-alert p {
  277.     color: var(--scifi-text) !important;
  278. }
  279. .confirm {
  280.     background-color: var(--scifi-cyan) !important;
  281.     color: #000 !important;
  282.     box-shadow: 0 0 15px var(--scifi-cyan) !important;
  283. }
  284.  
  285.  
  286. /* =========================================
  287.    SEKCE: MAIN TAB & DISKOVÉ TABULKY (SCIFI)
  288.    ========================================= */
  289.  
  290. /* --- 1. ZÁKLADNÍ STYL TABULEK --- */
  291. table.unraid, table.disk_status, table.array_status, table.share_status {
  292.     background: transparent !important;
  293.     border-collapse: separate !important;
  294.     border-spacing: 0 4px !important; /* Mezery mezi řádky pro efekt "bloků" */
  295.     margin-top: 10px !important;
  296.     width: 100%;
  297. }
  298.  
  299. /* Hlavička tabulky (Device, Identification, Temp...) */
  300. table.unraid thead tr:first-child > td,
  301. table.disk_status thead tr td {
  302.     background: rgba(0, 243, 255, 0.1) !important; /* Jemné kyanové pozadí */
  303.     color: var(--scifi-cyan) !important;
  304.     font-family: var(--font-mono);
  305.     border-bottom: 1px solid var(--scifi-cyan) !important;
  306.     text-transform: uppercase;
  307.     letter-spacing: 2px;
  308.     font-size: 12px !important;
  309.     padding: 10px !important;
  310. }
  311.  
  312. /* --- 2. ŘÁDKY S DISKY (Data Rows) --- */
  313. table.unraid tbody tr,
  314. table.disk_status tbody tr {
  315.     background: rgba(10, 15, 25, 0.6) !important; /* Poloprůhledná černá */
  316.     backdrop-filter: blur(5px);
  317.     transition: all 0.2s ease-in-out;
  318.     border: 1px solid transparent; /* Příprava pro hover */
  319. }
  320.  
  321. /* Hover efekt na řádku disku */
  322. table.unraid tbody tr:hover,
  323. table.disk_status tbody tr:hover {
  324.     background: rgba(0, 243, 255, 0.05) !important;
  325.     box-shadow: inset 2px 0 0 var(--scifi-cyan); /* Levý svítící proužek */
  326.     transform: translateX(5px); /* Jemný posun doprava */
  327. }
  328.  
  329. /* Buňky tabulky */
  330. table.unraid tbody td,
  331. table.disk_status tbody td {
  332.     border: none !important;
  333.     color: var(--scifi-text-dim);
  334.     padding: 8px 10px !important;
  335.     font-size: 13px !important;
  336.     vertical-align: middle !important;
  337. }
  338.  
  339. /* Odkazy na disky (názvy) */
  340. table.unraid tbody td a.blue-text {
  341.     color: var(--scifi-text) !important;
  342.     font-weight: 700;
  343.     font-family: var(--font-mono);
  344.     font-size: 14px;
  345.     text-decoration: none;
  346. }
  347.  
  348. table.unraid tbody td a.blue-text:hover {
  349.     color: var(--scifi-cyan) !important;
  350.     text-shadow: 0 0 5px var(--scifi-cyan);
  351. }
  352.  
  353. /* --- 3. STAVOVÉ IKONY (Kuličky) --- */
  354. /* Změna kuliček na svítící body */
  355. i.fa-circle, i.orb {
  356.     font-size: 8px !important;
  357.     box-shadow: 0 0 5px currentColor;
  358. }
  359.  
  360. /* Barvy stavů */
  361. .green-orb, .green-text {
  362.     color: var(--scifi-cyan) !important;
  363.     text-shadow: 0 0 8px var(--scifi-cyan);
  364. }
  365. .red-orb, .red-text {
  366.     color: var(--scifi-red) !important;
  367.     text-shadow: 0 0 8px var(--scifi-red);
  368. }
  369. .grey-orb, .grey-text {
  370.     color: rgba(255, 255, 255, 0.2) !important;
  371.     box-shadow: none !important;
  372. }
  373. .orange-orb, .orange-text, .warn {
  374.     color: var(--scifi-yellow) !important;
  375.     text-shadow: 0 0 8px var(--scifi-yellow);
  376. }
  377.  
  378. /* --- 4. PROGRESS BARY (Využití disku) --- */
  379. .usage-disk {
  380.     background: rgba(255, 255, 255, 0.05) !important;
  381.     border: 1px solid rgba(0, 243, 255, 0.2) !important;
  382.     height: 4px !important; /* Tenké linky */
  383.     margin-top: 5px !important;
  384.     border-radius: 0 !important;
  385. }
  386.  
  387. .usage-disk span {
  388.     border-radius: 0 !important;
  389.     position: relative;
  390.     box-shadow: 0 0 10px currentColor; /* Glow efekt */
  391. }
  392.  
  393. /* Oprava barev v progress barech */
  394. .greenbar { background: var(--scifi-cyan) !important; color: var(--scifi-cyan); }
  395. .redbar { background: var(--scifi-red) !important; color: var(--scifi-red); }
  396. .orangebar { background: var(--scifi-yellow) !important; color: var(--scifi-yellow); }
  397.  
  398. /* --- 5. TITULKY SEKCÍ (Array Devices, Boot Device...) --- */
  399. div.title {
  400.     background: transparent !important;
  401.     border-bottom: 2px solid var(--scifi-cyan) !important;
  402.     color: var(--scifi-cyan) !important;
  403.     font-family: var(--font-mono);
  404.     text-transform: uppercase;
  405.     font-size: 18px !important;
  406.     padding: 10px 0 !important;
  407.     margin-top: 30px !important;
  408.     margin-bottom: 10px !important;
  409.     text-shadow: 0 0 10px var(--scifi-cyan-dim);
  410.     display: flex;
  411.     align-items: center;
  412. }
  413.  
  414. /* Ikony v titulcích */
  415. div.title img, div.title i {
  416.     filter: drop-shadow(0 0 3px var(--scifi-cyan));
  417.     margin-right: 10px;
  418. }
  419.  
  420. /* --- 6. OPERACE (Tlačítka dole - Start/Stop/Sync) --- */
  421. /* Kontejner s tlačítky */
  422. .content > form {
  423.     background: rgba(0, 0, 0, 0.5);
  424.     border: 1px solid var(--scifi-text-dim);
  425.     padding: 15px;
  426.     margin-top: 20px;
  427.     clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%);
  428. }
  429.  
  430. /* Checkboxy */
  431. input[type="checkbox"] {
  432.     appearance: none;
  433.     background-color: transparent;
  434.     margin: 0;
  435.     font: inherit;
  436.     color: var(--scifi-cyan);
  437.     width: 1.15em;
  438.     height: 1.15em;
  439.     border: 1px solid var(--scifi-cyan);
  440.     display: grid;
  441.     place-content: center;
  442. }
  443.  
  444. input[type="checkbox"]::before {
  445.     content: "";
  446.     width: 0.65em;
  447.     height: 0.65em;
  448.     transform: scale(0);
  449.     transition: 120ms transform ease-in-out;
  450.     box-shadow: inset 1em 1em var(--scifi-cyan);
  451. }
  452.  
  453. input[type="checkbox"]:checked::before {
  454.     transform: scale(1);
  455. }
  456.  
  457. /* --- 7. TEPLOTA (Temperature) --- */
  458. /* Teploty zvýrazníme, aby vypadaly jako údaje senzoru */
  459. table.unraid tbody td:nth-child(3) {
  460.     font-family: var(--font-mono);
  461.     color: #fff !important;
  462. }
  463.  
  464. /* --- 8. SKRYTÍ ZBYTEČNOSTÍ --- */
  465. /* Skrytí šedých linek, které Unraid přidává */
  466. table.disk_status tr > td:last-child {
  467.     border-right: none !important;
  468. }
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!