From f0cf8d3391bd4b2282630f5b926ec9de2c8e038d Mon Sep 17 00:00:00 2001 From: Bryan Newbold Date: Thu, 21 Jan 2021 17:31:42 -0800 Subject: html: more UI tweaks and fixes --- fatcat_scholar/static/scholar.css | 271 +++++++++++++++++++++----------------- 1 file changed, 148 insertions(+), 123 deletions(-) (limited to 'fatcat_scholar/static') 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 { -- cgit v1.2.3