mirror of
https://github.com/th3r00t/pyShelf.git
synced 2026-04-28 01:59:35 -04:00
Massive UI/UX Overhaul
This commit is contained in:
Raelon Masters
143
src/interface/static/css/main.css
vendored
143
src/interface/static/css/main.css
vendored
@@ -3,15 +3,13 @@ body {
|
||||
padding: 0px;
|
||||
background-color: #FFF;
|
||||
color: #000;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
#app {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"app_body";
|
||||
grid-template-rows: auto;
|
||||
/*! max-height: 100%; */
|
||||
/* display: grid; */
|
||||
/* grid-template-areas:
|
||||
"nav main"; */
|
||||
/* grid-template-columns: 1vw 9vw; */
|
||||
}
|
||||
|
||||
.clear {
|
||||
@@ -54,7 +52,7 @@ body {
|
||||
grid-area: title;
|
||||
margin: 0px 0px 0px 0px;
|
||||
font-family: 'Gruppo', cursive;
|
||||
font-size: 20px;
|
||||
font-size: 25px;
|
||||
text-align: start;
|
||||
padding: 0px 0px 0px 0px;
|
||||
}
|
||||
@@ -82,9 +80,10 @@ body {
|
||||
.app_body {
|
||||
display: grid;
|
||||
grid-area: app_body;
|
||||
grid-template-rows: auto;
|
||||
grid-template-areas: "nav_l shelf";
|
||||
grid-template-columns: 160px auto;
|
||||
/* grid-template-rows: auto; */
|
||||
grid-template-areas:
|
||||
"nav_l shelf";
|
||||
grid-template-columns: min-content auto;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
@@ -92,7 +91,7 @@ body {
|
||||
display: grid;
|
||||
grid-area: nav_l;
|
||||
font-family: 'Gruppo', cursive;
|
||||
font-size: 15px;
|
||||
font-size: 20px;
|
||||
/*! max-height: 500px; */
|
||||
overflow-y: auto;
|
||||
/*! padding: 0px 10px; */
|
||||
@@ -115,9 +114,10 @@ body {
|
||||
}
|
||||
.nav_l_hdr {
|
||||
/*! text-align: center; */
|
||||
padding: 0px 5px;
|
||||
background-color: #9e9e9e;
|
||||
border-bottom: 2px solid #dadada;
|
||||
padding: 10px;
|
||||
background: linear-gradient(to right, #333 51%, #7d7a7ad6 181%);
|
||||
border-bottom: 1px solid #000000;
|
||||
border-right: 1px solid;
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
}
|
||||
@@ -139,10 +139,13 @@ body {
|
||||
.nav_link {}
|
||||
#vert-nav {
|
||||
list-style: None;
|
||||
padding: 0px;
|
||||
padding: 0px 0px 0px 0px;
|
||||
margin: 0px;
|
||||
/*! border-left: 5px solid #292f35; */
|
||||
/*! border-right: 5px solid #292f35; */
|
||||
/* border-right: 1px solid; */
|
||||
background: linear-gradient(to right, #333 51%, #7d7a7ad6 181%);
|
||||
display: ;
|
||||
}
|
||||
|
||||
.vert-nav-item {}
|
||||
@@ -234,10 +237,11 @@ body {
|
||||
}
|
||||
|
||||
.nav_search {
|
||||
margin: 0px 5px 0px 0px;
|
||||
border-radius: 5px;
|
||||
/* margin: 0px 5px 0px 0px; */
|
||||
/* border-radius: 5px; */
|
||||
border: 1px solid #999;
|
||||
max-height: 17px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.search {}
|
||||
@@ -251,10 +255,14 @@ body {
|
||||
.shelf {
|
||||
grid-area: shelf;
|
||||
margin: 0px 0px;
|
||||
padding: 10px 0px 10px;
|
||||
padding: 10px 0px 0px 0px;
|
||||
list-style-type: none;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
overflow-x: auto;
|
||||
background-image: url('/static/img/fractal-bg-dark.png');
|
||||
/* background: linear-gradient(217deg, rgb(123 123 123), rgba(255,0,0,0) 70.71%),
|
||||
linear-gradient(127deg, rgb(0 0 0 / 97%), rgba(0,255,0,0) 70.71%),
|
||||
linear-gradient(336deg, rgb(0 0 0 / 80%), rgba(0,0,255,0) 70.71%); */
|
||||
}
|
||||
|
||||
.shelf_contents {}
|
||||
@@ -280,34 +288,107 @@ p {
|
||||
}
|
||||
|
||||
#book_shelf {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
list-style-type: none;
|
||||
font-family: 'Audiowide', cursive;
|
||||
font-size: 15px;
|
||||
padding: 0;
|
||||
font-family: sans-serif;
|
||||
font-size: 18px;
|
||||
/* font-size: 13px; */
|
||||
padding: 0px 0px 0px 10px;
|
||||
margin: 0px;
|
||||
min-width: 99vw;
|
||||
/* max-width: fit-content; */
|
||||
}
|
||||
|
||||
.shelf_item {
|
||||
background-color: #ffffff2e;
|
||||
display: grid;
|
||||
grid-template-columns: 100px auto;
|
||||
grid-template-areas: "thumb details";
|
||||
margin: 0 10px 10px 10px;
|
||||
grid-template-columns: 1fr 5fr;
|
||||
grid-template-areas:
|
||||
"thumb details";
|
||||
/* grid-template-rows: auto; */
|
||||
margin: 0 10px 25px 10px;
|
||||
border: 0px solid #ffffff2e;
|
||||
max-width: 28vw;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.book_thumb {
|
||||
grid-area: thumb;
|
||||
width: 100px;
|
||||
border-right: 1px solid;
|
||||
min-height: -webkit-fill-available;
|
||||
}
|
||||
|
||||
a.book_link {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
font-size: x-small;
|
||||
}
|
||||
.book_details {}
|
||||
.book_details_list {grid-area: details;list-style-type: none;}
|
||||
.book_title {}
|
||||
.book_author {}
|
||||
.book_controls {}
|
||||
.book_details_list {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"book_title"
|
||||
"book_author"
|
||||
"book_description"
|
||||
"book_tags"
|
||||
"book_controls";
|
||||
grid-area: details;
|
||||
grid-template-rows: .5fr .5fr 2fr .15fr 0.25fr;
|
||||
list-style-type: none;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
color: ghostwhite;
|
||||
}
|
||||
.book_title {
|
||||
grid-area: book_title;
|
||||
display: grid;
|
||||
/* justify-content: center; */
|
||||
align-items: center;
|
||||
/* text-align: center; */
|
||||
font-family: 'Ubuntu Mono', monospace;
|
||||
font-size: medium;
|
||||
padding: 0px 5px 0px;
|
||||
/* background-color: #676767; */
|
||||
}
|
||||
.book_author {
|
||||
grid-area: book_author;
|
||||
font-family: serif;
|
||||
font-style: oblique;
|
||||
font-size: medium;
|
||||
padding: 0px 5px 0px;
|
||||
}
|
||||
|
||||
.book_description {
|
||||
grid-area: book_description;
|
||||
font-size: small;
|
||||
padding: 0px 5px 0px;
|
||||
font-family: 'Ubuntu Mono', monospace;
|
||||
}
|
||||
.book_tags {
|
||||
grid-area: book_tags;
|
||||
font-size: x-small;
|
||||
padding: 0px 5px 0px;
|
||||
}
|
||||
.book_controls {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
grid-area: book_controls;
|
||||
border-bottom-right-radius: 5px;
|
||||
background-color: #676767;
|
||||
}
|
||||
.icon{
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
float: left;
|
||||
}
|
||||
.controls{
|
||||
cursor: pointer;
|
||||
}
|
||||
.download-button{float: left;}
|
||||
.favorite-button{float: left;}
|
||||
.share-button{float: left;}
|
||||
a.nav_link {
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
|
||||
Reference in New Issue
Block a user