From 425d9480298f4a52057344142e11dc198148ab7c Mon Sep 17 00:00:00 2001 From: Marius <24592972+gilbN@users.noreply.github.com> Date: Mon, 19 Jul 2021 00:23:17 +0200 Subject: [PATCH] duplicacy dracula --- CSS/themes/duplicacy/aquamarine.css | 13 +-- CSS/themes/duplicacy/dark.css | 13 +-- CSS/themes/duplicacy/dracula.css | 16 +++ CSS/themes/duplicacy/duplicacy-base.css | 143 ++++++++++++++++++------ CSS/themes/duplicacy/hotline.css | 13 +-- CSS/themes/duplicacy/organizr-dark.css | 13 +-- CSS/themes/duplicacy/plex.css | 13 +-- CSS/themes/duplicacy/space-gray.css | 13 +-- CSS/variables/organizr-dark.css | 2 +- CSS/variables/space-gray.css | 2 +- 10 files changed, 134 insertions(+), 107 deletions(-) create mode 100644 CSS/themes/duplicacy/dracula.css diff --git a/CSS/themes/duplicacy/aquamarine.css b/CSS/themes/duplicacy/aquamarine.css index ad151c44..458c004a 100644 --- a/CSS/themes/duplicacy/aquamarine.css +++ b/CSS/themes/duplicacy/aquamarine.css @@ -13,15 +13,4 @@ /* DUPLICACY AQUAMARINE THEME */ @import url(https://theme-park.dev/CSS/themes/duplicacy/duplicacy-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; - --button-text: #eee; - --accent-color: #12afa0; - --accent-color-hover: #fff; - --text: #eee; - --text-hover: #fff; - --link-color: #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/duplicacy/dark.css b/CSS/themes/duplicacy/dark.css index 0bdb24d7..ca6fc31a 100644 --- a/CSS/themes/duplicacy/dark.css +++ b/CSS/themes/duplicacy/dark.css @@ -13,15 +13,4 @@ /* DUPLICACY DARK THEME */ @import url(https://theme-park.dev/CSS/themes/duplicacy/duplicacy-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); - --button-text: #eee; - --accent-color: #fff; - --accent-color-hover: rgba(255, 255, 255, 0.45); - --text: #eee; - --text-hover: #fff; - --link-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/duplicacy/dracula.css b/CSS/themes/duplicacy/dracula.css new file mode 100644 index 00000000..4a2f21f8 --- /dev/null +++ b/CSS/themes/duplicacy/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 */ + +/* DUPLICACY DRACULA THEME */ +@import url(https://theme-park.dev/CSS/themes/duplicacy/duplicacy-base.css); +@import url(https://theme-park.dev/CSS/variables/dracula.css); \ No newline at end of file diff --git a/CSS/themes/duplicacy/duplicacy-base.css b/CSS/themes/duplicacy/duplicacy-base.css index 7fe03b17..f17e7b16 100644 --- a/CSS/themes/duplicacy/duplicacy-base.css +++ b/CSS/themes/duplicacy/duplicacy-base.css @@ -22,16 +22,16 @@ body { -o-background-size: auto, cover; } -a { - color: var(--link-color); +a:not(.timeline-content a) { + color: var(--link-color) !important; } -a:hover { - color: #fff; +a:hover:not(.timeline-content a) { + color: var(--link-color-hover) !important; } a.disabled-link { - color: #666; + color: var(--text-muted); } /* Scrollbar */ @@ -45,7 +45,14 @@ a.disabled-link { body { overflow-y: auto; height: 100%; - background: var(--main-bg-color) + background: var(--main-bg-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; } } @@ -75,11 +82,8 @@ a.disabled-link { /* TEXT */ body, -.card, .category, -.card label, .card .labels p, -.card .title, .card .stats, .vis-time-axis .vis-text, .footer .copyright, @@ -89,6 +93,28 @@ body, color: var(--text) !important; } +.h1, +.h2, +.h3, +.h4, +.h5, +.h6, +h1, +h2, +h3, +h4, +h5, +h6, +.card label, +.card, +.card .title { + color: var(--text-hover); +} + +label { + color: var(--text) !important; +} + .main-panel { background: var(--main-bg-color); background-repeat: repeat, no-repeat; @@ -113,7 +139,7 @@ body, } .text-primary { - color: var(--accent-color); + color: rgb(var(--accent-color)); } .text-primary:hover { @@ -155,7 +181,7 @@ body, .col-xs-4 .card, .col-xs-12 .card, .col-xs-8 .card { - background: rgb(255 255 255 / 8%) !important; + background: rgb(0 0 0 / 8%) !important; } #schedule-0, @@ -178,8 +204,9 @@ body, #schedule-17, #schedule-18, #schedule-19, -#schedule-20 { - background-color: rgb(255 255 255 / 8%); +#schedule-20, +[id*="#schedule-"] { + background-color: rgb(0 0 0 / 8%); } /* TIMELINE */ @@ -241,22 +268,26 @@ body, background: rgb(0 0 0 / 10%); } +.sidebar[data-background-color="black"] .logo, .off-canvas-sidebar[data-background-color="black"] .logo { + border-bottom: 1px solid rgba(var(--accent-color)); +} + .sidebar .nav li.active>a:before, .sidebar .nav li.active>a:after { - border-right: 17px solid var(--accent-color); + border-right: 17px solid rgb(var(--accent-color)); } @media (min-width: 992px) { .off-canvas-sidebar .nav li.active>a:before, .off-canvas-sidebar .nav li.active>a:after { - border-right: 17px solid var(--accent-color); + border-right: 17px solid rgb(var(--accent-color)); } } .sidebar[data-active-color="success"] .nav li.active>a, .off-canvas-sidebar[data-active-color="success"] .nav li.active>a { - color: var(--accent-color) !important; + color: rgb(var(--accent-color)) !important; } .sidebar .nav li>a:hover { @@ -281,11 +312,27 @@ body, } .modal-header { - border-bottom: 1px solid rgb(255 255 255 / 25%); + border-bottom: 1px solid rgb(var(--accent-color)); + 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; } .modal-footer { - border-top: 1px solid rgb(255 255 255 / 25%); + border-top: 1px solid rgb(var(--accent-color)); + 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; } .modal-body .nav-tabs>li.active>a, @@ -425,6 +472,7 @@ fieldset[disabled] .form-control { .btn-info.btn-fill:focus { background: var(--button-color-hover); border: var(--button-color-hover); + color: var(--button-text-hover); } .btn-primary { @@ -436,13 +484,13 @@ fieldset[disabled] .form-control { .btn-primary:focus, .btn-primary:active:focus { border-color: var(--button-color-hover); - color: var(--text-hover); + color: var(--button-text-hover); background-color: var(--button-color-hover); } .btn-primary:hover { border-color: var(--button-color-hover); - color: var(--text-hover); + color: var(--button-text-hover); background-color: var(--button-color-hover); } @@ -453,7 +501,7 @@ fieldset[disabled] .form-control { } .btn-primary.btn-fill:hover { - color: var(--text-hover); + color: var(--button-text-hover); background-color: var(--button-color-hover); border-color: var(--button-color-hover); @@ -464,7 +512,7 @@ div>div>div.modal-footer>button.btn.btn-default.pull-left, .btn-danger.btn-fill { border-color: #f05050; background-color: #f05050; - color: var(--button-text); + color: #eee; } div>div>div.modal-footer>button.btn.btn-default.pull-left:hover, @@ -474,20 +522,20 @@ div>div>div.modal-footer>button.btn.btn-default.pull-left:focus, .btn-danger.btn-fill:hover, .btn-danger.btn-fill:focus { border-color: #ec2626; - color: var(--text-hover); + color: #fff; background-color: #ec2626; } div.bootbox.modal.fade.bootbox-confirm.in>div>div>div.modal-footer>button.btn.btn-default { border-color: #f05050; background-color: #f05050; - color: var(--button-text); + color: #eee; } div.bootbox.modal.fade.bootbox-confirm.in>div>div>div.modal-footer>button.btn.btn-default:hover, div.bootbox.modal.fade.bootbox-confirm.in>div>div>div.modal-footer>button.btn.btn-default:focus { border-color: #ec2626; - color: var(--text-hover); + color: #fff; background-color: #ec2626; } @@ -512,12 +560,37 @@ div.bootbox.modal.fade.bootbox-confirm.in>div>div>div.modal-footer>button.btn.bt .btn-success.active, .open>.btn-success.dropdown-toggle { background-color: var(--button-color-hover); - color: var(--text-hover); + color: var(--button-text-hover); border-color: var(--button-color-hover); } +.btn-icon { + background-color: rgb(var(--accent-color)); + color: var(--label-text-color); + border-color: rgb(var(--accent-color)); +} + +.btn-icon.active.focus, +.btn-icon.active:focus, +.btn-icon.active:hover, +.btn-icon:active.focus, +.btn-icon:active:focus, +.btn-icon:active:hover, +.btn-icon:hover, +.btn-icon:focus, +.btn-icon:active, +.btn-icon.active, +.open>.dropdown-toggle.btn-icon.focus, +.open>.dropdown-toggle.btn-icon:focus, +.open>.dropdown-toggle.btn-icon:hover { + background-color: var(--accent-color-hover) !important; + color: var(--label-text-color); + border-color: var(--accent-color-hover); +} + .radio-box input:checked~.radio-button { background-color: var(--button-color); + color: var(--label-text-color); } /* TABLES */ @@ -535,6 +608,7 @@ div.bootbox.modal.fade.bootbox-confirm.in>div>div>div.modal-footer>button.btn.bt .table>thead>tr>th.active, .row-clickable.active { background-color: rgb(0 0 0 / 25%); + color: var(--text-hover); } .fixed-header th { @@ -553,11 +627,14 @@ div.bootbox.modal.fade.bootbox-confirm.in>div>div>div.modal-footer>button.btn.bt .table tbody tr>th, .table tbody tr>td, .table tfoot tr>th, -.table tfoot tr>td, -hr { +.table tfoot tr>td { border-top: 1px solid rgb(255 255 255 / 20%); } +hr { + border-top: 1px solid rgb(var(--accent-color)); +} + .list-group-item { background-color: transparent; } @@ -565,8 +642,8 @@ hr { .list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover { - background-color: var(--accent-color); - border-color: var(--accent-color); + background-color: rgb(var(--accent-color)); + border-color: rgb(var(--accent-color)); } /* PROGRESS BARS */ @@ -575,7 +652,7 @@ hr { } .progress-bar { - background-color: var(--accent-color); + background-color: rgb(var(--accent-color)); } .progress span { @@ -603,6 +680,6 @@ hr { .off-canvas-sidebar .nav li.active>a:before, .off-canvas-sidebar .nav>li.active>a:after { - border-left: 17px solid var(--accent-color); + border-left: 17px solid rgb(var(--accent-color)); } -} +} \ No newline at end of file diff --git a/CSS/themes/duplicacy/hotline.css b/CSS/themes/duplicacy/hotline.css index 9dead5c6..91a7e885 100644 --- a/CSS/themes/duplicacy/hotline.css +++ b/CSS/themes/duplicacy/hotline.css @@ -13,15 +13,4 @@ /* DUPLICACY HOTLINE THEME */ @import url(https://theme-park.dev/CSS/themes/duplicacy/duplicacy-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); - --button-text: #eee; - --accent-color: #F44336; - --accent-color-hover: #0b3161; - --text: #eee; - --text-hover: #fff; - --link-hover: #F44336; -} \ 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/duplicacy/organizr-dark.css b/CSS/themes/duplicacy/organizr-dark.css index f9c0e2fa..23ffe336 100644 --- a/CSS/themes/duplicacy/organizr-dark.css +++ b/CSS/themes/duplicacy/organizr-dark.css @@ -13,15 +13,4 @@ /* DUPLICACY ORGANIZR-DARK THEME */ @import url(https://theme-park.dev/CSS/themes/duplicacy/duplicacy-base.css); -:root { - --main-bg-color: #1f1f1f; - --modal-bg-color: #1b1b1b; - --button-color: #2cabe3; - --button-color-hover: rgb(44 171 227 / .8); - --button-text: #eee; - --accent-color:#2cabe3; - --accent-color-hover: #fff; - --text:#96a2b4; - --text-hover: #fff; - --link-color: #2cabe3; -} \ 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/duplicacy/plex.css b/CSS/themes/duplicacy/plex.css index 0cc2aebc..bff724fd 100644 --- a/CSS/themes/duplicacy/plex.css +++ b/CSS/themes/duplicacy/plex.css @@ -13,15 +13,4 @@ /* DUPLICACY PLEX THEME */ @import url(https://theme-park.dev/CSS/themes/duplicacy/duplicacy-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; - --button-text: #eee; - --accent-color: #e5a00d; - --accent-color-hover: #ffc107; - --text: #eee; - --text-hover: #fff; - --link-color:#fff; -} \ 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/duplicacy/space-gray.css b/CSS/themes/duplicacy/space-gray.css index ef82124b..07ea4f5f 100644 --- a/CSS/themes/duplicacy/space-gray.css +++ b/CSS/themes/duplicacy/space-gray.css @@ -13,15 +13,4 @@ /* DUPLICACY SPACE GRAY THEME */ @import url(https://theme-park.dev/CSS/themes/duplicacy/duplicacy-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; - --button-text: #eee; - --accent-color: #81a6b7; - --accent-color-hover: #81a6b7; - --text: #eee; - --text-hover: #fff; - --link-color: #81a6b7; -} \ No newline at end of file +@import url(https://theme-park.dev/CSS/variables/space-gray.css); \ No newline at end of file diff --git a/CSS/variables/organizr-dark.css b/CSS/variables/organizr-dark.css index 252d3089..b75d8c36 100644 --- a/CSS/variables/organizr-dark.css +++ b/CSS/variables/organizr-dark.css @@ -13,7 +13,7 @@ --button-text-hover: #fff; --accent-color: 44, 171, 227; - --accent-color-hover: white; + --accent-color-hover: rgb(var(--accent-color),.8); --link-color: #2cabe3; --link-color-hover: #3cc5ff; --label-text-color: #fff; diff --git a/CSS/variables/space-gray.css b/CSS/variables/space-gray.css index c2ccc193..ddfda9c5 100644 --- a/CSS/variables/space-gray.css +++ b/CSS/variables/space-gray.css @@ -13,7 +13,7 @@ --button-text-hover: #fff; --accent-color: 129, 166, 183; - --accent-color-hover: #81a6b7; + --accent-color-hover: rgb(var(--accent-color),.8); --link-color: #81a6b7; --link-color-hover: #9adfff; --label-text-color: #fff;