app/assets/stylesheets/unc_custom.css.scss
/** Homepage customizations **/
$carolina-blue-dark: #13294b;
$carolina-blue: #4b9cd3;
$text-color: white;
$light-gray: lightgray;
$shadow-base-top: 0 10px 10px -10px;
$shadow-base-bottom: 0 -10px 10px -10px;
$shadow: inset $shadow-base-top #000;
$description-shadow: inset $shadow-base-top gray;
// Overridden Bootstrap variables. Bumps the font down to 14px
$font-size-base: .875rem;
$font-size-sm: $font-size-base;
@font-face {
font-family: LibreBaskerville;
src: url(asset-path("libre-baskerville/LibreBaskerville-Italic.otf")) format("opentype");
}
body {
font-family: Verdana, Arial, sans-serif;
margin-bottom: 0;
}
a {
color: #2a62bc;
}
#logo {
img {
max-height: 30px;
margin: auto;
}
}
#user-util-links {
ul.navbar-nav {
padding-left: 0;
}
}
.navbar-static-top {
.navbar-nav {
margin-left: 0;
}
}
// Fixes https://github.com/samvera/hyrax/blob/main/app/assets/stylesheets/hyrax/_facets.scss#L6
// Which causes the toggle icon to never display
.navbar-toggler-icon {
display: inline-block;
}
.navbar-light {
.navbar-nav {
.nav-link {
&:hover,
&:focus {
color: black;
}
}
}
}
span.institution_name {
font-family: LibreBaskerville, sans-serif;
a, a:hover, a:visited {
color: $text-color;
text-decoration: none;
}
}
.skip-to-content {
background-color: white;
a {
color: $carolina-blue-dark;
}
}
.notify-number {
span.label {
font-size: 100%;
}
}
#masthead {
background-color: $carolina-blue-dark !important;
margin-bottom: 0;
max-height: 56px;
&+ nav {
margin-top: 0;
}
}
.image-masthead {
margin-bottom: 0;
height: 225px;
box-shadow: $shadow;
border-bottom: 0;
z-index: 1;
.background-container {
-ms-filter: none;
-webkit-filter: none;
filter: none;
box-shadow: 0 1px 10px #000c;
}
.background-container-gradient {
background: none;
}
}
.advanced_search {
float: right;
margin: 0 1rem 0 0;
&:hover {
text-decoration: none;
}
}
.advanced-search-form {
.adv-date-year-range {
margin-left: -37.5%;
.form-control {
width: 6rem;
}
.form-inline {
margin-left: 0;
}
.col-form-label {
font-weight: bold;
}
}
}
.file_set.attributes .btn-group a {
color: black !important;
&:hover {
text-decoration: none;
}
}
#unc-search {
background-color: $carolina-blue;
height: 45%;
padding-top: 15px;
margin-right: 0;
color: $text-color;
.repo-name {
font-family: LibreBaskerville, sans-serif;
padding-left: 15px;
white-space: nowrap;
}
img.banner-img {
max-width: 300px;
max-height: 60%;
padding-left: 15px;
}
.fa-arrow-circle-up {
color: $text-color;
}
.advanced_search {
color: $text-color;
font-size: 1.2rem;
font-weight: bold;
&:hover {
color: $light-gray;
text-decoration: none;
}
}
}
#advanced_search {
.form-group {
display: inline-flex;
width: 100%;
label {
font-weight: bold;
}
}
}
nav.breadcrumb {
background-color: #f8f9fa;
}
.badge-primary {
background-color: #13294b;
}
form .nav-link:not(.active),
.help-block a,
#collapsePublic a,
#unc-featured a {
text-decoration: underline;
}
form .nav-link:not(.active),
#my_nav .nav-link:not(.active),
.thumbnail-title-wrapper a,
.ensure-wrapped a,
.page-item .page-link,
.media-body a,
.btn-link {
color: #2a62bc;
}
.navbar-light .navbar-nav .nav-link {
color: rgb(0, 0, 0);
}
.link-tabs {
background-color: $carolina-blue;
ul {
margin-bottom: 0;
li {
display: inline-block;
}
div {
border: 1px outset $carolina-blue-dark;
background-color: $carolina-blue-dark;
height: 40px;
padding:8px;
&:hover {
background-color: #1c4c80;
}
a {
color: $text-color;
&:hover {
color: $light-gray;
text-decoration: none;
}
}
}
}
}
.site-title.h1 {
padding-top: 20px;
}
#unc-text {
color: $text-color !important;
div {
margin: 0 auto;
}
p {
background-color: rgba(0, 0, 0, 0.6);
text-align: center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 10px;
font-size: 2.6rem;
line-height: 43px;
}
blockquote {
border-left: none;
}
}
#unc-deposit {
background-color: $carolina-blue;
color: $text-color;
padding-left: 0;
padding-right: 30px;
h2 {
margin-top: 15px;
}
a {
color: $text-color;
font-weight: bold;
&:hover {
color: $light-gray;
}
div {
font-size: 21px;
}
}
.unc-block {
display: inline-block;
margin-top: 25px;
}
i, div {
margin-bottom: 15px;
}
}
#unc-description {
padding-top: 25px;
.describe {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
img {
max-width: 20%;
margin: 0 0 0 5%;
}
p {
font-size: 16px;
}
}
#unc-featured {
background-color: #f6f6f6;
box-shadow: $description-shadow;
padding: 0 10px;
.is-featured {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
margin-bottom: 25px;
margin-top: 25px;
height: 200px;
img {
max-width: 200px;
max-height: 175px;
}
.featured-author + p {
margin-top: -10px;
}
}
h2 {
margin-top: 15px;
margin-bottom: 50px;
}
.featured-item-title {
margin-top: 15px;
}
}
.collections-browse {
margin: .7rem 0 -0.5rem 0;
font-size: 1.9rem;
}
.social {
width: 100%;
margin-top: 25px;
flex-flow: row;
ul.navbar-nav {
padding: 0 40%;
li {
display: inline-block;
margin-right: 15px;
}
}
}
div.person {
margin-bottom: 2em;
}
.read-only {
opacity: .4;
}
.read-only-note {
margin-top: 25px;
font-size: 2rem;
}
.site-footer, .social {
height: auto;
}
#unc-footer {
background-color: $carolina-blue-dark !important;
position: relative;
.navbar-text {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
a {
color: $text-color;
}
ul {
margin: auto;
display: block;
li {
color: $text-color;
display: inline-block;
margin: -10px 0 0 15px;
padding-right: 15px;
border-right: 1px solid $text-color;
&:first-child {
margin-left: 0;
}
&:last-child {
border-right: none;
}
}
}
#unc-version-footer {
margin-top: 15px;
}
}
div.unc-modal {
h4 {
text-align: left;
font-size: 18px;
}
.cite {
margin: 0 15px 10px;
text-align: left;
font-size: 14px;
}
ul {
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid $light-gray;
}
}
.creator-affiliates {
display: inline-block;
}
.people-remove.multi_value.field-controls {
margin-left: 0;
}
.people-remove {
.remove {
width: auto;
}
}
.mfa-child-works {
text-align: center;
font-size: 1.5em;
padding: 10px 5px;
margin: -20px 15px 10px 15px;
background-color: #dff0d8;
width: 100%;
}
.form-inline .date-input {
width: 100%;
}
.files-public-note {
ul {
list-style-type: circle;
}
}
.page-header {
padding-bottom: 9px;
margin: 40px 0 20px;
border-bottom: 1px solid #eeeeee;
}
/* Override width of Blacklight Range Limit date boxes */
.range_limit input.range_begin, .range_limit input.range_end {
width: 5.5em !important;
}
.form-control.range_begin, .form-control.range_end {
padding: 6px;
}
/* Hyrax override */
#content_block_page {
margin: 0 15px;
h1 {
margin-bottom: 25px;
text-align: center;
}
}
#content {
#documents {
justify-content: left;
}
}
.facet-limit-active {
.card-header {
button {
color: white;
}
}
.facet-label .remove {
margin: 0;
}
.facet-values li .selected {
color: black !important;
}
}
/* Fixes https://github.com/samvera/hyrax/blob/f14958e665535be2696dc1cdf9e205d6fc54e668/app/assets/stylesheets/hyrax/_card.scss#L5
Resets it to the default Bootstrap card margins
*/
#admin_sets {
.card-title {
margin-bottom: .75rem;
}
}
#documents.table-responsive {
justify-content: left;
width: 100%;
}
.search-result-wrapper {
border-bottom: 1px dashed #ccc;
margin-bottom: 30px;
padding-bottom: 0;
}
.multi_value .btn.add {
text-decoration: none;
&:hover, &:focus {
text-decoration: underline;
}
}
.navbar-default .navbar-nav > li > a {
color: #222222;
&:focus, &:hover {
color: #777777;
}
}
#search-results {
a:focus, button:focus {
outline-color: #4b9cd3;
border: 1.5px dashed #4b9cd3;
}
}
.sidebar {
background-color: #3f3f3f;
}
caption {
color: #666666;
}
.fileupload-buttonbar, #fileupload p {
padding-top: 5px;
padding-left: 15px;
}
.dropzone {
margin: 0 auto;
width: 95%;
}
.file-upload-divider {
height: 1px;
width: 95%;
background-color: #c0c0c0;
margin: 40px auto;
}
div.fileupload-progress {
height: 0;
}
.hidden-file-input {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
}
.base-terms .card {
margin-bottom: 15px !important;
}
#fileuploadVersioning {
h3 {
width: 100%;
}
}
/* Colors taken from Bootstrap's focus */
input.hidden-file-input:focus + label {
outline: -webkit-focus-ring-color auto 5px;
outline: #66afe9 auto 5px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
/* Fixes pagination links displaying vertically. */
/* @TODO Possibly a 4.x bug. It doesn't seem to be an issue in Hyrax 5.x */
.hyc-bl-pager {
.pagination {
display: flex;
}
}
table p.name span {
word-break: break-word;
display: block;
}
.progress-bar-active {
height: auto;
overflow: auto
}
.person-divider {
height: 2px;
border: none;
color: #c0c0c0;
background-color: #c0c0c0;
}
/* collections page */
.hyc-generic, .hyc-banner {
border: 4px solid white;
border-radius: 8px;
.hyc-title {
h1 {
color: white;
display: inline-block;
font-size: 2.5em;
margin: 0;
padding: 0;
text-shadow: 1px 2px 3px rgba(0,0,0,.5);
}
}
.hyc-bugs {
margin-top: 10px;
}
}
.hyc-generic {
.hyc-title {
h1 {
margin-left: 15px;
margin-top: 15px;
}
}
.hyc-logos {
margin-left: 15px;
}
}
.hyc-title {
h1 {
color: white;
}
}
.hyc-bl-search {
padding-right: 0;
}
.hyc-bl-title {
margin-left: 0;
margin-top: 15px;
padding: 0;
}
.hyc-bl-results {
ul {
list-style-type: none;
padding-left: 0;
a {
font-size: 16px;
}
}
}
.works {
margin-left: 15px;
.hyc-bl-results, .hyc-bl-sort {
padding-left: 0;
}
}
.more-metadata-btn {
float: right;
margin-right: 30px;
}
#collection-metadata-modal {
div {
margin-bottom: 10px;
}
dt {
font-size: 18px;
font-weight: normal;
}
}
.sub-collection {
padding-left: 0;
}
#sub-collection-list {
font-size: 18px;
}
.hyc-container, .collection-works-table {
.media-left {
margin-right: 1rem;
}
}
.collections-wrapper {
.batch-info {
.form-control-lg, .sort-toggle {
height: auto;
}
}
}
.social-media {
.sr-only {
color: $carolina-blue;
}
}
.person {
p.help-block {
color: darkslategray;
}
}
.radio.embargoed {
min-height: 20px;
padding-left: 20px;
font-weight: 400;
cursor: pointer;
}
input#check_all {
margin-right: 5px;
}
.controlled_vocabulary .input-append {
width: 100%;
}
.panel-body {
overflow-x: scroll;
}
.citations {
padding-top: 5px;
.btn {
display: table;
margin: auto;
white-space: normal;
}
.access-request {
margin-top: 5px;
}
}
.sidebar:not(.maximized) {
.sidebar-action-text,
a span + span,
h5 {
display: none;
}
.active {
width: fit-content;
}
}
.dashboard {
.main-header {
padding-left: 15px;
.pull-right {
padding-right: 15px;
}
}
}
.resp-sharing-button--twitter {
background-color: black;
border-color: black;
&:focus,
&:hover {
background-color: #333;
border-color: #333;
color: white;
}
}
/*
@TODO This is broken in hyrax 4.0.0 through at least hyrax 5.0.0.rc1
Toggling the facet values closes and immediately reopens the facet list
Hide it entirely until the issue is resolved upstreeam
*/
.facets-toggleable-md {
.navbar-toggler {
display: none;
}
}
#facet-panel-collapse {
margin-bottom: 25px;
}
@media only screen and (max-width: 1375px) {
.navbar-brand {
margin-left: 0;
}
}
@media only screen and (max-width: 1100px) {
dl.work-show {
margin-left: 75px;
}
}
@media only screen and (max-width: 865px) {
#unc-footer {
height: auto;
margin-top: 15px;
ul li {
padding-top: 10px;
border-right: none;
}
#unc-version-footer {
margin-top: auto;
}
}
#unc-featured {
.is-featured {
img {
max-width: 175px;
}
}
}
#unc-text {
div {
width: 100%;
height: auto;
margin-top: -10px;
}
p {
font-size: .9em;
}
}
.social {
margin-bottom: 15px;
}
/* Hyrax overrides */
.fileinput-button {
margin-bottom: .2em;
}
}
@media only screen and (max-width: 800px) {
.link-tabs {
ul {
margin-right: 15px;
}
}
#unc-description {
.describe {
display: block;
}
div {
text-align: center;
}
img {
max-width: 50%;
max-height: 100%;
}
}
#unc-featured {
h2 {
margin-bottom: 50px;
}
}
#unc-search {
.link-tabs {
text-align: center;
}
}
#collection-description-text-btn {
margin-bottom: 15px;
}
.hyc-body {
margin: 0 auto;
}
.more-metadata-btn {
float: left;
margin-left: 15px;
margin-right: 0;
}
#sub-collection-list {
margin-left: 14px;
}
}
.metadata-view {
margin: auto;
.col-sm-12 {
margin-bottom: 25px;
}
}
@media only screen and (max-width: 768px) {
#masthead .navbar-brand {
padding-right: 0;
}
.institution_name {
font-size: $font-size-base
}
.dashboard {
.main-header {
.pull-right {
float: none;
padding-right: 0;
text-align: center;
}
}
}
.repo-name {
font-size: 2rem;
}
}
@media only screen and (max-width: 576px) {
.dashboard {
.main-header {
.pull-right {
padding-right: 15px;
}
}
}
}
@media only screen and (max-width: 576px) {
.navbar-toggle {
margin-right: 0;
}
.navbar-nav {
margin-left: 30px;
margin-bottom: .7rem;
}
#logo {
img {
max-height: 20px;
}
}
.hyc-metadata {
margin-left: 0;
}
#unc-description {
text-align: center;
}
.link-tabs {
div {
margin-top: 5px;
}
}
.hyc-title, .hyc-banner .hyc-title, .hyc-generic .hyc-title {
h1 {
margin-bottom: 15px;
width: 100%;
}
}
span.institution_name {
font-size: 12px;
}
#unc-text {
p {
font-size: .8em;
}
}
.social {
height: auto;
padding-bottom: 25px;
li {
display: block;
}
}
#unc-footer {
ul li {
display: block;
margin-left: 0;
margin-top: 5px;
}
}
dl.work-show {
margin-left: auto;
}
}
@media only screen and (max-width: 400px) {
span.institution_name {
font-size: 10px;
}
#logo {
img {
max-height: 15px;
}
}
}
.form-progress .form-group {
margin-bottom: 0;
}
.form-progress .checkbox {
margin-bottom: 0;
margin-top: 0;
}
.form-progress .checkbox label {
font-weight: bold;
}
#form-progress {
.card-footer {
padding: 5px;
text-align: center;
.checkbox {
label {
margin-bottom: 0;
}
}
label {
width: 100%;
}
#agreement {
margin-right: 5px;
}
a {
font-weight: bold;
}
}
}
/* Responsive Hyrax override */
@media only screen and (min-width: 768px) {
.nav > li > a {
padding: 10px;
}
.navbar-right {
margin-right: 0;
}
footer {
.navbar-text {
margin-left: 0;
margin-right: 0;
}
}
}
@media only screen and (min-width: 1400px) {
#unc-search, #unc-description {
padding-left: 150px;
padding-right: 150px;
}
.large-screen {
background-color: $carolina-blue;
margin-left: -150px;
margin-right: -150px;
}
#masthead {
.large-screen {
background-color: $carolina-blue-dark;
}
}
.container-fluid, #unc-featured, #unc-deposit {
padding: 0 150px;
}
.container-fluid.header-bar {
padding-left: 0;
padding-right: 0;
}
.navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand {
margin-left: inherit;
}
}
@media (max-width: 1066px) {
#masthead {
.navbar-header {
width: 100%;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
padding-left: 25px;
background: inherit;
margin: 8px -15px 0 -15px;
z-index: 100;
#user_utility_links {
text-align: center;
}
}
#navbarDropdown.dropdown-toggle {
&:focus {
outline: none;
}
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-nav {
margin-top: 7.5px;
}
.navbar-nav > li > a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in {
display: block !important;
}
}
}
.dashboard {
.sidebar {
.nav-link[href="/leases?locale=en"], .nav-link[href^="/dashboard/profiles"] {
display: none;
}
/* Temporary fix so that bulkrax links format correctly, until the gem is updated */
.nav-item a {
display: block;
}
}
}
#new_importer {
/* suppressing "Create and Validate" and "Create" buttons since the former is very buggy, and the latter is the same as "Create and Import" */
.btn[value="Create and Validate"], .btn[value="Create"] {
display: none;
}
/* Hiding the vertical pipes between buttons */
.panel-footer {
color: transparent;
}
/* Correcting the font color until bulkrax is updated for hyrax 4 */
.btn-primary {
color: #fff;
}
}
#new_exporter {
/* Correcting the font color until bulkrax is updated for hyrax 4 */
.btn-primary {
color: #fff;
}
}
.bulkrax-align-text {
.panel-body {
width: 100%;
}
}
.search-form {
label {
display: none;
}
}
#unc-search {
#search-form-header {
.input-group {
padding: 0;
}
}
}
.visibility {
/* this prevents the embargo inputs from running out of the side of their container */
.form-inline {
display: block;
}
}