/* Last Updated: 1-22-2025 */
/* *************** APA PUBLISHING BRANDING GUIDELINES - 4-7-2020 ******************** */
@import url('https://fonts.googleapis.com/css2?family=Catamaran:wght@100;200;300;400;500;600;700;800;900&display=swap');
/* ************ GLOBAL STYLES ************ */
body {
font-family: 'Catamaran', sans-serif;
display: flex;
/* styles for sticky footer */
min-height: 100vh;
flex-direction: column;
background-color: #eeeeee;
}
input{
font-family: 'Lato', sans-serif !important;
}
#mainBodyContainer {
flex: 1 0 auto;
/* style for sticky footer */
}
a.btn {
text-decoration: none;
}
a {
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
/* considering adding this override class to the main PL - used in the getFTR Documnent Status modal for a blue anchor instead of the inherit color that anchors usually take within alerts */
.alert a.alertoverride {
color: #003A70;
}
hr {
border: 0;
height: 2px;
background: #333;
background-image: linear-gradient(to right, #ccc, #333, #ccc);
}
/* ******** this will soon become part of the IUX PL ******** */
.modal .modal-body p {
color: inherit;
}
.alert p,
.card .card-body .alert p {
color: inherit;
}
/* simple collapse svg rotate styles - see https://stackoverflow.com/questions/52133291/rotate-svg-image-when-bootstrap-4-collapse-is-clicked */
.simple-collapse {
font-size: 16px;
text-transform: uppercase;
text-decoration: underline;
background-color: inherit;
}
.simple-collapse-no-text-transform {
font-size: 16px;
text-transform: none !important;
}
.simple-collapse:hover {
text-decoration: none;
}
.collapse-chevron .collapse-chevron-icon {
transform: rotate(90deg);
transition: .3s transform ease-in-out;
display: inline-block;
}
.collapse-chevron .collapsed .collapse-chevron-icon {
transform: rotate(0deg);
}
/* new style for the simple collapse by having a button similar to apa-pubs-7 */
a.simple-collapse-button {
text-decoration: none;
padding: 8px 20px 8px 10px;
font-size: 20px;
}
a.simple-collapse-button-small {
text-decoration: none;
padding: 2px 13px 2px 0;
font-size: 16px;
}
a.simple-collapse-button-pubs-7 {
color: #39207C;
border: 2px solid #39207c;
border-radius: 0px;
}
a.simple-collapse-button-pubs-7:hover {
background-color: #39207C;
color: #FFFFFF;
}
/* for styling the Analyze & Filter button svg on hover */
a.simple-collapse-button-pubs-7:hover .btn-pubs-7-svg,
.analyze-filter-button:hover .btn-pubs-7-svg {
fill: #FFFFFF;
}
/* think of this styling for vertical button groups - being used on Topic Mapper panel designs */
.btn.btn-group-vertical .btn {
border-radius: 0;
}
.btn-group-vertical .btn:first-child {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.btn-group-vertical .btn:last-child {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
/* *** some necessary overrides for the ITS UX Pattern Library to fit with APA Pubs Branding Guidelines *** */
*,
body,
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6,
.citationText,
.abstractText,
.grid-striped div,
.grid-striped ul li span,
.list-group-item {
font-family: 'Catamaran', sans-serif !important;
/* Note: .btn, .btn-sm, .btn-group-sm > .btn is for the accordion panels, which are actually buttons */
}
/* *** for the cards on the Notification Center/Homepage, since they were running into each other *** */
.card.margin-bottom20 {
margin-bottom: 20px;
}
/* *** another usage when needed, for POC of Author Info page *** */
.card.margin-bottom50 {
margin-bottom: 50px;
}
/* *** buttons look strange with Catamaran, so defaulting back to Lato like in IUX PL - revisit later if a better way to do this - badges with numbers also look bad with Catamaran *** */
.btn,
button > span,
.badge {
font-family: 'Lato', sans-serif !important;
}
.fa {
font-family: FontAwesome !important;
display: inline !important;
/* so that external link icons do not break onto new line in smaller viewports */
}
/* using SVG for external link icon, for any target="_blank" anchors - modified from https://codepen.io/fathy_ar/pen/WNvZjgK */
a[target="_blank"]::after {
content: '';
-webkit-mask: url("data:image/svg+xml;utf8,");
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 1em 0.75em;
-webkit-mask-position: center;
mask: url("data:image/svg+xml;utf8,");
mask-repeat: no-repeat;
mask-size: 1em 0.75em;
mask-position: center;
display: inline-block;
background-color: currentcolor;
position: relative;
top: 0em;
width: 1em;
height: 1em;
left: 0.1em;
/* added this so icon is not totally against the link on display */
}
/* adding this so that the actual anchor and external link icon are never separated on different lines - revisit if this class is good for the mobile UX - horizontal scrollbars might show up for long links */
a.nowrap {
white-space: nowrap;
}
h1 {
font-size: 2.3rem;
}
/* Topic, Citation, and Author Mapper H1 visibility styles - taking into account hamburger menu icon */
h1.mapper-heading{
text-align: left;
}
@media screen and (max-width: 1300px) {
h1.mapper-heading {
text-align: center;
}
}
@media screen and (max-width: 333px) {
h1.mapper-heading {
margin-top: 60px !important;
}
}
h2 {
font-size: 1.7rem;
font-weight: 400;
margin: 25px 0 10px 0;
}
h2.background-header {
font-size: 1.7rem;
border-top: 1px solid #333;
border-bottom: 1px solid #333;
margin: 40px 0 30px;
padding: 10px 0 5px 15px;
background-color: #d6f2f7;
/* APA Teal branding color */
}
h2.h1lookingh2 {
font-size: 2.3rem;
font-weight: 600;
margin-top: 0;
margin-bottom: 0.5rem;
line-height: 1.2;
color: inherit;
}
h2.card-header {
margin: 10px 0;
}
/* used for intro h2 on sign-up form */
h2.introh2 {
color: #595959;
font-size: 1.5rem;
font-weight: 400;
margin: 5px 0 10px 0;
}
h3 {
font-size: 1.4rem;
/* matches the "regular" h2 */
}
h4 {
font-size: 1.2rem;
/* used on Visual Search POC (V6) */
}
h4.document-status {
font-size: 1.2rem;
margin-top: 10px;
font-weight: 700;
}
p.small {
font-size: 14px !important;
/* used for the simple footer */
}
/* styles to make a fieldset > legend look like a label, for forms such as the feedback form */
legend.looklikelabel {
font-size: 16px !important;
font-weight: normal;
margin-bottom: 0;
}
/* making the legend (form field names) bigger than the default 16px so that the single-field modals have some hierarchy with the field name and then the radio button choices - otherwise, with all being 16px, was hard to determine what the field name display was/meant - scoping this out just to modals (for now) - keeping labels the 16px (the radio button options, and field names on the email form modal */
.modal-body legend {
font-size: 20px;
}
ul.dropdown-menu li {
line-height: 25px;
/* bigger height for dropdown items for better mobile clickable targets on languageSwitcher dropdown button */
}
/* styles used for the Cited By modal display */
.show-hide-abstract-button-row {
margin-top: 10px;
margin-bottom: -10px;
/* definitely a bit hacky, but works with the Cited By reference list display padding */
}
.abstractText {
text-indent: 0;
/* have to define this, otherwise there is an anti-indent in the Cited By modal reference list */
}
/* BS4 collapse link - being used for show/hide Abstract toggles on Cited By modal */
[aria-expanded="true"] .showAbstract,
[aria-expanded="false"] .hideAbstract {
display: none;
}
/* styling the div with data-toggle="collapse" */
[data-toggle="collapse"] div {
padding: 3px;
cursor: pointer;
}
/* need this style for BS collapse buttons to be ok with the alternating li colors within the Cited By reference modals */
[data-toggle="collapse"] {
display: inline;
}
/* Custom styles to reset some of the IUX PL conflicts, such as with pagination styles, so scoping that out here - this is for the Cited By modal and tweaked colors from the ACW bottom pane mockups to fit APA Pubs styles */
ul.pagination a {
border: 1px solid #003A70;
}
ul.pagination a:hover {
background-color: #d5e8f9 !important;
border-color: #003A70 !important;
color: #003A70 !important;
z-index: 2 !important;
}
ul.pagination .active a {
background-color: #004c97 !important;
border-color: #004c97 !important;
color: #fff !important;
z-index: 2 !important;
}
ul.pagination .active a:hover {
background-color: #003a70 !important;
border-color: #003a70 !important;
color: #fff !important;
z-index: 2 !important;
}
ul.pagination .page-item.disabled .page-link {
color: #6c757d !important;
pointer-events: none !important;
cursor: auto !important;
background-color: #fff !important;
z-index: 2 !important;
}
/* to control the font-weight of the "results per page" buttons to match the 500 font-weight of the pagination buttons */
.btn-500fontweight {
font-weight: 500 !important;
}
/* utility class for vertical space betweeen horizontal buttons that stack on mobile (col-lg-6) - used on the POC for the Explore Journals V3 */
@media screen and (max-width: 991.98px) {
.margin-top15at991 {
margin-top: 15px;
}
}
/* changing the default z-index for .modal from 1050 to 9999 so the modals go above all elements, especially the hamburger menu */
/*
.modal {
z-index: 9999;
}
*/
/* altering the modal backdrop overlay so that it's even with the hamburger menu to cover it up */
/*
.modal-backdrop {
z-index: 9998;
}
*/
/* tweaks to always have modal and overlay be above all elements - needed when doing top nav POCs to have modal go over the top nav - see https://stackoverflow.com/questions/34755770/modal-appear-behind-fixed-navbar */
.modal-backdrop {
z-index: 100000 !important;
}
.modal {
z-index: 100001 !important;
}
/* defining the .modal-title font size here, since it varies, and using h3's for the modal titles to keep heading hierarchy going, might be good for accessibility? */
.modal-title {
font-size: 30px;
}
/* adding an XL modal size - used on the Record Views modal via the Record Display page */
.modal-xl {
max-width: 1140px;
}
/* fullscreen modal override for BS4 - see https://stackoverflow.com/questions/55344930/how-to-make-a-modal-fullscreen */
.modal-dialog-fullscreen {
max-width: 100%;
margin: 0;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: auto;
/* was 100vh but changed to "auto" since responsive table code was getting cut off with redrawn table - this will essentially make the modal full widescreen but height dependent on the modal content */
display: flex;
}
/* light gray background box used in Verify Identity modal - to consider adding to IUX PL */
.lightGrayBox {
background-color: #f1f1f1;
margin: 15px 0;
padding: 10px;
}
/* APA Teal color box used in Visual Search POC (V6) - to consider adding to IUX PL */
.apaTealBox {
background-color: #D6F2F7;
margin: 15px 0;
padding: 15px;
}
/* Light Blue - Alert Primary - color box used in Browse Journals (V1) Pub Date field section - to consider adding to IUX PL */
.apaLightBlueBox {
background-color: #F0F8FF;
margin: 15px 0;
padding: 15px;
}
/* this is used on the MyAPA Create an Account screen as .miniValidationNote - consider adding smaller note styles to the IUX PL */
.alert-note.smaller {
margin: 10px 0;
padding: 10px 8px;
/* was 10px 15px; - but needed less padding to fit GDPR box in Verify Identity modal at desktop without awkward break */
}
/* If we are using jQuery Validation, we might consider using this styling used for specifying the form field validation colors for the form validation example - should we incorporate these styles into the PL, at least for reference? They will only work with how jQuery Validate works with setting .has-error and .has-success states */
.help-block {
color: #990000;
}
.has-error input,
.has-error select,
.has-error textarea {
border-color: #a94442 !important;
}
.has-error input:focus,
.has-error select:focus,
.has-error textarea:focus {
border-color: #a94442 !important;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ff0000 !important;
}
.has-success input,
.has-success select,
.has-success textarea {
border-color: #2a8c3a;
}
.has-success input:focus,
.has-success select:focus,
.has-success textarea:focus {
border-color: #2a8c3a;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #51cb65;
}
/* *** BS4 overrides *** */
/* so that the article tool tooltips don't show on top of the modals - default of .tooltip is z-index: 1070; */
/*
.tooltip {
z-index: 999;
}
*/
/* note: to get BS tooltips to work on top of modals - see https://stackoverflow.com/questions/39960446/why-do-bootstrap-tooltips-not-work-in-bootstrap-modals - adding this to the main stylesheet */
.tooltip {
z-index: 100000000;
}
/* styling the .grid-striped container */
.grid-striped .row:nth-of-type(odd) {
background-color: #f1f1f1;
}
.grid-striped .row {
padding: 0.5rem 0;
}
.grid-striped .field-label {
font-weight: 700;
}
.grid-striped .field-label-main {
letter-spacing: 1px;
/* since all caps, this helps with readability */
font-weight: 700;
text-transform: uppercase;
}
/* responsive styling for the .grid-striped container at the <767px stacking breakpoint */
@media screen and (max-width: 767.98px) {
.grid-striped .field-label-main {
font-size: 1.2em;
}
}
/* styling the lists in the .grid-striped container */
.grid-striped ul {
list-style: none;
margin-bottom: 0;
margin-left: -40px;
}
/* styling the Book Record Display TOC ul so that bullets show on Desktop size also, for readability */
.grid-striped ul.grid-striped-alwaysshowbullets {
list-style: disc;
margin-left: -25px;
}
/* giving some vertical space for list items to improve readability */
.grid-striped ul li {
padding-bottom: 4px;
}
/* no need for extra bottom padding for last list item */
.grid-striped ul>li:last-of-type {
padding-bottom: 0;
}
/* responsive .grid-striped container list */
@media screen and (max-width: 767.98px) {
.grid-striped ul {
list-style: disc;
margin-left: -25px;
}
}
/* styling the #reference-list */
.list-striped .list-group {
list-style-position: inside;
}
.list-striped .list-group-item {
display: list-item;
margin-left: 0px;
padding: 1.25rem;
/* there's already a style for .card .list-group-item, but making this section within the Cited By modal having padding as well */
padding-left: 30px;
/* so ol li numbers don't run into left side of list group box */
}
/* scoping this out to format reference list padding within Cited By modal */
.modal .list-striped .list-group-item {
padding-left: 1.25rem;
}
.list-group-item ol li {
padding: 1.25rem;
}
/* the next two styles make the indention stick with the reference-number against the reference-text */
.list-striped ol {
margin-bottom: 20px;
counter-reset: oli;
/* method to bold the numbers in an ol - see https://codepen.io/gc-nomade/pen/fdbEm */
list-style-type: none;
/* part of counter-reset method */
}
.list-striped ol li {
margin: 0px;
padding: 0px;
text-indent: -1em;
margin-left: 1em;
counter-increment: oli;
/* part of counter-reset method */
}
.modal .list-striped ol li {
text-indent: 0;
/* this style was making the badge display within the Cited By reference list difficult - so resetting it within the modals to affect the Cited By modal */
}
.list-striped li:before {
content: counter(oli) ". ";
/* part of counter-reset method */
font-weight: 700;
/* styles for the ol go here */
}
/* alternating li background colors - used for Cited By modal reference list */
.list-striped li:nth-of-type(odd) {
background-color: #f1f1f1;
}
.reference-text {
display: inline;
}
.reference-button-row {
margin: 15px 0 0;
}
.reference-citedby-row {
margin: 15px 0 0;
}
/* to override the .accordion .btn width: 100% for the reference buttons */
.reference-button-row button,
.reference-citedby-row button {
width: auto !important;
}
/* styling the accordion panel headings with h2's for the best heading hierarchy - Note the IUX PL has styles for h5's with the panels - Update from 5-13-2021: Making this style fit for all heading styles needed for the accordion so no skipped headings for better accessibility */
.accordion h1,
.accordion h2,
.accordion h3,
.accordion h4,
.accordion h5,
.accordion h6 {
margin: 0 !important;
}
.accordion h1 .btn-link,
.accordion h2 .btn-link,
.accordion h3 .btn-link,
.accordion h4 .btn-link,
.accordion h5 .btn-link,
.accordion h6 .btn-link {
color: #333333;
font-size: 1.3rem;
font-weight: 500;
}
/* revisit if the below responsive styles are needed or wanted */
@media screen and (max-width: 767.98px) {
.card {
border-radius: 0;
}
/*
.card-body {
padding: 0.5rem;
}
*/
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.5rem;
}
}
/* a way to prevent the card-body from changing padding - no responsive padding change is needed for the Topic Mapper card design screen */
@media screen and (max-width: 767.98px) {
.card-body-no-responsive-padding-change {
padding: 1.25rem !important;
}
}
/* *** APA Publishing Branding Styles *** */
/* *** colors used on site *** */
.apa-teal {
color: #33bfd5;
}
/* used on triband top */
.apa-cerulean {
color: #3e52a3;
}
/* used on triband middle */
.apa-pubs-purple {
color: #39207c;
}
/* used on triband bottom and for purple buttons - the "primary" button used throughout the site */
.apa-pubs-red {
color: #d22730;
}
/* used for select red button CTAs - such as buttons for signing up to the service and for PDFs, as well as back-to-top button, floating action button (FAB), and carousel pagination controls */
.apa-blue {
color: #004c97;
}
/* used for blue buttons - such as sort buttons on isotope */
.body-default {
color: #212529;
}
/* used for link override for NEL related card */
.title-gray {
color: #949499;
}
/* used on NEL titles for distinction of translated title - make sure large font-size to pass accessibility */
.light-gray {
color: #f8f8f8;
}
/* used for the .alertsBox, such as the container for the isotope controls */
.background-gray {
color: #eeeeee;
}
/* used for the body background color against the white cards */
/* *** TriBand *** */
.apatriband-apateal-top {
background-color: #33bfd5;
height: 8px;
width: 100%;
}
.apatriband-apacerulean-middle {
background-color: #3e52a3;
height: 12px;
width: 100%;
}
.apatriband-apapubpurple-bottom {
background-color: #39207c;
height: 16px;
width: 100%;
}
/* *** PUBS BRANDED BUTTONS - Note - might be able to remove these from this stylesheet as they are not added to the main PL stylesheet *** */
/* using this class in the modal "dismiss" button from IUX PL to align with APA Pubs branding guidelines */
.btn-apapub-squared-override {
border-radius: 0px !important;
}
/* *** RED BUTTONS *** */
/* squared */
.btn-pubs-1 {
background-color: #d22730;
color: #fff;
border-radius: 0px;
}
.btn-pubs-1:hover {
background-color: #93001c;
color: #efb1b6;
}
/* outline rounded */
.btn-pubs-4 {
background-color: #fff;
color: #d22730;
border: 2px solid #d22730;
border-radius: 50px;
}
.btn-pubs-4:hover {
background-color: #d22730;
color: #fff;
}
/* *** BLUE BUTTONS *** */
/* squared - solid blue */
.btn-pubs-2 {
background-color: #004c97;
color: #fff;
border-radius: 0px;
}
.btn-pubs-2:hover {
background-color: #003a70;
color: #7fbbdd;
}
/* outline rounded - blue */
.btn-pubs-5 {
background-color: #fff;
color: #004c97;
border: 2px solid #004c97;
border-radius: 50px;
}
.btn-pubs-5:hover {
background-color: #004c97;
color: #fff;
}
/* squared - blue outline button */
.btn-pubs-8 {
background-color: #fff;
color: #004c97;
border: 2px solid #004c97;
border-radius: 0px;
}
.btn-pubs-8:hover {
background-color: #004c97;
color: #fff;
}
/* *** PURPLE BUTTONS *** */
/* squared - solid purple */
.btn-pubs-3 {
background-color: #39207c;
color: #fff;
border-radius: 0px;
}
.btn-pubs-3:hover {
background-color: #221e44;
color: #a496c8;
}
/* squared - purple outline button */
.btn-pubs-7 {
background-color: #fff;
color: #39207c;
border: 2px solid #39207c;
border-radius: 0px;
}
.btn-pubs-7:hover {
background-color: #39207c;
color: #fff;
}
/* outline rounded - purple */
.btn-pubs-6 {
background-color: #fff;
color: #39207c;
border: 2px solid #39207c;
border-radius: 50px;
}
.btn-pubs-6:hover {
background-color: #39207c;
color: #fff;
}
/* GetFTR buttons */
/* outline */
.getftr-1 {
background-color: #fff;
color: #096a73;
border: 2px solid #096a73;
border-radius: 0;
text-transform: none;
}
.getftr-1:hover {
background-color: #d6f2f7;
}
/* green fill */
.getftr-2 {
background-color: #096a73;
color: #fff;
border: 2px solid #096a73;
border-radius: 0;
text-transform: none;
}
.getftr-2:hover {
background-color: #053e44;
color: #fff;
border: 2px solid #053e44;
}
/* updates button - added 6-2024 - updated 11-2024 */
.getftr-updates {
background-color: #946F00; /* note that the #BB8C00 from their website is not color contract accessible, so going darker */
color: #fff;
border: 2px solid #946F00;
border-radius: 0;
text-transform: none;
}
.getftr-updates:hover {
background-color: #614900;
color: #fff;
border: 2px solid #614900;
}
/* used in the updates popover with Fontawesome icon */
.getftrupdates-icon {
color: #946F00;
margin-right: 4px;
}
/* retraction button - added 6-2024 - updated 11-2024 */
.getftr-retraction {
background-color: #861515;
color: #fff;
border: 2px solid #861515;
border-radius: 0;
text-transform: none;
}
.getftr-retraction:hover {
background-color: #5a0e0e;
color: #fff;
border: 2px solid #5a0e0e;
}
/* used in the retraction popover with Fontawesome icon */
.getftrretraction-icon {
color: #861515;
margin-right: 4px;
}
/* 3-14-2024: overriding Bootstrap 4 button (and anchor buttons using these classes) styles so that button text stacks for long text buttons - Remove media query 12-4-2024 to apply to all breakpoints */
.btn-pubs-1, .btn-pubs-2, .btn-pubs-3, .btn-pubs-4, .btn-pubs-5, .btn-pubs-6, .btn-pubs-7, .btn-pubs-8, .getftr-1, .getftr-2, .btn-outline, .btn-textbutton {
white-space: normal !important;
}
/* truncating the button text for the GetFTR institution name within button - see https://stackoverflow.com/questions/9905409/is-it-possible-to-use-text-overflow-ellipsis-on-a-button-element */
.truncate-button-text {
font-family: 'Lato', sans-serif !important;
max-width: 300px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* responsive truncation button text styling using along with .fullWidthButton767 class */
@media screen and (max-width: 767.98px) {
.truncate-button-text {
max-width: 100%;
}
}
/* styling accordion panels to fit into APA Publishing Branding Guidelines */
.accordion [data-toggle="collapse"] {
background-color: #d6f2f7;
/* APA Teal brand color */
}
.accordion .card-header .btn:hover {
background-color: #c1ebf3;
/* a shade darker than the APA Teal - default is #d8d8d8 */
}
/* styling the "section title" differently from the IUX PL to fit APA Pubs Branding Guidelines */
.section-title-2 {
font-size: 16px;
letter-spacing: 1px;
color: #494949;
text-transform: uppercase;
margin: 0 auto;
}
.section-title-2::after {
content: '';
display: block;
width: 100px;
height: 2px;
background: #494949;
/* APA Pubs dark gray */
margin: 0 auto;
margin-top: 15px;
border-radius: 3px;
}
/* ************ GENERAL STYLES ************ */
/* button group styles - used for "results per page" controls on Cited By modal */
.btn-group .btn {
border-radius: 0;
display: block;
/* vertically aligns the text within the buttons */
}
.btn-group .btn:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
/* these button group styles in the mockups are being used along with JS for the button group styling for the "Record Views" chart modal time period buttons, same code as live CAS - this is using the Pubs .btn-pubs-8 blue squared outline button */
.btnGroup {
border-color: #004c97
}
.btnDefault {
background-color: #fff;
color: #004c97;
}
.btnSelected {
background-color: #004c97;
color: #fff;
}
/* extra responsive utilities */
.screen-only500 {
display: block;
}
.mobile-only500 {
display: none;
}
@media screen and (max-width: 500px) {
.screen-only500 {
display: none;
}
.mobile-only500 {
display: block;
}
}
.screen-only767 {
display: block;
}
.mobile-only767 {
display: none;
}
@media screen and (max-width: 767.98px) {
.screen-only767 {
display: none;
}
.mobile-only767 {
display: block;
}
}
.screen-only991 {
display: block;
}
.mobile-only991 {
display: none;
}
@media screen and (max-width: 991.98px) {
.screen-only991 {
display: none;
}
.mobile-only991 {
display: block;
}
}
/* .btn-textbutton = TEXT BUTTON - to be reviewed by UX Team - added with Edit Address screen - took out ProximaNova font also */
.btn-textbutton, a.btn-textbutton {
font-family: 'Lato', sans-serif;
color: #005499 !important;
font-weight: 500;
font-size: 12px;
text-align: center;
letter-spacing: 0.03em;
text-transform: uppercase;
text-decoration: underline;
background-color: inherit;
color: #333;
border-radius: 3px;
-webkit-transition: background 0.5s ease 0s;
-moz-transition: background 0.5s ease 0s;
-ms-transition: background 0.5s ease 0s;
transition: background 0.5s ease 0s;
}
.btn-textbutton:hover,
a.btn-textbutton:hover,
.btn-textbutton:focus,
a.btn-textbutton:focus,
.btn-textbutton:active,
a.btn-textbutton:active,
.btn-textbutton.active,
a.btn-textbutton.active,
.open .dropdown-toggle.btn-textbutton {
background-color: #e0f6fd;
color: #23527c;
text-decoration: none;
}
.btn-textbutton:active, a.btn-textbutton:active,
.open .dropdown-toggle.btn-textbutton {
background-image: none;
}
/* light white version of textbutton - being used for top nav POC on brand blue background */
.btn-textbutton-light {
color: #FFFFFF !important;
background-color: red;
}
.btn-textbutton-light:hover, .btn-textbutton-light:focus, .btn-textbutton-light:active {
color: #212529 !important;
background-color: #E9EA75 !important;
}
/* specific styling to get rid of text-decoration:underlines in language switcher button dropdown */
button#languageSwitcher,
a.dropdown-item {
text-decoration: none;
}
/* *** responsive class to add to buttons *** */
@media only screen and (max-width: 767.98px) {
.fullWidthButton767 {
width: 100%;
margin-top: 10px;
}
}
/* *** responsive class to add to buttons *** */
@media only screen and (max-width: 767.98px) {
.fullWidthButton767NoMargin {
width: 100%;
}
}
/* *** responsive class to add to anchor buttons which are inline coded with display:inline due to CSS conflicts *** */
@media only screen and (max-width: 767.98px) {
a.fullWidthButton767 {
display: block !important;
}
}
/* *** APA and PsycInfo top logo section *** */
.logo-container {
padding: 5px 5px 8px 35px;
}
@media screen and (max-width: 991.98px) {
.logo-container {
margin-left: -30px;
}
}
a.pn-logo {
text-decoration: none !important;
padding-top: 5px;
}
pnlogo svg {
width: auto;
height: 35px;
}
@media screen and (max-width: 600px) {
pnlogo svg {
width: 94%;
}
}
@media screen and (max-width: 520px) {
pnlogo svg {
width: 75%;
}
}
@media screen and (max-width: 440px) {
pnlogo svg {
width: 62%;
}
}
@media screen and (max-width: 380px) {
pnlogo svg {
width: 54%;
}
}
@media screen and (max-width: 350px) {
pnlogo svg {
width: 50%;
}
}
/* ******* THIN HEADER STYLES ADAPTED FROM APA.ORG - using as a foundation for the PsycInfo/APA logo header ******* */
header {
font-size: 75%;
font-family: Arial, Helvetica, Sans-serif;
line-height: 1.3em;
letter-spacing: normal;
word-spacing: normal;
position: relative;
border-bottom: 2px solid #555;
overflow: visible;
width: 100%;
padding: 0;
z-index: 998; /* was 110 but having trouble with toasts showing up over the header, which is set to 999 */
margin: 0 auto;
}
header .banner {
background: #ffffff;
/* margin-top: 10px; */
padding-top: 3px;
/* added */
width: 100%;
overflow: hidden;
}
@media screen and (max-width: 995px) {
header {
width: auto;
border: 0;
margin: 0;
clear: both;
}
header .banner {
margin-top: 0;
overflow: visible;
height: 57px;
border-bottom: 2px solid #555;
}
}
/* Top Bar SF Preference Center icon and Language Switcher locations */
.top-preference-center-icon {
overflow: inherit;
z-index: 9000;
position: absolute;
top: 12px;
right: 20px;
}
.top-language-switcher {
overflow: inherit;
z-index: 9000;
position: absolute;
top: 10px;
right: 50px;
}
/* Full Width Banner Header - Used on Notification Content Page, Homepage, etc. - Adapted from Salesforce forms */
.backgroundBanner {
background: url(../img/Polaris__Header_Image1.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
height: 100%;
}
.headerTextBox {
background: rgb(0, 76, 151);
background: linear-gradient(90deg, rgba(0, 76, 151, 1) 0%, rgba(57, 32, 124, 1) 100%);
padding: 40px 30px 10px;
width: 500px;
height: 100%;
opacity: 0.8;
}
@media screen and (max-width: 767.98px) {
.backgroundBanner {
background: none;
}
.headerTextBox {
opacity: 1.0;
width: 100%;
margin-top: 20px;
margin-bottom: -20px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
#mainBodyContainer {
margin-top: -5px;
}
}
/* responsive styling targeting the email display on the .headerTextBox - have to use important here to override inline styling - consider moving that styling external later */
@media screen and (max-width: 480px) {
.headerTextBox div.text-white {
font-size: 18px !important;
}
}
/* ************ FOOTER STYLES ************ */
footer {
bottom: 0;
margin-bottom: 0;
flex-shrink: 0;
/* style for sticky footer */
border-top: 2px solid #555;
}
/* footer anchor overrides */
footer a {
text-decoration: none;
}
footer a:hover {
text-decoration: underline;
}
/* for the Twitter X svg - to match the other Fontawesome anchors */
footer a svg {
fill: #003A70;
}
/* ******* FAB codes - See https://codepen.io/joaofnds/pen/aBMLXj ******* */
.round {
border-radius: 50%;
}
.fab {
transition: all 300ms ease-in-out;
width: 56px;
height: 56px;
background-color: #d22730;
display: flex;
align-items: center;
justify-content: center;
position: fixed;
right: 16px;
bottom: 16px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
color: white;
font-size: 2em;
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.16), 0px 3px 10px rgba(0, 0, 0, 0.16);
}
.fab:hover {
background-color: #93001c;
}
.fab i {
transition: all 300ms ease-in-out;
will-change: transform;
}
.inner-fabs .fab {
width: 40px;
height: 40px;
right: 23px;
bottom: 23px;
font-size: 1.5em;
will-change: bottom;
}
.inner-fabs.show .fab:nth-child(1) {
bottom: 80px;
}
.inner-fabs.show .fab:nth-child(2) {
bottom: 130px;
}
.inner-fabs.show .fab:nth-child(3) {
bottom: 180px;
}
.inner-fabs.show .fab:nth-child(4) {
bottom: 230px;
}
.inner-fabs.show .fab:nth-child(5) {
bottom: 280px;
}
.inner-fabs.show .fab:nth-child(6) {
bottom: 330px;
}
.inner-fabs.show+.fab i {
transform: rotate(135deg);
}
.fab:before {
content: attr(data-tooltip);
transition: opacity 150ms cubic-bezier(0.4, 0, 1, 1);
position: absolute;
visibility: hidden;
opacity: 0;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
color: #ececec;
right: 50px;
top: 25%;
background-color: rgba(70, 70, 70, 0.9);
font-size: 0.5em;
line-height: 1em;
display: inline-block;
text-align: center;
white-space: nowrap;
border-radius: 2px;
padding: 6px 8px;
max-width: 200px;
font-weight: bold;
text-overflow: ellipsis;
vertical-align: middle;
}
.inner-fabs.show .fab:hover:before {
content: attr(data-tooltip);
visibility: visible;
opacity: 1;
}
/* ********** back-to-top button - See https://codepen.io/fathy_ar/pen/ZKqjRL ********** */
button.back-to-top {
margin: 0 !important;
padding: 0 !important;
background: #fff;
height: 0px;
width: 0px;
overflow: hidden;
border-radius: 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
color: transparent;
clear: both;
visibility: hidden;
position: fixed;
cursor: pointer;
display: block;
border: none;
right: 50px;
bottom: 75px;
font-size: 0px;
outline: 0 !important;
z-index: 99;
transition: all .3s ease-in-out;
}
button.back-to-top:hover,
button.back-to-top:active,
button.back-to-top:focus {
outline: 0 !important;
}
button.back-to-top::before {
content: "\f077";
font-family: "FontAwesome";
display: block;
/* vertical-align: middle; */
margin: -5px 0 auto;
}
button.back-to-top.show {
display: block;
background: #fff;
color: #d22730;
/* was this cool green #00ab6c */
font-size: 25px;
right: 25px;
bottom: 50px;
height: 50px;
width: 50px;
visibility: visible;
box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.25);
}
button.back-to-top.show:active {
box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.25);
}
/* *************************************************************************** */
/* ************ NOT SURE IF WE NEED THESE STYLES AND/OR NEEDS INTEGRATION INTO MAIN PL CSS ************ */
/* *** not sure if we need these styles - they were used in the Polaris SF forms *** */
input[readonly] {
cursor: not-allowed;
pointer-events: all !important;
}
.grayText {
color: #595959 !important;
}
.quotetext {
color: #595959;
font-size: 14px;
font-style: italic;
margin-bottom: 20px;
}
/* .error-format using addClass and removeClass with character count JS */
.help-block,
.form-group .help-block,
.form-group.has-error label.control-label,
.form-group.has-error .help-block,
#interests-error-message,
.error-format {
color: #a94442 !important;
font-size: 16px;
font-weight: 400;
margin-bottom: 10px;
}
/* *** social follow icons (in footer) modified from #row-4 at https://codepen.io/bluesaltlabs/pen/YWWpQV *** */
.follow-icons .icon-container {
font-size: 2em;
}
.follow-icons .icon-container a {
display: inline-block;
width: 40px;
height: 40px;
}
.follow-icons .icon-container a,
.follow-icons .icon-container a:hover,
.follow-icons .icon-container a:active {
text-decoration: none;
}
.follow-icons #facebook-link:hover,
.follow-icons #facebook-link:active {
color: #3b5998;
}
.follow-icons #twitter-link:hover,
.follow-icons #twitter-link:active {
color: #55acee;
}
/* from https://twitter.com/ inspected and colorhexa translation to https://www.colorhexa.com/0f1419 */
.follow-icons #twitter-x-link svg:hover,
.follow-icons #twitter-x-link svg:active {
fill: #0f1419;
}
.follow-icons #youtube-link:hover,
.follow-icons #youtube-link:active {
color: #ff0000;
}
.follow-icons #linkedin-link:hover,
.follow-icons #linkedin-link:active {
color: #0077b5;
}
/* *** social share icons modified from #row-3 at https://codepen.io/bluesaltlabs/pen/YWWpQV *** */
.share-icons .icon-container {
text-align: center;
padding: 10px 0;
}
.share-icons .icon-container a {
font-family: 'Catamaran', sans-serif !important;
/* need to define this, as Lato has alignment issues */
-webkit-transition: all 150ms ease-in-out;
-moz-transition-property: all 150ms ease-in-out;
-o-transition-property: all 150ms ease-in-out;
transition: all 150ms ease-in-out;
transition-property: all 150ms ease-in-out;
}
.share-icons .icon-container a,
.share-icons .icon-container a:hover,
.share-icons .icon-container a:active {
text-decoration: none;
}
.share-icons .icon-container {
font-size: 2em;
}
.share-icons .icon-container a {
display: inline-block;
color: #fff;
width: 40px;
height: 40px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
margin: 10px;
/* adding this to give some space between icons for mobile friendliness */
}
.share-icons #facebook-link {
background: #3b5998;
}
.share-icons #twitter-link {
background: #55acee;
}
.share-icons #twitter-x-link {
background: #0f1419;
}
.share-icons #linkedin-link {
background: #0077b5;
}
.share-icons #facebook-link:hover,
.share-icons #facebook-link:active {
background: #5772ac;
}
.share-icons #twitter-link:hover,
.share-icons #twitter-link:active {
background: #7cc0f4;
}
.share-icons #linkedin-link:hover,
.share-icons #linkedin-link:active {
background: #01a6ff;
}
.share-icons .icon-container a:hover,
.share-icons .icon-container a:active {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
/* *** adding in the BS3 justified button group styling, since it's gone in BS4 - see https://stackoverflow.com/questions/34450586/justify-buttons-with-bootstrap-v4 */
.btn-group-justified {
display: table;
width: 100%;
table-layout: fixed;
border-collapse: separate;
}
.btn-group-justified .btn,
.btn-group-justified .btn-group {
float: none;
display: table-cell;
width: 1%;
}
.btn-group-justified .btn .btn,
.btn-group-justified .btn-group .btn {
width: 100%;
}
.btn-group-justified .btn .dropdown-menu,
.btn-group-justified .btn-group .dropdown-menu {
left: auto;
}
/* adding an XS button style, which doesn't exist in BS4 - see https://stackoverflow.com/questions/33911049/btn-xs-no-longer-a-valid-option-in-bootstrap-4 - consider adding this to IUX PL */
.btn-group-xs>.btn,
.btn-xs {
padding: .25rem .4rem;
font-size: .875rem;
line-height: .5;
border-radius: 50px;
/* was .2rem - but, matching apapubs branding styles */
}
.btn-xs {
display: inline-block;
border-width: 1px;
/* default is 2px */
margin: 5px 10px 10px 0;
padding: .25rem .4rem;
line-height: 1;
font-weight: 500;
/* default is 700 */
box-sizing: border-box;
}
/* *** related content styles */
/* *** Slick carousel *** */
.wrapper {
width: 100%;
padding-top: 20px;
text-align: center;
}
/* *** need to revisit if we need the most-relevant and recommended styles now that discover-carousel might be used for all discover carousels *** */
.carousel,
.carousel-favorites,
.discover-carousel,
.most-relevant-journals-carousel,
.recommended-journals-carousel,
.carousel-homepage-wide,
.carousel-homepage-modular {
width: 90%;
margin: 0px auto;
text-align: left;
}
.carousel h3,
.carousel-favorites h3,
.discover-carousel h3,
.most-relevant-journals-carousel h3,
.recommended-journals-carousel h3,
.carousel-homepage-wide h3,
.carousel-homepage-modular h3 {
font-size: 1.2em;
}
.slick-slide {
margin: 10px;
}
.slick-dots li button:before {
font-family: 'Lato', sans-serif;
font-size: 20px;
line-height: 20px;
}
.slick-prev,
.slick-next {
top: 30%;
/* theme has 50% but that seemed to low, so overriding */
}
.slick-prev i,
.slick-next i {
color: #d22730;
font-size: 50px;
font-weight: 700;
}
.slick-prev i:hover,
.slick-next i:hover {
color: #39207c;
}
/* *** related reading section misc styles */
/* used for OA icon, free-to-read icon, etc. */
.related-content-info-icon,
.notification-card-info-icon {
margin-top: 10px;
}
.related-content-button,
.notification-card-button {
margin: 15px 0 0;
}
.card-bottom-button {
margin: 10px 0 0;
}
@media screen and (max-width: 767.98px) {
.card-bottom-button {
margin: 10px 0;
}
}
.related-content-entitlement-alert-row {
margin: 15px 0;
}
.related-content-provided-by-apa-row {
margin: 15px 0 20px;
}
.related-content-provided-by-apa-row .journal-book-name {
font-size: 1.2rem;
}
/* "Free to read" circle icon */
.freeToReadCircle {
background: green;
width: 10px;
height: 10px;
border-radius: 50%;
vertical-align: middle;
margin-bottom: 2px;
}
.freeToReadText {
font-size: 17px;
}
.chorus-row {
margin: 20px 0;
}
/*
.related-content-provided-by-apa-row .provided-by-statement {}
*/
/* *** CITED BY MODAL STYLES - For the Fullscreen modal design (V2) ** */
.citation-count,
.results-count {
font-size: 1.1rem;
}
.citation-count {
margin: 20px 0;
/* have to keep this style in here since it was delivered with the Round 2 mockup stylesheet */
}
/* scoping this out to get rid of top and bottom margin on .citation-count display within Cited By modal */
.modal .citation-count {
margin-top: 0;
}
@media screen and (max-width: 767.98px) {
.citation-count {
text-align: right;
margin-bottom: 15px;
}
}
.results-count {
color: #666666;
font-weight: 700;
margin-top: 4px;
text-align: right;
}
@media screen and (max-width: 1200px) and (min-width: 991px) {
.results-count {
margin-right: 40px;
}
}
/* giving the table tools inner rows a min-width for horizontal scrollbar to show up if needed for full mobile accessibility if biggest pagination showing */
.table-tools-row {
margin-top: 15px;
}
/* this forces the pagination controls to the right side of the row at desktop */
.pagination-row {
display: flex;
justify-content: flex-end;
}
/* byline on Record Display pages for authors list */
.authors-list {
font-weight: 400;
/* consider 700, although that competes with the title formatting for attention */
}
/* "results per page" - results count - pagination - Cited By modal - changing order for devices with "order" classes in HTML */
@media screen and (max-width: 991.98px) {
.results-count {
text-align: left;
}
.pagination-row {
padding: 0 15px 0;
justify-content: start;
/* left align the pagination controls on mobile display */
margin-bottom: -15px;
/* for proximity reasons - to pull the pagination controls and the results count row closer to each other */
}
.results-count-row {
padding: 0 15px 20px;
}
.results-per-page-row {
padding: 0 15px 15px;
}
}
.sort-controls {
display: flex;
justify-content: flex-end;
}
/* specific responsive styles for results-count-row and pagination-row on Explore Notifications isotope page */
.explore-pagination-row {
display: flex;
justify-content: center;
margin-top: 25px;
}
@media screen and (max-width: 991.98px) {
.pagination-row-explore {
padding: 0 15px 0;
margin-bottom: -15px;
/* for proximity reasons - to pull the pagination controls and the results count row closer to each other */
}
.results-count-row-explore {
padding: 0 15px 20px;
}
}
/* intro statement on Notification Content Page */
.intro-statement {
text-align: center;
}
/* adding margin for the intro-statement and alerts when the image banner and maincontent merge together on mobile - revisit maybe taking out the whole merge code -5px totally */
@media screen and (max-width: 767.98px) {
.intro-statement {
margin: 10px 0;
}
}
@media screen and (max-width: 767.98px) {
#mainBodyContainer .alert:first-of-type {
margin: 10px 0;
}
}
/* highlighted text effect for topics on Notification Content Page - adapted from https://codepen.io/chriscoyier/pen/oqdAJ */
.highlight {
display: inline;
font-size: 20px;
font-weight: 500;
line-height: 35px;
background: #ffe738;
/* APA Pubs color - APA Yellow */
color: #333333;
padding: 0.5rem;
padding-left: 0;
padding-right: 0;
-webkit-box-decoration-break: clone;
-ms-box-decoration-break: clone;
-o-box-decoration-break: clone;
box-decoration-break: clone;
box-shadow: 0.5rem 0 0 #ffe738, -0.5rem 0 0 #ffe738;
}
/* highlighted text effect used for the Cited By modal titles */
.highlight-2 {
display: inline;
font-size: inherit; /* was 22px */
font-weight: 600;
line-height: 40px;
background: #d6f2f7;
/* APA Pubs Teal 20% tint */
color: #333333;
padding: 0.1rem;
padding-left: 0;
padding-right: 0;
-webkit-box-decoration-break: clone;
-ms-box-decoration-break: clone;
-o-box-decoration-break: clone;
box-decoration-break: clone;
box-shadow: 0.3rem 0 0 #d6f2f7, -0.3rem 0 0 #d6f2f7;
margin-right: 3px;
}
/* responsive H1 for use with long H1's such as on Search Results page where query is the H1 - see https://stackoverflow.com/questions/15649244/responsive-font-size-in-css - along with accounting for .highlight-2 styling if used - used along with jQuery for detecting character length looking for h1 with .responsive-length and then applying the .responsive-1 class*/
h1.responsive-1 {
font-size: clamp(.9rem, 6vw, 2.3rem);
}
h1.responsive-length > .highlight-2 {
line-height: 50px;
}
h1.responsive-1 > .highlight-2 {
line-height: clamp(2.0rem, 8.2vw, 3.8rem);
}
/* internal scroll anchors - used on Notification Content Page */
.internal-scroll {
font-size: 18px;
}
/* title link anchors - used on Notification Content Page and Visual Search & Browse POC (V6) */
.title-link {
font-size: 18px;
}
/* overriding active anchor styles for .title-link - to possibly take out if removing active importants from PL stylesheet */
a.title-link {
color: #003A70 !important;
background-color: transparent !important;
text-decoration: underline;
}
a.title-link:hover {
text-decoration: none;
}
/* overriding active anchor styles for for the same design as .btn-pubs-5 XS being used on Visual Search POC (V6) */
.whitepillbutton {
background-color: #fff !important;
color: #004c97 !important;
border: 2px solid #004c97 !important;
border-radius: 50px !important;
line-height: 20px;
text-transform: none;
padding: .2rem 1.2rem .2rem;
white-space: normal !important; /* to override .btn styles for fitting long strings in certain width modals */
}
.whitepillbutton:hover {
background-color: #004c97 !important;
color: #FFFFFF !important;
}
/* overriding active anchor styles for for the same design as .btn-pubs-5 XS - being used on Recent Searches pills with close X icons */
.whitepillbuttonclose {
background-color: #fff !important;
color: #004c97 !important;
border: 2px solid #004c97 !important;
border-radius: 50px !important;
line-height: 20px;
text-transform: none;
/* following styles make room for close X on right side */
padding: .2rem 1.2rem .2rem;
display: flex;
align-items: center;
justify-content: center;
white-space: normal !important; /* to override .btn styles for fitting long strings in certain width modals */
}
.whitepillbuttonclose:hover {
background-color: #004c97 !important;
color: #FFFFFF !important;
}
.whitepillbuttonclose > .close {
margin-left: 10px;
}
.whitepillbuttonclose:hover > .close, .whitepillbuttonclose > .close:not(:disabled):not(.disabled):hover, .whitepillbuttonclose >.close:not(:disabled):not(.disabled):focus{
color: #FFFFFF;
opacity: .9;
}
/* for the .whitepillbutton being used with the search icon in it for "Recent Searches" on the "No Results" search page */
.whitepillbutton.whitepillbuttonWithIcon {
padding: 0.3rem 0.6rem 0.2rem;
}
/* adding a bottom margin to space out list items in the Notification Page TOC list, all but last li */
ul.internal-scroll-list li:not(:last-child) {
margin-bottom: 8px;
}
/* adding a bottom margin to space out list items in the Notification Page titles lists, all but last li */
.load-more-list li:not(:last-child) {
margin-bottom: 15px;
}
/* %%%%%%%%%%%%%% STYLES SPECIFIC FOR THE "EXPLORE ALL NOTIFICATIONS" PAGE (ISOTOPE PAGE) - TO REVISIT/CLEAN-UP LATER %%%%%%%%%%%%%% */
/* specific to the explore-notifications-2.html page, maybe others? - revisit later */
.btn-group .btn {
border-radius: 0;
display: inline-block;
/* was block */
}
/* override from apaiuxpubs.css */
.btn-group .btn:last-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
/* not sure if we need this */
.searchInputGroupSizing {
max-width: 500px;
}
@media screen and (max-width: 767.98px) {
.searchInputGroupSizing {
min-width: 100%;
}
}
/* general isotope styles - cards */
.alertsBox {
border: 1px solid #e6e6e6;
border-radius: 5px;
margin: 15px 20px;
/* was margin: 10px 20px; */
background-color: #f8f8f8;
}
.card-citation {
color: #595959 !important;
font-size: 16px;
}
.card-badge-row {
margin: 0 0 20px;
}
.card-notification-info {
margin: 10px 0;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
/* giving some vertical space for list items to improve readability */
.card-notification-info ul li {
padding-bottom: 4px;
}
/* no need for extra bottom padding for last list items */
.card-notification-info ul>li:last-of-type {
padding-bottom: 0;
}
.card-heading-1 {
font-size: 16px;
margin-top: 5px;
}
.card-heading-1:last-of-type {
margin-bottom: 10px;
}
@media only screen and (max-width: 767.98px) {
.alertsBox {
margin: 20px 10px !important;
}
.modal-body .alertsBox {
margin: 10px 0 !important;
}
}
/* general isotope styles */
/* clear fix */
.grid:after {
content: '';
display: block;
clear: both;
}
/* isotope card widths - for Explore Your Notifications, Explore Journals, and Browse Journals isotope designs */
.notification-item {
width: 18%;
margin: 5px 5px 20px 5px;
position: relative;
overflow: hidden;
border-radius: 4px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
@media only screen and (max-width: 1700px) {
.notification-item {
width: 24%;
}
}
@media only screen and (max-width: 1400px) {
.notification-item {
width: 30%;
}
}
@media only screen and (max-width: 1050px) {
.notification-item {
width: 45%;
}
}
@media only screen and (max-width: 700px) {
.notification-item {
width: 90%;
}
}
/* *** Related styling for responsive button groups - to revisit and clean up later *** */
/* Filter Buttons: For purposes of the mockup, solidifying that the button group anchors have the right "outline" look as buttons do */
a.btn-outline {
color: #003a70 !important;
background-color: #fff !important;
border-color: #003a70 !important;
}
a.btn-outline:hover {
color: #003a70 !important;
background-color: #d5e8f9 !important;
border-color: #003A70 !important;
}
/* checked filter button styling - to possibly adjust later - using .btn-pubs-3 purple color now */
.btn-outline.is-checked {
background-color: #39207c !important;
color: #ffffff !important;
}
/* Sort Buttons (using .btn-pubs-2 styling as the basis): For purposes of the mockup, solidifying that the button group anchors have the right ".btn-pubs-2" look as buttons do */
a.btn-pubs-2 {
background-color: #004c97 !important;
color: #ffffff !important;
border-radius: 0px;
}
a.btn-pubs-2:hover {
background-color: #003a70 !important;
color: #7fbbdd !important;
}
/* ************* Responsive Button Group > Dropdown code - see https://codepen.io/grgaortiz/pen/QNOGNp ****************** */
@media (min-width: 768px) {
.dr-breakout-btn {
display: none !important;
}
.dr-breakout {
display: inline;
background: transparent;
box-shadow: none;
border: none;
position: relative;
margin: 0;
}
.dr-breakout li {
display: inline;
}
.dr-breakout li a {
display: inline-block;
margin-bottom: 10px;
/* gives some vertical spacing when button rows happen above 768px when the button groups become dropdowns */
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border-radius: 4px;
}
}
/* alignment of the sort button group */
.sortButtonGroup {
text-align: right;
}
/* was 767px but changed to 768px due to no rendering on the live site with min and max media query conflict */
@media (max-width: 768px) {
.sortButtonGroup {
text-align: left;
}
}
/* styles for once sort and filter buttons become dropdown button <768px */
/* was 767px but changed to 768px due to no rendering on the live site with min and max media query conflict */
@media (max-width: 768px) {
.sortDropdownButton {
margin-top: 15px;
}
.sortButton,
.filterButton {
width: 100%;
text-align: left;
/* for readability */
}
.sortButton {
border: 1px solid #ffffff;
}
.dropdown-menu.dr-breakout {
padding: 0;
}
.resetButtonPlacement {
margin-top: 15px;
}
}
/* ******** Reordering Search - Sort - Filter columns vertically - See https://stackoverflow.com/questions/47186788/how-to-reorder-bootstrap-columns-vertically and https://codepen.io/Washable/pen/zPoeqY?editors=1100 ********* */
@media screen and (min-width: 768px) {
.flex-container {
display: flex;
flex-direction: row;
flex-grow: 1;
flex-wrap: wrap;
}
#search-section {
order: 1;
}
#filter-section {
order: 3;
}
#sort-section {
order: 2;
float: right;
}
}
/* *** putting some space after the "View full title" link if that is shown with the readmore.js */
.view-full-title+[data-readmore-toggle],
.view-full-title[data-readmore] {
margin-top: 10px;
padding-bottom: 10px;
}
/* *** putting some space after the "View all authors" link if that is shown with the readmore.js */
.view-all-authors+[data-readmore-toggle],
.view-all-authors[data-readmore] {
margin-top: 10px;
}
/* top border only as long as text - using for the divider between the title and authors list on the Record Display page - See https://stackoverflow.com/questions/16399232/restrict-border-width-to-text-width-in-a-block-element */
.top-border-1 {
border-top: 1px solid #949499;
/* the .title-gray color */
display: table-cell;
padding-top: 10px;
}
.top-border-1:after {
content: "";
display: table-cell;
width: 100%;
}
/* ###### these styles are specific to the "View Past Notifications" accordion modal ###### */
/* styles to make h4 panel button styles similar to the h2 styles used in the Record Display accordion - consider adding override .accordion h# styles to the main IUX PL for consistent styles of the panel links, for maintaining proper heading hierarchy needed per specific page */
.accordion h4 .btn-link {
color: #333333;
font-size: 1.3rem;
font-weight: 500;
}
/* regulating the padding for the ul.notifications-list list items to improve readability and to account for larger star icon */
ul.notifications-list li {
padding-bottom: 12px;
}
/* no need for extra padding for last list item */
ul.notifications-list>li:last-of-type {
padding-bottom: 0;
}
/* making all notification page anchors the same width for table-like readability on "view past notification" modal along with other styling */
ul.notifications-list li a {
display: inline-block;
min-width: 90px;
background-color: #f8f8f8;
padding: 2px 4px;
}
/* responsive styling for the ul.notifications-list list items at the <767px stacking breakpoint */
@media screen and (max-width: 767.98px) {
ul.notifications-list li {
border-bottom: 1px solid #e6e6e6;
margin-top: 15px;
}
ul.notifications-list>li:last-of-type {
border-bottom: none;
}
}
/* **** custom popover styling - for both BS Tourist and "regular" BS popovers - see more specific styling for BS Tourist popovers, which have a slightly different template **** */
.popover {
width: 100%;
max-width: 400px;
/* default is 276px */
border-radius: 10px !important;
}
.popover-header {
display: none;
}
.popover-body {
font-family: 'Lato', sans-serif !important;
font-size: 22px;
color: #ffffff;
background: linear-gradient(90deg, rgba(0, 76, 151, 1) 0%, rgba(57, 32, 124, 1) 100%);
-webkit-border-radius: 10px;
/* Note that this different border radius styling than the BS Tourist popovers */
-moz-border-radius: 10px;
border-radius: 10px;
}
/* responsive styling for Bootstrap Tourist popover - modified to include .introjs-tooltiptext which is the class used in production */
@media screen and (max-width: 767.98px) {
.popover-body,
.introjs-tooltiptext {
font-size: 16px;
}
}
/* for close icon on popover with the blue-purple styling and no title but just content section */
.popover .close {
color: #ffffff !important;
opacity: 0.9 !important;
margin-left: 8px;
/* so that the popover-body text doesn't run into the X close button */
}
/* *** top popover arrows *** */
.bs-popover-top .arrow::before,
.bs-popover-auto[x-placement^="top"] .arrow::before {
border-top-color: #39207c;
}
.bs-popover-top .arrow::after,
.bs-popover-auto[x-placement^="top"] .arrow::after {
border-top-color: #39207c;
}
/* *** bottom popover arrows *** */
.bs-popover-bottom .arrow::before,
.bs-popover-auto[x-placement^="bottom"] .arrow::before {
color: #39207c;
border-bottom-color: #39207c;
}
.bs-popover-bottom .arrow::after,
.bs-popover-auto[x-placement^="bottom"] .arrow::after {
border-bottom-color: #39207c;
}
/* *** right popover arrows *** */
.bs-popover-right .arrow::before,
.bs-popover-auto[x-placement^="right"] .arrow::before {
color: #39207c;
}
.bs-popover-right .arrow::after,
.bs-popover-auto[x-placement^="right"] .arrow::after {
border-right-color: #39207c;
}
/* *** left popover arrows *** */
.bs-popover-left .arrow::before,
.bs-popover-auto[x-placement^="left"] .arrow::before {
border-left-color: #39207c;
}
.bs-popover-left .arrow::after,
.bs-popover-auto[x-placement^="left"] .arrow::after {
border-left-color: #39207c;
}
/* **** custom popover styling - popover-light styles **** */
.popover[class*="tour-"].popover-light {
border: 4px solid #33bfd5;
}
.popover[class*="tour-"].popover-light .popover-body {
background: #f4f4f4 !important;
color: #212529;
}
.popover[class*="tour-"].popover-light .popover-navigation {
background: #fff !important;
}
.popover[class*="tour-"].popover-light .close {
color: #212529 !important;
opacity: 0.9 !important;
margin-left: 8px;
}
/* *** .popover-light top popover arrows *** */
.bs-popover-top.popover-light .arrow.arrow-light::before,
.bs-popover-auto.popover-light[x-placement^="top"] .arrow.arrow-light::before {
border-top-color: #33bfd5 !important;
}
.bs-popover-top.popover-light .arrow.arrow-light::after,
.bs-popover-auto.popover-light[x-placement^="top"] .arrow.arrow-light::after {
border-top-color: #33bfd5 !important;
}
/* *** .popover-light bottom popover arrows *** */
.bs-popover-bottom.popover-light .arrow.arrow-light::before,
.bs-popover-auto.popover-light[x-placement^="bottom"] .arrow.arrow-light::before {
color: #33bfd5 !important;
border-bottom-color: #33bfd5 !important;
}
.bs-popover-bottom.popover-light .arrow.arrow-light::after,
.bs-popover-auto.popover-light[x-placement^="bottom"] .arrow.arrow-light::after {
border-bottom-color: #33bfd5 !important;
}
/* *** .popover-light right popover arrows *** */
.bs-popover-right.popover-light .arrow.arrow-light::before,
.bs-popover-auto.popover-light[x-placement^="right"] .arrow.arrow-light::before {
color: #33bfd5 !important;
}
.bs-popover-right.popover-light .arrow.arrow-light::after,
.bs-popover-auto.popover-light[x-placement^="right"] .arrow.arrow-light::after {
border-right-color: #33bfd5 !important;
}
/* *** .popover-light left popover arrows *** */
.bs-popover-left.popover-light .arrow.arrow-light::before,
.bs-popover-auto.popover-light[x-placement^="left"] .arrow.arrow-light::before {
border-left-color: #33bfd5 !important;
}
.bs-popover-left.popover-light .arrow.arrow-light::after,
.bs-popover-auto.popover-light[x-placement^="left"] .arrow.arrow-light::after {
border-left-color: #33bfd5 !important;
}
/* ========================================================================
* Bootstrap Tourist -- https://raw.githubusercontent.com/IGreatlyDislikeJavascript/bootstrap-tourist/master/bootstrap-tourist.css
* Copyright FFS 2019
* @ IGreatlyDislikeJavascript on Github
*
* z indexes:
* 1110 - backdrop (black bg)
* 1111 - highlight & tour element ()set by js)
* 1112 - prevent
* 1113 - popover
*/
.tour-backdrop {
top: 0;
bottom: 0;
left: 0;
right: 0;
position: fixed;
/* position: absolute; */
/* note: this was the default position, not fixed, but absolute for the backdrop couldn't seem to extend the entire height of the viewport, so I went with fixed and that seems to work well */
box-sizing: content-box;
z-index: 1110;
background-color: #000;
opacity: 0.8;
-ms-filter: "alpha(opacity=90)";
filter: alpha(opacity=90);
visibility: visible;
}
.tour-backdrop-animation {
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.tour-prevent {
position: absolute;
z-index: 1112;
opacity: 0.20;
filter: alpha(opacity=20);
}
.tour-highlight {
box-sizing: content-box;
position: absolute;
z-index: 1110;
background-color: #FFF;
background-color: rgba(255, 255, 255, .9);
}
.tour-highlight-animation {
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.tour-highlight-element {
position: relative;
z-index: 1111 !important;
}
.popover[class*="tour-"] {
z-index: 1113;
}
.popover[class*="tour-"] .popover-navigation {
padding: 9px 14px;
overflow: hidden;
}
.popover[class*="tour-"] .popover-navigation *[data-role="end"] {
float: right;
}
.popover[class*="tour-"] .popover-navigation *[data-role="prev"],
.popover[class*="tour-"] .popover-navigation *[data-role="next"],
.popover[class*="tour-"] .popover-navigation *[data-role="end"] {
cursor: pointer;
}
.popover[class*="tour-"] .popover-navigation *[data-role="prev"].disabled,
.popover[class*="tour-"] .popover-navigation *[data-role="next"].disabled,
.popover[class*="tour-"] .popover-navigation *[data-role="end"].disabled {
cursor: default;
}
.popover[class*="tour-"].orphan {
position: fixed;
margin-top: 0;
}
.popover[class*="tour-"].orphan .arrow {
display: none;
}
.tour-behind {
z-index: -1;
}
.tour-zindexFix {
z-index: 1029;
}
/* **** BS Tourist - custom page elements - restart tour icon **** */
#new-features-icon {
position: absolute;
top: 65px;
right: 10px;
z-index: 9000;
}
.tour-icon {
color: #004c97;
font-size: 20px;
cursor: pointer;
margin-left: 5px;
}
.tour-icon:hover {
color: #003a70;
}
/* **** BS Tourist - modifying BS popover styles for the BS Tourist popover styling **** */
.popover[class*="tour-"] {
width: 100%;
max-width: 400px;
/* default is 276px */
border-radius: 10px !important;
}
/* **** BS Tourist - simplified popover style overrides **** */
.popover[class*="tour-"] .popover-header {
display: none;
}
.popover[class*="tour-"] .popover-body {
font-family: 'Lato', sans-serif !important;
font-size: 22px;
color: #ffffff;
background: linear-gradient(90deg, rgba(0, 76, 151, 1) 0%, rgba(57, 32, 124, 1) 100%);
/* background-color: #39207c; */
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
}
/* responsive styling for Bootstrap Tourist popover */
@media screen and (max-width: 767.98px) {
.popover[class*="tour-"] .popover-body {
font-size: 16px;
}
.popover[class*="tour-"] .popover-navigation {
padding: 3px 14px 9px;
}
}
.popover-navigation {
background: linear-gradient(90deg, rgba(0, 76, 151, 1) 0%, rgba(57, 32, 124, 1) 100%);
/* background-color: #39207c; */
-webkit-border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
}
/* ***************** HAMBURGER MENU - See https://codepen.io/breadz/pen/zrMRoo ***************** */
#menu {
background: #39207c;
height: 100%;
left: 0;
opacity: 0;
overflow: hidden;
position: fixed;
text-align: center;
top: 0;
transition: all 0.7s ease-in-out;
visibility: hidden;
width: 100%;
z-index: 9001;
/* so this goes above the header#topbanner z-index of 1 - I tried 2 but then went to 9000 to go over all the UI controls on the isotope screen */
/* was 1100 */
}
#hamburger-nav {
position: absolute;
top: 56px;
}
#menu.open {
opacity: 1;
visibility: visible;
}
/* have to add this keyframes code since the SCSS to CSS compiling missed it */
@keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
header#hamburgermenu {
border-bottom: none;
z-index: 9998;
/* make sure close menu is above all others, but underneath .modal which is set in this stylesheet to 9999 */
position: absolute;
}
#menu.open li:nth-child(1) {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
#menu.open li:nth-child(2) {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
#menu.open li:nth-child(3) {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
#menu.open li:nth-child(4) {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
#menu.open li:nth-child(5) {
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
#menu.open li:nth-child(6) {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
#menu.open li:nth-child(7) {
-webkit-animation-delay: 0.7s;
animation-delay: 0.7s;
}
#menu.open li:nth-child(8) {
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s;
}
#menu.open li:nth-child(9) {
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s;
}
#menu.open li:nth-child(10) {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
#menu.open li {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
#menu ul:hover a {
opacity: 0.5;
}
#menu ul a {
-webkit-transform: translateZ(0);
transform: translateZ(0);
transition: opacity 0.3s ease-in-out;
}
#menu ul a:hover {
opacity: 1;
}
#menu .main-nav {
position: relative;
top: 40%;
/* was 50% */
transform: translateY(-50%);
}
#menu .main-nav ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu .main-nav a {
color: #ffffff;
display: block;
font-size: 2.5rem;
font-weight: bold;
padding: 1rem 1rem;
text-decoration: none;
/* text-transform: uppercase; */
/* took this style out on 7-15-2021 */
}
#menu .main-nav a:first {
padding-top: 0;
}
#menu .menu-footer {
padding: 2rem;
bottom: 0;
left: 0;
position: absolute;
right: 0;
background-color: inherit;
/* override from apaiuxpubs.css footer styling */
border: none;
/* override from apaiuxpubs.css footer styling */
}
#menu .menu-footer ul {
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
}
#menu .menu-footer ul li {
display: inline;
margin: 0 1rem;
}
#menu .menu-footer a {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
}
.toggle-menu {
background-color: #39207c;
/* was transparent */
border: none;
cursor: pointer;
display: inline-block;
/* float: right; */
height: 50px;
outline: none;
padding: 0;
pointer-events: initial;
position: relative;
vertical-align: middle;
width: 50px;
z-index: 1110;
/* was 1110 */
}
.toggle-menu span {
background-color: #fff;
content: "";
display: block;
height: 2px;
left: calc(50% - 13px);
position: absolute;
top: calc(50% - 1px);
transform-origin: 50% 50%;
transition: background-color 0.2s ease-in-out, top 0.2s 0.2s ease-out, transform 0.2s linear;
width: 26px;
}
.toggle-menu span:before,
.toggle-menu span:after {
background-color: #fff;
content: "";
display: block;
height: 2px;
position: absolute;
transform-origin: 50% 50%;
transition: background-color 0.2s ease-in-out, top 0.2s 0.2s ease-out, transform 0.2s linear;
width: 26px;
}
.toggle-menu span:before {
top: 7px;
}
.toggle-menu span:after {
top: -7px;
}
.toggle-menu.active span {
background-color: transparent;
transition: background 0.2s ease-out;
}
.toggle-menu.active span:before,
.toggle-menu.active span:after {
transition: top 0.2s ease-out, transform 0.2s 0.2s ease-out;
}
.toggle-menu.active span:before {
top: 0;
transform: rotate3d(0, 0, 1, -45deg);
}
.toggle-menu.active span:after {
top: 0;
transform: rotate3d(0, 0, 1, 45deg);
}
@media screen and (max-width: 991.98px) {
.toggle-menu {
border: 2px solid #ffffff;
}
#hamburger-nav {
top: 57px;
}
.hamburgerSpaceAt991,
.hamburgerSpaceAt767 {
padding-top: 2.5rem;
/* using for Record Display pages that don't have image banner - to give space for hamburger menu with card-body - need to make sure that HTML has the correct 991 for this class, so keeping the 767 one here even though it's not "correct" */
}
}
@media screen and (max-width: 1300px) {
.marginLeft40pxat1300 {
margin-left: 40px;
/* using for Topic Mapper designs to move over "back to record" link at top */
}
}
/* custom-toast styling for toast after feedback form submission */
.toast-success {
border: solid 1px #00b996;
background-color: #d4edda;
color: #005344;
}
.toast-success .toast-header {
background-color: #d4edda;
color: #005344;
}
/* additional toast styles which may be used later */
.toast-warning {
border: solid 1px #c9b392;
background-color: #fff4d7;
color: #865000;
}
.toast-warning .toast-header {
background-color: #fff4d7;
color: #865000;
}
.toast-danger {
border: solid 1px #f9baba;
background-color: #fde9e9;
color: #770a0a;
}
.toast-danger .toast-header {
background-color: #fde9e9;
color: #770a0a;
}
.toast-primary {
border: solid 1px #b8daff;
background-color: aliceblue;
color: #003a70;
}
.toast-primary .toast-header {
background-color: aliceblue;
color: #003a70;
}
.toast-secondary {
border: solid 1px #b8daff;
background-color: #ffffff;
color: #003a70;
}
.toast-secondary .toast-header {
background-color: #ffffff;
color: #003a70;
}
.toast-light {
border: solid 1px #c7C8c9;
background-color: #f1f1f1;
color: #212529;
}
.toast-light .toast-header {
background-color: #f1f1f1;
color: #212529;
}
.toast-dark {
border: solid 1px #212529;
background-color: #212529;
color: #ffffff;
}
.toast-dark .toast-header {
background-color: #212529;
color: #ffffff;
}
.toast-dark .close {
color: #ffffff;
opacity: 0.9;
}
.toast-dark .close:not(:disabled):not(.disabled):hover,
.toast-dark .close:not(:disabled):not(.disabled):focus {
color: #ffffff;
}
/* *** custom toast placement styles - need to revisit this style with having it work with navigation bar dropdown and links and with toasts being visible on page load *** */
.toast-placement-top-right {
position: fixed;
top: 65px;
right: 5px;
}
/*
.feedback-sent-toast {
z-index: 9999;
}
*/
/* ************* image upload and preview - see https://codepen.io/ckato/pen/JQaPzO ************* */
.wrapper {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.box {
display: block;
min-width: 200px;
height: 300px;
margin: 10px;
background-color: white;
border-radius: 5px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
overflow: hidden;
}
.upload-options {
position: relative;
height: 75px;
background-color: #004c97;
cursor: pointer;
overflow: hidden;
text-align: center;
transition: background-color ease-in-out 150ms;
}
.upload-options:hover {
background-color: #003a70;
}
.upload-options input {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
.upload-options label {
display: flex;
align-items: center;
width: 100%;
height: 100%;
font-weight: 400;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
overflow: hidden;
}
.upload-options label::after {
content: "\f067";
font-family: "Fontawesome";
position: absolute;
font-size: 2.5rem;
color: #e6e6e6;
top: calc(50% - 1.8rem);
left: calc(50% - 1.1rem);
z-index: 0;
}
.upload-options label span {
display: inline-block;
width: 50%;
height: 100%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
vertical-align: middle;
text-align: center;
}
.upload-options label span:hover i {
color: lightgray;
}
.js--image-preview {
height: 225px;
width: 100%;
position: relative;
overflow: hidden;
background-image: none;
background-color: white;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.js--image-preview::after {
content: "\f03e";
font-family: "Fontawesome";
position: relative;
font-size: 4.5em;
color: #e6e6e6;
top: calc(50% - 3rem);
left: calc(50% - 6.25rem);
z-index: 0;
}
.js--image-preview.js--no-default::after {
display: none;
}
.js--image-preview:nth-child(2) {
background-image: url("https://bastianandre.at/giphy.gif");
/* note that this is not working */
}
.wrapper .box i.fa {
transition: color 100ms ease-in-out;
font-size: 2.25em;
line-height: 55px;
color: white;
display: block;
}
.drop {
display: block;
position: absolute;
background: rgba(95, 158, 160, 0.2);
border-radius: 100%;
transform: scale(0);
}
.animate {
-webkit-animation: ripple 0.4s linear;
animation: ripple 0.4s linear;
}
@-webkit-keyframes ripple {
100% {
opacity: 0;
transform: scale(2.5);
}
}
@keyframes ripple {
100% {
opacity: 0;
transform: scale(2.5);
}
}
/* right-middle fixed positioning for Feedback button */
.right-middle {
position: fixed;
right: -44px;
top: 50%;
z-index: 1;
-ms-transform: rotate(270deg) translatez(0) scale(0.99);
/* IE 9 */
-moz-transform: rotate(270deg) translatez(0) scale(0.99);
/* Firefox */
-webkit-transform: rotate(270deg) translatez(0) scale(0.99);
/* Safari and Chrome */
-o-transform: rotate(270deg) translatez(0) scale(0.99);
/* Opera */
transform: rotate(270deg) translatez(0) scale(0.99);
-webkit-transform-origin: 50% 52%;
/* blurry button from rotate hack - see https://stackoverflow.com/questions/20326220/blurry-text-on-transformrotate-in-chrome */
transform-origin: 50% 52%;
}
/* making the .container-fluid not 100% width to accommodate the .right-middle feedback button */
.container-fluid {
width: 95%;
}
/* hiding tooltips on mobile - and using a body class to accomplish this effect on certain screens such as the Topic Mapper (v5 mockup) - see https://stackoverflow.com/questions/11903001/hiding-bootstrap-tooltips-on-mobile-using-media-queries */
@media screen and (max-width: 767.98px) {
.no-mobile-tooltips>.tooltip {
display: none !important;
}
}
/* ************** TOPIC MAPPER STYLES - being used for topic-mapper-panel-designs-v5.html (the other versions have internal CSS for those specific designs) ************** */
.nav-pills .nav-link {
border-radius: 3px;
background-color: inherit;
margin-bottom: 40px;
padding: 10px;
}
.nav-pills .nav-link:first-of-type {
margin-top: 10px;
}
@media screen and (max-width: 767.98px) {
.nav-pills .nav-link:first-of-type {
margin-top: 0;
}
}
/* svg icon styles for .nav-pills */
.nav-pills .nav-link.active {
background-color: #003A70;
}
.nav-pills .nav-link svg {
fill: #4D5154;
}
.nav-pills .nav-link svg:hover {
fill: #003A70;
}
.nav-pills .nav-link.active svg {
fill: #FFFFFF;
}
.nav-pills a {
text-decoration: none;
}
/* styles if we want a vertical scrollbar for the panels - check mobile friendliness and adjust size as needed */
#menu-panels {
padding-left: 0;
/* overriding the default 15px to maximize space in the right panel on desktop, then returninig to 15px with a media query */
}
.tablist-menu {
background-color: #F4F4F4;
padding: 5px 3px;
max-width: 51px;
}
h2.mapper-heading {
font-weight: 700;
text-transform: uppercase;
font-size: 20px;
margin-top: 0;
border-bottom: 1px solid #C7C8C9;
}
h2.mapper-heading div {
font-weight: 500;
text-transform: uppercase;
font-size: 14px;
color: #4D5154;
margin-bottom: 8px;
}
h3.mapper-title {
line-height: 1.2 !important;
font-size: 16px;
}
h3.panel-subheadings,
legend.mapper-legend, .uppercase-heading {
text-transform: uppercase;
font-size: 16px;
color: #4D5154;
margin: 20px 0 6px;
}
.mapper-top-cited, .mapper-publications {
border-bottom: 1px solid #C7C8C9;
}
.mapper-top-cited:first-of-type, .mapper-publications:first-of-type {
border-top: 1px solid #C7C8C9;
}
.mapper-top-cited:last-of-type, .mapper-publications:last-of-type {
border-bottom: none;
}
/* overrides from Explore All Notification card classes to fit new styling for Topic Mapper screens */
.mapper-top-cited>.card-citation, .mapper-publications>.card-citation {
font-size: 14px;
margin-bottom: 10px;
}
.mapper-top-cited>.card-badge-row , .mapper-publications>.card-badge-row {
margin-top: 10px;
margin-bottom: 10px;
}
.mapper-top-cited .show-hide-abstract-button-row, .mapper-publications .show-hide-abstract-button-row {
margin-top: 5px;
}
/* ************** CITATION MAPPER SPECIFIC STYLES ************** */
/* not sure if these 4 below styles are being used in final version screens */
.mapper-citation {
background-color: aliceblue;
border-top: 1px solid #C7C8C9;
border-bottom: 1px solid #C7C8C9;
margin-bottom: 15px;
padding: 0 10px;
}
.mapper-citation>.card-citation {
font-size: 14px;
margin-bottom: 10px;
}
.mapper-citation>.card-badge-row {
margin-top: 10px;
margin-bottom: 10px;
}
.mapper-citation .show-hide-abstract-button-row {
margin-top: 5px;
}
/* these styles are being used in citation-mapper-panel-designs-v3.html and related pre-filtered results mockups */
.mapper-cards .card {
border: 2px solid #3E52A3;
}
.mapper-cards .card:hover {
background-color: #D6F2F7;
border: 2px solid #39207C;
}
.mapper-cards a.anchor-card {
background-color: #FFFFFF !important;
border: none !important;
color: #003A70 !important;
text-decoration: none !important;
font-size: 14px !important;
margin-bottom: 15px;
}
.mapper-cards .card-body {
padding: 0.5rem;
}
/* ************ for the Citation Mapper legend ************** */
.circle {
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border: 2px solid #0084FF;
}
.circle-size1 {
width: 10px;
height: 10px;
line-height: 10px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
margin-top: 5px;
border: 2px solid #0084FF;
}
.circle-size2 {
width: 20px;
height: 20px;
line-height: 20px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
margin-top: 5px;
border: 2px solid #0084FF;
}
.circle-size3 {
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
margin-top: 5px;
border: 1px solid #0084FF;
}
.circle-size4 {
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
margin-top: 5px;
border: 1px solid #0084FF;
}
.circle-size5 {
width: 50px;
height: 50px;
line-height: 50px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
margin-top: 5px;
border: 2px solid #0084FF;
}
.circlecluster {
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border: 2px dotted #000000;
}
.long-arrow-right,
.long-arrow-left {
display: block;
width: 15px;
height: 15px;
border-top: 2px solid #0084FF;
border-left: 2px solid #0084FF;
}
.long-arrow-right {
transform: rotate(135deg);
margin-left: 26px;
}
.long-arrow-left {
transform: rotate(-45deg);
margin-right: 27px;
margin-left: -20px;
}
.long-arrow-right::after,
.long-arrow-left::after {
content: "";
display: block;
width: 2px;
height: 45px;
background-color: #0084FF;
transform: rotate(-45deg) translate(15px, 4px);
}
/* *** tint color variations from Publishing Purple #39207C - .purple1 is darkest *** */
.purple1 {
background-color: #39207C;
}
.purple2 {
background-color: #5630BA;
}
.purple3 {
background-color: #8262D7;
}
.purple4 {
background-color: #BFA1E7;
}
.purple5 {
background-color: #E6DFF7;
}
.targetdocument {
background-color: #DBF6EF;
border: 5px solid #D22730;
}
/* for the breadcrumbs */
.history-tl-container ul.tl li.targetDocumentBreadcrumb::before {
background-color: #DBF6EF;
border: 3px solid #D22730;
}
.history-tl-container ul.tl li.citedReferenceLegendCircle::before {
background-color: #BFA1E7;
}
.history-tl-container ul.tl li.citedReferenceLegendCircle:hover::before {
background-color: #39207C;
}
/* conflict with using legend colors for the breadcrumbs, so resetting the background color for .tl-items here */
.tl-item {
background-color: inherit !important;
}
/* specific to the Author Mapper Legend */
.coauthorline {
display: inline-block;
width: 64px;
background: #0084FF;
margin: 0 3px;
}
.coauthorline-size1 {
height: 3px;
}
.coauthorline-size2 {
height: 6px;
}
.coauthorline-size3 {
height: 9px;
}
.coauthorline-size4 {
height: 12px;
}
.coauthorline-size5 {
height: 15px;
}
/* override type styles since .active a is being picked up from main PL */
h3.mapper-title>a,
.tl-item-term a {
color: #003A70 !important;
background-color: transparent !important;
text-decoration: underline;
}
h3.mapper-title>a:hover,
.tl-item-term a:hover {
color: #212529;
text-decoration: none;
}
/* matching BS4 styles for .dropdown-item, but scoping it to override the applied .active a styles from the tabs */
.active a.dropdown-item {
display: block;
width: 100%;
padding: 0.25rem 1.5rem;
clear: both;
font-weight: 400;
color: #212529 !important;
text-align: inherit;
white-space: nowrap;
background-color: transparent !important;
border: 0;
}
.active a.dropdown-item:hover {
color: #16181B !important;
text-decoration: none !important;
background-color: #F8F9FA !important;
}
/* custom styling for kebab dropdown menu */
.dropdown-menu[aria-labelledby="topicMapperMenuKebab"], .dropdown-menu[aria-labelledby="citationMapperMenuKebab"] {
background: #fff;
border: 3px solid #33BFD5;
}
/* placing the toggle panel button in the graph container */
#toggle-panel-button-placement {
position: absolute;
top: 15px;
right: 30px;
}
/* slideout panel - see https://codepen.io/krisgrove/pen/prPdov */
#slideout {
background: #FFFFFF;
position: absolute;
top: 0;
right: -315px;
width: 295px;
height: 100%;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
display: none;
padding-left: 30px;
height: 700px;
overflow-y: auto;
overflow-x: hidden;
}
#slideout.on {
display: block;
right: 5px;
}
/* changing position of toggle panel button when slideout is open - used along with JS */
.toggle-panel-button-placement-slideout-on {
right: 315px !important;
z-index: 1;
}
/* placing the visualization tools in the graph container for the desktop display >767px */
#visualization-tools {
position: absolute;
bottom: 0;
left: 30px;
}
/* placing the visualization tools in the graph container for the horizontal display <767px */
#visualization-tools-horizontal {
position: absolute;
bottom: 0;
left: 30px;
}
/* making sure the vertical tool buttons are all the same width, as it seems the "Reset View" text is affecting padding or width and changing default line-height from 1.5 to 1 so smaller height */
.tool-buttons button {
width: 54px !important;
line-height: 1;
}
/* consider adding kebab hover styles into PL or PUBS stylesheet - styles the same as .btn-textbutton which also isn't added into the PL yet */
button.kebab:hover {
background-color: #e0f6fd;
color: #23527c;
text-decoration: none;
}
/* adding a cursor not-allowed style to the disabled Content Type checkbox to make it clearer to users it's not an option that would return any results - consider adding into PL */
.custom-control-input:disabled~.custom-control-label {
cursor: not-allowed;
}
/* custom primary badge style for pubs, being used for the Content Types filters counts, as "regular" primary looks like the semantic Index Terms color from the Topic Mapper legend - consider adding into main PL */
.badge-primary-pubs {
color: #FFFFFF;
background-color: #004C97;
border: solid 1px #212529;
}
/* datepicker */
/* overriding the selected date on the calendar with APA Brand Blue */
.bootstrap-datetimepicker-widget td span.active {
background-color: #004C97;
}
/* overriding the active years that are able to be selected with APA Publishing Purple */
.bootstrap-datetimepicker-widget td span {
color: #39207C;
}
/* overriding the inactive years that are not able to be selected with the first shade of gray that passes color contrast against white, for both years that are "disabled" and years that are "old" - was initially #777 */
.bootstrap-datetimepicker-widget td span.disabled,
.bootstrap-datetimepicker-widget td span.old {
color: #737373;
}
/* setting the max-width for the date fields */
input#startDate,
input#endDate {
max-width: 65px;
}
/* vertical timeline - see https://codepen.io/pranjal-goswami/pen/RNdpOP */
.history-tl-container {
margin: auto;
display: block;
position: relative;
}
.history-tl-container ul.tl {
margin: 20px 0;
padding: 0;
display: inline-block;
}
.history-tl-container ul.tl li {
list-style: none;
margin: auto;
margin-left: 20px;
min-height: 40px;
border-left: 1px dashed #39207C;
padding: 0 0 30px 15px;
position: relative;
}
.history-tl-container ul.tl li:last-child {
border-left: 0;
}
/* timeline bubbles - generic styles */
.history-tl-container ul.tl li::before {
position: absolute;
left: -10px;
top: -5px;
content: " ";
border: 8px solid rgba(255, 255, 255, 0.74);
border-radius: 500%;
height: 20px;
width: 20px;
transition: all 500ms ease-in-out;
}
.history-tl-container ul.tl li:hover::before {
transition: all 1000ms ease-in-out;
}
/* different term type and citation colors - used for Topic Mapper and Citation Mapper Legends */
.documentTerm {
color: #002854;
background-color: #002854;
}
.indexTerm,
.citationColor {
color: #E4F3F6;
background-color: #E4F3F6;
}
.broaderTerm {
color: #F7E4E8;
background-color: #F7E4E8;
}
.narrowerTerm {
color: #DBF6EF;
background-color: #DBF6EF;
}
.relatedTerm {
color: #FFF8E8;
background-color: #FFF8E8;
}
/* timeline term type circles - used in Topic Mapper and Citation Mapper legends */
/* Document circle - "very dark blue" #002854 - using darkest tint of "moderate red" #C63E5A */
.history-tl-container ul.tl li.document::before {
background: #002854;
}
.history-tl-container ul.tl li.document:hover::before {
border-color: #002854;
}
/* Index Term circle and Citation circle -"light grayish cyan" #E4F3F6 - using darkest tint of "moderate cyan" #42ABC0 */
.history-tl-container ul.tl li.indexTerm::before,
.history-tl-container ul.tl li.citationLegendCircle::before {
background: #42ABC0;
}
.history-tl-container ul.tl li.indexTerm:hover::before,
.history-tl-container ul.tl li.citationLegendCircle:hover::before {
border-color: #42ABC0;
}
/* Broader Term circle - "light grayish red" #F7E4E8 - using darkest tint of "moderate red" #C63E5A */
.history-tl-container ul.tl li.broaderTerm::before {
background: #C63E5A;
}
.history-tl-container ul.tl li.broaderTerm:hover::before {
border-color: #C63E5A;
}
/* Narrower Term circle - "light grayish cyan - lime green" #DBF6EF - using darkest tint of "moderate cyan - lime greeen" #3ECFA9 */
.history-tl-container ul.tl li.narrowerTerm::before {
background: #3ECFA9;
}
.history-tl-container ul.tl li.narrowerTerm:hover::before {
border-color: #3ECFA9;
}
/* Related Term circle - "very pale - (mostly white) orange" #FFF8E8 - using darkest tint of "vivid orange" #FFB610 */
.history-tl-container ul.tl li.relatedTerm::before {
background: #FFB610;
}
.history-tl-container ul.tl li.relatedTerm:hover::before {
border-color: #FFB610;
}
.tl-item-term {
color: #212529;
/* fallback color if not a link */
position: relative;
top: -7px;
}
/* responsive styling for the Mapper screens */
@media screen and (max-width: 767.98px) {
#slideout {
padding-left: 15px;
}
.tablist-menu {
max-width: none;
margin-top: 0;
margin-left: 15px;
}
.nav-pills-horizontal {
justify-content: space-between;
margin: 0;
padding: 5px 10px;
height: 54px;
background-color: #F4F4F4;
flex-direction: row;
}
.flex-container {
display: flex;
flex-direction: row;
flex-grow: 1;
flex-wrap: wrap
}
#menu-pills {
order: 1;
flex-shrink: 1;
max-width: 695px;
width: 100%;
margin-right: 30px;
}
#menu-panels {
order: 2;
}
#menu-panels {
padding-left: 15px;
/* returning to the default 15px on mobile devices */
padding-right: 32px;
/* having to add additional right padding on mobile display for some reason */
}
h2.mapper-heading {
margin-top: 10px;
}
#menu-text {
display: none;
}
}
@media screen and (max-width: 400px) {
.toggle-panel-button-placement-slideout-on {
right: 251px !important;
top: -15px !important;
}
.tablist-menu {
margin-top: 25px;
}
}
/* ************** EXPLORE JOURNALS V1 STYLES - note that if we end up using an alternative design, we may be able to delete some of these styles depending on how the other versions/design look - Update on 5-6-2024: Adding "ol" to this for the Author Info top explore section mockup for the numbered list items for Aflliated Institutions ************** */
ul.explore-details li.list-group-item, ol.explore-details li.list-group-item {
font-size: 16px;
padding: 0.5rem;
}
/* adding BS5 .list-group-numbered styles for BS4 - see https://getbootstrap.com/docs/5.0/components/list-group/ */
.list-group-numbered {
list-style-type: none;
counter-reset: section;
}
.list-group-numbered>li::before {
content: counters(section, ".") ". ";
counter-increment: section;
}
/* adding some margins for when buttons are within .list-group components */
.list-group-item>button {
margin: 5px;
}
/* Pubs branding for .list-group-item-primary used on Explore Journals screen */
.list-group-item-primary {
background-color: #D6F2F7;
}
/* Preference Center Management form - revisit this style */
.large-form-labels label {
font-size: 22px;
margin-top: 25px;
}
/* Preference Center Management form - skipping-resetting the larger form labels for the radio button component */
.large-form-labels .custom-radio>label {
font-size: 16px;
margin-top: 0;
}
/* not giving the margin-top to the jQuery validate error messages that also use label */
.large-form-labels label.help-block {
margin-top: 0;
}
/* used in structure for the Preference Management Center form */
.large-form-heading {
font-size: 22px;
margin-top: 25px;
font-weight: normal;
}
.exampleText {
margin-top: 25px;
}
@media screen and (max-width: 767.98px) {
.marginLeft20At767 {
margin-left: 20px;
}
.exampleText {
margin-top: 10px;
}
}
/* condensed style accordion - used in Explore Journals V3 POC */
.accordion-condensed .card-header .btn {
padding: 5px 10px;
}
.accordion-condensed h2 .btn-link {
font-size: 1.3rem;
}
.accordion-condensed h4 .btn-link {
font-size: 1rem;
}
/* used for the h3 .card-header accordions */
.accordion-condensed button svg {
height: 16px !important;
width: 16px !important;
margin-top: 3px;
}
/* used for the h2 .card-header accordions along with .accordion-condensec */
.accordion-condensed-h2 button svg {
height: 16px !important;
width: 16px !important;
margin-top: 6px;
}
.svg-button-currentcolor {
fill: currentColor !important;
}
/* ******** for the blue rounded buttons - btn-pubs-5 - with svgs in them ******** */
.btn-pubs-5:hover>svg {
fill: #FFFFFF;
}
/* ******** for the purple outline rounded buttons - btn-pubs-6 - with svgs in them - used on the Author Info mocks ******** */
.btn-pubs-6>svg {
fill: #39207C;
}
.btn-pubs-6:hover>svg {
fill: #FFFFFF;
}
/* ******** JOURNAL ,BOOK, and AUTHOR INFO CARD STYLES ******** */
.journalTitle, .authorName {
font-size: 1.2rem;
line-height: 24px;
margin-bottom: 10px;
}
.journal-info, .author-info {
font-size: 1rem;
margin: 10px 0;
padding: 10px 10px 0;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.journal-info ul, .author-info ul {
margin-left: -25px;
}
.bookTitle,
.dissertationTitle {
font-size: 1.2rem;
line-height: 24px;
margin-bottom: 10px;
}
.book-info,
.dissertation-info {
font-size: 1rem;
margin: 10px 0;
padding: 10px 0 0;
/* different from .journal-info which has padding: 10px 10px 0; */
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
/* *************** FOLLOW/UNFOLLOW BUTTON STYLES - ON EXPLORE JOURNAL SCREEN AND AUTHOR INFO SCREEN - see https://codepen.io/kevinkidwell/pen/LYMxeNg *************** */
.btn-follow {
position: relative;
}
.btn-follow,
div.follow-text {
display: inline-block;
min-width: 100px;
padding: 0;
text-transform: none;
}
.btn-follow>label {
padding: 0.375rem 0.75rem;
}
.btn-follow,
.btn-follow>label,
div.follow-text {
cursor: pointer;
}
.btn-following,
.btn-following:focus {
color: #fff;
background-color: #00866D;
border-color: #00866D;
}
.follow input {
display: none;
}
@media screen and (max-width: 767.98px) {
.btn-follow {
position: absolute;
left: 15px;
}
}
/* **** responsive fix for when "Follow" button stacks at <767px - for Explore Journals and Author Info screens **** */
@media screen and (max-width: 767.98px) {
.list-group.explore-details:first-child {
margin-top: 50px;
}
}
/* **** responsive fix to join 2 list-groups together when stacking for Author Info screens **** */
@media screen and (max-width: 767.98px) {
.margin-topMinus55at767 {
margin-top: -55px;
}
}
/* **** responsive fix for OrchidID link for Author Info screens **** */
@media screen and (max-width: 767.98px) {
.margin-top55at767 {
margin-top: 55px !important;
}
}
/* **** responsive fix for Search Results Recent Searches and Trending Searches buttons to not run into H1 <991px once their position changes **** */
@media screen and (max-width: 991.98px) {
.margin-top40at991 {
margin-top: 40px !important;
}
}
@media screen and (max-width: 485px) {
.margin-top70at485 {
margin-top: 70px !important;
}
}
/* **** responsive fix for slim header screens so that search autocomplete has space to work <991px when search bar drops below **** */
@media screen and (max-width: 991.98px) {
.margin-top55at991 {
margin-top: 55px !important;
}
}
/* ******************* Following Journals on Browse Journals Card Header - may be used also for Following Authors - also "Recent Publication" on the SERP ******************* */
.currently-following, .recent-publication {
margin: -20px -20px 5px -20px;
padding: 10px;
font-size: 0.8em;
font-weight: 700;
color: #333;
background-color: #d4edda;
text-transform: uppercase;
text-align: center;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
@media(max-width: 768px) {
.currently-following, .recent-publication {
padding: 10px 10px 10px 10px;
}
}
/* ******************* right sidebar blue background card header cards - used in record-display-explore-visibility-5.html along with .card-header so have to do important overrides ******************* */
.card-header-blue-smaller {
background-color: #d6f2f7 !important;
margin: 0 !important;
padding: 0.5rem 0.5rem 0.3rem !important;
font-size: 18px !important;
}
/* to get the Fontawesome spinner to work and overide the pubs css for fa inline important - consider addting this to the main PL stylesheet */
.fa.fa-spin {
display: inline-block !important;
}
/* ******************** BEGIN: Author Mapper styles - 3-2024 ******************** */
/* placing the toggle author dropdown button in the graph container */
#author-dropdown-button-placement {
position: absolute;
top: 0;
left: 15px;
}
/* Menu button styles on all mapper visualizations */
.mapper-button-menu {
outline: 5px solid #FFFFFF;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.35);
}
/* used along with .btn-outline from IUX PL 1.x */
.mapper-button-authors {
color: #212529;
background-color: #e6f7fa;
border: 3px solid #004c97;
outline: 5px solid #FFFFFF;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.35);
border-radius: 0;
text-transform: none;
}
/* ******************** BEGIN: Single Author display ******************** */
#single-author-placement {
position: absolute;
top: 15px;
left: 30px;
}
#mapper-single-author {
color: #212529;
font-size: 1rem;
font-weight: 700;
background-color: #e6f7fa;
outline: 5px solid #FFFFFF;
padding: 5px 10px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.35);
letter-spacing: 1px;
line-height: 1.5;
text-align: center;
text-transform: none;
}
/* ******************** END: Single Author display ******************** */
/* responsive view for the author button to truncate long author names 600img {
max-width: 100%;
max-height: 100%;
-webkit-transition: .2s all;
transition: .2x all;
}
#pubyears-graph-anchor>img:hover {
border: 3px solid #39207C;
-webkit-filter: brightness(90%);
filter: brightness(90%);
}
/* ****** Analyze & Filter styles to be reviewed - also as internal CSS for browse and explore screeens ****** */
.filter-box {
margin: 15px 0;
padding: 15px 15px 0;
}
.filter-box-orange-pubyear {
background-color: #fff1d8;
border: solid 1px #ffac14;
}
.filter-box-gray-contenttype {
background-color: #f1f1f1;
border: solid 1px #909294;
}
.filter-box-purple-topic {
background-color: #e6dff7;
border: solid 1px #8e72db;
}
.filter-box-teal-author {
background-color: #e6f7fa;
border: solid 1px #33bfd5;
}
.filter-box-green-methodology {
background-color: #d8fff8;
border: solid 1px #00B18F;
}
.filter-box-pink-onlyshowcertainjournals {
background-color: #fbe9ea;
border: solid 1px #e6757b;
}
/* this might be a new addition here depending on if we use this filter - for limiters on the Browse Journals and Browse Authors pages */
.filter-box-pink-onlyshowcertainauthors {
background-color: #fbe9ea;
border: solid 1px #e6757b;
}
/* this might be a new addition here depending on if we use this filter - for JOURNALS on the Author Info page - based off of APA True Green */
.filter-box-green-journals {
background-color: #d4f1d8;
border: solid 1px #3bb24a;
}
/* various Analyze & Filter badge coordinated styles */
/* colored BS4 badges */
.badge-orange-pubyear {
background-color: #fff1d8;
border: solid 1px #ffac14;
color: #212529;
}
.badge-purple-topic {
background-color: #e6dff7;
border: solid 1px #8e72db;
color: #212529;
}
.badge-teal-author {
background-color: #e6f7fa;
border: solid 1px #33bfd5;
color: #212529;
}
.badge-green-methodology {
background-color: #d8fff8;
border: solid 1px #00B18F;
color: #212529;
}
.badge-green-journal {
background-color: #d4f1d8;
border: solid 1px #3bb24a;
color: #212529;
}
/* ******************** END: Author Mapper styles - 3-2024 ******************** */
/* ******************** BEGIN: Empty States styles for Discover PI screen - see https://codepen.io/pongstr/pen/OPqeeq ******************** */
.blank-state {
padding: 40px 20px;
font-size: 100%;
color: #737373;
text-align: center;
background-color: #fefefe;
}
.blank-state h2 {
margin-top: 10px;
}
.blank-state h2,
.blank-state p {
font-weight: 300;
}
.blank-state p {
margin-bottom: 15px;
}
.blank-state.blank-state-sm {
width: 60%;
margin-left: auto;
margin-right: auto;
padding: 20px 10px;
font-size: 85%;
}
/* ******************** END: Empty States styles for Discover PI screen - see https://codepen.io/pongstr/pen/OPqeeq ******************** */
/* ******** MAJOR ACCESSIBILIY STYLES/OVERRIDES ******** */
/* making sure placeholder text is accessible - but we probably just need to take out the light gray override in our Pattern Library */
::placeholder {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: #6c757d !important;
opacity: 1;
/* Firefox */
}
:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: #6c757d !important;
}
::-ms-input-placeholder {
/* Microsoft Edge */
color: #6c757d !important;
}
/* styling an accessible helper text - If no color is defined, then the helper text will take the color of the text within an alert */
.helper-text {
color: #333333;
}
/* increasing font-size of notificationFilters badges showing record counts for accessibility */
#notificationFilters .badge {
font-size: 12px;
font-weight: 700;
}
/* ******** RESPONSIVE UTILITIES FOR RECORD DISPLAY PAGE WITH SIDEBAR - RECORD-DISPLAY-EXPLORE-VISIBILITY-7.HTML ******** */
#explore-section-card {
margin-top: 95px;
}
/* responsive utility for screen options button on mobile */
@media screen and (max-width: 767.98px) {
#explore-section-card {
margin-top: 25px;
}
}
/* ******** GENERAL RESPONSIVE UTILITIES ******** */
/* utility class for vertical space betweeen horizontal buttons that stack on mobile (col-md-6) - used on the POC for the "Explore" buttons on Record Display */
@media screen and (max-width: 767.98px) {
.margin-top15at767 {
margin-top: 15px !important;
}
}
/* utility class for on "Most Frequent Affiliated Institutions in PsycInfo" H2 on the Author Info explore section mockup */
.margin-topMinus5then15at767 {
margin-top: -5px !important;
}
@media screen and (max-width: 767.98px) {
.margin-topMinus5then15at767 {
margin-top: 15px !important;
}
}
/* utility class for vertical space before name h1 on Author Info page explore section to account for hamburger menu icon */
@media screen and (max-width: 767.98px) {
.margin-top40at767 {
margin-top: 40px !important;
}
}
/* utility class for vertical space before list item group on Author Info page explore section to account for hamburger menu icon */
@media screen and (max-width: 767.98px) {
.margin-top50at767 {
margin-top: 50px !important;
}
}
/* responsive utility to bring up the "Explore" card section on mobile at the <767px stacking breakpoint once the sidebar moves into the main card */
@media screen and (max-width: 767.98px) {
.grid-striped .field-label-main {
font-size: 1.2em;
}
}
/* ******** NOT NEEDED YET BUT KEEPING IN FOR MOCKUP ACCESSIBILIY CHECKING REASONS ******** */
/* doing this styling just to pass color contrast accessibility on the "file upload" widget used in the (non-MVP) feedback forms, since WAVE was throwing 3 color contrast issue errors for the 3 uploads, even though they were .sr-only */
.upload-options span.sr-only {
background-color: #FFFFFF !important;
color: #000000 !important;
}
/* ******** THIS IS IN THE PRODUCTION CODE STYLESHEET AND ADDED TO THE MOCKS - SPECIFICALLY FOR THE "BACK TO" ARROWS ON THE MAPPER SCREENS ******** */
a.btn {
text-decoration: none;
}