diff --git a/CSS/themes/portainer/aquamarine.css b/CSS/themes/portainer/aquamarine.css index c341193a..6561d569 100644 --- a/CSS/themes/portainer/aquamarine.css +++ b/CSS/themes/portainer/aquamarine.css @@ -13,12 +13,4 @@ /* PORTAINER AQUAMARINE THEME */ @import url(https://theme-park.dev/CSS/themes/portainer/portainer-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - - --button-color: #009688; - --button-color-hover: #12afa0; - --accent-color: #009688; - --accent-color-hover: #12afa0; -} \ No newline at end of file +@import url(https://theme-park.dev/CSS/variables/aquamarine.css); \ No newline at end of file diff --git a/CSS/themes/portainer/dark.css b/CSS/themes/portainer/dark.css index b50a0a72..5610bec4 100644 --- a/CSS/themes/portainer/dark.css +++ b/CSS/themes/portainer/dark.css @@ -13,12 +13,4 @@ /* PORTAINER DARK THEME */ @import url(https://theme-park.dev/CSS/themes/portainer/portainer-base.css); -:root { - --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: hsla(0,0%,100%,.30); - --accent-color: rgba(255, 255, 255, 0.25); - --accent-color-hover: rgba(255, 255, 255, 0.45); - } \ No newline at end of file +@import url(https://theme-park.dev/CSS/variables/dark.css); \ No newline at end of file diff --git a/CSS/themes/portainer/dracula.css b/CSS/themes/portainer/dracula.css new file mode 100644 index 00000000..cb41b14d --- /dev/null +++ b/CSS/themes/portainer/dracula.css @@ -0,0 +1,16 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* PORTAINER DRACULA THEME */ +@import url(https://theme-park.dev/CSS/themes/portainer/portainer-base.css); +@import url(https://theme-park.dev/CSS/variables/dracula.css); \ No newline at end of file diff --git a/CSS/themes/portainer/hotline.css b/CSS/themes/portainer/hotline.css index a2d5cb95..723f99b5 100644 --- a/CSS/themes/portainer/hotline.css +++ b/CSS/themes/portainer/hotline.css @@ -13,12 +13,4 @@ /* PORTAINER HOTLINE THEME */ @import url(https://theme-park.dev/CSS/themes/portainer/portainer-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: hsla(0,0%,100%,.30); - --accent-color: #F44336; - --accent-color-hover: #0b3161; -} \ No newline at end of file +@import url(https://theme-park.dev/CSS/variables/hotline.css); \ No newline at end of file diff --git a/CSS/themes/portainer/organizr-dark.css b/CSS/themes/portainer/organizr-dark.css index a59c15d1..072d7f25 100644 --- a/CSS/themes/portainer/organizr-dark.css +++ b/CSS/themes/portainer/organizr-dark.css @@ -13,12 +13,4 @@ /* PORTAINER ORGANIZR-DARK THEME */ @import url(https://theme-park.dev/CSS/themes/portainer/portainer-base.css); -:root { - --main-bg-color: #1f1f1f; - --modal-bg-color: #1b1b1b; - - --button-color: #2cabe3; - --button-color-hover: rgb(44 171 227 / .8); - --accent-color: #2cabe3; - --accent-color-hover: white; - } \ No newline at end of file +@import url(https://theme-park.dev/CSS/variables/organizr-dark.css); \ No newline at end of file diff --git a/CSS/themes/portainer/plex.css b/CSS/themes/portainer/plex.css index 2e6359ce..c887b325 100644 --- a/CSS/themes/portainer/plex.css +++ b/CSS/themes/portainer/plex.css @@ -13,12 +13,4 @@ /* PORTAINER PLEX THEME */ @import url(https://theme-park.dev/CSS/themes/portainer/portainer-base.css); -:root { - --main-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-light2.png") center center/cover no-repeat fixed; - --modal-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-dark2.png") center center/cover no-repeat fixed; - - --button-color: #cc7b19; - --button-color-hover: #e59029; - --accent-color: #e5a00d; - --accent-color-hover: #ffc107; - } \ No newline at end of file +@import url(https://theme-park.dev/CSS/variables/plex.css); \ No newline at end of file diff --git a/CSS/themes/portainer/portainer-base.css b/CSS/themes/portainer/portainer-base.css index 214c4070..d6848372 100644 --- a/CSS/themes/portainer/portainer-base.css +++ b/CSS/themes/portainer/portainer-base.css @@ -61,13 +61,26 @@ -webkit-background-size: auto, cover; -moz-background-size: auto, cover; -o-background-size: auto, cover; - color: #cccccc !important; + color: var(--text) !important; } - a, ul.sidebar .sidebar-list .sidebar-sublist a { - color: #ccc; + + * { + outline: none !important; + } + + h1,h2,h3,h4,h5,h6,label,legend, + ul.sidebar .sidebar-title.endpoint-name { + color: var(--text-hover); + } + + ul.sidebar .sidebar-list .sidebar-sublist a { + color: var(--text); + } + a { + color: var(--link-color); } a:focus, a:hover { - color: #bbb; + color: var(--link-color-hover); text-decoration: none; } .text-danger { @@ -77,13 +90,13 @@ color: #f44336; } .text-muted { - color: #bbb; + color: var(--text-muted); } .form-section-title { - color: #ccc; + color: var(--text); } ul.sidebar .sidebar-list a { - color: #ccc; + color: var(--text); } /* NEWS */ .motd-body { @@ -104,30 +117,36 @@ } /* SIDEBAR */ #sidebar-wrapper { - background: rgba(0, 0, 0, 0.25); + background: rgba(0, 0, 0, 0.25) ; } .sidebar-header { background: rgba(0, 0, 0, 0.25); } ul.sidebar .sidebar-list a.active { + color: rgb(var(--accent-color)); background: rgba(255, 255, 255, 0.1); - border-left: 3px solid var(--accent-color); + border-left: 3px solid rgb(var(--accent-color)); } - #page-wrapper:not(.open) ul.sidebar .sidebar-title.separator, .sidebar-footer, ul.sidebar .sidebar-list a:hover, ul.sidebar .sidebar-main a { + #page-wrapper:not(.open) ul.sidebar .sidebar-title.separator, + .sidebar-footer, ul.sidebar .sidebar-list a:hover:not(ul.sidebar .sidebar-list a.active), + ul.sidebar .sidebar-main a { background: rgba(255, 255, 255, 0.15); + color: var(--text-hover); } - ul.sidebar .sidebar-list a:hover { - border-left: 3px solid var(--accent-color); + ul.sidebar .sidebar-list a:hover, + #page-wrapper:not(.open) ul.sidebar .sidebar-list a:hover span { + border-left: 3px solid rgb(var(--accent-color)); } + ul.sidebar .sidebar-title { - color: var(--accent-color); + color: rgb(var(--accent-color)); } ul.sidebar .sidebar-list .sidebar-sublist a.active { - border-left: 3px solid var(--accent-color); + border-left: 3px solid rgb(var(--accent-color)); background: rgba(255, 255, 255, .08); } ul.sidebar .sidebar-title { - color: #eee; + color: var(--text-hover); } /* Header */ .row.header { @@ -150,7 +169,7 @@ background: rgba(0, 0, 0, 0.25); } .widget .widget-header { - color: #ccc; + color: var(--text-hover); background-color: rgba(0, 0, 0, .25); border-bottom: 1px solid transparent; } @@ -161,17 +180,17 @@ } .datatable .footer { background: rgba(0, 0, 0, 0.25); - color: #ccc; + color: var(--text); } .blocklist-item--selected, .blocklist-item:hover { background-color: rgba(255, 255, 255, 0.15); - color: #ccc; + color: var(--text); } .datatable .actionBar, .datatable .toolBar { - color: #ccc; + color: var(--text); } .datatable .searchIcon { - color: #ccc; + color: var(--text); } @@ -187,18 +206,25 @@ background-color: rgba(255, 255, 255, 0.08); } .label-default { - background-color: var(--button-color); + color: var(--label-text-color); + background-color: rgb(var(--accent-color)); } /* BUTTONS */ + +.btn-danger:hover { + color: #fff !important; + background-color: #c9302c !important; + border-color: #ac2925 !important; +} .btn-primary, .btn-default { - color: #fff; + color: var(--button-text); background-color: var(--button-color); border-color: var(--button-color); } .btn-default.active, .btn-default:active, .open>.dropdown-toggle.btn-default,.btn-default.active.focus, .btn-default.active:focus, .btn-default.active:hover, .btn-default:active.focus, .btn-default:active:focus, .btn-default:active:hover, .open>.dropdown-toggle.btn-default.focus, .open>.dropdown-toggle.btn-default:focus, .open>.dropdown-toggle.btn-default:hover { - color: #fff; + color: var(--button-text-hover); background-color: var(--button-color-hover); - border-color: transparent; + border-color: var(--button-color-hover); } .btn-link { font-weight: 400; @@ -206,49 +232,67 @@ border-radius: 0; } .btn-primary:hover, .btn-default:hover { - color: #fff; + color: var(--button-text-hover); background-color: var(--button-color-hover); - border-color: transparent; + border-color: var(--button-color-hover); } .btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus { outline: none; } .btn-primary.disabled.focus, .btn-primary.disabled:focus, .btn-primary.disabled:hover, .btn-primary[disabled].focus, .btn-primary[disabled]:focus, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary.focus, fieldset[disabled] .btn-primary:focus, fieldset[disabled] .btn-primary:hover { background-color: var(--button-color-hover); - border-color: transparent; + border-color: var(--button-color-hover); } .bootbox-form .checkbox i, .switch i { background: rgba(255, 255, 255, 0.15); } .btn.focus, .btn:focus, .btn:hover { - color: #fff; + color: var(--button-text-hover); + background-color: var(--button-color-hover); + border-color: var(--button-color-hover); +} +.btn-link:focus, .btn-link:hover { + background: transparent; + color: var(--button-color-hover); + border-color: transparent; +} + +.btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open>.dropdown-toggle.btn-primary.focus, .open>.dropdown-toggle.btn-primary:focus, .open>.dropdown-toggle.btn-primary:hover { + color: var(--button-text-hover); + background-color: var(--button-color-hover); + border-color: var(--button-color-hover); } .ui-select-bootstrap>.ui-select-match>.btn:hover, .ui-select-bootstrap>.ui-select-match>.btn:focus { text-align: left!important; - color: #fff; + color: var(--button-text-hover); background-color: rgba(255, 255, 255, 0.25); border-color: #00000000; } /* PAGINATION */ .pagination>.disabled>a, .pagination>.disabled>a:focus, .pagination>.disabled>a:hover, .pagination>.disabled>span, .pagination>.disabled>span:focus, .pagination>.disabled>span:hover { - color: #ccc; + color: var(--text-muted); cursor: not-allowed; background-color: rgba(255, 255, 255, 0.1); border-color: transparent; } .pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover { z-index: 2; - color: #fff; + color: var(--button-text); cursor: default; - background-color: var(--accent-color); - border-color: transparent; + background-color: var(--button-color-hover); + border-color: var(--button-color-hover); } .pagination>li>a, .pagination>li>span { - color: #ccc; text-decoration: none; - background-color: rgba(255, 255, 255, 0.1); - border: 1px solid rgba(0, 0, 0, 0.1); + color: var(--button-text); + background-color: var(--button-color); + border-color: var(--button-color); } + .pagination>li>a:focus, .pagination>li>a:hover, .pagination>li>span:focus, .pagination>li>span:hover { + color: var(--button-text-hover); + background-color: var(--button-color-hover); + border-color: var(--button-color-hover); +} /* FORM CONTROL */ @@ -257,24 +301,24 @@ border: 1px solid transparent; } - .form-control, output { - color: #ccc; + .form-control:not([disabled]):not(select), output { + color: var(--text-hover); } .form-control:focus { - border-color: transparent; + border-color: rgb(var(--accent-color)); outline: 0; -webkit-box-shadow: none; box-shadow: none; } .input-group-addon { - color: #eee; + color: var(--button-text); background-color: rgba(255, 255, 255, 0.15); border: 1px solid transparent; } /* DROPDOWN MENU */ .dropdown-menu { - background: var(--modal-bg-color); + background: var(--drop-down-menu-bg); background-repeat: repeat, no-repeat; background-attachment: fixed, fixed; background-position: center center, center center; @@ -282,14 +326,21 @@ -webkit-background-size: auto, cover; -moz-background-size: auto, cover; -o-background-size: auto, cover; - color: #ccc; + color: var(--text); } - .dropdown-menu>li>a { - color: #ccc; + .dropdown-menu>li>a, + .ui-select-bootstrap .ui-select-choices-row>span { + color: var(--text); } - .dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover { - background-color: var(--accent-color); + .dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover, + .ui-select-bootstrap .ui-select-choices-row.active>span { + background-color: rgba(0, 0, 0, 0.25); } + .ui-select-bootstrap .ui-select-choices-row>span:focus, .ui-select-bootstrap .ui-select-choices-row>span:hover, + .ui-select-choices-row:hover { + color: var(--text-hover); + background-color: rgba(255, 255, 255, 0.15); +} /* APP TEMPLATES */ @@ -303,7 +354,7 @@ .boxselector_wrapper input[type=radio]:checked+label { background: rgba(255, 255, 255, .15); - color: #fff; + color: var(--text-hover); border-color: transparent; } @@ -313,6 +364,25 @@ background: rgba(0, 0, 0, 0.15); border: 1px solid transparent; } + .boxselector_wrapper input[type=radio]:checked+label:after { + color: rgb(var(--accent-color)); + border: 2px solid rgb(var(--accent-color)); + background: var(--label-text-color); +} + .bootbox-form .checkbox :checked~i, .switch :checked+i { + -webkit-box-shadow: inset 0 0 1px rgb(0 0 0 / 50%), inset 0 0 40px rgb(var(--accent-color)); + box-shadow: inset 0 0 1px rgb(0 0 0 / 50%), inset 0 0 40px rgb(var(--accent-color)); +} +.md-checkbox input[type=checkbox]:checked+label:before { + background: rgb(var(--accent-color)); + border: none; +} +.md-checkbox input[type=checkbox]:checked+label:after { + border-color: var(--label-text-color); +} +.fa.blue-icon, .fab.blue-icon { + color: rgb(var(--accent-color)); +} /* PLACEHOLDER TEXT */ ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #bbb; @@ -337,13 +407,13 @@ caret-color: white; } .CodeMirror-linenumber { - color: var(--accent-color); + color: rgb(var(--accent-color)); } .CodeMirror-line::selection, .CodeMirror-line>span::selection, .CodeMirror-line>span>span::selection { background: #d7d4f0; } .cm-s-default .cm-atom { - color: var(--accent-color); + color: rgb(var(--accent-color)); } /* NAVIGATION */ .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover { @@ -376,7 +446,7 @@ color: #eee; } json-tree .key { - color: var(--accent-color); + color: rgb(var(--accent-color)); padding-right: 5px; } pre { @@ -385,6 +455,23 @@ border: 1px solid transparent; } /* MODAL */ + .close { + float: right; + font-size: 21px; + font-weight: 700; + line-height: 1; + color: var(--text); + text-shadow: 0 1px 0 var(--text); + filter: alpha(opacity=100); + opacity: 1; + } + .close:focus, .close:hover { + color: var(--text-hover); + text-decoration: none; + cursor: pointer; + filter: alpha(opacity=100); + opacity: 1; + } .modal-content { background: var(--modal-bg-color); background-repeat: repeat, no-repeat; @@ -396,10 +483,26 @@ -o-background-size: auto, cover; } .modal-header { - border-bottom: 1px solid rgba(255, 255, 255, 0.20); + background: var(--modal-header-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + border-bottom: 1px solid rgb(var(--accent-color)); } .modal-footer { - border-top: 1px solid rgba(255, 255, 255, .20); + background: var(--modal-footer-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + border-top: 1px solid rgb(var(--accent-color)); } /* STACKS / SERVICES TABLES */ .widget .widget-body table tbody { diff --git a/CSS/themes/portainer/space-gray.css b/CSS/themes/portainer/space-gray.css index fef90ebb..f65f1d73 100644 --- a/CSS/themes/portainer/space-gray.css +++ b/CSS/themes/portainer/space-gray.css @@ -13,12 +13,4 @@ /* LIDARR SPACE GRAY THEME */ @import url(https://theme-park.dev/CSS/themes/portainer/portainer-base.css); -:root { - --main-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - - --button-color: #607D8B; - --button-color-hover: #81a6b7; - --accent-color: #607D8B; - --accent-color-hover: #81a6b7; -} \ No newline at end of file +@import url(https://theme-park.dev/CSS/variables/space-gray.css); \ No newline at end of file