Akamaru/Ubooquity-Simple-Dark-Theme
1
0
Fork 0
Code Issues Activity
Files
master
Ubooquity-Simple-Dark-Theme/library/library.css
Akamaru 02a357b0e4 Hell zu Dunkel
2025-09-15 21:35:26 +02:00

753 lines
13 KiB
CSS
Raw Permalink Blame History

:root {
--cover-width: {{coverWidth}}px;
--cover-height: {{coverHeight}}px;
}
body {
margin:0px;
padding:0px;
background-color: #1a1a1a;
color: #e0e0e0;
text-align:center;
}
a {
color: #cccccc;
text-decoration: none;
outline: none;
}
a img {
border: 1px solid #555555;
box-shadow: 10px 10px 5px #000000;
}
.hidden {
visibility:hidden;
}
.rootlink {
font-family:"Arial";
font-size:30px;
font-weight:bold;
display : inline-block;
padding : 5px;
background-color:#333333;
width : 500px;
border-radius: 10px;
-webkit-border-radius: 10px;
}
@media (max-width: 810px) {
#toppagebar
{
position:fixed;
z-index:5;
top:0px;
left:0px;
height:140px;
width:100%;
background-color:#1a1a1a;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}
#group
{
margin-top:150px;
margin-left:10px;
margin-right:10px;
}
#topbarleft
{
position:absolute;
top:70px;
left:0px;
}
#topbarright
{
position:absolute;
top:70px;
right:0px;
}
}
@media (min-width: 811px) {
#toppagebar
{
position:fixed;
z-index:5;
top:0px;
left:0px;
height:70px;
width:100%;
background-color:#1a1a1a;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}
#group
{
margin-top:100px;
margin-left:10px;
margin-right:10px;
}
#topbarleft
{
float: left;
}
#topbarright
{
float: right;
}
}
#topbarcenter {
margin-left:auto;
margin-right:auto;
width:500px
}
#pagelabel {
float:left;
width:120px;
margin-top:10px;
font-weight:bold;
font-family:"Arial";
font-size:22px;
color:#888888;
}
#pagelabeltotal {
font-size:16px;
color:#aaaaaa;
}
.topbutton {
float:left;
width:52px;
height:52px;
margin: 10px 18px 10px 18px;
opacity: 0.5;
}
#arrowup {
background-image:url('{{rootPath}}/theme/library/arrowup.svg');
background-repeat:no-repeat;
}
#arrowleft {
background-image:url('{{rootPath}}/theme/library/arrowleft.svg');
background-repeat:no-repeat;
}
#arrowleft10 {
background-image:url('{{rootPath}}/theme/library/arrowleft10.svg');
background-repeat:no-repeat;
}
#arrowright {
background-image:url('{{rootPath}}/theme/library/arrowright.svg');
background-repeat:no-repeat;
}
#arrowright10 {
background-image:url('{{rootPath}}/theme/library/arrowright10.svg');
background-repeat:no-repeat;
}
#random {
background-image:url('{{rootPath}}/theme/library/random.svg');
background-repeat:no-repeat;
}
#search {
background-image:url('{{rootPath}}/theme/library/search.svg');
background-repeat:no-repeat;
}
#settings {
background-image:url('{{rootPath}}/theme/library/settings.svg');
background-repeat:no-repeat;
}
#banner {
position: absolute;
top:0px;
left:0px;
height: 100px;
width:100%;
background-image:url('{{rootPath}}/theme/common/banner.png');
background-color:#1a1a1a;
background-repeat:no-repeat;
background-position:20px center;
}
.cell {
float: left;
width: var(--cover-width);
height: calc(var(--cover-height) + 44px);
margin: 0 15px 15px 0;
padding: 5px;
}
.cellcontainer {
display: inline-block;
}
.thumb {
width: var(--cover-width);
height: var(--cover-height);
text-align:center;
}
.thumb img
{
max-width: var(--cover-width);
max-height: var(--cover-height);
}
.label {
margin: 12px 0 0 0;
font-family:"Arial";
font-size:14px;
height:50px;
overflow:hidden;
font-family:"Arial";
color:#e0e0e0;
}
.author {
color:#aaaaaa;
}
.title {
color:#cccccc;
}
.numberblock{
position:relative;
float:right;
top: calc(0px - var(--cover-height) - 54px + var(--cover-height)/10);
right:-22px;
}
.number {
background: transparent url('{{rootPath}}/theme/library/sliding-right.png') no-repeat scroll top right;
display: block;
float: left;
height: 39px;
margin-right: 7px;
padding-right: 16px;
text-decoration: none;
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
}
.number span
{
background: transparent url('{{rootPath}}/theme/library/sliding-left.png') no-repeat; display: block;
height: 39px;
padding: 10px 0 5px 8px;
}
#dimoverlay {
visibility:hidden;
z-index:6;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
text-align: center;
background-image:url('{{rootPath}}/theme/library/dimoverlay.png');
display: block;
}
#pageselector {
display:none;
width:420px;
font-family:"Arial";
font-size:30px;
font-weight:bold;
}
#searchbox {
display:none;
width:420px;
font-family:"Arial";
font-size:30px;
font-weight:bold;
}
#settingsbox
{
display:none;
width:420px;
font-family:"Arial";
font-size:30px;
font-weight:bold;
}
.popupmenu {
display:none;
position:fixed;
top:0px;
left:0px;
right:0px;
z-index:9;
display: inline-block;
margin-left: auto;
margin-right: auto;
margin-top: 3%;
padding:10px;
background-color: #2a2a2a;
border: 1px solid #555555;
box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.8);
overflow:auto;
max-height: 80%
}
.popuptitle {
clear:both;
padding-bottom:20px;
margin-top:10px;
margin-bottom:20px;
border-bottom: 1px #444444 solid;
}
.categorytitle{
text-transform: capitalize;
color: #aaaaaa;
}
.pagenumber {
border-radius: 25px;
-webkit-border-radius: 25px;
float:left;
background-color: #444444;
width: 50px;
height: 38px;
padding-top:10px;
margin:5px;
font-size: 24px;
color: #e0e0e0;
}
.currentpagenumber {
color:black;
background-color: #2a2a2a;
}
.actionbutton {
cursor: pointer;
font-size:16px;
font-weight:bold;
background: #555555;
color: #FFF;
border-radius: 15px;
height:32px;
width:75px;
margin-left:30px;
margin-right:30px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
padding: 1px 0px 1px 0px;
border: solid 1px #555555;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 1px rgba(0, 0, 0, 0.5);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 1px rgba(0, 0, 0, 0.5);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 1px rgba(0, 0, 0, 0.5);
}
.actionbutton:hover {
filter: brightness(90%);
}
.textbox{
height:25px;
width: 200px;
border: 1px solid #555555;
color: #e0e0e0;
background-color: #333333;
-moz-box-shadow: 0 2px 4px #000000 inset;
-webkit-box-shadow: 0 2px 4px #000000 inset;
box-shadow: 0 2px 4px #000000 inset;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
#searchright {
border: 0;
background: url('{{rootPath}}/theme/library/arrowright.svg');
cursor: pointer;
}
#searchright10 {
border: 0;
background: url('{{rootPath}}/theme/library/arrowright10.svg');
cursor: pointer;
}
#searchleft {
border: 0;
background: url('{{rootPath}}/theme/library/arrowleft.svg');
cursor: pointer;
}
#searchleft10 {
border: 0;
background: url('{{rootPath}}/theme/library/arrowleft10.svg');
cursor: pointer;
}
.searcharrowform {
display : inline;
}
.sectiontitle {
font-size:24px;
margin-top: 20px;
}
.radiolabel {
display: inline-block;
font-size: 18px;
margin: 15px 25px 5px 5px;
padding: 5px;
width: 150px;
border-radius: 10px;
background-color:#333333;
}
#folderinfo{
font-family:"Arial";
font-size:16px;
text-align: justify;
padding:10px;
}
/*****************************************/
/* BOOK DETAILS */
/*****************************************/
#bookdetails {
display:none;
width:580px;
}
#progressbar{
position:relative;
top:131px;
border: 0;
background: url('{{rootPath}}/theme/library/progressbar.gif');
background-repeat:no-repeat;
margin:auto;
width:48px;
height:48px;
}
#details {
font-family:"Arial";
display: flex;
flex-direction: column;
}
#details_upper_row {
display: flex;
flex-direction: row;
}
#details_cover_progress{
display: flex;
flex-direction: column;
margin: 5px;
}
#details_info_panel{
display: flex;
flex-direction: column;
margin: 5px 10px 5px 10px;
}
#details_button_row{
display: flex;
flex-direction: row;
justify-content: space-around;
background-color: #2a2a2a;
padding: 2px;
width: 90%;
margin-left: auto;
margin-right: auto;
}
#details_right_col{
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
padding-right: 2px;
overflow-wrap: anywhere;
}
#details_close {
position: absolute;
top:5px;
right: 5px;
width:24px;
height:24px;
background-image:url('{{rootPath}}/theme/library/close.svg');
background-repeat:no-repeat;
opacity:0.5;
}
#details_cover {
width: var(--cover-width);
height: var(--cover-height) + 34px;
}
#details_progress {
float:left;
width: var(--cover-width);
height: 34px;
}
#details_cover img{
border: 1px solid #555555;
}
#details_title{
font-size:18px;
font-weight:bold;
text-align:left;
}
#details_authors{
margin-top:0.3rem;
font-size:16px;
font-weight:bold;
text-align:left;
color:#aaaaaa;
}
#details_series{
margin-top:0.3rem;
font-size:16px;
text-align:left;
}
#details_series::before{
width: 1rem;
height: 1rem;
content:url('{{rootPath}}/theme/library/series.svg');
display: inline-block;
margin-right: 10px;
vertical-align: text-bottom;
opacity: 0.5;
}
#details_tags{
margin-top: 1rem;
font-size:16px;
text-align:left;
font-style:italic
}
#details_tags::before{
width: 1rem;
height: 1rem;
content:url('{{rootPath}}/theme/library/tag.svg');
display: inline-block;
margin-right: 10px;
vertical-align: text-bottom;
opacity: 0.5;
}
#details_language{
margin-top:0.2rem;
font-size:16px;
text-align:left;
}
#details_language::before{
width: 1rem;
height: 1rem;
content:url('{{rootPath}}/theme/library/language.svg');
display: inline-block;
margin-right: 10px;
vertical-align: text-bottom;
opacity: 0.5;
}
#details_file{
margin-top:0.2rem;
font-size:16px;
text-align:left;
}
#details_file::before{
width: 1rem;
height: 1rem;
content:url('{{rootPath}}/theme/library/file.svg');
display: inline-block;
margin-right: 10px;
vertical-align: text-bottom;
opacity: 0.5;
}
#details_publication{
margin-top:0.2rem;
font-size:16px;
text-align:left;
font-style: italic;
}
.details_rating {
float:left;
margin-top:0.2rem;
text-align:left;
font-size:22px;
}
#details_description {
clear: both;
text-align:left;
overflow-y:auto;
color:#cccccc;
padding:15px;
}
#details_description a {
text-decoration: underline;
}
.details_button{
font-size: 12px;
align: left;
width: 80px;
}
#details_download {
width:42px;
height:42px;
background-image:url('{{rootPath}}/theme/library/download.svg');
display: inline-block;
vertical-align: middle;
opacity: 0.7;
}
#details_read{
width:42px;
height:42px;
background-image:url('{{rootPath}}/theme/library/read.svg');
display: inline-block;
vertical-align: middle;
opacity: 0.7;
}
#details_mark_unread {
width:42px;
height:42px;
background-image:url('{{rootPath}}/theme/library/mark-unread.svg');
display: inline-block;
vertical-align: middle;
opacity: 0.7;
}
#details_mark_finished {
width:42px;
height:42px;
background-image:url('{{rootPath}}/theme/library/mark-finished.svg');
display: inline-block;
vertical-align: middle;
opacity: 0.7;
}
.cover_progress_bar {
--prog_fg: #e0e0e0;
position: relative;
bottom: 1.2rem;
margin-left: auto;
margin-right: auto;
width: 80%;
background-color: var(--prog_fg);
padding: 1px;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
}
.cover_progress_bar_fill {
--prog_bg: #A61F22;
display: block;
height: 3px;
background-color: var(--prog_bg);
width: var(--value);
}
.details_progress_bar {
--prog_fg: #e0e0e0;
width: 80%;
background-color: var(--prog_fg);
padding: 3px;
border-radius: 3px;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
margin-left:auto;
margin-right: auto;
}
.details_progress_bar_fill {
--prog_bg: #A61F22;
display: block;
height: 6px;
border-radius: 3px;
background-color: var(--prog_bg);
width: var(--value);
}
.status_unread {
visibility: hidden;
}
.status_finished .cover_progress_bar {
--prog_fg: #777777;
border: 1px solid #666666;
}
.status_finished .cover_progress_bar_fill {
--prog_bg: #999999;
}
.status_finished .details_progress_bar {
--prog_fg: #777777;
border: 1px solid #666666;
}
.status_finished .details_progress_bar_fill {
--prog_bg: #999999;
}
View Git Blame Copy Permalink