From b149278aac078d2dacff0200deb4ac5960c4123e Mon Sep 17 00:00:00 2001 From: Marius <24592972+gilbN@users.noreply.github.com> Date: Sat, 17 Jul 2021 17:18:22 +0200 Subject: [PATCH] calibre-web dracula --- CSS/themes/calibreweb/aquamarine.css | 14 +- CSS/themes/calibreweb/calibreweb-base.css | 354 +++++++++++++++++++--- CSS/themes/calibreweb/dark.css | 14 +- CSS/themes/calibreweb/dracula.css | 26 ++ CSS/themes/calibreweb/hotline.css | 14 +- CSS/themes/calibreweb/organizr-dark.css | 14 +- CSS/themes/calibreweb/space-gray.css | 14 +- CSS/variables/dracula.css | 2 +- 8 files changed, 377 insertions(+), 75 deletions(-) create mode 100644 CSS/themes/calibreweb/dracula.css diff --git a/CSS/themes/calibreweb/aquamarine.css b/CSS/themes/calibreweb/aquamarine.css index b8ddb2c4..b28c56bd 100644 --- a/CSS/themes/calibreweb/aquamarine.css +++ b/CSS/themes/calibreweb/aquamarine.css @@ -14,11 +14,13 @@ /* CALIBRE-WEB AQUAMARINE THEME */ /* Set theme to CaliBlur in UI Configuration -> View Configuration -> Theme -> CaliBlur -> Submit */ @import url(https://theme-park.dev/CSS/themes/calibreweb/calibreweb-base.css); +@import url(https://theme-park.dev/CSS/variables/aquamarine.css); + +/* APP VARS*/ :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; - --color-primary: #12afa0; - --color-secondary: #009688; - --color-secondary-hover: #12afa0; - --color-background-mobile: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; + --color-background: var(--main-bg-color); + --color-primary: rgb(var(--accent-color)); + --color-secondary: var(--button-color); + --color-secondary-hover: var(--button-color-hover); + --color-background-mobile: var(--main-bg-color); } \ No newline at end of file diff --git a/CSS/themes/calibreweb/calibreweb-base.css b/CSS/themes/calibreweb/calibreweb-base.css index 050177f0..659d50a2 100644 --- a/CSS/themes/calibreweb/calibreweb-base.css +++ b/CSS/themes/calibreweb/calibreweb-base.css @@ -1,44 +1,310 @@ - - -/* 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 */ - -/* "Re-skin" of CaliBlur https://github.com/leram84/layer.Cake/tree/master/caliBlur */ -/* Set theme to CaliBlur in UI Configuration -> View Configuration -> Theme -> CaliBlur -> Submit */ -body:not(.read-frame) { - background: var(--main-bg-color) !important; - background-image: none; -} -.blur-wrapper:after { - background: var(--modal-bg-color) !important; -} -body>.container-fluid { - background: var(--main-bg-color); -} -body.login:not(.read-frame), body.shelfcreate, body.shelfedit { - background: var(--main-bg-color) !important; -} -@media only screen and (max-width: 767px) { - .navbar-collapse.collapse { - background: var(--modal-bg-color) !important; - } - } -/* Book cover border */ -.container-fluid .book .cover span img { - border: 1px solid transparent; -} - -/* Buttons */ -.btn-default a, -.btn-default a:hover { - color: var(--text); -} + /* 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 */ + + /* "Re-skin" of CaliBlur https://github.com/leram84/layer.Cake/tree/master/caliBlur */ + /* Set theme to CaliBlur in UI Configuration -> View Configuration -> Theme -> CaliBlur -> Submit */ + *, + *:focus, + *:active, + .bootstrap-select .dropdown-toggle:focus, + .bootstrap-select>select.mobile-device:focus+.dropdown-toggle { + outline: none !important; + } + + body:not(.read-frame) { + background: var(--main-bg-color) !important; + background-image: none; + } + + .blur-wrapper:after { + background: var(--modal-bg-color) !important; + } + + body>.container-fluid { + background: var(--main-bg-color); + } + + body.login:not(.read-frame), + body.shelfcreate, + body.shelfedit { + background: var(--main-bg-color) !important; + } + + @media only screen and (max-width: 767px) { + .navbar-collapse.collapse { + background: var(--modal-bg-color) !important; + } + } + + /* Book cover border */ + .container-fluid .book .cover span img { + border: 1px solid transparent; + } + + /* Buttons */ + .btn-default a, + .btn-default a:hover { + color: var(--text); + } + + /* TP */ + + /* TEXT */ + + .h1, + .h2, + .h3, + .h4, + .h5, + .h6, + h1, + h2, + h3, + h4, + h5, + h6, + body.admin>div.container-fluid>div>div.col-sm-10>div.container-fluid>div.row:first-of-type>div.col>h2:before, + body.admin>div.container-fluid>div>div.col-sm-10>div.discover>h2:first-of-type:before, + body.edituser.admin>div.container-fluid>div.row-fluid>div.col-sm-10>div.discover>h1:before, + body.newuser.admin>div.container-fluid>div.row-fluid>div.col-sm-10>div.discover>h1:before, + .container-fluid .book .meta .author, + .container-fluid .book .meta .author>a:hover, + .well>h2, + body:not(.admin)>div.container-fluid>div>div.col-sm-10>div.discover:only-of-type>h2 { + color: var(--text-hover) !important; + } + + + body, + html, + p { + color: var(--text) !important; + } + + .home-btn>a, + .plexBack>a, + .container-fluid .book .meta .author, + .container-fluid .book .meta .author>a { + color: var(--text); + } + + .home-btn>a:hover, + body>div.navbar.navbar-default.navbar-static-top>div>div.home-btn>a:hover:before, + .plexBack:not(.noBack):hover>a, + .form-group>label, + label, + body.authorlist>div.container-fluid>div>div.col-sm-10>div.container:before, + body.catlist>div.container-fluid>div>div.col-sm-10>div.container:before, + body.langlist>div.container-fluid>div>div.col-sm-10>div.container:before, + body.me>div.container-fluid>div>div.col-sm-10>div.discover:before, + body.serieslist>div.container-fluid>div>div.col-sm-10>div.container:before { + color: var(--text-hover) + } + + /* LINKS */ + a, + body.admin, + body.admin td>a { + color: var(--link-color); + } + + a:hover, + body.admin td>a:hover { + color: var(--link-color-hover); + } + + .navigation .create-shelf a, + .meta>a>p { + color: var(--link-color) !important; + } + + .navigation .create-shelf a:hover, + .author>a:hover, + .meta>a>p:hover { + color: var(--link-color-hover) !important; + } + + /* tables */ + + th, + body.tasks>div.container-fluid>div>div.col-sm-10>div.discover>div.bootstrap-table>div.fixed-table-container>div.fixed-table-body>#table>thead>tr>th>.th-inner { + color: var(--text-hover) !important; + } + + + /* MODAL */ + .modal-content { + background-color: var(--modal-bg-color); + } + #GeneralDeleteModal .bg-danger { + background: var(--modal-bg-color); + } + + /* ICONS */ + .glyphicon, + #add-to-shelf>span, + #btnGroupDrop1>span, + #readbtn>span, + #sendbtn>span, + .book-meta .btn-toolbar>.btn-group>.btn-group:nth-child(1)>a:first-of-type>span, + .book-meta .btn-toolbar>.btn-group>.btn-warning>span, + .btn-toolbar>.btn-group>#btnGroupDrop2>span, + .btn-toolbar>.btn-group>.btn-group>#btnGroupDrop2>span, + div[aria-label="Edit/Delete book"]>.btn>span { + color: var(--text); + + } + + #add-to-shelf:hover span, + #btnGroupDrop1:hover>span, + #readbtn:hover>span, + #sendbtn:hover>span, + .book-meta .btn-toolbar>.btn-group>.btn-group:nth-child(1)>a:first-of-type:hover>span, + .book-meta .btn-toolbar>.btn-group>.btn-warning:hover>span, + .btn-toolbar>.btn-group>#btnGroupDrop2:hover>span, + .btn-toolbar>.btn-group>.btn-group>#btnGroupDrop2:hover>span, + div[aria-label="Edit/Delete book"]>.btn>span:hover, + #btnGroupDrop1[aria-expanded=true] > span, #shelf-actions > .btn-group.open > #add-to-shelf > span { + color: var(--text-hover); + } + + + /* DROPDOWN MENU */ + .dropdown-menu { + background-color: var(--drop-down-menu-bg) !important; + max-height: none !important; + } + + .dropdown-menu>li>a { + color: var(--text); + } + + .dropdown-menu>li>a:focus, + .dropdown-menu>li>a:hover { + color: var(--text-hover); + background: hsla(0, 0%, 100%, .08); + } + + /* SIDEMENU */ + .navigation li a:hover .glyphicon, + .navigation li a:hover { + color: rgb(var(--accent-color)); + } + + .navigation li a { + color: var(--text); + } + + .navigation .nav-head { + color: var(--text-hover); + } + + body>div.navbar.navbar-default.navbar-static-top>div>div.navbar-header>a:hover { + color: var(--accent-color-hover) !important; + -webkit-transition: color .2s; + -o-transition: color .2s; + transition: color .2s; + background-color: rgba(0, 0, 0, .55) !important; + } + + /* NAVBAR */ + .navbar-default .navbar-nav>li>a:focus .glyphicon, + .navbar-default .navbar-nav>li>a:hover .glyphicon { + color: var(--text-hover) !important; + } + + /* BUTTONS */ + + + .btn-primary, + .btn-primary>span.glyphicon:not(#edit_book > span):not(#btnGroupDrop1 > span.glyphicon.glyphicon-download):not(#add-to-shelf span) { + color: var(--button-text); + background-color: var(--button-color); + border-color: var(--button-color); + } + + .btn-primary:hover:not(#add-to-shelf), + .btn-primary:hover>span.glyphicon:not(#edit_book > span):not(#btnGroupDrop1 > span.glyphicon.glyphicon-download):not(#edit_book):not(#add-to-shelf span):not(#add-to-shelf) { + border-color: var(--button-color-hover); + } + + .btn-primary.active, + .btn-primary:active, + .btn-primary:focus, + .btn-primary:hover, + .open .dropdown-toggle.btn-primary, + .btn-primary:focus>span.glyphicon:not(#edit_book > span):not(#btnGroupDrop1 > span.glyphicon.glyphicon-download):not(#add-to-shelf span), + .btn-primary:active>span.glyphicon:not(#edit_book > span):not(#btnGroupDrop1 > span.glyphicon.glyphicon-download):not(#add-to-shelf span), + .btn-primary:hover>span.glyphicon:not(#edit_book > span):not(#btnGroupDrop1 > span.glyphicon.glyphicon-download):not(#add-to-shelf span) { + background-color: var(--button-color-hover); + } + + .btn-primary.active.focus:not(#edit_book):not(#add-to-shelf):not([data-original-title="Download :"]):not(#btnGroupDrop1), + .btn-primary.active:focus:not(#edit_book):not(#add-to-shelf):not([data-original-title="Download :"]):not(#btnGroupDrop1), + .btn-primary.active:hover:not(#edit_book):not(#add-to-shelf):not([data-original-title="Download :"]):not(#btnGroupDrop1), + .btn-primary:active.focus:not(#edit_book):not(#add-to-shelf:not([data-original-title="Download :"])):not(#btnGroupDrop1), + .btn-primary:active:focus:not(#edit_book):not(#add-to-shelf):not([data-original-title="Download :"]):not(#btnGroupDrop1), + .btn-primary:active:hover:not(#edit_book):not(#add-to-shelf):not([data-original-title="Download :"]):not(#btnGroupDrop1), + .open>.dropdown-toggle.btn-primary.focus:not(#edit_book):not(#add-to-shelf):not([data-original-title="Download :"]):not(#btnGroupDrop1), + .open>.dropdown-toggle.btn-primary:focus:not(#edit_book):not(#add-to-shelf):not([data-original-title="Download :"]):not(#btnGroupDrop1), + .open>.dropdown-toggle.btn-primary:hover:not(#edit_book):not(#add-to-shelf):not([data-original-title="Download :"]):not(#btnGroupDrop1), + .btn-primary:hover>span.glyphicon:not(#edit_book > span):not(#btnGroupDrop1 > span.glyphicon.glyphicon-download):not(#edit_book):not(#add-to-shelf span):not([data-original-title="Download :"]):not(#btnGroupDrop1), + .btn-primary:active>span.glyphicon:not(#edit_book > span):not(#btnGroupDrop1 > span.glyphicon.glyphicon-download):not(#edit_book):not(#add-to-shelf span):not([data-original-title="Download :"]):not(#btnGroupDrop1), + .btn-primary:focus>span.glyphicon:not(#edit_book > span):not(#btnGroupDrop1 > span.glyphicon.glyphicon-download):not(#edit_book):not(#add-to-shelf span):not([data-original-title="Download :"]):not(#btnGroupDrop1) { + color: var(--button-text-hover); + background-color: var(--button-color-hover); + border-color: var(--button-color-hover); + } + + .book-meta>.bookinfo .btn-info, + .book-meta>.bookinfo .btn-success { + background-color: rgb(var(--accent-color)); + color: var(--label-text-color); + font-size: 13px; + display: inline-block; + border-radius: 4px; + vertical-align: middle; + font-family: Open Sans Bold, Helvetica Neue, Helvetica, Arial, sans-serif; + -webkit-transition: background-color .2s, color .2s; + -o-transition: background-color .2s, color .2s; + transition: background-color .2s, color .2s; + text-transform: uppercase; + } + + .book-meta>.bookinfo .btn-info:hover, + .book-meta>.bookinfo .btn-success:hover { + color: var(--label-text-color); + text-decoration: none; + background: var(--accent-color-hover); + } + + [data-target="#fileModal"] span { + color: var(--button-text); + } + + [data-target="#fileModal"]:hover span { + color: var(--button-text-hover); + } + + /* ALERT */ + + .alert { + background: var(--modal-bg-color); + color: var(--text-hover); + } + + /* SERIES PAGE */ + .cover .badge { + color: var(--label-text-color); + background-color: rgb(var(--accent-color)); + +} \ No newline at end of file diff --git a/CSS/themes/calibreweb/dark.css b/CSS/themes/calibreweb/dark.css index aac049e3..7dadd52a 100644 --- a/CSS/themes/calibreweb/dark.css +++ b/CSS/themes/calibreweb/dark.css @@ -14,11 +14,13 @@ /* CALIBRE-WEB DARK THEME */ /* Set theme to CaliBlur in UI Configuration -> View Configuration -> Theme -> CaliBlur -> Submit */ @import url(https://theme-park.dev/CSS/themes/calibreweb/calibreweb-base.css); +@import url(https://theme-park.dev/CSS/variables/dark.css); + +/* APP VARS*/ :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; - --color-primary: #F9BE03; - --color-secondary: #CC7B19; - --color-secondary-hover: #E59029; - --color-background-mobile: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; + --color-background: var(--main-bg-color); + --color-primary: rgb(var(--accent-color)); + --color-secondary: var(--button-color); + --color-secondary-hover: var(--button-color-hover); + --color-background-mobile: var(--main-bg-color); } \ No newline at end of file diff --git a/CSS/themes/calibreweb/dracula.css b/CSS/themes/calibreweb/dracula.css new file mode 100644 index 00000000..69ece070 --- /dev/null +++ b/CSS/themes/calibreweb/dracula.css @@ -0,0 +1,26 @@ + +/* 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 */ + +/* CALIBRE-WEB DRACULA THEME */ +/* Set theme to CaliBlur in UI Configuration -> View Configuration -> Theme -> CaliBlur -> Submit */ +@import url(https://theme-park.dev/CSS/themes/calibreweb/calibreweb-base.css); +@import url(https://theme-park.dev/CSS/variables/dracula.css); + +/* APP VARS*/ +:root { + --color-background: var(--main-bg-color); + --color-primary: rgb(var(--accent-color)); + --color-secondary: var(--button-color); + --color-secondary-hover: var(--button-color-hover); + --color-background-mobile: var(--main-bg-color); + } \ No newline at end of file diff --git a/CSS/themes/calibreweb/hotline.css b/CSS/themes/calibreweb/hotline.css index 80b5305d..6d65bdae 100644 --- a/CSS/themes/calibreweb/hotline.css +++ b/CSS/themes/calibreweb/hotline.css @@ -14,11 +14,13 @@ /* CALIBRE-WEB HOTLINE THEME */ /* Set theme to CaliBlur in UI Configuration -> View Configuration -> Theme -> CaliBlur -> Submit */ @import url(https://theme-park.dev/CSS/themes/calibreweb/calibreweb-base.css); +@import url(https://theme-park.dev/CSS/variables/hotline.css); + +/* APP VARS*/ :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; - --color-primary: #ff6155; - --color-secondary: #F44336; - --color-secondary-hover: #0b3161; - --color-background-mobile: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; + --color-background: var(--main-bg-color); + --color-primary: rgb(var(--accent-color)); + --color-secondary: var(--button-color); + --color-secondary-hover: var(--button-color-hover); + --color-background-mobile: var(--main-bg-color); } \ No newline at end of file diff --git a/CSS/themes/calibreweb/organizr-dark.css b/CSS/themes/calibreweb/organizr-dark.css index a8d6e80b..225456c2 100644 --- a/CSS/themes/calibreweb/organizr-dark.css +++ b/CSS/themes/calibreweb/organizr-dark.css @@ -14,11 +14,13 @@ /* CALIBRE-WEB ORGANIZR-DARK THEME */ /* Set theme to CaliBlur in UI Configuration -> View Configuration -> Theme -> CaliBlur -> Submit */ @import url(https://theme-park.dev/CSS/themes/calibreweb/calibreweb-base.css); +@import url(https://theme-park.dev/CSS/variables/organizr-dark.css); + +/* APP VARS*/ :root { - --main-bg-color: #1f1f1f; - --modal-bg-color: #1b1b1b; - --color-primary: #2cabe3; - --color-secondary: #2cabe3; - --color-secondary-hover: rgb(44 171 227 / .8); - --color-background-mobile: #1f1f1f; + --color-background: var(--main-bg-color); + --color-primary: rgb(var(--accent-color)); + --color-secondary: var(--button-color); + --color-secondary-hover: var(--button-color-hover); + --color-background-mobile: var(--main-bg-color); } \ No newline at end of file diff --git a/CSS/themes/calibreweb/space-gray.css b/CSS/themes/calibreweb/space-gray.css index 0cf11718..d54ab73b 100644 --- a/CSS/themes/calibreweb/space-gray.css +++ b/CSS/themes/calibreweb/space-gray.css @@ -14,11 +14,13 @@ /* CALIBRE-WEB SPACE GRAY THEME */ /* Set theme to CaliBlur in UI Configuration -> View Configuration -> Theme -> CaliBlur -> Submit */ @import url(https://theme-park.dev/CSS/themes/calibreweb/calibreweb-base.css); +@import url(https://theme-park.dev/CSS/variables/space-gray.css); + +/* APP VARS*/ :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; - --color-primary: #c3dde8; - --color-secondary: #81a6b7; - --color-secondary-hover: #607D8B; - --color-background-mobile: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; + --color-background: var(--main-bg-color); + --color-primary: rgb(var(--accent-color)); + --color-secondary: var(--button-color); + --color-secondary-hover: var(--button-color-hover); + --color-background-mobile: var(--main-bg-color); } \ No newline at end of file diff --git a/CSS/variables/dracula.css b/CSS/variables/dracula.css index dd8db768..662b1147 100644 --- a/CSS/variables/dracula.css +++ b/CSS/variables/dracula.css @@ -13,7 +13,7 @@ --button-text-hover: #FFF; --accent-color: 80, 250, 123; - --accent-color-hover: #50fa7b; + --accent-color-hover: rgb(var(--accent-color),.8); --link-color: #ff79c6; --link-color-hover: #8be9fd; --label-text-color: #282a36;