mirror of
https://github.com/th3r00t/pyShelf.git
synced 2026-04-28 01:59:35 -04:00
166 lines
3.7 KiB
Sass
Vendored
166 lines
3.7 KiB
Sass
Vendored
$ps-color-primary: #89939E
|
|
$ps-color-primary-trans: rgba(43, 50, 60, 0.64) !important
|
|
$ps-color-secondary: #DEDEDE
|
|
$ps-color-accent: $ps-color-secondary
|
|
$ps-color-background: #000000
|
|
$black: #000000
|
|
$white: #ffffff
|
|
//$black: $ps-color-background
|
|
//$white: $ps-color-primary
|
|
//$link: $ps-color-secondary
|
|
//$primary: $ps-color-primary
|
|
//$link: $ps-color-secondary
|
|
$scheme-main: $black
|
|
$scheme-invert: $white
|
|
// $body-background-color: $black-ter
|
|
// Override Main Body Presets
|
|
// $body-background-color: $ps-color-background
|
|
// $text: $ps-color-primary
|
|
|
|
// Override Navbar Presets
|
|
$navbar-background-color: $ps-color-primary-trans
|
|
$navbar-item-color: $white
|
|
//$navbar-item-hover-color: $ps-color-background !important
|
|
$navbar-item-hover-background-color: $ps-color-secondary
|
|
$navbar-dropdown-background-color: $ps-color-primary-trans
|
|
$navbar-dropdown-item-hover-color: $ps-color-background !important
|
|
$footer-background-color: $ps-color-primary-trans !important
|
|
// $footer-padding: 0.5rem 0.5rem
|
|
|
|
.center-all
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.bg-image
|
|
background-image: url(../images/blue-background.jpg);
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
background-attachment: fixed;
|
|
background-size: cover;
|
|
|
|
#master-container
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
#book-shelf
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) // <== add this
|
|
gap: 1rem // space between rows and columns
|
|
justify-content: space-evenly;
|
|
// align-items: center;
|
|
align-content: center;
|
|
padding: 1rem;
|
|
margin: 1rem;
|
|
// background-color: $ps-color-background;
|
|
|
|
.is-rounded-left
|
|
border-top-left-radius: 20px !important;
|
|
border-bottom-left-radius: 20px !important;
|
|
|
|
.is-rounded-right
|
|
border-top-right-radius: 20px !important;
|
|
border-bottom-right-radius: 20px !important;
|
|
|
|
.book-thumbnail
|
|
z-index: 1;
|
|
position: relative;
|
|
|
|
.no-image-title
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
color: $white;
|
|
font-size: 1.2rem;
|
|
text-align: center;
|
|
background-color: rgba(0,0,0,0.7);
|
|
padding: 0.5rem;
|
|
border-radius: 5px;
|
|
|
|
.no-image-author
|
|
position: absolute;
|
|
top: 60%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
color: $white;
|
|
font-size: 1rem;
|
|
text-align: center;
|
|
background-color: rgba(0,0,0,0.7);
|
|
padding: 0.5rem;
|
|
border-radius: 5px;
|
|
|
|
.display-alt::after
|
|
content: attr(alt);
|
|
display: block !important;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: rgba(0,0,0,0.7);
|
|
color: white;
|
|
font-size: 0.8rem;
|
|
padding: 0.2rem;
|
|
|
|
.title, .subtitle
|
|
z-index: 2;
|
|
position: relative;
|
|
top: -155px;
|
|
|
|
.collection
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-evenly;
|
|
align-items: center;
|
|
align-content: center;
|
|
background-color: $ps-color-background;
|
|
|
|
#collection_dropdown
|
|
margin-top: auto;
|
|
margin-bottom: auto;
|
|
|
|
.search_form
|
|
margin-top: auto !important;
|
|
margin-bottom: auto !important;
|
|
|
|
.footer
|
|
display: flex;
|
|
padding: 1rem !important;
|
|
|
|
|
|
#pagination-container
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
padding: 0.5rem;
|
|
|
|
#pagination-left, #pagination-right
|
|
background-color: $ps-color-secondary;
|
|
|
|
#pagination-left
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
|
|
#pagination-center
|
|
display: flex;
|
|
justify-content: center;
|
|
flex: 1;
|
|
|
|
#pagination-right
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
|
|
// @import "../../node_modules/bulma/bulma.scss"
|
|
@use "bulma/bulma.sass"
|
|
|
|
.container-full
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|