pyShelf/src/interface/static/css/main.css

body {
  margin: 0px;
  padding: 0px;
  background-color: #676767;
  background-image: url(/static/img/blue-background.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  color: #000;
}

#pop_over_0 {
  display: none;
  position: fixed;
  top: 0px;
  min-width: 100%;
  min-height: 100%;
  background-color: #000000;
  z-index: 100;
}

#app {
  display: grid;
  grid-template-areas: "nav" "main";
  /* background-origin: unset; */
  margin: 10px auto;
}

.clear {
  clear: both;
}

.app_header {
  margin: 0px;
  display: grid;
  grid-template-areas: "title nav_left_top nav_center_top nav_right_top";
  grid-template-columns: 225px auto auto;
  padding: 4px 0px 4px;
  background-color: #2d2d2d;
}

.nav_left_top {
  grid-area: nav_left_top;
  display: flex;
  justify-content: left;
  align-items: center;
}

.nav_center_top {
  grid-area: nav_center_top;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav_right_top {
  grid-area: nav_right_top;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.app_hdr {
  display: flex;
  align-items: center;
  /* grid-area: title; */
  margin: 0px 0px 0px 0px;
  font-family: "Gruppo", cursive;
  font-size: 17px;
  text-align: center;
  padding: 0px 0px 0px 0px;
  color: #fefefeb3;
}

.shadow {
  text-shadow: #fff -1px 0px 11px;
}

.app_subhdr {
  grid-area: subhdr;
  margin: 0px 5px;
  font-family: "Gruppo", cursive;
  font-size: 18px;
  text-align: end;
}

.app_slogan {
  grid-area: slogan;
  margin: 0;
  font-size: 18px;
  font-family: "Gruppo", cursive;
  text-align: center;
}

.app_body {
  display: grid;
  grid-area: main;
  /* grid-template-rows: auto; */
  grid-template-areas: "nav_l shelf";
  grid-template-columns: min-content auto;
  background-size: cover;
  background-repeat: no-repeat;
}

.nav_l {
  display: grid;
  grid-area: nav_l;
  font-family: "Gruppo", cursive;
  font-size: 16px;
  /*! max-height: 500px; */
  overflow-y: auto;
  /*! padding: 0px 10px; */
  margin: 0px;
}

.popover {
  display: none;
  z-index: 100;
  background-color: #cecece;
  /*min-width: 200px;*/
  min-height: 30px;
  position: fixed;
  text-align: center;
  font-weight: bold;
  align-items: center;
  justify-content: center;
  justify-items: center;
  padding: 0px 10px;
}

.nav_l_hdr {
  /*! text-align: center; */
  padding: 3px;
  /* background: linear-gradient(to right, #333 51%, #7d7a7ad6 181%); */
  border-bottom: 1px solid #000000;
  /* border-right: 1px solid; */
  color: ghostwhite;
  font-weight: bold;
  border-bottom-right-radius: 5px;
}

.nav_l_0 {
  background-color: #dadada;
  /*! padding: 5px; */
  /*! text-align: center; */
  border-bottom: 1px solid #dadada;
  padding: 0px 0px 0px 10px;
}

.nav_l_1 {
  /*! padding: 5px; */
  /*! text-align: center; */
  border-bottom: 1px solid #dadada;
  padding: 0px 0px 0px 10px;
}

#vert-nav {
  display: none;
}

.app_footer {
  grid-area: app_footer;
  display: grid;
  grid-template-areas: "python_badge gplv3_badge contact";
  grid-template-columns: 1fr 1fr 8fr;
  justify-content: space-between;
  min-width: 100%;
  background-color: #2b2b2b;
  margin: 0px;
  font-family: Audiowide, cursive;
  font-size: 15px;
}

.web_footer_link {
  text-decoration: none;
  color: #a5a3a3;
}

.copyright {
  grid-area: gplv3_badge;
  display: grid;
  align-content: center;
  font-family: Audiowide, cursive;
  font-size: 9px;
  justify-self: left;
}

.footer_contact {
  grid-area: contact;
  display: inline-grid;
  align-content: center;
  justify-items: right;
  font-size: 12px;
}

.nav_top {
  grid-area: nav_top;
  display: grid;
  grid-template-areas: "left center right";
  grid-template-columns: auto auto auto;
}

.navbar {
  list-style-type: none;
}

.left_align {
  display: flex;
  justify-content: left;
}

.center_align {
  display: flex;
  justify-content: center;
}

.right_align {
  display: flex;
  justify-content: right;
}

.discord-button {
  max-width: 78px;
  max-height: 26px;
}

.nav_button {
  background-color: darkgray;
  border-radius: 5px;
  /* border: 1px solid #999; */
  /*! min-width: 110px; */
  /* margin: auto; */
  /*! padding-top: 2px; */
  /*! padding-bottom: 2px; */
  /*! max-height: 20px; */
}

.nav_search {
  /* margin: 0px 5px 0px 0px; */
  /* border-radius: 5px; */
  border: 1px solid #fefefeb3;
  /* max-height: 17px; */
  /* padding: 0px 5px; */
  /* margin-left: 0px; */
  /* background-color: #f0ffff00; */
  /* color: $ui-color-1; */
  border-top: 0px !important;
  border-bottom: 0px !important;
}

.search_details {
  display: flex;
  justify-content: center;
  margin: 0px 0px 5px 0px;
}

.shelf {
  grid-area: shelf;
  grid-template-areas: "shelf_top" "shelf_main";
  grid-template-rows: 75px auto;
  /* background-image: url("/static/img/fractal-bg-dark.png"); */
  /* align-self: center; */
}

#horiz_nav_hdr {
  display: grid;
  justify-content: end;
  grid-area: horiz_nav_hdr;
  grid-template-areas: "left_col middle_col right_col";
  grid-template-columns: max-content auto max-content;
  padding: 0px;
}

#horiz_nav_right {
  grid-area: horiz_nav_right;
}

#horiz_nav_center {
  grid-area: horiz_nav_center;
}

#horiz_nav_left {
  grid-area: horiz_nav_left;
}

#horiz_nav_main {
  display: grid;
  grid-template-areas: "horiz_nav_left horiz_nav_center horiz_nav_right";
  grid-template-columns: 1fr 3fr 1fr;
  background-color: #282828;
  grid-area: horiz_nav_main;
  padding: 1px 0px 1px 5px;
  min-width: max-content;
  color: #fefefeb3;
  font-size: smaller;
  border-bottom: 1px solid #fefefeb3;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

#hdr_branding {
  grid-area: left_col;
  display: none;
}

#hdr_nav_center {
  display: flex;
  grid-area: middle_col;
  margin: 0px;
}

#hdr_nav_login {
  display: none;
  grid-template-columns: auto;
  grid-area: horiz_nav_right;
  color: #fefefeb3;
  align-items: center;
}

.horiz_nav_stats {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.nav_icon {
  color: #fefefeb3;
}

.input_box {
  border: 1px solid #fefefeb3;
  background-color: #0000006e;
  color: #fefefeb3;
  padding: 0px 5px;
  text-align: center;
  font-size: medium;
}

.noborder {
  border: 0px !important;
}

.ui_btn_w_icon {
  background-color: #fefefeb3;
  /* border-radius: 5px; */
  padding: 0px 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* min-width: 55px; */
}

#flip_sort {
  margin: 0px;
  display: inline-flex;
}

.ui_icon_notxt {
  margin: 0px 5px 0px 0px;
}

#tab_nav_menu {
  list-style-type: none;
  display: flex;
  background-color: #00000045;
  padding: 0px;
  margin: 0px auto 0px 1px;
  cursor: pointer;
}

.active_tab {
  background-color: #282828 !important;
  color: #ffffff !important;
  border-bottom: 1px solid #ffffff !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.nav_menu_tab {
  min-width: 5vw;
  margin: 0px 1px 0px 1px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0px 5px 0px 5px;
  font-size: medium;
  border-bottom: 1px solid;
  background-color: #fefefeb3;
  color: #000000;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.search_button {
  /* color: aliceblue; */
  /* background-color: #00bfff85; */
  /* border-radius: 5px; */
  /* padding: 2px; */
  /* text-align: center; */
}

#shelf_nav {
  display: grid;
  grid-template-areas: "horiz_nav_hdr" "horiz_nav_main";
  grid-area: nav;
  list-style-type: none;
  margin: 0px auto 20px auto;
  padding: 0px;
  padding-inline-start: 0px;
}

.shelf_contents {
  grid-area: shelf_main;
  /* display: grid; */
  /* align-self: center; */
}

.right_col {
  grid-area: right_col;
}

.python_logo {
  grid-area: python_badge;
  display: grid;
  align-content: center;
}

p {
  margin: 0px;
}

#python_logo {
  /* height: 37px; */
  width: 70px;
}

#book_shelf {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style-type: none;
  font-family: sans-serif;
  font-size: 18px;
  /* font-size: 13px; */
  padding: 0px 0px 0px 0px;
  margin: 0px;
  /* max-width: fit-content; */
}

.shelf_item {
  background-color: #0000006e;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  display: grid;
  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_list {
  display: grid;
  grid-template-areas: "book_title" "book_author" "book_description" "book_tags" "book_controls";
  grid-area: details;
  grid-template-rows: 0.5fr 0.5fr 2fr 0.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", monospace;
  font-size: medium;
  padding: 0px 5px 0px;
  margin: 5px 0px 0px 0px;
  /* background-color: #676767; */
}

.book_author {
  grid-area: book_author;
  font-family: serif;
  font-style: oblique;
  font-size: small;
  padding: 0px 5px 0px;
  margin: 0px 0px 0px 5px;
}

.book_description {
  grid-area: book_description;
  font-size: small;
  padding: 0px 5px 0px;
  font-family: "Montserrat", sans-serif;
}

.book_tags {
  grid-area: book_tags;
  font-size: small;
  padding: 0px 5px 0px;
  color: #fefefeb3;
  font-style: italic;
  font-size: xx-small;
  margin-bottom: 5px;
}

.book_controls {
  display: flex;
  justify-content: center;
  align-items: center;
  grid-area: book_controls;
  /* border-top: 1px solid $ui-color-1; */
  border-bottom-right-radius: 5px;
  background-color: #676767;
}

.icon {
  /* height: 25px; */
  /* width: 25px; */
  float: left;
  font-size: x-large;
  padding: 5px 10px 5px 10px;
}

.favorite {
  color: #a7ff00 !important;
}

.controls {
  cursor: pointer;
}

.inline_sys_message {
  background-color: #0000008c;
  margin: 5px;
  padding: 10px;
  text-align: center;
  font-family: "Montserrat", sans-serif;
}

.download-button {
  float: left;
}

.favorite-button {
  float: left;
}

.share-button {
  float: left;
}

a.nav_link {
  text-decoration: none;
  color: #000;
}

.hidden {
  display: none;
}

.btn {
  cursor: pointer;
}