html: more UI tweaks and fixes

1 files changed, 148 insertions, 123 deletions

diff --git a/fatcat_scholar/static/scholar.css b/fatcat_scholar/static/scholar.css
index e0cc2a3..2d506d5 100644
--- a/fatcat_scholar/static/scholar.css
+++ b/fatcat_scholar/static/scholar.css
@@ -1,233 +1,258 @@
 a {
-    /* accessibility/contrast */
-    color: #28629c;
+  /* accessibility/contrast */
+  color: #28629c;
 }
 .ui.basic.blue.label {
-    color: #28629c!important;
-    border-color: #28629c!important;
+  color: #28629c!important;
+  border-color: #28629c!important;
 }
 .ui.basic.orange.label {
-    color: #c54e00!important;
-    border-color: #c54e00!important;
+  color: #c54e00!important;
+  border-color: #c54e00!important;
 }
 .ui.card .meta, .ui.cards>.card .meta {
-    color: rgba(0,0,0,0.55);
+  color: rgba(0,0,0,0.55);
 }
 
 /* bnewbold: fix light grey bars in header, and "rounded" header */
-nav.ui.inverted.menu .item:before { background: none; }
-nav.ui.menu { border-radius: 0; }
+nav.ui.inverted.menu .item:before {
+  background: none;
+}
+nav.ui.menu {
+  border-radius: 0;
+}
 
 .ui.button.serp-button {
-    border-radius: 0;
-    margin-bottom: 0.4em;
-    text-align: left;
+  box-sizing: border-box;
+  border-radius: 0;
+  margin-bottom: 0.4em;
+  text-align: left;
+  width: 14em;
 }
 
 .ui.blue.button.serp-button {
-    background-color: #6b6ebb;
+  background-color: #6b6ebb;
+}
+
+.ui.basic.blue.button.serp-button > .icon {
+  background-color: transparent;
 }
 
 .ui.labeled.icon.button.serp-button {
-    padding-left: 3.0em!important;
-    padding-right: 1em!important;
-    width: 14em;
-    box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.3);
+  padding-left: 3.0em!important;
+  padding-right: 0.5em!important;
+  box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.3);
 }
 
 .ui.labeled.icon.button.serp-button .menu.fulltext-thumbnail {
-    left: calc(-100% + 0.3em);
-    margin-top: -2.4em;
-    background-color: black;
-    min-width: 186px;
-    border: 3px solid black;
-    border-bottom: 0;
-    box-shadow: none;
+  left: calc(-100% + 0.3em);
+  margin-top: -2.4em;
+  background-color: black;
+  min-width: 186px;
+  border: 3px solid black;
+  border-bottom: 0;
+  box-shadow: none;
 }
 
 .ui.labeled.icon.button.serp-button .menu.fulltext-thumbnail:after {
-    z-index: -1;
-    background-color: black;
+  z-index: -1;
+  background-color: black;
 }
 
 .action-bar {
-    display: flex;
-    justify-content: center;
-    column-gap: 0.3em;
-    min-width: 14em;
-    max-width: 15em;
+  display: flex;
+  justify-content: center;
+  column-gap: 0.3em;
+  min-width: 14em;
+  max-width: 15em;
 }
 
 @media only screen and (max-width: 767px) {
-    .mobile-hide { display: none !important; }
-    .ui.items>.item>.image:not(.ui) { width: auto };
+  .mobile-hide { display: none !important; }
+  .ui.items>.item>.image:not(.ui) { width: auto };
 }
 @media only screen and (min-width: 768px) {
-    .mobile-only { display: none !important; }
+  .mobile-only { display: none !important; }
 }
 @media only screen and (max-width: 991px) {
-    .tablet-hide { display: none !important; }
-    .ui.items>.item>.image:not(.ui) { width: auto };
-    .ui.grid>[class*="fourteen wide"].column.serp-column {
+  .tablet-hide {
+    display: none !important;
+  }
+  .ui.items>.item>.image:not(.ui) {
+    width: auto;
+  }
+  .ui.grid>[class*="fourteen wide"].column.serp-column {
     width: 100% !important;
     box-shadow: none !important;
-    }
+  }
 }
 @media only screen and (min-width: 992px) {
-    .tablet-only { display: none !important; }
+  .tablet-only {
+    display: none !important;
+  }
 }
 @media only screen and (min-width: 1200px) {
-    .ui.container {
+  .ui.container {
     font-size: 16px;
     line-height: 20px;
-    }
-    div.fulltext-link {
+  }
+  div.fulltext-link {
     width: 180px;
-    }
-    div.biblio-record {
+  }
+  div.biblio-record {
     padding-left: 1.1em;
-    }
+  }
 }
 
 .ui.serp.card {
-    max-width: 180px;
-    margin-bottom: 0.2em;
-    border-radius: 0;
+  max-width: 180px;
+  margin-bottom: 0.2em;
+  border-radius: 0;
 }
 .hit-count {
-    font-weight: bold;
-    line-height: 1.28571429em;
+  font-weight: bold;
+  line-height: 1.28571429em;
 }
 
 .biblio-record .biblio-title {
-    margin-bottom: 0.1em;
-    font-size: 1.2em;
-    font-weight: bold;
-    line-height: 1.2em;
+  margin-bottom: 0.1em;
+  font-size: 1.2em;
+  font-weight: bold;
+  line-height: 1.2em;
+}
+.biblio-record .biblio-title .link {
+  cursor: pointer;
+  color: #2224c7;
 }
 .biblio-record .biblio-title a {
-    color: #2224c7;
+  color: #2224c7;
 }
 .biblio-record .release-type {
-    text-transform: uppercase;
-    font-weight: bold;
+  text-transform: uppercase;
+  font-weight: bold;
 }
 .biblio-record .original-title {
-    font-style: italic;
-    font-weight: normal;
+  font-style: italic;
+  font-weight: normal;
 }
 .biblio-record .author-row {
-    margin-top: 0;
-    margin-bottom: 0.2em;
-    font-size: 1.1em;
+  margin-top: 0;
+  margin-bottom: 0.2em;
+  font-size: 1.1em;
 }
 .biblio-record .release-stage {
-    color: brown;
-    font-weight: bold;
-    text-transform: uppercase;
+  color: brown;
+  font-weight: bold;
+  text-transform: uppercase;
 }
 .biblio-record details > summary {
-    list-style-type: none;
-    color: #28629c;
-    text-decoration: underline;
-    margin-left: 0.3em;
+  list-style-type: none;
+  color: #28629c;
+  text-decoration: underline;
+  margin-left: 0.3em;
 }
 .biblio-record details > summary::-webkit-details-marker {
-    display: none;
+  display: none;
 }
 
 /* for fulltext search result highlighting */
 .search_highlights em {
-    {# yellow #}
-    {# background-color: #FFFFBB; #}
-    font-style: normal;
-    font-weight: bold;
+  font-style: normal;
+  font-weight: bold;
 }
 
 .search_filters summary::marker {
-    display: none;
+  display: none;
 }
 .search_filters summary::-webkit-details-marker {
-    display: none;
+  display: none;
 }
 
 footer p a {
-    color: rgba(255, 255, 255, 0.5);
+  color: rgba(255, 255, 255, 0.5);
 }
 footer p a:hover {
-    color: rgba(255, 255, 255, 1.0);
-    opacity: 1.0;
+  color: rgba(255, 255, 255, 1.0);
+  opacity: 1.0;
 }
 
 .ui.label.small {
-    border-radius: 0;
+  border-radius: 0;
 }
 
 a:hover .ui.card {
-    opacity: 0.75;
+  opacity: 0.75;
 }
 
 .text-button {
-    border: none;
-    background-color: inherit;
-    padding: 0;
-    font-family: inherit;
-    cursor: pointer;
-    display: inline-block;
+  border: none;
+  background-color: inherit;
+  padding: 0;
+  font-family: inherit;
+  cursor: pointer;
+  display: inline-block;
 }
 
 details.access-options summary {
-    text-decoration: none;
-    color: inherit;
+  text-decoration: none;
+  color: inherit;
 }
 details.access-options .menu {
-    margin: 0.5em;
-    margin-top: 1.5em;
-    width: auto;
+  margin: 0.5em;
+  margin-top: 1.5em;
+  width: auto;
 }
 details.access-options .meta {
-    width: 100%;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    text-decoration: underline;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-decoration: underline;
 }
 
 details.serp-action-menu[open] > summary .ui.basic.button {
-    box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset, 0 1px 4px 0 rgba(34,36,38,.15) inset;
-    background: #f8f8f8!important;
+  box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset, 0 1px 4px 0 rgba(34,36,38,.15) inset;
+  background: #f8f8f8!important;
 }
 details.serp-action-menu > summary {
-    list-style: none;
+  list-style: none;
 }
 details.serp-action-menu > summary::-webkit-details-marker {
-    display: none;
+  display: none;
 }
 details.serp-action-menu > .citation-menu {
-    min-width: 50em;
-    height: auto;
-    position: absolute;
-    display: block;
-    background: #fff;
-    box-shadow: 0 2px 3px 0 rgba(34,36,38,.15);
-    border: 1px solid rgba(34,36,38,.15);
-    z-index: 11;
-    min-width: 30em;
-    border-radius: .28571429rem;
-    right: 50%;
-    margin-top: -2em;
-    margin-right: 1.5em;
-    padding: 1em;
+  min-width: 50em;
+  height: auto;
+  position: absolute;
+  display: block;
+  background: #fff;
+  box-shadow: 0 2px 3px 0 rgba(34,36,38,.15);
+  border: 1px solid rgba(34,36,38,.15);
+  z-index: 11;
+  min-width: 30em;
+  border-radius: .28571429rem;
+  right: 50%;
+  margin-top: -2em;
+  margin-right: 1.5em;
+  padding: 1em;
 }
 @media only screen and (max-width: 767px) {
-    details.serp-action-menu > .citation-menu {
-        overflow-x: scroll;
-        width: calc(100vw - 3em);
-        height: auto;
-        min-width: 0;
-        left: 0.5em;
-        margin-top: 0em;
-    }
+  details.serp-action-menu > .citation-menu {
+    overflow-x: scroll;
+    width: calc(100vw - 3em);
+    height: auto;
+    min-width: 0;
+    left: 0.5em;
+    margin-top: 0em;
+  }
+}
+
+.citation-menu ul.ui.list {
+  width: 100%;
+  text-align: center;
+}
+.citation-menu ul.ui.list li.item:before {
+  visibility: hidden;
 }
 
 .translate-dropdown {