├── hutao.gif ├── case-model.png ├── background-image.jpg ├── background-image2.jpg ├── DarkTheme0512-black.zip ├── README.md └── theme.css /hutao.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XiaoNieGPT/unraid-theme/HEAD/hutao.gif -------------------------------------------------------------------------------- /case-model.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XiaoNieGPT/unraid-theme/HEAD/case-model.png -------------------------------------------------------------------------------- /background-image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XiaoNieGPT/unraid-theme/HEAD/background-image.jpg -------------------------------------------------------------------------------- /background-image2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XiaoNieGPT/unraid-theme/HEAD/background-image2.jpg -------------------------------------------------------------------------------- /DarkTheme0512-black.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XiaoNieGPT/unraid-theme/HEAD/DarkTheme0512-black.zip -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | --- 3 | 4 | # Unraid Theme 5 | 这是一个为 **Unraid 6 和 Unraid 7** 设计的自定义主题，支持通过 Theme Engine 插件轻松美化你的 Unraid 界面。 6 | 加入我们的 **[Telegram 交流群](https://t.me/+ZHsEEd5ZJGs3MWJl)** 获取帮助和最新资讯！ 7 | 8 | --- 9 | 10 | ## 安装步骤 11 | 12 | ### 1. 下载主题文件 13 | 在 Unraid 的 **终端** 中运行以下命令： 14 | ```bash 15 | cd /mnt/user/ && git clone https://github.com/XiaoNieGPT/unraid-theme.git 16 | ``` 17 | ![下载示例](https://github.com/XiaoNieGPT/unraid-theme/assets/22927944/0a5224a5-f3fe-4ba5-977b-acb1ef767628) 18 | 19 | ### 2. 确认文件位置 20 | 下载完成后，在 **Shares** 中可以看到文件夹： 21 | - 文件路径：`/mnt/user/unraid-theme/` 22 | - 后续步骤会用到此路径。 23 | ![文件位置](https://github.com/XiaoNieGPT/unraid-theme/assets/22927944/a7a15b1a-8bca-4d52-9916-aecdb78c4917) 24 | 25 | ### 3. 安装 Theme Engine 插件 26 | 在 **Apps** 页面搜索并安装 **Theme Engine** 插件。 27 | ![插件安装](https://github.com/XiaoNieGPT/unraid-theme/assets/22927944/a1e8b844-c4b3-46a3-ae5d-e72bb94b4b49) 28 | 29 | ### 4. 打开 Theme Engine 设置 30 | 进入 **Settings（设置）**，找到并点击 **Theme Engine**。 31 | 32 | ### 5. 设置基础主题 33 | 在 **Base Theme** 中选择 **Black 主题**，然后点击 **应用**。 34 | ![选择 Black 主题](https://github.com/XiaoNieGPT/unraid-theme/assets/22927944/49d0edb8-68e5-45aa-a6c9-e75ee2150661) 35 | 36 | ### 6. 调整高级设置 37 | 在 **Theme Setting** 中： 38 | - 点击 **Advanced VIEW**。 39 | - 将 **Enable Theme Engine** 改为 **NO**。 40 | ![关闭 Enable Theme Engine](https://github.com/XiaoNieGPT/unraid-theme/assets/22927944/37ea54ba-b8d6-4438-bda8-c7284b1f0a9d) 41 | 42 | ### 7. 启用自定义样式 43 | 拉到页面底部，将 **Enable custom styling (below)** 改为 **YES**。 44 | ![启用自定义样式](https://github.com/XiaoNieGPT/unraid-theme/assets/22927944/e8f31b42-20aa-4027-8aca-140a53495091) 45 | 46 | ### 8. 添加自定义 CSS 47 | 在 **Custom styling (advanced)** 输入以下代码： 48 | ```html 49 | 50 | 51 | ``` 52 | ![添加 CSS](https://github.com/XiaoNieGPT/unraid-theme/assets/22927944/9f928eae-adfd-4a3d-b263-3f805d3188c6) 53 | 54 | ### 9. 检查字体颜色 55 | 此时右上角字体可能显示为灰黑色，影响美观。 56 | ![灰黑色字体](https://github.com/XiaoNieGPT/unraid-theme/assets/22927944/997b0410-ed11-4f2a-904e-de173039e39d) 57 | 58 | ### 10. 修改字体颜色 59 | 进入 **Display Settings（显示设置）**，调整以下三处： 60 | - 将字体颜色改为 **白色**。 61 | ![调整字体颜色 1](https://github.com/XiaoNieGPT/unraid-theme/assets/22927944/612aef20-d01c-4c11-8823-1f41a5a91ca9) 62 | ![调整字体颜色 2](https://github.com/XiaoNieGPT/unraid-theme/assets/22927944/a6cba9eb-e62e-4f34-846b-000aa79c17c4) 63 | 64 | ### 11. 查看效果 65 | 主题安装完成！以下是效果预览： 66 | ![效果图 ilàs1](https://github.com/XiaoNieGPT/unraid-theme/assets/22927944/3fa1137f-f6ed-4e71-b2a9-1c5e73ed940a) 67 | ![效果图 2](https://github.com/XiaoNieGPT/unraid-theme/assets/22927944/ca584cc6-2c63-4051-8da0-4a6b884c4b23) 68 | ![效果图 3](https://github.com/XiaoNieGPT/unraid-theme/assets/22927944/86183a2f-bdb0-4a8f-b90b-5ed6bdbe3109) 69 | ![效果图 4](https://github.com/XiaoNieGPT/unraid-theme/assets/22927944/bce43985-c5cd-476b-ac9d-d72d74623ac1) 70 | 71 | ### 12. 【可选】自定义背景与动图 72 | 可根据需要修改背景或添加胡桃动图： 73 | ![自定义示例](https://github.com/XiaoNieGPT/unraid-theme/assets/22927944/dcd4a040-0c3b-4235-9f13-b407c5ea91ea) 74 | 75 | --- 76 | 77 | ## 升级主题 78 | 要更新主题，只需在终端运行以下命令（无需额外配置）： 79 | ```bash 80 | rm -rf /mnt/user/unraid-theme && cd /mnt/user/ && git clone https://github.com/XiaoNieGPT/unraid-theme.git 81 | ``` 82 | **注意**：升级后请确认 `theme.css` 文件名是否一致。 83 | 84 | --- 85 | 86 | -------------------------------------------------------------------------------- /theme.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --drop-down-menu-bg: #212121d1; 3 | --button-color: #fb3f62; 4 | --button-color-hover: #cd4164; 5 | --button-text: #eee; 6 | --button-text-hover: #FFF; 7 | --accent-color: 251, 114, 153; 8 | --accent-color-hover: rgba(var(--accent-color), .2); 9 | --link-color: rgb(251, 114, 153); 10 | --link-color-hover: rgba(251, 114, 153, 0.2); 11 | --label-text-color: #fb7299; 12 | --text: #eee; 13 | --modal-bg-color: rgba(0, 0, 0, 0.2); 14 | --color-alpha: #fff !important; 15 | --overlay-bg-color: rgba(0, 0, 0, 0) !important; 16 | 17 | /*hutao.gif是左下角的动图， background-image.jpg是背景图片，自己替换，相对位置，别把./去掉了 */ 18 | background-image: url(./hutao.gif),url(./background-image.jpg); 19 | 20 | background-repeat: no-repeat , no-repeat; 21 | background-position: right bottom , center top; 22 | background-attachment: fixed , fixed; 23 | /*下面百分之15是动图的大小，自己调整*/ 24 | background-size: 15% , cover; 25 | 26 | --text-hover: #fff; 27 | --text-muted: #999; 28 | --arr-queue-color: rgb(251, 114, 153); 29 | --plex-poster-unwatched: #fb3f62; 30 | --petio-spinner: invert(29%) sepia(87%) saturate(2199%) hue-rotate(331deg) brightness(115%) contrast(97%); 31 | --gitea-color-primary-dark-4: 251, 114, 153; 32 | --overseerr-gradient: linear-gradient(45deg, rgb(251, 114, 253, 1) 0%, rgb(32, 76, 128, .95) 37%, rgb(0, 66, 73, .9) 97%) center center/cover no-repeat fixed; 33 | } 34 | /*share 背景改透明*/ 35 | .shade { 36 | margin-top: 1rem; 37 | padding: 1rem 0; 38 | background-color: rgba(0, 0, 0, 0) !important; 39 | } 40 | /*商店入口*/ 41 | .sweet-alert, 42 | .sweet-alert .sa-icon.sa-success .sa-fix { 43 | background-color: rgba(0, 0, 0, 0.2) !important; 44 | } 45 | /*商店搜索条*/ 46 | .searchArea { 47 | z-index: 6; 48 | width: 100%; 49 | position: sticky; 50 | background-color: rgba(0, 0, 0, 0) !important; 51 | top: var(--search-area-top); 52 | } 53 | /*商店插件内容*/ 54 | .popupCloseArea { 55 | position: fixed; 56 | margin-left: 10px; 57 | margin-top: -2rem; 58 | padding-top: 2rem; 59 | padding-bottom: 1rem; 60 | width: 100%; 61 | background-color: rgba(0, 0, 0, 0) !important; 62 | z-index: 5; 63 | } 64 | /*商店左侧菜单*/ 65 | .menuItems { 66 | position: relative; 67 | height: auto; 68 | align-items: stretch; 69 | width: 14rem; 70 | z-index: 2; 71 | background-color: rgba(0, 0, 0, 0) !important; 72 | } 73 | /*插件菜单*/ 74 | div.tab [type="radio"]:checked + label { 75 | cursor: default; 76 | border: 0px solid !important; 77 | border-bottom: none; 78 | opacity: 1; 79 | } 80 | 81 | table.disk_status tbody tr.tr_last { 82 | background-color: #00000000 !important; 83 | } 84 | img#mycase { 85 | width: auto !important; 86 | max-width: 128px !important; 87 | height: auto !important; 88 | max-height: 128px !important 89 | } 90 | /*下面是商店搜索框*/ 91 | .searchArea { 92 | z-index: 6; 93 | width: 100%; 94 | position: sticky; 95 | background-color: #00000000; 96 | top: var(--search-area-top); 97 | } 98 | .dockerHubHolder { 99 | background-color: #00000017 !important; 100 | border-color: #15151552 !important; 101 | cursor: pointer; 102 | } 103 | .greenbar{background:-webkit-gradient(linear,left top,right top,from(#fb7299),to(#fb7299));background:linear-gradient(90deg,#fb7299 0,#fb7299)} 104 | .orangebar{background:-webkit-gradient(linear,left top,right top,from(#fb7299),to(#fb7299));background:linear-gradient(90deg,#fb7299 0,#fb7299)} 105 | .redbar{background:-webkit-gradient(linear,left top,right top,from(#fb7299),to(#fb7299));background:linear-gradient(90deg,#fb7299 0,#fb7299)} 106 | .graybar{background:-webkit-gradient(linear,left top,right top,from(#fb7299),to(#fb7299));background:linear-gradient(90deg,#fb7299 0,#fb7299)} 107 | * { 108 | outline: 0; 109 | background-color: rgba(0, 0, 0, 0); 110 | } 111 | table.dashboard { 112 | background-color: rgba(0, 0, 0, 0.2) 113 | } 114 | table.dashboard td.stopgap { 115 | height: 0px!important; 116 | line-height: 0px!important; 117 | padding: 0!important; 118 | background-color: rgba(0, 0, 0, 0) 119 | } 120 | div.pie::after { 121 | background-color: #212941a8 !important; 122 | } 123 | input.t1.search { 124 | color: #f2f2f2; 125 | background-color: #1c1b1b00 !important; 126 | } 127 | table.unraid thead tr:first-child>td { 128 | font-size: 1.1rem; 129 | text-transform: uppercase; 130 | letter-spacing: 1px; 131 | background-color: #2626264d !important; 132 | } 133 | table.unraid tbody tr:nth-child(even) { 134 | background-color: #0000004d !important; 135 | } 136 | div.tab [type=radio]+label { 137 | background-color: #00000059 !important; 138 | opacity: 0.5 139 | } 140 | table.tablesorter.four tbody tr:nth-child(4n-1) { 141 | background-color: rgba(0, 0, 0, 0.2) !important; 142 | } 143 | table.usb_mounts thead tr:first-child td { 144 | background-color: rgba(0, 0, 0, 0.2) !important; 145 | } 146 | 147 | table.usb_mounts tbody tr:nth-child(even) { 148 | background-color: rgba(0, 0, 0, 0.2) !important; 149 | } 150 | 151 | table.usb_mounts tbody tr:not(.tr_last):hover>td { 152 | background-color: rgba(0, 0, 0, 0.2) !important; 153 | } 154 | 155 | table.samba_mounts thead tr:first-child td { 156 | background-color: rgba(0, 0, 0, 0.2) !important; 157 | } 158 | 159 | table.samba_mounts tbody tr:nth-child(even) { 160 | background-color: rgba(0, 0, 0, 0.2) !important; 161 | } 162 | 163 | table.samba_mounts tbody tr:not(.tr_last):hover>td { 164 | background-color: rgba(0, 0, 0, 0.2) !important; 165 | } 166 | table.usb_absent thead tr:first-child td { 167 | background-color: rgba(0, 0, 0, 0.2) !important; 168 | } 169 | 170 | table.usb_absent tbody tr:nth-child(even) { 171 | background-color: rgba(0, 0, 0, 0.2) !important; 172 | } 173 | 174 | table.usb_absent tbody tr:not(.tr_last):hover>td { 175 | background-color: rgba(0, 0, 0, 0.2) !important; 176 | } 177 | table.dashboard i.control { 178 | background-color: rgba(255,255,255,0) !important; 179 | } 180 | body { 181 | color: var(--text); 182 | background: var(--main-bg-color); 183 | background-repeat: repeat, no-repeat; 184 | background-attachment: fixed, fixed; 185 | background-position: center center, center center; 186 | background-size: auto, cover; 187 | -webkit-background-size: auto, cover; 188 | -moz-background-size: auto, cover; 189 | -o-background-size: auto, cover 190 | 191 | } 192 | 193 | h1, 194 | h2, 195 | h3, 196 | h4, 197 | h5, 198 | h6, 199 | strong { 200 | color: var(--text-hover) 201 | } 202 | 203 | i.fa.fa-fw { 204 | color: var(--text-hover) !important 205 | } 206 | 207 | .blue-text, 208 | a, 209 | a.static, 210 | i.control { 211 | color: rgb(255 255 255) 212 | } 213 | 214 | a.static:hover, 215 | a:hover, 216 | i.control:hover { 217 | color: var(--link-color-hover) 218 | } 219 | 220 | pre { 221 | border: 1px solid rgb(255 255 255 / 30%) 222 | } 223 | 224 | #template { 225 | background: var(--main-bg-color); 226 | background-repeat: repeat, no-repeat; 227 | background-attachment: fixed, fixed; 228 | background-position: center center, center center; 229 | background-size: auto, cover; 230 | -webkit-background-size: auto, cover; 231 | -moz-background-size: auto, cover; 232 | -o-background-size: auto, cover 233 | } 234 | 235 | #menu { 236 | background: var(--overlay-bg-color); 237 | background-repeat: repeat, no-repeat; 238 | background-attachment: fixed, fixed; 239 | background-position: center center, center center; 240 | background-size: auto, cover; 241 | -webkit-background-size: auto, cover; 242 | -moz-background-size: auto, cover; 243 | -o-background-size: auto, cover 244 | } 245 | 246 | #header .text-left { 247 | border-right: solid medium rgb(var(--accent-color)) 248 | } 249 | 250 | #header, 251 | #header .text-right a { 252 | margin-bottom: 1px; 253 | background-color: #fb729900; 254 | color: var(--text) !important; 255 | } 256 | 257 | #header .block { 258 | background-color: rgb(0 0 0 / 20%); 259 | border-radius: 0 0 0 25px 260 | } 261 | 262 | #nav-block #nav-item.active:after, 263 | #nav-block #nav-item:focus:after, 264 | #nav-block #nav-item:hover:after { 265 | background: var(--accent-color-hover) 266 | } 267 | 268 | #nav-block #nav-item a:hover { 269 | color: var(--text-hover) 270 | } 271 | 272 | #nav-block #nav-item a { 273 | color: var(--text) 274 | } 275 | 276 | #nav-item.active a { 277 | color: rgb(var(--accent-color)) !important 278 | } 279 | 280 | #nav-item.active a:hover { 281 | color: rgb(var(--accent-color)) !important 282 | } 283 | 284 | .nav-tile { 285 | background-color: rgb(0, 0, 0, .25); 286 | } 287 | 288 | .nav-item a { 289 | color: var(--text); 290 | } 291 | 292 | .nav-item.active:after { 293 | background-color: #fb7299; 294 | } 295 | 296 | textarea { 297 | background: rgb(0 0 0 / 25%) 298 | } 299 | 300 | table.share_status.dashboard { 301 | background-color: rgba(0, 0, 0, .15); 302 | border: 1px solid rgba(255, 255, 255, .25) 303 | } 304 | 305 | table.share_status.dashboard tr>td.next { 306 | border-top: 1px solid rgba(255, 255, 255, .25); 307 | color: var(--text-hover) 308 | } 309 | 310 | span.outer.solid { 311 | background-color: transparent 312 | } 313 | 314 | span.inner { 315 | width: 137px !important 316 | } 317 | 318 | table.tablesorter thead tr th, 319 | thead, 320 | thead.sortable { 321 | color: var(--text-hover) 322 | } 323 | 324 | .sys, 325 | .usage-bar, 326 | .usage-disk { 327 | background: rgba(0, 0, 0, .35) 328 | } 329 | 330 | .usage-disk>span:first-child { 331 | background-color: #fb7299; 332 | } 333 | 334 | #db-box3>tbody.smb.share.share1.sortable>tr>td>a { 335 | color: var(--link-color) 336 | } 337 | 338 | #db-box3>tbody.smb.share.share1.sortable>tr>td>a:hover { 339 | color: var(--link-color-hover) 340 | } 341 | 342 | .green, 343 | .green-text, 344 | .passed { 345 | color: #fb7299; 346 | } 347 | 348 | #title { 349 | border-bottom: none; 350 | background-color: rgba(0, 0, 0, .5); 351 | color: var(--text-hover) 352 | } 353 | 354 | table { 355 | background-color: rgb(0 0 0 / 25%) 356 | } 357 | 358 | table tbody tr.tr_last, 359 | table.disk_status thead tr:first-child td, 360 | table.share_status tbody tr:nth-child(even), 361 | table.share_status thead tr:first-child td, 362 | table.tablesorter tbody tr:nth-child(even), 363 | table.tablesorter thead tr .tablesorter-headerAsc, 364 | table.tablesorter thead tr .tablesorter-headerDesc, 365 | table.tablesorter thead tr th { 366 | background-color: rgba(0, 0, 0, .25) 367 | } 368 | 369 | table.disk_status tbody tr:nth-child(even) { 370 | background-color: rgba(0, 0, 0, .25) 371 | } 372 | 373 | table.tablesorter thead tr { 374 | border-bottom: rgba(255, 255, 255, .25) 1px solid 375 | } 376 | 377 | table tbody tr.tr_last { 378 | border-top: 1px solid rgba(255, 255, 255, .25) 379 | } 380 | 381 | table.share_status tbody tr.warn { 382 | color: #e68a00 !important; 383 | background-color: #feefb3 !important 384 | } 385 | 386 | #template button, 387 | #template button[type=button], 388 | .sweet-alert button, 389 | a.button, 390 | button, 391 | button[type=button], 392 | input[type=button], 393 | input[type=reset], 394 | input[type=submit] { 395 | color: var(--text); 396 | text-shadow: var(--text-shadow) var(--text-shadow-color); 397 | background: linear-gradient(90deg, var(--button-color) 0, var(--button-color)) 0 0 no-repeat, linear-gradient(90deg, var(--button-color) 0, var(--button-color)) 0 100% no-repeat, linear-gradient(0deg, var(--button-color) 0, var(--button-color)) 0 100% no-repeat, linear-gradient(0deg, var(--button-color) 0, var(--button-color)) 100% 100% no-repeat; 398 | background: -webkit-gradient(linear, left top, right top, from(var(--button-color)), to(var(--button-color))) 0 0 no-repeat, -webkit-gradient(linear, left top, right top, from(var(--button-color)), to(var(--button-color))) 0 100% no-repeat, -webkit-gradient(linear, left bottom, left top, from(var(--button-color)), to(var(--button-color))) 0 100% no-repeat, -webkit-gradient(linear, left bottom, left top, from(var(--button-color)), to(var(--button-color))) 100% 100% no-repeat; 399 | background-size: 100% 2px, 100% 2px, 2px 100%, 2px 100%; 400 | border: 1px solid transparent 401 | } 402 | 403 | #template button:hover, 404 | #template button[type=button]:hover, 405 | .sweet-alert button:hover, 406 | a.button:hover, 407 | button:hover, 408 | button:hover[type=button], 409 | input:hover[type=button], 410 | input:hover[type=reset], 411 | input:hover[type=submit] { 412 | color: var(--button-text-hover); 413 | text-shadow: var(--text-shadow) var(--button-color-hover); 414 | box-shadow: var(--box-shadow) var(--button-color-hover); 415 | background-color: var(--button-color-hover); 416 | background: -webkit-gradient(linear, left top, right top, from(var(--button-color-hover)), to(var(--button-color-hover))); 417 | background: linear-gradient(90deg, var(--button-color-hover) 0, var(--button-color-hover)) 418 | } 419 | 420 | .swal-button { 421 | color: var(--button-text) !important; 422 | text-shadow: var(--text-shadow) var(--text-shadow-color) !important; 423 | background: linear-gradient(90deg, var(--button-color) 0, var(--button-color)) 0 0 no-repeat, linear-gradient(90deg, var(--button-color) 0, var(--button-color)) 0 100% no-repeat, linear-gradient(0deg, var(--button-color) 0, var(--button-color)) 0 100% no-repeat, linear-gradient(0deg, var(--button-color) 0, var(--button-color)) 100% 100% no-repeat !important; 424 | background: -webkit-gradient(linear, left top, right top, from(var(--button-color)), to(var(--button-color))) 0 0 no-repeat, -webkit-gradient(linear, left top, right top, from(var(--button-color)), to(var(--button-color))) 0 100% no-repeat, -webkit-gradient(linear, left bottom, left top, from(var(--button-color)), to(var(--button-color))) 0 100% no-repeat, -webkit-gradient(linear, left bottom, left top, from(var(--button-color)), to(var(--button-color))) 100% 100% no-repeat !important; 425 | background-size: 100% 2px, 100% 2px, 2px 100%, 2px 100% !important; 426 | border: 1px solid transparent !important 427 | } 428 | 429 | .swal-button:hover { 430 | color: var(--button-text-hover) !important; 431 | text-shadow: var(--text-shadow) var(--button-color-hover) !important; 432 | box-shadow: var(--box-shadow) var(--button-color-hover) !important; 433 | background-color: var(--button-color-hover) !important; 434 | background: -webkit-gradient(linear, left top, right top, from(var(--button-color-hover)), to(var(--button-color-hover))) !important; 435 | background: linear-gradient(90deg, var(--button-color-hover) 0, var(--button-color-hover)) !important 436 | } 437 | 438 | .switch-button-background.checked { 439 | background-color: #fb7299 !important 440 | } 441 | 442 | .switch-button-label.on { 443 | color: #fb7299 !important 444 | } 445 | 446 | .usage-disk { 447 | color: #fff 448 | } 449 | 450 | div.user-list { 451 | border: 1px solid rgba(255, 255, 255, .15); 452 | background-color: rgba(255, 255, 255, .05) 453 | } 454 | 455 | label.checkbox input:checked~.checkmark { 456 | background: var(--button-color) 457 | } 458 | 459 | .logLine { 460 | background: 0 0 461 | } 462 | 463 | .logLine.spacing { 464 | color: var(--text); 465 | background: var(--modal-bg-color); 466 | background-repeat: repeat, no-repeat; 467 | background-attachment: fixed, fixed; 468 | background-position: center center, center center; 469 | background-size: auto, cover; 470 | -webkit-background-size: auto, cover; 471 | -moz-background-size: auto, cover; 472 | -o-background-size: auto, cover 473 | } 474 | 475 | #sb-info-inner, 476 | #sb-loading-inner, 477 | div.sb-message { 478 | color: var(--text); 479 | background-color: transparent 480 | } 481 | 482 | #sb-title, 483 | #sb-title-inner { 484 | color: var(--text-hover); 485 | background-color: transparent 486 | } 487 | 488 | #sb-wrapper { 489 | border: 1px transparent solid; 490 | color: var(--text); 491 | background: var(--modal-bg-color); 492 | background-repeat: repeat, no-repeat; 493 | background-attachment: fixed, fixed; 494 | background-position: center center, center center; 495 | background-size: auto, cover; 496 | -webkit-background-size: auto, cover; 497 | -moz-background-size: auto, cover; 498 | -o-background-size: auto, cover 499 | } 500 | 501 | #sb-body-inner, 502 | #sb-loading, 503 | iframe { 504 | color: var(--text); 505 | background: 0 0 !important 506 | }div.Panel i.PanelIcon { 507 | color: var(--text-hover) 508 | } 509 | 510 | div.tab[type=radio]+label:hover, 511 | div.tab[type=radio]:checked+label { 512 | border: 1px solid var(--accent-color-hover); 513 | color: var(--text-hover) 514 | } 515 | 516 | div.tab[type=radio]+label { 517 | border: 1px solid rgb(255 255 255 / 25%); 518 | background-color: rgb(0 0 0 / 50%); 519 | opacity: .5 520 | } 521 | 522 | #footer { 523 | color: var(--text); 524 | background: var(--main-bg-color); 525 | background-repeat: repeat, no-repeat; 526 | background-attachment: fixed, fixed; 527 | background-position: center center, center center; 528 | background-size: auto, cover; 529 | -webkit-background-size: auto, cover; 530 | -moz-background-size: auto, cover; 531 | -o-background-size: auto, cover 532 | } 533 | 534 | .ca_holderDocker { 535 | background-color: rgb(0 0 0 / 10%) !important; 536 | border-color: rgb(0 0 0 / 25%)!important 537 | } 538 | 539 | .ca_holderDocker::before { 540 | color: rgb(255 255 255 / 40%) !important 541 | } 542 | 543 | .selectedMenu { 544 | color: rgb(var(--accent-color)) !important 545 | } 546 | 547 | .hoverMenu { 548 | color: var(--link-color-hover) !important 549 | } 550 | 551 | .ca_descriptionArea:hover, 552 | a.ca_repoPopup:hover { 553 | color:var(--button-text-hover) !important 554 | } 555 | 556 | .ca_templatesDisplay .ca_holderFav { 557 | background: rgb(var(--accent-color), .7) !important; 558 | color:var(--label-text-color)!important 559 | } 560 | 561 | a.ca_appreadmore:hover { 562 | color: var(--link-color-hover) !important 563 | } 564 | 565 | .ca_bottomLine .appIcons:hover, 566 | .ca_bottomLine .unpinned:hover { 567 | text-decoration: none; 568 | color: var(--link-color-hover) !important 569 | } 570 | 571 | .tooltipster-sidetip.tooltipster-right .tooltipster-box { 572 | border-left: 3px solid rgb(var(--accent-color)) !important 573 | } 574 | 575 | .tooltipster-sidetip.tooltipster-bottom .tooltipster-box { 576 | border-top: 3px solid rgb(var(--accent-color)) !important 577 | } 578 | 579 | .tooltipster-sidetip.tooltipster-top .tooltipster-arrow-border { 580 | border-top-color: rgb(var(--accent-color)) !important 581 | } 582 | 583 | .tooltipster-sidetip.tooltipster-right .tooltipster-arrow-border { 584 | border-right-color: rgb(var(--accent-color)) !important 585 | } 586 | 587 | .tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-border, 588 | .tooltipster-sidetip.tooltipster-top .tooltipster-box { 589 | border-bottom-color: rgb(var(--accent-color)) !important 590 | } 591 | 592 | .appIconsPopUp:hover { 593 | color: var(--accent-color-hover) !important 594 | } 595 | 596 | a.popUpLink:hover { 597 | color: var(--accent-color-hover) !important 598 | } 599 | 600 | li.caMenuItem { 601 | color: rgb(255 255 255) 602 | } 603 | 604 | li.caMenuItem:hover { 605 | color: var(--link-color-hover) 606 | } 607 | 608 | .ca_holder { 609 | background-color: rgb(0, 0, 0, .25) !important; 610 | border-color: rgba(255, 255, 255, .1) !important 611 | } 612 | 613 | .ca_holder:hover { 614 | background-color: rgba(0, 0, 0, .45) !important 615 | } 616 | 617 | .actionsPopup, 618 | .ca_favouriteRepo, 619 | .donate, 620 | .popupProfile, 621 | .repoPopup, 622 | .supportButton, 623 | .supportPopup { 624 | color: var(--button-text) !important; 625 | background: var(--button-color) !important; 626 | border-color: var(--button-color) !important 627 | } 628 | 629 | .infoButton { 630 | color: var(--button-text) !important; 631 | background: var(--button-color) !important; 632 | border-color: var(--button-color) !important 633 | } 634 | 635 | .infoButton:hover { 636 | background: var(--button-color-hover) !important; 637 | color: var(--button-text-hover) !important; 638 | border-color: var(--button-color-hover) !important 639 | } 640 | 641 | .actionsPopup:hover, 642 | .ca_favouriteRepo:hover, 643 | .donate:hover, 644 | .popupProfile:hover, 645 | .repoPopup:hover, 646 | .supportButton:hover, 647 | .supportPopup:hover { 648 | background: var(--button-color-hover) !important; 649 | color: var(--button-text-hover) !important; 650 | border-color: var(--button-color-hover) !important 651 | } 652 | 653 | .donate a { 654 | color: var(--button-text) !important 655 | } 656 | 657 | .donate:hover a { 658 | color: var(--button-text-hover) !important 659 | } 660 | 661 | .unpinned { 662 | color: var(--button-color) !important 663 | } 664 | 665 | .unpinned:hover { 666 | color: var(--button-color-hover) !important 667 | } 668 | 669 | .ca_readmore:hover, 670 | .enabledIcon:hover, 671 | .homeMore:hover, 672 | .popUpClose:hover { 673 | color: var(--link-color-hover) !important 674 | } 675 | 676 | .ca_readmore, 677 | .homeMore, 678 | .popUpClose { 679 | color: var(--link-color) !important 680 | } 681 | 682 | .sortIcons.enabledIcon { 683 | color: rgb(var(--accent-color)) !important 684 | } 685 | 686 | .sortIcons.enabledIcon:hover { 687 | color: var(--link-color-hover) !important 688 | } 689 | 690 | .sortIcons { 691 | color: var(--text) !important 692 | } 693 | 694 | .sortIcons:hover { 695 | color: var(--text-hover) !important 696 | } 697 | 698 | .pageSelected { 699 | color: rgb(var(--accent-color)) !important 700 | } 701 | 702 | .pageNumber:hover { 703 | color: var(--accent-color-hover) !important 704 | } 705 | 706 | #copyright>a { 707 | color: var(--link-color) 708 | } 709 | 710 | #copyright>a:hover { 711 | color: var(--link-color-hover) 712 | } 713 | 714 | .ca_red { 715 | color: #e22828 !important 716 | } 717 | 718 | .card_readmore { 719 | color: var(--link-color) !important 720 | } 721 | 722 | .card_readmore:hover { 723 | color: var(--link-color-hover) !important 724 | } 725 | 726 | .actionsButton { 727 | color: var(--button-text) !important; 728 | background: var(--button-color) !important 729 | } 730 | 731 | .actionsButton:hover { 732 | color: var(--button-text-hover) !important; 733 | background: var(--button-color-hover) !important 734 | } 735 | 736 | #searchButton:hover { 737 | color: rgb(var(--accent-color)) 738 | } 739 | 740 | #searchBox, 741 | .searchSubmit { 742 | background: rgba(255, 255, 255, .05) !important 743 | } 744 | 745 | .chartMenu:hover { 746 | color: var(--link-color-hover) !important 747 | } 748 | 749 | .sidenav { 750 | background: var(--modal-bg-color) !important; 751 | color: var(--text) !important 752 | } 753 | 754 | div.frame, 755 | div.tabs { 756 | background: var(--main-bg-color); 757 | background-repeat: repeat, no-repeat; 758 | background-attachment: fixed, fixed; 759 | background-position: center center, center center; 760 | background-size: auto, cover; 761 | -webkit-background-size: auto, cover; 762 | -moz-background-size: auto, cover; 763 | -o-background-size: auto, cover 764 | } 765 | 766 | .dropdown-menu { 767 | background: var(--drop-down-menu-bg) !important; 768 | background-repeat: repeat, no-repeat; 769 | background-attachment: fixed, fixed; 770 | background-position: center center, center center; 771 | background-size: auto, cover; 772 | -webkit-background-size: auto, cover; 773 | -moz-background-size: auto, cover; 774 | -o-background-size: auto, cover 775 | } 776 | 777 | .dropdown-menu a { 778 | color: var(--text) !important 779 | } 780 | 781 | .dropdown-menu .divider { 782 | background-color: rgb(255 255 255 / 10%) !important; 783 | border-bottom: 1px solid rgb(255 255 255 / 10%) !important 784 | } 785 | 786 | .dropdown-menu li>a:focus, 787 | .dropdown-menu li>a:hover, 788 | .dropdown-submenu:hover>a { 789 | color: var(--text-hover) !important; 790 | background: rgb(255 255 255 / 10%) !important 791 | } 792 | 793 | div.shade-black { 794 | background-color: rgb(0 0 0 / 15%) !important 795 | } 796 | 797 | ::placeholder { 798 | color: var(--text-muted) !important 799 | } 800 | 801 | :-ms-input-placeholder { 802 | color: var(--text-muted) !important 803 | } 804 | 805 | ::-webkit-input-placeholder { 806 | color: var(--text-muted) !important 807 | } 808 | 809 | .showSweetAlert:not([data-has-cancel-button=false]), 810 | .swal-overlay--show-modal .swal-modal { 811 | background: var(--modal-bg-color); 812 | background-repeat: repeat, no-repeat; 813 | background-attachment: fixed, fixed; 814 | background-position: center center, center center; 815 | background-size: auto, cover; 816 | -webkit-background-size: auto, cover; 817 | -moz-background-size: auto, cover; 818 | -o-background-size: auto, cover 819 | } 820 | 821 | .swal-content, 822 | .swal-content select, 823 | .swal-title, 824 | .sweet-alert h2, 825 | .sweet-alert p { 826 | color: var(--text) !important 827 | } 828 | 829 | blockquote { 830 | border-top: 2px solid rgb(0 0 0 / 25%); 831 | border-bottom: 2px solid rgb(0 0 0 / 25%); 832 | color: var(--text); 833 | background-color: rgb(0 0 0 / 10%) 834 | } 835 | 836 | .UnraidUPC .--hasBanner-custom .UnraidUPC-dropdown { 837 | background: var(--drop-down-menu-bg) !important; 838 | background-repeat: repeat, no-repeat; 839 | background-attachment: fixed, fixed; 840 | background-position: center center, center center; 841 | background-size: auto, cover; 842 | -webkit-background-size: auto, cover; 843 | -moz-background-size: auto, cover; 844 | -o-background-size: auto, cover; 845 | --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 50%) !important; 846 | -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow); 847 | box-shadow: var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow); 848 | color: var(--text) !important 849 | } 850 | 851 | #UnraidUPC .text-beta { 852 | color: var(--text) !important 853 | } 854 | 855 | .UnraidUPC-dropdown a, 856 | .UnraidUPC-dropdown button { 857 | color: var(--text) !important 858 | } 859 | 860 | .UnraidUPC-dropdown .btn-emphasize, 861 | .UnraidUPC-dropdown a:focus, 862 | .UnraidUPC-dropdown a:hover, 863 | .UnraidUPC-dropdown button:focus, 864 | .UnraidUPC-dropdown button:hover { 865 | background-image: -webkit-gradient(linear, left top, right top, from(var(--tw-gradient-stops))); 866 | background-image: linear-gradient(90deg, var(--tw-gradient-stops)); 867 | --tw-gradient-from: var(--accent-color-hover); 868 | --tw-gradient-stops: var(--tw-gradient-from), rgb(var(--accent-color)), rgba(226, 40, 40, 0); 869 | --tw-gradient-to: var(--accent-color-hover); 870 | --tw-text-opacity: 1; 871 | color: rgba(255, 255, 255, var(--tw-text-opacity)); 872 | outline: 0 873 | } 874 | 875 | unraid-authed::part(div[data-v-050c892a]>button) { 876 | background: pink !important 877 | } 878 | 879 | #contDescription { 880 | background: rgb(0 0 0 / 25%); 881 | padding: 1%; 882 | border-radius: 5px 883 | } 884 | 885 | dt { 886 | color: var(--text-hover) 887 | } 888 | 889 | .maxPerPage { 890 | background: transparent !important; 891 | } 892 | 893 | .sweet-alert { 894 | border-style: none !important; 895 | } 896 | 897 | #header .logo { 898 | color: #fff !important; 899 | -webkit-animation: hue 3s infinite; 900 | } 901 | 902 | @-webkit-keyframes hue { 903 | 0% { 904 | -webkit-filter: hue-rotate(0deg); 905 | } 906 | 907 | 5% { 908 | -webkit-filter: hue-rotate(18deg); 909 | } 910 | 911 | 10% { 912 | -webkit-filter: hue-rotate(36deg); 913 | } 914 | 915 | 15% { 916 | -webkit-filter: hue-rotate(54deg); 917 | } 918 | 919 | 20% { 920 | -webkit-filter: hue-rotate(72deg); 921 | } 922 | 923 | 25% { 924 | -webkit-filter: hue-rotate(90deg); 925 | } 926 | 927 | 30% { 928 | -webkit-filter: hue-rotate(108deg); 929 | } 930 | 931 | 35% { 932 | -webkit-filter: hue-rotate(126deg); 933 | } 934 | 935 | 40% { 936 | -webkit-filter: hue-rotate(144deg); 937 | } 938 | 939 | 45% { 940 | -webkit-filter: hue-rotate(162deg); 941 | } 942 | 943 | 50% { 944 | -webkit-filter: hue-rotate(180deg); 945 | } 946 | 947 | 55% { 948 | -webkit-filter: hue-rotate(198deg); 949 | } 950 | 951 | 60% { 952 | -webkit-filter: hue-rotate(216deg); 953 | } 954 | 955 | 65% { 956 | -webkit-filter: hue-rotate(234deg); 957 | } 958 | 959 | 70% { 960 | -webkit-filter: hue-rotate(252deg); 961 | } 962 | 963 | 75% { 964 | -webkit-filter: hue-rotate(270deg); 965 | } 966 | 967 | 80% { 968 | -webkit-filter: hue-rotate(288deg); 969 | } 970 | 971 | 85% { 972 | -webkit-filter: hue-rotate(306deg); 973 | } 974 | 975 | 90% { 976 | -webkit-filter: hue-rotate(324deg); 977 | } 978 | 979 | 95% { 980 | -webkit-filter: hue-rotate(342deg); 981 | } 982 | 983 | 100% { 984 | -webkit-filter: hue-rotate(360deg); 985 | } 986 | } 987 | 988 | .text-18px { 989 | filter: invert(); 990 | } 991 | 992 | .usage-disk>span:first-child { 993 | background-color: #fb7299 !important; 994 | } 995 | /*** 996 | vue-userprofile, 997 | unraid-user-profile { 998 | filter: invert(1); 999 | } 1000 | 1001 | .fa-plus-square, 1002 | .fa-minus-square, 1003 | .fa-unlock, 1004 | .fa-lock { 1005 | padding-right: 4px; 1006 | } 1007 | ***/ 1008 | .logLine { 1009 | background-color: #000; 1010 | } 1011 | 1012 | 1013 | div.title { 1014 | background-color: rgba(0, 0, 0, 0.6); 1015 | border-bottom: none; 1016 | } 1017 | 1018 | #vmform table.multiple { 1019 | background-color: rgb(0 0 0 / 25%) !important; 1020 | } 1021 | 1022 | #vmform .sectiontab { 1023 | background-color: #fb7299 !important; 1024 | } 1025 | 1026 | table.share_status.dashboard tbody { 1027 | border: 1px solid #00000060; 1028 | } 1029 | 1030 | .icon-u-lock { 1031 | color: #fb7299; 1032 | } 1033 | 1034 | .red-orb { 1035 | color: #fb7299; 1036 | } 1037 | 1038 | .nav-user a { 1039 | color: #fb7299; 1040 | } 1041 | 1042 | .nav-item:focus:after, 1043 | .nav-item:hover:after, 1044 | .nav-user.show:hover:after { 1045 | background-color: #fb7299; 1046 | } 1047 | --------------------------------------------------------------------------------