:root{ --pad: 20px; --loading-background-color: #f1f1f19e; --loading-background-color-darker: #e6e4e49e; } /****************************************** ** General Styling *** ******************************************/ a:hover{ cursor: pointer; } .center{ text-align: center; } .subtle{ color: #999; } .btn-disabled{ pointer-events: none; opacity: .8; } .footnote{ font-size: .7em; } .underline{ text-decoration: underline; } .alert .footnote{ font-size: .9em; margin-top: 10px; } .badge{ margin-right: 10px; text-shadow: none; font-weight: normal; } .danger, .error{ color: #dc0000; } .tooltip-error .tooltip-inner{ background-color: #960303; } .tooltip-error .tooltip .tooltip-arrow{ border-top-color: #960303; } .strong{ font-weight: bold; } .emphasis{ font-style: italic; } .large{ font-size: 1.5em; padding: 1em; } .large .btn{ font-size: 1em; padding: .5em; } .success{ color: green; } .icon.warning{ color: #ffbc00; } .list-group-item.success { background-color: #dff0d8; } .list-group-item.warning{ background-color: #fcf8e3; color: #c09853; } .list-group-item.danger { background-color: #f2dede; } .list-group-item.info{ background-color: #d9edf7; color: #3a87ad; } .tooltip{ font-size: 12px; pointer-events: none; z-index: 9999; } [contenteditable]{ cursor: text; } .row-striped{ border: 1px solid #e5e5e5; margin-bottom: 40px; border-radius: 4px; } .row-striped > .row-fluid{ padding: 20px; } .row-striped > .row-fluid:nth-child(even){ background-color: #EFEFEF; } td.center{ text-align: center; } /****************************************** ** General Structure *** ******************************************/ html{ height: 100%; width: 100%; margin: 0; padding: 0; } body { min-height: 100%; width: 100%; margin: 0; padding: 0; position: relative; } article > .container, article.container { padding: 2%; width: 96%; } #Content{ padding: 40px 40px 40px 40px; min-height: 200px; } .DataCatalog #Content{ box-sizing: border-box; } .mapMode #Content{ width: 100%; margin: 0px; padding: 0px; } footer{ background-color: #FFFFFF; height: 3em; /** Keeps the footer down **/ position: absolute; /** Keeps the footer down **/ bottom: 0px; /** Keeps the footer down **/ } .mapMode footer{ position: relative; height: auto; } .hide-in-map-mode{ display: block; } .show-in-map-mode{ display: none; } .mapMode .show-in-map-mode{ display: block; } .mapMode .hide-in-map-mode{ display: none; } .annotator-wrapper{ /** Keeps the footer down **/ min-height: 100%; } /****************************************** ** Navigation *** ******************************************/ .breadcrumb{ width: 100%; box-sizing: border-box; font-size: .9em; } .breadcrumb>li+li:before { padding: 0 5px; color: #ccc; content: "/\00a0"; } .breadcrumb>li>a{ font-weight: normal; } .breadcrumb>li>a.inactive{ color: #999; } .breadcrumb .back{ margin-right: 20px; display: inline; border-right: 1px solid #999; padding-right: 20px; } .nav-tabs li i{ margin-right: 5px; } .nav > li > form{ margin-bottom: 0px; } .nav .input > form > label, .header .input > form > label{ display: inline-block; top: 5px; position: relative; margin-right: 10px; } .nav .input > form > input[type="text"], .header .input > form > input[type="text"]{ display: inline-block; width: 60px; } .nav .input > form > .btn, .header .input > form > .btn { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; background: none; display:inline-block; cursor:pointer; text-decoration:none; } .nav .right .dropdown-menu { left: -50%; } #nav-trigger{ color: white; float: right; margin-top: 15px; font-size: 2em; display: none; } #nav-trigger:hover{ text-decoration: none; } #Navbar .home{ display: inline-block; } #Navbar a .title{ color: #FFF; vertical-align: middle; } #Navbar .logo{ max-height: 30px; margin-right: 10px; margin-top: 5px; } /****************************************** ** Titles *** ******************************************/ h3{ font-size: 1.5em; font-weight: normal; } header .citation { margin-bottom: 20px; display: block; } /****************************************** ** Buttons *** ******************************************/ .btn, .btn-primary{ background-image: none; } .inline-buttons { margin-bottom: 20px; margin-top: 20px; clear: both; } .inline-buttons > .btn:not(:last-child){ margin-right: 10px; } .inline-buttons > .text-btwn-btns{ margin-right: 10px; margin-left: 10px; } .btn-large{ font-size: 1.2em; line-height: 1.5em; } .btn-large.center{ margin-bottom: 20px; display: block; max-width: 30%; } .orcid-signin.btn-large.center{ max-width: 45%; margin-bottom: 0px; } #Content > .login{ max-width: 300px; margin-top: 50px; margin-bottom: 20px; display: grid; align-self: center; } #Content > .login .btn{ font-size: 1.5em; } .login > span { top: -.2em; position: relative; } #Content > .login > .alert-container{ font-size: inherit; } /****************************************** ** Download Buttons *** ******************************************/ .btn.download{ -webkit-transition: color 500ms; transition: color 500ms; } .btn.download.in-progress{ font-size: .9em; } .btn.download.complete{ color: rgb(17, 162, 17); } .btn.download.complete.btn-primary{ color: white; } .downloading.icon-spin.hidden{ display: none; } .download.btn.error { border-color: #960303; color: #960303; } /****************************************** ** Notifications and Alerts *** ******************************************/ .notification.loading .icon{ font-size: 40px; margin-left: 43%; margin-left: calc(50% - 23px); margin-top: 40px; color: #333; } .notification.loading.page .icon{ margin-top: 10px; } .panel-body .notification.loading .icon { margin-top: 10px; } .accordion-inner .notification.loading .icon { margin-left: 0px; } .notification.loading p{ font-size: 1em; text-align: center; width: 100%; margin: 20px auto; display: block; color: #333; } .filter-contain .notification.loading i{ color: #999; font-size: .5em; } .filter-contain .notification.loading p{ font-size: .3em; line-height: 3em; text-align: center; width: auto; color: #999; margin: 0; } #results .notification.loading .icon{ margin-top: 20px; } .alert h4{ margin-top: 10px; margin-bottom: 20px; } .alert .icon-left{ float: left; margin-right: 10px; } .alert.plain{ background-color: #FFF; border-color: #DDD; color: #333; } .alert .close{ font-size: 3em; position: absolute; right: 20px; top: 20px; } .alert-error .close{ color: #FF0000; } .notification.success, .icon.success{ color: #008000; } .notification.error{ color: #a94442; } .notification.warning{ color: rgb(197, 166, 0); } .notification.success, .notification.error{ font-weight: bold; } .notification.error .icon, .notification.success .icon{ margin-right: 10px; } .input-append .notification{ font-size: 15px; } .notification > .msg { width: 90%; display: inline; white-space: normal; } .form-feedback{ min-height: 30px; } #Content > .alert-container { max-width: 90%; margin-left: 5%; margin-top: 2rem; } body > .alert-container.important-app-message{ bottom: 0px; top: auto; width: 100%; /* required for IE11: */ z-index: 1000; } body > .alert-container.important-app-message > .alert{ margin-bottom: 0px; display: grid; } .temporary-message{ margin-bottom: 0px; position: relative; } .alert.subtle{ background-color: #f9f7f7; border-color: #CCC; color: #999; border-width: 0px; } /****************************************** ** Icons *** ******************************************/ .btn > i{ margin-left: 5px; } h3 > .icon, h4 > .icon{ margin-right: 10px; max-height: 1em; } .provenance-statement-container i{ font-size: 1.2em; } .icon-on-right{ margin-left: 5px; } .icon-on-left{ margin-right: 5px; } .icon-no-margin{ margin: 0 !important; } .filter-contain img.icon{ float: left; height: 20px; } img.icon{ max-height: 1.4em; } svg.icon { max-height: 19px; max-width: 19px; fill: #555; } .icon-positive{ color: green; } .icon-negative{ color: #F15959; } .icon-warning{ color: #c09853; } .icon-circle-badge{ background-color: #999; padding: 6px; border-radius: 7px; color: #FFF; } .icon-text{ font-family: inherit; font-weight: bold; font-size: .9em; } .private.icon-stack .icon-circle{ color: #FF7600; } .private.icon-stack .icon-stack-top{ color: #FFF; margin-top: -1px; font-size: 1.1em; } .icon.hidden{ display: none; } .dataone-plus-icon{ height: 1em; vertical-align: text-top; } .pill{ border-radius: 5px; width: auto; display: inline; padding: .25em .5em; text-shadow: none; } /* Data Tag Icons */ .data-tag{ height: 1.25em; width: auto; } .data-tag-icon.blue g{ fill: #3FA9F5; } .data-tag-icon.green g{ fill: #00CE01; } .data-tag-icon.yellow g{ fill: #ead10a; } .data-tag-icon.orange g{ fill: #F38D08; } .data-tag-icon.red g{ fill: #FE0300; } .data-tag-icon.crimson g{ fill: #800000; } /****************************************** ** CatalogSearchView *** ******************************************/ .catalog-search-view .catalog-search-inner{ display: grid; justify-content: stretch; align-items: stretch; grid-template-columns: auto 1fr 1fr; } .catalog-search-view .filter-groups-container { width: 215px; padding: var(--pad) } .catalog-search-view .search-results-container, .catalog-search-view .map-container { } .catalog-search-body.mapMode{ height: 100vh; width: 100vw; padding-bottom: 0px; display: grid; align-items: stretch; justify-content: stretch; overflow: hidden; } .catalog-search-body.mapMode #Content{ padding: 40px 0px 0px 0px; } .catalog-search-body.mapMode .search-results-view .result-row:last-child{ margin-bottom: 100px; } .catalog-search-body.mapMode .search-results-view { overflow-y: scroll; height: 100vh; padding-bottom: 200px; /* Leaving room for the last row to show */ padding-right: 15px; /* Padding for the scrollbar */ } .catalog-search-body.mapMode .search-results-panel-container .map-toggle-container{ display: none; } .catalog-search-body.listMode .map-panel-container{ display: none; } .catalog-search-body.listMode .catalog-search-inner{ grid-template-columns: auto 1fr 0; } .catalog-search-view .cesium-widget-view { width: inherit; margin-left: 0; } .search-results-view .result-row{ padding: var(--pad); } .catalog-search-view .no-search-results{ padding: var(--pad); text-align: center; } /****************************************** ** Results and Result Rows *** ******************************************/ .result-row{ padding: 10px 20px; width: 95%; width: calc(100% - 15px); border-top: 1px solid #EEE; } .result-row-loading .citation-loading{ width: 100%; height: 3em; background-color: var(--loading-background-color-darker); border-radius: 6px; } .result-row-loading .circles-loading{ display: flex; justify-items: left; column-gap: 1em; } .result-row-loading .circle-loading{ background-color: var(--loading-background-color-darker); height: 1em; width: 1em; margin-top: var(--pad); } .result-row .info-icons .icons{ float: left; margin-right: 1em; position: relative; } .result-row .info-icons .icon{ font-size: 1.1em; } .result-row .info-icons .icon.inactive{ visibility: hidden; } .result-row .info-icons .icons.resource-map{ width: 20px; height: 1em; } .result-row .info-icons .icons.download .icon{ font-size: 1.2em; } .result-row .info-icons .icons.download .tooltip{ width: 120px; } .info-icons .download.disabled-download { color: inherit; cursor: default; } .result-row .info-icons .icon.views{ margin-left: 5px; color: inherit; } .result-row .icons.provenance i{ font-size: 1.5em; } .result-row .info-icons img.icon{ height: 1em; } .info-icons .icon.private{ color: #FF7600; } .result-row .info-icons .label{ background-color: #5E8497; } .search-results.loading .notification{ margin-top: 20px; min-height: 700px; } .search-results #no-results-found { margin: 20px; } .result-row .route-to-metadata{ cursor: pointer; } .result-row .logo { width: 50px; float: left; margin-right: 10px; } .result-row > .logo.ORNLDAAC, .result-row > .logo.CDL, .result-row > .logo.ONEShare, .result-row > .logo.CLOEBIRD, .result-row > .logo.EDACGSTORE, .result-row > .logo.GLEON{ width: 90px; } .result-row > .logo.KNB{ width: 30px; } .result-row > .logo.IARC, .result-row > .logo.LTER{ width: 40px; } .result-row .tooltip{ z-index: 99999; min-width: 100px; } .result-row .info-icons .label { background-color: #FFF; color: inherit; text-shadow: none; padding: 1px 5px; border: 1px solid #CCC; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; margin-top: -2px; } .result-row .tooltip-inner{ font-size: 1.2em; } .result-row .download-icon-placeholder{ width: 16px; display: inline-block; } .result-row.collection .info-icons{ display: none; } .result-row.collection .logo{ width: auto; max-width: 100px; } /* Don't italicize the title in the citation in search results */ .result-row .title i { font-style: normal; } /****************************************** ** Provenance flow-charts *** ******************************************/ .prov-chart{ width: 60px; padding-left: 20px; padding-right: 20px; margin-top: 67px; display: inline-block; vertical-align: top; position: relative; } .prov-chart.sources{ margin-right: 15px; padding-right: 10px; border-right-width: 1px; border-right-style: solid; } .prov-chart.derivations{ margin-left: 17px; padding-left: 16px; border-left-width: 1px; border-left-style: solid; } .sources-programs{ padding-left: 0px; padding-right: 0px; margin-left: 77px; } .derivations-programs{ padding-left: 0px; padding-right: 0px; margin-left: -84px; } .prov-chart.derivations.has-programs{ margin-left: 17px; } .prov-chart.sources .programs .connecter { margin-left: 15px; width: 10px; } .prov-chart.derivations .programs .connecter { left: -76px; width: 9px; } .prov-chart .node.program{ fill: #FFFFFF; } .prov-chart polygon.program.editor.node{ stroke: grey; stroke-width: 1px; stroke-dasharray: 2px,2px; } .prov-chart .programs svg{ position: absolute; } .prov-chart .node{ border-width: 1px; border-style: solid; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; background-color: #FFF; width: 25px; height: 25px; padding: 15px; font-size: 25px; margin-bottom: 10px; color: #666; position: absolute; cursor: pointer; } .prov-chart .node:focus{ outline: none; } .prov-chart .node.active, #article-container.active, .entitydetails.active{ box-shadow: 0 0 5px rgb(50, 161, 19),0 0 12px rgb(0, 255, 213); -webkit-box-shadow: 0 0 5px rgb(50, 161, 19),0 0 12px rgb(0, 255, 213); } .prov-chart .node.previous{ border-width: 1px; } .prov-chart .node .icon.remove, .prov-chart .programs .icon.remove{ color: #960303; fill: #960303; position:absolute; display: block; font-size: 20px; } .prov-chart .node .icon.remove:hover, .prov-chart .programs .icon.remove:hover{ color: #FF0000; fill: #FF0000; } .prov-chart .node .data.icon.remove{ top: 0px; right: -5px; } .prov-chart .connecter{ border-top-width: 1px; border-top-style: solid; position: absolute; top: 0px; height: 10px; width: 15px; left: 0px; } .prov-chart.expand-collapse .collapsed{ display: none; } .prov-chart.expand-collapse .expand-control, .prov-chart.expand-collapse .collapse-control{ font-size: .9em; position: absolute; top: 100%; top: calc(100% + 30px); left: 10px; width: 90px; cursor: pointer; } .prov-chart.expand-collapse .control .icon{ margin-left: 5px; font-size: 1.5em; vertical-align: sub; } .prov-chart.derivations .connecter{ width: 17px; left: 0px; top: 50%; } .prov-chart.sources .connecter{ left: 45px; /* fallback */ left: calc(100% - 15px); } .prov-chart .prov-pointer{ width: 15px; height: 15px; position: absolute; top: 50%; /* fallback */ top: calc(50% - 7px); } .prov-chart.sources .prov-pointer{ right: -15px; } .prov-chart.derivations .prov-pointer{ left: -17px; } .prov-chart.derivations.one-derivation .connecter{ margin-left: -17px; } .prov-chart.derivations.one-derivation .prov-pointer{ left: 0px; } .prov-chart > .title{ font-size: .9em; font-weight: normal; width: 90px; line-height: 1em; top: -70px; position: absolute; } .prov-chart.derivations > .title{ left: 0px; text-align: center; } .prov-chart .node > i{ vertical-align: text-top; } .prov-chart .metadata.node i{ margin-left: 5px; } .provenance-statement a{ /*Keep the icons and links right by each other */ display: inline; word-break: break-word; } .provenance-statement .currently-viewing{ font-weight: bold; } .prov-chart .image.node{ background-size: cover; background-position: 50% 50%; } .prov-chart .node.editor{ border-color: #999999; border-style: dashed; text-align: center; line-height: 16px; font-size: 14px; color:#C0C0C0; } .prov-chart i.icon.icon-plus{ color:#C0C0C0; } .prov-chart.editor.empty .prov-pointer{ -webkit-filter: saturate(0); filter: saturate(0); } /* .node .editor.icon { margin-left: 3px; } */ .prov-chart .program.node.active{ stroke: #00eb89; stroke-width: 2px; transition: stroke 200ms; } .prov-chart .program-icon{ font-size: 25px; } .prov-chart .node .pdf.icon { margin-left: 5px; } /* Program editor node text */ .prov-chart .editor text { fill: #C0C0C0; } #select-prov-entity{ width: 100%; } .prov-entity-select .help-text a{ display: block; } /********* The Prov Chart colors *******/ .prov-chart .node.uniqueNode1, .entitydetails.uniqueNode1{ border-color: #FF0000; stroke: #FF0000; } .prov-chart .uniqueNode1 .icon, .provenance-statement .node-link.uniqueNode1 .icon, .prov-chart .uniqueNode1 + .program-icon{ color: #FF0000; fill: #FF0000; } .prov-chart .uniqueNode2, .entitydetails.uniqueNode2{ border-color: #878700; stroke: #878700; } .prov-chart .uniqueNode2 .icon, .provenance-statement .node-link.uniqueNode2 .icon, .prov-chart .uniqueNode2 + .program-icon{ color: #878700; fill: #878700; } .prov-chart .uniqueNode3, .entitydetails.uniqueNode3{ border-color: #00EAFF; stroke: #00EAFF; } .prov-chart .uniqueNode3 .icon, .provenance-statement .node-link.uniqueNode3 .icon, .prov-chart .uniqueNode3 + .program-icon{ color: #00EAFF; fill: #00EAFF; } .prov-chart .uniqueNode4, .entitydetails.uniqueNode4{ border-color: #AA00FF; stroke: #AA00FF; } .prov-chart .uniqueNode4 .icon, .provenance-statement .node-link.uniqueNode4 .icon, .prov-chart .uniqueNode4 + .program-icon{ color: #AA00FF; fill: #AA00FF; } .prov-chart .node.uniqueNode5, .entitydetails.uniqueNode5{ border-color: #FF7F00; stroke: #FF7F00; } .prov-chart .uniqueNode5 .icon, .provenance-statement .node-link.uniqueNode5 .icon, .prov-chart .uniqueNode5 + .program-icon{ color: #FF7F00; fill: #FF7F00; } .prov-chart .node.uniqueNode6, .entitydetails.uniqueNode6{ border-color: #739900; stroke: #739900; } .prov-chart .uniqueNode6 .icon, .provenance-statement .node-link.uniqueNode6 .icon, .prov-chart .uniqueNode6 + .program-icon{ color: #739900; fill: #739900; } .prov-chart .node.uniqueNode7, .entitydetails.uniqueNode7{ border-color: #0095FF; stroke: #0095FF; } .prov-chart .uniqueNode7 .icon, .provenance-statement .node-link.uniqueNode7 .icon, .prov-chart .uniqueNode7 + .program-icon{ color: #0095FF; fill: #0096FF; } .prov-chart .node.uniqueNode8, .entitydetails.uniqueNode8{ border-color: #FF00AA; stroke: #FF00AA; } .prov-chart .uniqueNode8 .icon, .provenance-statement .node-link.uniqueNode8 .icon, .prov-chart .uniqueNode8 + .program-icon{ color: #FF00AA; fill: #FF00AA; } .prov-chart .node.uniqueNode9, .entitydetails.uniqueNode9{ border-color: #FFD400; stroke: #FFD400; } .prov-chart .uniqueNode9 .icon, .provenance-statement .node-link.uniqueNode9 .icon, .prov-chart .uniqueNode9 + .program-icon{ color: #FFD400; fill: #FFD400; } .prov-chart .node.uniqueNode10, .entitydetails.uniqueNode10{ border-color: #6AFF00; stroke: #6AFF00; } .prov-chart .uniqueNode10 .icon, .provenance-statement .node-link.uniqueNode10 .icon, .prov-chart .uniqueNode10 + .program-icon{ color: #6AFF00; fill: #6AFF00; } .prov-chart .node.uniqueNode11, .entitydetails.uniqueNode11{ border-color: #0040FF; stroke: #0040FF; } .prov-chart .uniqueNode11 .icon, .provenance-statement .node-link.uniqueNode11 .icon, .prov-chart .uniqueNode11 + .program-icon{ color: #0040FF; fill: #0040FF; } .prov-chart .node.uniqueNode12, .entitydetails.uniqueNode12{ border-color:#EDB9B9; stroke:#EDB9B9; } .prov-chart .uniqueNode12 .icon, .provenance-statement .node-link.uniqueNode12 .icon, .prov-chart .uniqueNode12 + .program-icon{ color: #EDB9B9; fill: #ED89B9; } .prov-chart .node.uniqueNode13, .entitydetails.uniqueNode13{ border-color: #B9D7ED; stroke: #B9D7ED; } .prov-chart .uniqueNode13 .icon, .provenance-statement .node-link.uniqueNode13 .icon, .prov-chart .uniqueNode13 + .program-icon{ color: #B9D7ED; fill: #B9D7ED; } .prov-chart .node.uniqueNode14, .entitydetails.uniqueNode14{ border-color:#E7E9B9; stroke:#E7E9B9; } .prov-chart .uniqueNode14 .icon, .provenance-statement .node-link.uniqueNode14 .icon, .prov-chart .uniqueNode14 + .program-icon{ color: #E7E9B9; fill: #E7E9B9; } .prov-chart .node.uniqueNode15, .entitydetails.uniqueNode15{ border-color: #DCB9ED; stroke: #DCB9ED; } .prov-chart .uniqueNode15 .icon, .provenance-statement .node-link.uniqueNode15 .icon, .prov-chart .uniqueNode15 + .program-icon{ color: #DCB9ED; fill: #DCB9ED; } .prov-chart .node.uniqueNode16{ border-color:#B9EDE0; stroke:#B9EDE0; } .prov-chart .uniqueNode16 .icon, .provenance-statement .node-link.uniqueNode16 .icon, .prov-chart .uniqueNode16 + .program-icon{ color: #B9EDE0; fill: #B9EDE0; } .prov-chart .node.uniqueNode17, .entitydetails.uniqueNode17{ border-color:#8F2323; stroke:#8F2323; } .prov-chart .uniqueNode17 .icon, .provenance-statement .node-link.uniqueNode17 .icon, .prov-chart .uniqueNode17 + .program-icon{ color: #8F2323; fill: #8F2323; } .prov-chart .node.uniqueNode18, .entitydetails.uniqueNode18{ border-color:#23628F; stroke:#23628F; } .prov-chart .uniqueNode18 .icon, .provenance-statement .node-link.uniqueNode18 .icon, .prov-chart .uniqueNode18 + .program-icon{ color: #23628F; fill: #23628F; } .prov-chart .node.uniqueNode19, .entitydetails.uniqueNode19{ border-color:#8F6A23; stroke:#8F6A23; } .prov-chart .uniqueNode19 .icon, .provenance-statement .node-link.uniqueNode19 .icon, .prov-chart .uniqueNode19 + .program-icon{ color: #8F6A23; fill: #8F6A23; } .prov-chart .node.uniqueNode20, .entitydetails.uniqueNode20{ border-color:#6B238F; stroke:#6B238F; } .prov-chart .uniqueNode20 .icon, .provenance-statement .node-link.uniqueNode20 .icon, .prov-chart .uniqueNode20 + .program-icon{ color: #6B238F; fill: #6B238F; } .prov-chart .node.uniqueNode21, .entitydetails.uniqueNode21{ border-color:#4F8F23; stroke:#4F8F23; } .prov-chart .uniqueNode21 .icon, .provenance-statement .node-link.uniqueNode21 .icon, .prov-chart .uniqueNode21 + .program-icon{ color: #4F8F23; fill: #4F8F23; } .prov-chart .node.uniqueNode22, .entitydetails.uniqueNode22{ border-color:#000000; stroke:#000000; } .prov-chart .uniqueNode22 .icon, .provenance-statement .node-link.uniqueNode22 .icon, .prov-chart .uniqueNode22 + .program-icon{ color: #000000; fill: #000000; } .prov-chart .node.uniqueNode23, .entitydetails.uniqueNode23{ border-color:#737373; stroke:#737373; } .prov-chart .uniqueNode23 .icon, .provenance-statement .node-link.uniqueNode23 .icon, .prov-chart .uniqueNode23 + .program-icon{ color: #737373; fill: #737373; } /*The context sections gets narrowed when there is one prov chart next to it*/ .gutters .entitydetails{ width: 60%; /* IE fallback */ width: calc(100% - 215px); /* 100% - prov-chart width - (padding + borders)*/ display: inline-block; margin-left: 105px; box-sizing: border-box; } .form-horizontal .controls.entitydetails{ margin-left: 100px; } .form-horizontal .controls.entitydetails.hasProvLeft{ margin-left: 0px; width: calc(100% - 305px); display: inline-block; } .form-horizontal .controls.entitydetails.hasProvRight{ width: calc(100% - 278px); display: inline-block; } .form-horizontal .controls.entitydetails.hasProgramsRight.hasProvRight { width: calc(100% - 336px); } .form-horizontal .controls.entitydetails.hasProgramsRight{ margin-right: 58px; } .form-horizontal .controls.entitydetails.hasProgramsLeft { margin-left: 58px; } .form-horizontal .controls.entitydetails.hasProvLeft .thumbnail.pdf{ margin-left: 60px; } #article-container.hasProvLeft table.download-contents .name, #article-container.hasProvRight table.download-contents .name{ min-width: 100px; max-width: 350px; } #article-container.hasProvLeft.hasProvRight table.download-contents .name{ min-width: 100px; max-width: 250px; } .downloads-this-version{ font-size: 12px; } /*The metadata gets narrowed even more when there are two prov charts next to it */ .hasProvLeft.hasProvRight, .entitydetails.hasProvLeft.hasProvRight{ margin-left: 0px; width: calc(100% - 230px); } #article-container.hasProvLeft, #article-container.hasProvRight{ width: 80%; width: calc(100% - 110px); padding: 20px; box-sizing: border-box; display: inline-block; border-width: 1px; border-style: solid; border-radius: 4px; } #article-container.hasProvLeft.hasProvRight{ width: 70%; width: calc(100% - 214px); } /* The metadata is narrowed even more when there are programs */ .form-horizontal .entitydetails.hasPrograms.hasProvLeft{ margin-left: 57px; width: calc(100% - 272px); /* When there is a program column on one side */ } .form-horizontal .entitydetails.hasPrograms.hasProvRight{ margin-right: 57px; width: calc(100% - 362px); /* When there is a program column on one side */ } .form-horizontal .entitydetails.hasProvLeft.hasProvRight.hasPrograms{ width: calc(100% - 334px); /* When there are program columns on both sides */ } /* MDQ */ #mdqResult .alert [data-toggle="collapse"]:after { /*content: "\e072"; "play" icon */ content: "-"; float: right; color: #b0c5d8; font-size: 18px; line-height: 22px; } #mdqResult .alert [data-toggle="collapse"].collapsed:after { content: "+"; } .mdq .popover { max-width: 50%; } #mdqResult .progress { margin-bottom: 10px; margin-top: 0px; } #mdqResult .progress-bar-success { opacity: 0.50; } .list-group-item.success .icon-caret-right, .list-group-item.success .icon-caret-down, .list-group-item.warning .icon-caret-right, .list-group-item.warning .icon-caret-down, .list-group-item.info .icon-caret-right, .list-group-item.info .icon-caret-down, .list-group-item.danger .icon-caret-down, .list-group-item.danger .icon-caret-right{ color: #333; } .list-group-item .icon-caret-right, .list-group-item.collapsed .icon-caret-down{ display: none; } .list-group-item .icon-caret-down, .list-group-item.collapsed .icon-caret-right{ display: inline; } .list-group-item.collapse { padding: 0px; border: 0px; margin-bottom: 0px; } .list-group-item.collapse.in{ padding: 10px 15px; border: 1px solid #DDD; margin-bottom: -1px; } .check.fail .icon{ color: #960303; } .fail.check .icon-remove{ font-size: 1em; color: #FFF; } .check.fail .icon-sign-blank{ font-size: 1.3em; } .check .icon{ font-size: 1.3em; max-width: 20px; } .check .icon-stack{ max-width: 20px; } .check.warn .icon { color: #c09853; font-size: 1.6em; } .check.warn .icon-exclamation{ font-size: .9em; } .check.info-check .icon{ color: #3a87ad; } .check.info-check .icon-info{ font-size: .8em; } .check .icon.subtle{ color: #999; font-size: 1em; } #mdqTypeSummary { float: right; width: 70%; } #mdqResult #data-chart { height: 220px; width: 250px; margin:0px; } /* different colors for each pie slice */ #mdqResult .donut.data > g:nth-child(1) .donut-arc { fill: #b3e69f; } #mdqResult .donut.data > g:nth-child(1) .donut-arc-label, #mdqResult .donut.data > g:nth-child(1) .donut-arc.active { fill: #468847; } #mdqResult .donut.data > g:nth-child(2) .donut-arc { fill: #fff0a1; } #mdqResult .donut.data > g:nth-child(2) .donut-arc-label, #mdqResult .donut.data > g:nth-child(2) .donut-arc.active { fill: #c09853; } #mdqResult .donut.data > g:nth-child(3) .donut-arc { fill: #fbb0b0; } #mdqResult .donut.data > g:nth-child(3) .donut-arc-label, #mdqResult .donut.data > g:nth-child(3) .donut-arc.active { fill: #b94a48; } #mdqResult .donut.data > g:nth-child(4) .donut-arc { fill: #91d7fb; } #mdqResult .donut.data > g:nth-child(4) .donut-arc-label, #mdqResult .donut.data > g:nth-child(4) .donut-arc.active { fill: #3a87ad; } #mdqResult .donut-labels{ opacity: 0.0; } #mdqResult .donut-arc.active + .donut-labels, #mdqResult .donut-arc.active + .donut-labels .donut-arc-count.rotated{ opacity: 1; font-weight: bold; } /* MDQ boxplot */ #mdq-score{ margin-left: 0%; } #mdq-score-num { font-weight: bold; font-size: 1.5em; } #mdq-score .icon{ margin-left: 10px } #mdq-box-plot{ margin-bottom: 0px; margin-top: 0px; } #mdq-box { width: 0%; height: 20px; margin-left: 0%; } #mdq-repo-score{ margin-left: 0%; } #mdq-repo-score .icon{ margin-left: 10px } /* Prov chart popovers */ .prov-chart .popover{ min-width: 300px; } .prov-chart .popover-content{ padding: 0px; } .popover-content .provenance-statement.list-group{ margin: 10px; } .popover-content .well.header{ margin-bottom: 0px; border-radius: 0px; padding-bottom: 0px; padding-top: 0px; } .prov-chart .popover-content .header > .name{ font-size: 1.2em; word-wrap: break-word; } .prov-chart .popover-content .header > .subtle{ margin-bottom: 0px; } .prov-chart .popover .citation{ font-size: 1em; line-height: 1.7em; } .prov-chart .popover .btn{ display: block; margin-bottom: 10px; } .prov-chart .popover-title{ font-size: 1em; } .prov-chart .popover-title i{ font-size: 1.2em; } .prov-chart .popover .thumbnail{ margin-bottom: 20px; height: auto; width: 100%; padding: 0px; } .prov-chart .popover h7{ font-style: italic; margin-bottom: 10px; display: block; color: #888; } .popover-content > div > h6 { margin-bottom: 0px; margin-top: 0px; font-size: .9em; } .popover-content > div > .name { margin-top: 0px; font-size: 1em; } #Metadata .popover-content .citation{ font-size: 1em; font-weight: normal; } /****************************************** ** Collapsable Lists (ExpandCollapseView) ** ******************************************/ .expand-collapse .collapsed{ display: none; } .expand-collapse .control{ margin-right: 2px; border-bottom: 1px dotted #999; } .expand-collapse .control, .expand-collapse .expanded{ display: inline-block; } .expand-collapse .control.collapse{ overflow: visible; margin-left: 5px; display: inline; } .provenance-statement .expand-collapse{ display: block; } .expand-collapse .control.hidden{ display: none; } .expand-collapse .spacer{ margin-right: 10px; } /****************************************** ************ Popup Login ************** ******************************************/ .nav.list-group > .list-group-item img.icon{ width: 32px; height: auto; padding: 16px; } .scroll-y{ overflow-y: scroll; -webkit-transform: translate3d(0,0,0); } .inline input, .inline label{ float: left; display: inline; font-size: .9em; } .inline input{ margin-right: 10px; margin-left: 30%; } #signInPopup .orcid-signin { margin-top: 10%; } .sign-in-ldap select{ width: 220px; } .modal.container{ padding: 20px 20px 40px 20px; } .modal .container{ width: auto; margin-bottom: 20px; } .sign-in.modal .close { font-size: 2em; } .sign-in-btns .notification, .login .notification{ margin-top: 20px; } #Navbar .sign-in-btns .notification{ display: none; } /** The ORCID Sign In button **/ .orcid-btn{ border: 1px solid #aacf14; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; background-color: #FFF; padding: 15px 20px; color: #aacf14; text-decoration: none; margin-bottom: 10px; margin-top: 10px; display: inline-block; font-weight: bold; } .orcid-btn img { height: 1.5em; margin-right: 5px; } .orcid-btn:hover{ background-color: #aacf14; transition: all 500ms; text-decoration: none; } .orcid-btn:hover > span{ color: #FFF; text-decoration: none; } /* MAIN CONTENT --------------------------------- */ #mainContent{ padding: 20px; } #mainContent h1{ font-size: 2em; text-align: center; display: inline-block; width: 100%; margin-bottom: 20px; } #mainContent .form-input{ display: grid; grid-template-columns: 90% 10%; width: 100%; } #mainContent input{ border-radius: 8px 0px 0px 8px; -moz-border-radius: 20px 0px 0px 20px; font-size: 2em; padding-left: 20px; width: 100%; height: 100%; } #mainContent input::-webkit-input-placeholder{ padding-top: 7px; } #mainContent input:-moz-placeholder{ /* Firefox 18- */ padding-top: 7px; } #mainContent input::-moz-placeholder{ /* Firefox 19+ */ padding-top: 7px; } #mainContent input:-ms-input-placeholder{ padding-top: 7px; } #search_btn_main{ -webkit-border-radius: 0 8px 8px 0; -moz-border-radius: 0 15px 15px 0; border-left: 0px; -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); height: 100%; padding: 4px; align-content: center; display: grid; font-size: 1.5em; } #search_btn_main > i{ color: #FFF; } /****************************************** ** The Metadata and MetadataIndex View ** ******************************************/ #metadata-index-details .General .title, #metadata-index-details .Other .text, #metadata-index-details .Other .attributeDescription, #metadata-index-details .Other .checksum, #metadata-index-details .Other .dataUrl, #metadata-index-details .Other .fileID, #metadata-index-details .Other .size, #metadata-index-details .Other .resourceMap, #metadata-index-details .Other .presentationCat, #metadata-index-details .Other .checksumAlgorithm, #metadata-index-details .Other .author, #metadata-index-details .Other .authorGivenName, #metadata-index-details .Other .authorGivenNameSort, #metadata-index-details .Other .authorSurName, #metadata-index-details .Other .authorSurNameSort, #metadata-index-details .Other .authorLastName, #metadata-index-details .Other .replicaVerifiedDate, #metadata-index-details .Other .sku, #metadata-index-details .Other .identifier, #metadata-index-details .Other [class*=" prov_"], #metadata-index-details .Other [class*=" geohash_"], #metadata-index-details .Other [class^="geohash_"] { display: none; } #metadata-index-details .entitydetails .size{ display: inherit; } #Metadata .citation, #Content.no-stylesheet .citation, #Metadata > .container > .row-fluid > .citation, #Metadata > .container > .row-fluid > form > .citation{ font-size: 1.4em; line-height: 1.7em; margin-bottom: 20px; border: 0px; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; padding: 0px; background-color: transparent; display: block; font-weight: lighter; width: 100%; float: none; } #Metadata .citation-container.has-data-source, #Content.no-stylesheet .citation-container.has-data-source, #Metadata > .container > .row-fluid > .citation-container.has-data-source, #Metadata > .container > .row-fluid > form > .citation-container.has-data-source{ width: 83%; width: calc(100% - 130px); float: left; margin-bottom: 0px; } .citation-container.has-data-source { width: calc(100% - 130px); float: left; } #Metadata .citation .title, #Content.no-stylesheet .citation .title{ font-weight: bold; } #Metadata{ padding-left: 0px; padding-right: 0px; width: 100%; } .entitydetails.controls-well > .thumbnail{ margin-left: 180px; } .citation ~ .inline-input-group > .input-append{ float: right; margin-bottom: 0px; } .input-append.inline input[type='text']{ margin-right: 0px; margin-left: 0px; } .metadata-view .controls-container{ margin-bottom: 20px; padding: 10px; } .metadata-view .controls-container > .controls{ display: inline-block; float: right; margin-top: 0px; margin-bottom: 0px; } .metadata-view .controls-container > .controls .inline-buttons{ margin-top: 0px; margin-bottom: 0px; } .controls-well.annotations-container{ box-shadow: none; border: 0px; } body > .alert-container { position: fixed; top: 115px; left: 50%; min-width: 75%; z-index: 1; transform: translateX(-50%); } /* Hide the elements from the view service that we don't need to display */ #Metadata form > .citation, #Metadata #downloadPackage{ display: none; } /* Used in metadata view for metadata format types without stylesheet */ #Content > pre, #Metadata pre { background-color: #EEE; color: #333; font-family: inherit; font-size: 1em; } #Metadata table .copy{ min-width: 50px; } #Content.no-stylesheet.container{ width: 86%; } #Content.no-stylesheet.container > .breadcrumb{ width: 100%; margin-top: 20px; } #Content.no-stylesheet > .breadcrumb~.citation{ margin-top: 20px; } /* Padding at the bottom to avoid scrollbar overlap */ #attributeTabs{ padding-bottom: 25px; } .attributeList > .row-fluid > .span2 { max-width: 300px; max-height: 700px; overflow: scroll; width: 25%; } .attributeList > .row-fluid > .span10{ width: 72%; } .attributeListTable tr td:last-child a{ white-space: nowrap; max-width: 100%; font-weight: 600; font-size: .9em; } .attributeListTable { table-layout: fixed; width: 100%; } /* Make the icon column 16px wide */ .attributeListTable tr td:first-child { width: 19px; } /* The active attribute in the attribute name list */ .attributeListTable tr.active{ background-color: #166194; } .attributeListTable tr.active a{ color: #FFF; } .controls-well > .party{ margin-bottom: 30px; border-bottom: 1px solid #DDD; } /* ---- Taxonomic range ---- */ .taxonomicCoverage .control-group{ margin-bottom: 20px; width: auto; } .taxonomicCoverage > .control-group{ margin-left: 180px; } .taxonomicCoverage .control-label{ width: auto; padding: 0px 10px; } .taxonomicCoverage .controls > .control-group:nth-child(2n){ margin-left: 107px; } .taxonomicCoverage .control-label{ color: #999; } .taxonomicCoverage .controls { margin-left: 0px; } /* ---- Analyze Button ---- */ div.dropdown.btn.btn-secondary.dropdown-toggle .icon-bar-chart { margin-right: 10px; } #metadata-controls-container > div.controls.btn-toolbar > div > button > span.analyze-text { margin-right:10px; font-weight: 600; } div.analyze.dropdown{ display: inline-block; } div.analyze.dropdown.open button.dropdown.btn.btn-secondary.dropdown-toggle{ display: inline-block; color:white; text-shadow: 0; background-color: #1C6E84; border-width: 0px; } .controls.btn-toolbar{ font-size: 1em; } .analyze.dropdown-menu { border: none; border-radius: 4px; padding: 0px; margin: 0px; } /**----------------------------------------**/ .metadata-view .citation{ margin-bottom: 20px; display: inline-block; font-size: 1.2em; line-height: 1.5em; } .citation-container + .data-source{ max-width: 125px; display: inline-block; float: right; margin-bottom: 10px; } .controls-container .info-icons{ display: inline-block; margin-left: 10px; margin-right: 20px; vertical-align: top; position: relative; font-size: 30px; } .controls-container .info-icons .icon-stack{ width: 1.25em; height: 1.25em; vertical-align: top; } .controls-container .info-icons .icon-stack .icon { margin-top: -15px; } .controls-container .info-icons .icon-stack .icon-stack-top{ color: #FFF; font-size: .75em; margin-top: -15px; } .controls-container .info-icons .icon-stack .icon-stack-base{ font-size: 1.25em; } .metadata-controls-container{ position: relative; } /* .metadata-controls-container>.copy-success{ position: absolute; top: -24px; left: 17px; font-size: .9em; } */ .citation-container ~ .data-source .ORNLDAAC, .citation-container ~ .data-source .CDL, .citation-container ~ .data-source .PISCO, .citation-container ~ .data-source .ONEShare, .citation-container ~ .data-source .KUBI, .citation-container ~ .data-source .CLOEBIRD, .citation-container ~ .data-source .EDACGSTORE, .citation-container ~ .data-source .NKN{ max-width: 175px; } .citation-container ~ .data-source .KNB, .citation-container ~ .data-source .LTER{ max-height: 90px; } /****************************************** * Metrics Controller Styling ********************************************/ .metrics-container{ display: inline-block; margin-top: 0px; margin-bottom: 0px; } /*********** Defult button styling for Metrics views ***********/ a.btn.metrics { min-width: 164px; margin-bottom: 0px; } .metric-value > .icon.metric-icon { font-size: 18px; } .metric-value.badge { float: right; background-color: #333; margin-top: 2px; margin-left: 10px; } .metric-icon { margin-right: 10px; float: left; padding-top: 1px; } .metric-name { float: left; } .metric-value { float: right; } i.icon.icon-cloud-download { font-size: 1.2em !important; } i.icon.icon-eye-open { font-size: 1.2em !important; } .btn-group+.btn-group, .btn-toolbar>.btn+.btn, .btn-toolbar>.btn+.btn-group, .btn-toolbar>.btn-group+.btn { margin-left: 15px; } i.icon.metric-icon.icon-spinner.icon-spin { margin-top: 2px; margin-right: 15px; } /* Style for the toolbars that contains buttons in the well on either side. */ .metric-toolbar { float: left; width: auto; } .controls-container .controls { border-left: 1px solid #E3E3E3; float: right; padding-left: 10px; } .controls .btn{ margin-bottom: 0px; } /* Making the publish button consistent size as the downloads all*/ #owner-controls-container > .btn { margin-right: 10px; } #owner-controls-container > .btn[disabled]{ cursor: not-allowed; } .edit-toolbar > #owner-controls-container #publish { width: 138px; } #metric-modal { z-index: 1050; top: 15%; width: 90%; height: 500px; left: 5%; margin-left: 0px; } #metric-modal .modal-content { width: auto; } #metric-modal .modal-header { height: 25px; } #metric-modal .modal-body { width: 100%; height: 400px; max-height: 400px; padding: 1em; padding-bottom: 100px; background-color: #FFFFFF; box-sizing: border-box; display: grid; grid-template-columns: 80fr 20fr; column-gap: 40px; } #metrics-modal #metrics-chart{ width: 100%; } #metric-modal .modal-footer { height: 25px; padding-top: 18px; } #metric-modal .modal-header .icon { padding: 0px 9px; } #metric-modal .modal-header .left-header-section { float: left; width: 90%; margin-top: 3px; } #metric-modal .modal-header .right-header-section { float: right; width: 10%; } #metric-modal .modal-body .modal-description p { margin: 0 0 25px; } .empty-citation-list { grid-template-rows: 3em 100fr; grid-template-columns: 100fr; justify-items: center; align-items: start; justify-content: stretch; padding: 1em; grid-row-gap: 20px; display: grid; background-color: #f5f5f5; width: calc(120% + 40px); /*Stretch across both columns in grid*/ } .register-citation-modal-header{ height: 25px; } .register-citation-modal-header > .left-header-section{ width: 90%; float: left; margin-top: 3px; } .register-citation-modal-header > .right-header-section{ width: 10%; float: right; margin-top: 3px; } .register-citation-element { display: grid; align-items: center; justify-content: center; } .register-citation-element .btn{ justify-self: center; } #publication-identifier.register-citation-doi-validation { border: 1px solid red; } /****************************************** * Search Page / Data Catalog Page Metrics ******************************************/ .catalog-metrics{ float: right; margin-right: 0px; } .catalog-metrics .badge { background-color: #dedede; color: #666; min-width: 47px; text-align: center; } i.catalog-metric-icon { margin-right: 3px; } /********************************************************** * Metric Modal / Profile Chart (Views, Downloads, Citations) * ***********************************************************/ #user-views-chart, #user-downloads-chart { width: 90%; } .metric-chart-loading { display: flex; box-sizing: border-box; position: relative; max-height: 390px; justify-content: center; } .metric-chart-loading .message{ text-align: center; padding: rem 1.2rem; font-size: 1.1rem; box-shadow: 0 1px 3px -1px rgba(0,0,0,0.15), 0 1px 14px -6px rgba(0,0,0,0.28); } .metric-chart-loading .message strong { display: block; font-weight: 600; margin-top: 0.3rem; } /* ============ GENERAL CHART TEXT STYLE =========== [metric modal / profile chart] */ #metric-modal .metric-chart text, .views-metrics .metric-chart text, .downloads-metrics .metric-chart text { fill: #565656; font-size: 10px; font-family: Helvetica, Arial, "sans serif"; } /* ============ WHEN THERE IS NO DATA: =========== [metric modal / profile chart] */ #metric-modal .metric-chart text.no-data, .views-metrics .metric-chart text.no-data, .downloads-metrics .metric-chart text.no-data { font-size: 16px; font-weight: 100; fill:#555555; } #metric-modal .metric-chart rect.no-data, .views-metrics .metric-chart rect.no-data, .downloads-metrics .metric-chart rect.no-data { fill: #f5f5f5; } /* ============ WHEN THERE IS DATA: =========== [metric modal / profile chart] */ /* --- AXES --- [metric modal / profile chart] */ /* --- x axis focus --- */ #metric-modal .metric-chart .focus .axis, .views-metrics .metric-chart .focus .axis, .downloads-metrics .metric-chart .focus .axis { shape-rendering: crispEdges; } #metric-modal .metric-chart .focus .x.axis, .views-metrics .metric-chart .focus .x.axis, .downloads-metrics .metric-chart .focus .x.axis { clip-path: url(#clip); } #metric-modal .metric-chart .focus .x.axis line, .views-metrics .metric-chart .focus .x.axis line, .downloads-metrics .metric-chart .focus .x.axis line { display: none; } #metric-modal .metric-chart .focus .x.axis .tick:hover, .views-metrics .metric-chart .focus .x.axis .tick:hover, .downloads-metrics .metric-chart .focus .x.axis .tick:hover { cursor: default; } /* --- x axis context --- */ #metric-modal .metric-chart .context .x.axis line, .views-metrics .metric-chart .context .x.axis line, .downloads-metrics .metric-chart .context .x.axis line { display: none; } #metric-modal .metric-chart .context .x.axis, .views-metrics .metric-chart .context .x.axis, .downloads-metrics .metric-chart .context .x.axis { clip-path: url(#clip); } #metric-modal .metric-chart .context .x.axis .domain, .views-metrics .metric-chart .context .x.axis .domain, .downloads-metrics .metric-chart .context .x.axis .domain { display:none; } /* --- focus y-axis --- */ #metric-modal .metric-chart .focus .y.axis .domain, .views-metrics .metric-chart .focus .y.axis .domain, .downloads-metrics .metric-chart .focus .y.axis .domain { display: none; } #metric-modal .metric-chart .y.axis.title, .views-metrics .metric-chart .y.axis.title, .downloads-metrics .metric-chart .y.axis.title { font-size: 13px; font-weight: 100; } /* horizontal focus gridlines */ #metric-modal .metric-chart .y.axis line, .views-metrics .metric-chart .y.axis line, .downloads-metrics .metric-chart .y.axis line { stroke: #565656; stroke-dasharray: 2,2; stroke-opacity: 0.3; } /* --- BRUSH --- [metric modal / profile chart] */ /* --- brush window --- */ #metric-modal .metric-chart .brush .extent, .views-metrics .metric-chart .brush .extent, .downloads-metrics .metric-chart .brush .extent { fill-opacity: .07; shape-rendering: crispEdges; clip-path: url(#clip); fill: #70706c; } /* --- brush handles --- */ #metric-modal .metric-chart .resize .handle, .views-metrics .metric-chart .resize .handle, .downloads-metrics .metric-chart .resize .handle { fill: #555; } #metric-modal .metric-chart .resize .handle-mini, .views-metrics .metric-chart .resize .handle-mini, .downloads-metrics .metric-chart .resize .handle-mini { fill: white; stroke-width: 1px; stroke: #555; } /* --- ZOOM TO BUTTONS --- [metric modal / profile chart] */ #metric-modal .metric-chart .scale_button rect, .views-metrics .metric-chart .scale_button rect, .downloads-metrics .metric-chart .scale_button rect { fill: #eaeaea; } #metric-modal .metric-chart .scale_button:hover text, .views-metrics .metric-chart .scale_button:hover text, .downloads-metrics .metric-chart .scale_button:hover text { fill: white; transition: all 0.1s cubic-bezier(.25,.8,.25,1); } #metric-modal .metric-chart .scale_button:hover rect, .views-metrics .metric-chart .scale_button:hover rect, .downloads-metrics .metric-chart .scale_button:hover rect { fill: grey; /* change for each theme */ transition: all 0.1s cubic-bezier(.25,.8,.25,1); } /* --- EXPLANATORY TEXT (# views/downloads) --- [metric modal / profile chart] */ #metric-modal .metric-chart text#totalCount, .views-metrics .metric-chart text#totalCount, .downloads-metrics .metric-chart text#totalCount { font-size: 15px; font-weight: bold; } #metric-modal .metric-chart text#displayDates, .views-metrics .metric-chart text#displayDates, .downloads-metrics .metric-chart text#displayDates { font-weight: bold; } /* --- BARS --- [metric modal / profile chart] */ #metric-modal .metric-chart .bar, #metric-modal .metric-chart .bar_context, .views-metrics .metric-chart .bar, .views-metrics .metric-chart .bar_context, .downloads-metrics .metric-chart .bar, .downloads-metrics .metric-chart .bar_context { fill: black; /* change for each theme */ stroke-width: 0; clip-path: url(#clip); } #metric-modal .metric-chart .bar, .views-metrics .metric-chart .bar, .downloads-metrics .metric-chart .bar { stroke: black; /* change for each theme */ cursor: default; } /* --- context bars --- */ /* --- PANE CURSORS --- [metric modal / profile chart] */ #metric-modal .metric-chart rect.pane, .views-metrics .metric-chart rect.pane, .downloads-metrics .metric-chart rect.pane { cursor: move; /* fallback if grab cursor is unsupported */ cursor: grab; fill: #FAFAFA; pointer-events: all; } #metric-modal .metric-chart rect.pane:active, .views-metrics .metric-chart rect.pane:active, .downloads-metrics .metric-chart rect.pane:active { cursor: move; /* fallback if grab cursor is unsupported */ cursor: grabbing; } /* --- TOOLTIPS --- [metric modal / profile chart] */ #metric-modal div.metric_tooltip, .views-metrics div.metric_tooltip, .downloads-metrics div.metric_tooltip { position: fixed; text-align: center; height: 25px; padding: 2px; font: 10px sans-serif; background: white; color: #565656; border: 0px; border-radius: 2px; pointer-events: none; box-shadow: 0 0px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } .views-metrics div.metric_tooltip, .downloads-metrics div.metric_tooltip { position: relative; } /* ====== END: Metrics modal / profile chart ====== */ .metric-table.table.table-striped.table-condensed { width: 100%; } .metric-table.table.table-striped.table-condensed td { padding: 1em 1em 1em 2em; } .metric-table.table.table-striped.table-condensed td > .citation { margin-left: -1em; } button.modal-btn.btn.btn-default { all: unset; cursor: pointer; } /*********** Non-clickable (Disabled) button styling for metrics views ***********/ a.btn.metrics-button-disabled { width: 164px; color: #777; border-color: #CCC; background-color: #efefef; cursor: default; } a.btn.metrics-button-disabled:hover{ background-color: transparent; } .metrics-button-disabled> .metric-value.badge { float: right; color: #FFF; margin-left: 20px; background-color: #777; margin-top: 2px; } .metrics-button-disabled.metric-icon { margin-right: 10px; float: left; } .metrics-button-disabled.metric-name { float: left; margin-right: 10px; } .metrics-button-disabled.metric-value { float: right; } .metrics-button-disabled:hover, .metrics-button-disabled:click { color: #888888; background-color: #F5F5F5; border-color: #C3C3C3; } /****************************************** * Repository + User Profile Metrics ********************************************/ section#user-citations { min-height: 300px; } #user-summary .charts{ display: flex; } #user-summary .summary-container{ flex: 1; } .metrics-title > h3 { display: inline-block; margin-bottom: 15px; } .metric-description { margin-bottom: 40px; } .views-metrics .metric-chart, .downloads-metrics .metric-chart { margin: 0 auto; } .citations-metrics-list { overflow-y: auto; max-height: 300px; content: " "; display: block; clear: both; } .citations-metrics-list > .metric-table.table.table-striped.table-condensed { width: 90%; height: 5%; max-height: 240px; overflow-y: scroll; top: unset; margin: 0 auto; } .citations-metrics-list > .empty-citation-list { width: 66%; height: 5%; top: unset; left: 25%; margin: 0 auto; } .citations-metrics-list > .metric-table.table.table-striped.table-condensed td { padding: 5px 15px 5px 85px; background-color: #f9f9f9; } .citations-metrics-list > .metric-table.table.table-striped.table-condensed td > .citation { margin-left: -70px; } /****************************************** * The Data Details box in the Metadata View ********************************************/ .entitydetails{ border-width: 1px; border-style: solid; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; margin-bottom: 20px; margin-left: 0px; padding: 20px; width: 85%; width: calc(100% - 180px); } .entitydetails tr, .entitydetails table, .entitydetails tbody, .entitydetails td { word-wrap: break-word; box-sizing: border-box; } .entitydetails > h4 > *{ float: left; margin-bottom: 20px; } .entitydetails > h4 > i{ font-size: 1.5em; } .entitydetails > h4 > .title{ width: 80%; width: calc(100% - 175px); margin-left: 20px; word-wrap: break-word; } .entitydetails > h4 > .btn{ float: right; } .entitydetails > .control-group{ clear: both; } .entitydetails a.download{ margin-left: 180px; margin-bottom: 20px; } .form-horizontal .entitydetails > label{ text-align: left; font-weight: bold; width: 98%; width: calc(100% - 5px); background-color: #CCCCCC; padding: 5px; color: white; margin-bottom: 20px; border-top-left-radius: 4px; border-top-right-radius: 4px; margin-left: -5px; margin-top: -5px; padding-left: 10px; } /****************************************** * Annotations ********************************************/ .annotator-adder, .annotator-outer, .annotator-notice { z-index: 999; } .annotation-container{ margin-left: 180px; } .annotation-container .add-tag{ margin-left: 10px; margin-top: 10px; margin-bottom: 20px; text-shadow: none; } .annotation-attribute-name{ font-size: 0px; } .annotation-target{ height: 0px; margin-left: 180px; } .annotator-listing > .annotator-checkbox:nth-child(2n), .annotator-listing > .annotator-checkbox:nth-child(3n) { display: none; } #annotator-field-0, #annotator-field-5{ display: none; } .annotator-widget span{ padding: 7px; display: inline-block; } .annotator-widget .annotator-resize{ display: none; } .annotator-filter{ display: none; } .annotator-field p{ padding: 10px; } .annotation.tag { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; font-style: normal; font-weight: 400; text-shadow: none; box-shadow: none; text-align: center; } .annotation-viewer-container .annotation.tag{ display: inline-block; } .annotator-tags, .annotator-viewer .annotator-item, .annotator-viewer div{ border-top: 0px; } .annotator-tags > .annotator-tag, .annotator-annotation .annotator-tag{ display: none; } .annotator-viewer div:first-of-type{ padding-top: 0px; padding-bottom: 0px; } .annotator-widget * { font-style: normal; color: #333; } .annotator-widget .subtle{ color: #999; } .annotator-widget .smaller{ font-size: .9em; } .annotator-widget .tag-date{ display: block; padding-left: 0px; } .annotator-viewer .container { padding-top: 10px; margin-top: 10px; } .annotator-viewer .annotator-controls{ display: none; } .annotation-flag.btn, .annotation-delete.btn { border-width: 0px; margin-bottom: 0px; margin-right: 10px; margin-left: -7px; border-top-left-radius: 0px; border-bottom-left-radius: 0px; border: 0px; padding: 6px; font-size: 1em; line-height: 0em; margin-top: -3px; } .annotation-flag.btn:hover, .annotation-delete.btn:hover{ border-width: 0px; } .annotation-delete.btn-warning, .annotation-flag.btn-warning { background-image: inherit; background-color: #da4f49; color: white; } .annotation-delete.btn-warning:hover, .annotation-flag.btn-warning:hover{ background-color: #f73f3f; } .annotation-flag.btn-success { background-color: #5bb75b; color: #FFF; } .annotation-flag.btn-success:hover{ background-color: #66ce66; } .annotation-viewer-container .warning{ color: #d00000; } .annotator-editor .annotator-controls{ background-image: none; background-color: #FFF; padding-top: 10px; } .annotator-editor .annotator-checkbox, .annotator-editor #annotator-field-4, .annotator-editor .annotator-item label[for="annotator-field-4"]{ display: none !important; } .ui-autocomplete.annotator{ z-index: 9999; } .popover-title { text-transform: capitalize; } .popover-title code { text-transform: none; margin-left: 20px; margin-top: -3px; } /* Don't force capitalization on annotation popover titles */ .annotation > .popover-title { text-transform: none; } .annotation { cursor: pointer; } .annotation-viewer-container .concept a{ white-space: pre-wrap; } .annotation.tag.warning { background-color: #999; color: #DDD; } /* Force hyperlinks in popovers to wrap */ .annotation .popover .popover-content a { white-space: normal; } /* Annotation pill stuff */ .annotations-container { display: flex; flex-wrap: wrap; box-shadow: none; border: 0px; } .annotation { display: inline-flex; margin: 0 6px 6px 0; } /** Annotation icon **/ .annotation-icon{ display: inline-block; height: 1em; line-height: 1em; font-size: .9em; } .attributeListTable .annotation-icon{ width: .6em; line-height: .9em; margin-left: -5px; font-size: 2.5em; } .attributeListTable .annotation-icon .icon{ font-size: .5em; } .attributeListTable .annotation-icon .icon-ok{ font-size: .25em; } .annotation-icon .icon{ color: #FFF; } .annotation-icon .icon.icon-stack-base{ color: #337ab7; } .icons.annotations .icon-stack { vertical-align: -15%; } .icons.annotations .icon.icon-stack-base { font-size: 1.25em; } .icons.annotations .icon.icon-ok { font-size: 0.65em; } /** Annotation pills **/ .annotation .annotation-property, .annotation .annotation-value { padding: 3px 6px; } .annotation .annotation-property { background-color: #EEE; border-width: 1px 0 1px 1px; border-style: solid; border-color: #CCC; border-radius: 3px 0px 0px 3px; } .annotation .annotation-value { background-color: #337ab7; border-width: 1px 0px 1px 0px; border-style: solid; border-color: #337ab7; border-radius: 0px 3px 3px 0px; } .annotation .annotation-value .annotation-value-text { color: white; } .annotation .annotation-remove { padding: 3px 10px; } .annotation .annotation-remove { padding: 3px 10px; } .annotation-popover-definition { padding: 0.5rem 0; margin: 0.5rem 0; } .annotation-popover-definition { border-top: 1px solid #CCC; border-bottom: 1px solid #CCC; } /* MeasurementTypeView */ .measurement-type-browse { display: grid; grid-template-columns: 2fr 1fr; max-height: 12em; overflow-y: scroll; } /* MeasurementTypeView */ .measurement-type-browse { display: grid; grid-template-columns: 2fr 1fr; max-height: 12em; overflow-y: scroll; } .measurement-type-browse-tree { border: 1px solid #ccc; border-radius: 5px; padding: 0.5rem; box-sizing: border-box; } .measurement-type-browse-tree > ul { list-style-type: none; } .measurement-type-browse-tree input.ncboAutocomplete { border: 1px solid #ccc; border-radius: 3px; width: 100%; } .measurement-type-browse-side { border-collapse: collapse; } .measurement-type-browse-side button { border-radius: 0px 5px 5px 0px; border-left: none; margin-bottom: 0.25rem; } /** Hide the search when in the dropdown menu **/ .dropdown-menu .ncboAutocomplete { display: none; } #bioportal-tree-annotator { max-height: 200px; overflow-y: scroll; } #bioportal-tree-label .annotation.tag.btn { margin-left: 10px; margin-top: -20px; margin-bottom: 10px; } .ncboAutocomplete .ui-menu .ui-menu-item a.ui-state-focus, .ncboAutocomplete .ui-menu .ui-menu-item a.ui-state-hover, .ncboAutocomplete .ui-menu .ui-menu-item a.ui-state-active, .ui-menu-item a { text-shadow: none; font-size: 14px; width: 100%; } .ncboAutocomplete .jsonSuggest { overflow-x: scroll; } .ncboAutocomplete > .ui-autocomplete .ui-menu-item { overflow: visible; } .ncboTree { width: auto; max-height: 300px; } ul.ncboTree { overflow: scroll; } .ncbo-tree-buttons-container { position: absolute; top: 0; right: 0; } /** hide the tree until we have it where we want it **/ #bioportal-tree { display: none; } .dropdown-menu #bioportal-tree { display: block; } #bioportal-popover #bioportal-tree { display: block; } #sidebar .input-append { font-size: 1em; } #bioportal-popover .popover{ max-width: 500px; width: 500px; } #bioportal-popover .popover-content{ width: 95%; } #bioportal-popover #bioportal-tree{ max-height: 400px; } #jumpUp { float: right; } #resetTree { float: right; } /* --- multiselect annotation filter */ .annotation-filter .searchable-select #bioportal-tree { display: block; margin-top: 0.5rem; overflow-x: auto; } .annotation-filter .searchable-select .menu { min-height: 10rem; } /* We use the input in the semantic UI input interface to search */ /* instead of the NCBO tree interface */ .annotation-filter .searchable-select input.ncboAutocomplete { display: none; } /* The contents of the dropdown menu is replaced with the annotation tree */ /* Hide all of the menu items that semantic UI inserets */ .annotation-filter .searchable-select .item, .annotation-filter .searchable-select .message { display: none !important; } /****************************************** * Images, Maps, and Media ********************************************/ .thumbnail{ height: auto; max-width: 100%; padding: 20px; margin-bottom: 20px; box-sizing: border-box; } .entitydetails .thumbnail{ margin-left: 180px; margin-top: 40px; padding: 20px; width: 350px; } .entitydetails .thumbnail.pdf{ width: 500px; } .entitydetails .thumbnail.pdf .zoom-in{ width: 500px; display: block; height: 2em; background-color: rgba(0,0,0,0.5); color: white; font-weight: normal; text-align: center; line-height: 2em; } .thumbnail img{ min-width: 100%; height: auto; } .thumbnail.map{ width: auto; max-width: 700px; } .control-group ~ .thumbnail{ margin-left: 180px; } img[src*="gstatic.com/"].georegion-map, img[src*="googleapis.com/"].georegion-map{ max-width: 100%; } .figure{ margin-top: 20px; margin-bottom: 20px; max-width: 100%; margin-right: auto; margin-left: auto; } .media { margin-top: 15px; } .media:first-child { margin-top: 0; } .media, .media-body { overflow: hidden; } .media-body { width: 10000px; } .media-body h5 a{ color: inherit; } .media-object { display: block; max-width: inherit; } .media-object.img-thumbnail { max-width: none; } .media-right, .media > .pull-right { padding-left: 10px; } .media-left, .media > .pull-left { padding-right: 10px; } .media-left, .media-right, .media-body { display: table-cell; vertical-align: top; } .media-middle { vertical-align: middle; } .media-bottom { vertical-align: bottom; } .media-heading { margin-top: 0; margin-bottom: 5px; } .media-list { padding-left: 0; list-style: none; } /****************************************** * EML Party display ********************************************/ .eml-party .name{ font-weight: bold; } /****************************************** * Image Uploader ********************************************/ /* Image upload error formatting (including validation) */ .dropzone .dz-error { color: #960303; } .dropzone.error { border-color: #960303; } .dropzone.error .dz-message { background-color: rgba(255,0,0,0.1); } .dz-image-preview div.dz-error-message{ top: 0; bottom: 0; position: absolute; color: #960303; box-sizing: border-box; padding: 4px; width: 100%; white-space: normal; min-height: 100%; max-height: 100%; display: flex; align-items: center; z-index: 0; /* make sure it's below clickable dropzone items */ line-height: 100%; } .port-editor-md .dz-image-preview div.dz-error-message { align-items: flex-start; padding-top: 19px; justify-content: center; } .remove-preview .dz-image-preview div.dz-error-message{ opacity: 0.2; } /* Image upload drag and drop zone */ .dropzone { background: #f6f6f6; border-radius: 3px; cursor: pointer; height:100%; width:100%; text-align: center; position: relative; box-sizing: border-box; } .dropzone .dz-message{ position: absolute; top: 0; bottom: 0; align-items: center; box-sizing: border-box; padding: 8px; width: 100%; justify-content: center; z-index: 2; /* make sure it's above .dz-error message because this element must be clickable */ } .dz-image-preview { white-space: nowrap; text-align: center; box-sizing: border-box; padding-bottom: 3px; /* to account for a 1.5px top border and 1.5px bottom border*/ } .vertical-align-image-helper { display: inline-block; height: 100%; vertical-align: middle; } /* when images are displayed as image elements */ .dz-image-preview img{ max-height: 100%; } /* when images are displayed as background of divs */ .dz-image-preview div{ background-repeat: no-repeat; background-position-x: 50%; background-position-y: 50%; background-size: cover; min-height: 296px; /* 300px - 4px for top and bottom border*/ color: #FFF; } /* the remove image button */ .dz-preview i { position: absolute; bottom: 0; right: 0; box-sizing: border-box; opacity: 0; font-size: 17px; padding:1px; margin: 2px; color: #ababab; cursor: pointer; } .dropzone:hover i { opacity:0.8; } /* show dashed outline when no image is uploaded, or when image is uploaded and user hovers */ .dropzone{ background-image: url(../img/transp_bg.png); } .dropzone.dz-started { border-color: #ededed; background: transparent; } .dropzone.dz-started .dz-message{ opacity: 0; } .dropzone, .dropzone.dz-started:hover, .dropzone.dz-started.dz-drag-hover { border: dashed 1.5px #999; } .dz-message{ transition: all .2s ease; } .dropzone{ transition: all .2s ease; } /* Hide help text if image is already uploaded, show when user hovers */ .dropzone:hover .dz-message, .dropzone.dz-started:hover .dz-message, .dropzone.dz-drag-hover .dz-message { background-color: rgba(0, 0, 0, 0.5); color: #FFF; opacity: 1; } .portal-display-image .dropzone .dz-message{ padding-top: 230px; } .portal-display-image .image-uploader.remove-preview .image-container{ opacity: .3; } .portal-display-image p.notification.error { text-align: center; } .logos-container .dropzone .icon-upload { font-size: 2.5em; margin-bottom: 10px; margin-top: 10px; } .dropzone .icon-upload{ display: block; font-size: 1.5em; } /****************************************** * Markdown Editor - Woofmark ********************************************/ /* The markdown editor is used in the portal editor markdown section. */ /* It uses the imageUploader view, and the woofdown component (prefixed with wk-). */ /* See https://github.com/bevacqua/woofmark */ /* and https://github.com/bevacqua/woofmark/blob/master/dist/woofmark.css */ /* markdown editor container - contains editor buttons & markdown textarea */ .wk-container { position: relative; margin: 5px 0; border: 1px solid #e5e5e5; border-radius: 2px; display: flex; flex-direction: column; } /* the markdown editor textarea field */ textarea.markdown { width: 100%; height: 50vh; overflow-y: scroll; overflow-x: hidden; margin: 5px 0 10px; line-height: 1.6em; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; /* so that the textarea is below any and all editor buttons/controls */ order: 99; } .wk-container textarea.markdown{ box-shadow: none; border: none; border-radius: 2px; margin: 0; } .wk-hide { display: none !important; } .wk-commands-divider{ display: inline-block; width: 1px; height: 21px; background-color: #ddd; margin: 10px 6px -7px 6px; } .wk-commands{ border-bottom: 1px solid #e5e5e5; background: #fafafa; padding-left: 0.5rem; } /* markdown editor button */ .wk-command { background-color: transparent; color: #333; border: 0; padding: 7px 10px; cursor: pointer; outline: none; margin: 2px; border-radius: 6px; transition: all 0.2s ease-in-out; } .wk-command svg { transition: fill 0.2s ease-in-out; fill: #333; } .wk-command:hover{ background-color: white; color: #2c7e90; } .wk-command:hover svg { fill: #2c7e90; } /* ---- Markdown editor modal ---- */ /* The modal type dialogs to add image or link */ .wk-prompt { position: fixed; top: 10%; left: 2%; right: 2%; z-index: 1050; width: fit-content; max-width: 95vw; background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.3); border-radius: 6px; box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); background-clip: padding-box; color: #555; padding: 0px; margin: 0 auto; display: table; /* works like width:fit-content in firefox */ } /* The close button is an empty link (a.wk-prompt-close), add font awesome close icon */ .wk-prompt-close::before { content: "×"; font-size: 25px; position: absolute; right: 10px; top: 10px; color: #000; text-shadow: 0 1px 0 #fff; opacity: .2; } .wk-prompt-close::before:hover { opacity: .3; } .wk-prompt-header{ padding: 9px 15px; border-bottom: 1px solid #eee; } .wk-prompt-title { margin: 0; line-height: 30px; font-size: 24px; } .wk-prompt-body { position: relative; max-height: 400px; padding: 15px; overflow-y: auto; color: #999; } .wk-prompt .image-uploader{ position: relative; margin: 5px auto 15px; } .wk-prompt .dropzone .dz-message{ display: flex; flex-direction: column; justify-content: center; padding-bottom: 0px; } .wk-prompt-input{ width: 100%; max-width: 292px; border: 1px solid #ccc; box-shadow: inset 0 1px 1px rgba(0,0,0,.075); display: inline-block; height: 20px; padding: 4px 6px; margin-bottom: 10px; font-size: 14px; line-height: 20px; color: #555; vertical-align: middle; border-radius: 4px; } .wk-prompt-buttons{ padding: 14px 15px 15px; margin-bottom: 0; text-align: right; background-color: #f5f5f5; border-top: 1px solid #ddd; border-radius: 0 0 6px 6px; box-shadow: inset 0 1px 0 #ffffff; height: auto; position: relative; text-align: center; } .wk-prompt-buttons > button { font-weight: 400; border: 1px solid #CCC; border-radius: 4px; font-size: 14px; line-height: 20px; color: #333; padding: 4px 12px; } .wk-prompt-buttons > .wk-prompt-ok { background-color: #2c7e90; background-color: var(--portal-secondary-color); color: white; margin-left: 10px; } .wk-container .tooltip{ /* ensure the tooltip is not hidden within markdown editor container */ position: fixed; } /****************************************** * Table Editor View ********************************************/ .table-editor .spreadsheet { margin: 1rem 2rem 2rem 0.5rem; } .table-editor .table { /* undo bootstrap margin */ margin-bottom: 0; } .table-editor td { min-width: 5rem; } .table-editor th { background: #fafafa; padding: 0.5rem; vertical-align: middle; } /* Row numbers */ .table-editor tbody th { min-width: 2.5rem; } /* Dropdown Button */ .table-editor .dropbtn { background-color: #e2e2e2d0; color: rgba(0, 0, 0, 0.5); padding: 0rem 0.3rem; border: none; cursor: pointer; transition: ease 0.4s; border-radius: 3px; } .table-editor .dropbtn .icon{ pointer-events: none; margin: 0; } /* Dropdown button on hover & focus */ .table-editor .dropbtn:hover, .table-editor .dropbtn:focus { background-color: #d0d0d0; } /* The container
- needed to position the dropdown content */ .table-editor .dropdown { position: relative; float: right; width: 1rem; } /* Dropdown Content (hidden by default) */ .table-editor .dropdown-content { display: none; position: absolute; background-color: white; min-width: 7rem; box-shadow: 0 0.5rem 0.8rem 0 rgba(0, 0, 0, 0.1); z-index: 1; border: 1px solid rgba(0,0,0,.05); } .table-editor .dropdown-content .icon { pointer-events: none; } /* position row menus to the right of the row number */ .table-editor .row-header .dropdown-content{ left: 1.2rem; top: 0; } /* So the drop down doesn't go into overeflow space */ .table-editor .column-header:last-of-type .dropdown-content { right: 0; } /* Buttons inside the dropdown */ .table-editor .row-dropdown-option, .table-editor .col-dropdown-option { white-space: nowrap; display: block; width: 100%; text-align: left; background-color: transparent; color: #2c6f90; color: var(--portal-primary-color); padding: 0.2rem 0.8rem; margin: 0.2rem 0; text-decoration: none; border: none; cursor: pointer; transition: background 100ms ease-in-out; } .table-editor .row-dropdown-option:hover, .table-editor .col-dropdown-option:hover { background-color: #f7f7f7; color: #555; } /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */ .table-editor .show { display: block; } .table-editor .column-header-span { width: calc(100% - 1.1rem); min-width: 1.5rem; float: left; display: inline-block; margin-left: 0; line-height: 120%; color: #555; } .table-editor .spreadsheet-controls { margin-left: 0.5rem; } /****************************************** ** AccessPolicy editor view *** ******************************************/ .access-rule .subject .orcid.icon{ vertical-align: top; } .access-policy-view-container .modal { width: 80%; margin-left: -40%; display: grid; grid-template-rows: 60px 1fr 60px; max-height: 80%; } .access-policy-view-container .modal .modal-body { max-height: 1000px; } .access-policy-view:not(.modal) .modal-header{ border-bottom-width: 0px; padding: 0px; } .access-policy-view:not(.modal) .modal-body{ padding: 0px; max-height: none; } .access-policy-view:not(.modal) .modal-header .close{ display: none; } .access-policy-control.disabled, .replace.disabled { cursor: not-allowed; } .access-policy-view.modal h4{ font-size: 1em; font-weight: bold; } .access-policy-view:not(.modal) h4 .icon{ display: none; } .access-policy-view .popover li h5 { display: inline; } .access-policy-view .popover{ min-width: 50%; } .access-rule td { padding-top: 12px; padding-bottom: 12px; } .access-rule select{ width: 100%; min-width: 100px; margin-bottom: 0px; } .access-rule.new input{ width: calc(100% - 16px); margin-bottom: 0px; } .access-rule.new label{ font-size: .9em; } .access-rule.new select{ margin-top: 25px; } .access-rule .remove.icon{ font-size: 2em; color: #CCC; } .access-rule .remove-rule{ width: 2em; } .access-policy-view .access-rule .add.icon{ margin-top: 25px; display: block; font-size: 2em; cursor: pointer; } .access-rule .add.icon:hover{ color: #006699; } .access-rule .ui-autocomplete .ui-menu-item { padding-top: 5px; padding-bottom: 5px; } .access-policy-view .public-toggle-container{ margin-bottom: 20px; position: relative; display: inline-block; } .access-policy-view .public-toggle-disabled-text.public{ color: #005300; /*dark green*/ } .access-policy-view .public-toggle-disabled-text.private{ color: #A04A01; /*dark orange*/ } .access-policy-view .can-toggle{ width: 200px; } .access-policy-view p{ margin-bottom: 20px; } .access-policy-view:not(.modal) .modal-footer{ display: none; } .access-policy-view.unauthorized .alert{ margin-top: 20px; min-height: 100px; line-height: 100px; text-align: center; } /****************************************** * Portal Editor ********************************************/ .Portal.Editor textarea.auto-resize{ overflow-y: hidden; } .Portal.Editor #Content{ padding-top: 0px; width: 100%; box-sizing: border-box; overflow-y: auto; } /* Portal editor login page */ .portal-login-page{ display: grid; grid-template-columns: 100%; grid-template-rows: auto; justify-items: center; gap: 1rem; } .portal-login-page .portal-image { max-width: 900px; margin: auto; } .portal-login-page .portal-login-title { margin-top: 3rem; font-weight: 300; line-height: 1.4; } .portal-login-page .portal-login-title strong { font-weight: 600; } .portal-login-page .portal-login-button { display: flex; flex-direction: row; align-items: center; justify-content: center; max-width: 230px; /* for firefox */ } #portals-list-container .portals-list-title { color: #999; } .portals-list-entry { display: grid; grid-template-columns: 70px 100fr 50px; column-gap: 20px; margin-bottom: 20px; width: 100%; } .portals-list-entry .portal-title { margin-bottom: 0px; } .portals-list-entry .portal-edit-link { } .portals-list-entry .portal-description{ } .portals-list-entry .portal-description p{ margin: 0; color: #888; } .portals-list-entry.pager { border: 0px; margin: 10px 0px; } #portals-list-container .no-results { grid-column-start: 2; text-align: center; } /* Editor navigation (tabs) */ .section-links-container{ margin-bottom: 0px; } .section-links-toggle-container{ padding-left: 40px; padding-right: 40px; } .port-editor-sections .section-link-container { border-right: 1px solid #CCC; } .port-editor-sections .section-link-container .handle { color: #FFF; float: left; height: 100%; display: flex; flex-direction: row; align-items: center; padding: 1px 3px 0 10px; opacity: 0.7; cursor: grab; } .port-editor-sections .section-link-container.sortable-chosen, .port-editor-sections .section-link-container.sortable-chosen .handle { cursor: grabbing; } .port-editor-sections .section-link-container.sortable-ghost, .port-editor-sections .section-link-container.sortable-chosen { background-color: #006dcc !important; } .port-editor-sections .section-link-container.sortable-ghost > * { opacity: 0.3 !important; } .port-editor-sections .section-link-container .handle + .portal-section-link { padding-left: 0; } .port-editor-sections .section-link-container .handle i:nth-of-type(2) { margin-left: -3px; } .port-editor-sections .section-menu-link:hover ~ .menu, .port-editor-sections .section-link-container .menu:hover{ display: block; margin-top: 0px; margin-left: -1px; box-shadow: inset 0 5px 7px -6px rgba(0,0,0,0.3); border-top: 1px solid #CCC; } .port-editor-sections .portal-section-link{ display: inline-block; } .port-editor-sections .section-link-container .portal-section-link[contenteditable=true]{ box-shadow: 0 0 5px #00689d; padding: 5px 10px; margin: 5px 1px 3px 0px; border: 1px solid #00689d; margin-left: 10px; margin-right: 10px; } .port-editor-sections .section-link-container .portal-section-link, .port-editor-sections .section-link-container.active .portal-section-link, .port-editor-sections .section-link-container.active .portal-section-link:hover, .port-editor-sections .section-link-container.active .section-menu-link, .port-editor-sections .section-link-container.active .section-menu-link:hover{ border-color: transparent; } .port-editor-sections .section-link-container .portal-section-link:hover, .port-editor-sections .section-link-container .section-menu-link:hover{ background-color: transparent; } .port-editor-sections .section-link-container .dropdown-menu{ width: 100%; padding: 0px; } .section-link-container.error .portal-section-link{ color: #960303; } #portal-section-tabs .section-link-container .dropdown-menu>li>a.remove-section.disabled{ background: #f9f9f9; color: #c4c4c4; } /* 'Add new section' icon */ .portal-section-link > .icon.icon-plus { margin: 0 1px 0 1px; } /* `Settings` link */ .nav .page-Settings{ float: right; } /* The Delete confirmation popover */ .section-link-container .popover{ min-width: 300px; } .section-link-container .popover .inline-buttons{ margin-bottom: 0px; } .section-link-container .popover .inline-buttons .btn{ width: calc(50% - 5px); } .section-link-container .popover-title{ color: #960303; } /* Portal editor sections */ .port-editor-section{ padding: 20px 40px; } .port-editor-section.port-editor-md{ padding: 0px; } .port-editor-description { max-width: 1400px; margin-left: 1rem; } .port-editor-subtitle { margin-top: 0; margin-left: 1rem; } /* Portal Editor notifications */ .portal-editor .alert:empty { display: none; } /* Portal Editor header (contains logo and title) */ .portal-editor #editor-header { display: flex; padding-bottom: 20px; flex-wrap: wrap; width: 100%; align-items: center; } .logo-editor-container { margin-right: 20px; } .logo-editor-container .dropzone .dz-message{ font-size: .87em; line-height: 1em; } .logo-editor-container p.notification.error { width: 100px; text-align: center; line-height: 102%; padding-top: 5px; font-size: 0.9em; } .logo-editor-container p.notification.error:empty{ display: none; } .portal-editor .logo-editor-container > h5, .portal-editor .title-container > h5{ margin-top: 0px; } .portal-editor .title-container { flex-grow: 2; } .portal-editor textarea.portal-title{ width: 100%; padding: 0px; background: transparent; border: none; border-radius: 0; border-bottom: 1px solid #ccc; box-shadow: none; align-self: center; font-size: 28px; line-height: 40px; min-height: 40px; margin-top: 20px; } .portal-editor textarea.portal-title:focus{ padding-left: 10px; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6); -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(82,168,236,.6); box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6); } /* Portal Editor settings */ /* The width of each input element next to the remove button */ .port-editor-settings-container textarea{ width: calc(100% - 20px - 1em); } .port-editor-logos { display: flex; width: 100%; overflow-x: auto; padding-top: 20px; padding-bottom: 20px; } .image-uploader .toggle-remove-preview{ display: none; } .image-uploader.remove-preview{ opacity: .5; } .image-uploader .dropzone .remove-message{ display: none; } .image-uploader.remove-preview{ opacity: 1; } .image-uploader.remove-preview .dz-image-preview img{ opacity: .3; } .image-uploader.remove-preview .dropzone .dz-message{ background-color: transparent; } .image-uploader.remove-preview .dropzone .dz-message > *{ display: none; } .image-uploader.remove-preview .dropzone .remove-message{ display: block; font-weight: bold; font-size: 1.25em; margin-top: 20px; color: #333; } .image-uploader .dz-image-preview .remove{ top: 0px; color: #fb5656; font-size: 1.25em; height: 2em; z-index: 5; /* should be ontop of all other dropzone elements */ } .port-editor-logos .edit-image{ border: 1px solid #dedede; margin-right: 10px; padding: 10px; border-radius: 4px; position: relative; background-color: #fafafa; } .port-editor-logos .edit-image .dropzone{ height: 150px; width: 150px; margin-left: auto; margin-right: auto; display: block; overflow: hidden; } .port-editor-logos p.notification.error { text-align: center; margin: 0; } .port-editor-settings { padding-left: 40px; padding-right: 40px; } .port-editor-settings .edit-image .remove{ font-size: 1.5em; display: block; } /* hide the remove message for logo images since we can remove the entire logo instead */ .port-editor-settings .logos-container .edit-image .dropzone .remove-message, .port-editor-settings .logos-container .edit-image .dropzone .remove { display: none; } .port-editor-settings > .row-fluid{ padding: 20px 40px; box-sizing: border-box; } .port-editor-settings > .row-fluid:nth-child(odd){ background-color: #EEE; } .port-editor-settings .description-container textarea{ width: 100%; } .port-editor-section .editable-subsection { box-shadow: 0 1px 6px rgb(0 0 0 / 16%), 0 1px 8px -3px rgb(0 0 0 / 23%); padding: 2rem 1.5rem; border-radius: 3px; border: 2px dashed #419ecc; margin-top: 1rem; margin-bottom: 2rem; } .port-editor-section.port-editor-data #sidebar > *{ padding-left: 0px; padding-right: 0px; box-sizing: border-box; width: 100%; } .port-editor-section.port-editor-data .result-header{ padding-right: 0px; box-sizing: border-box; width: 100%; } /* Filter Editor */ /* custom portal search filter editor modal */ .filter-editor.new { display: flex; align-self: center; padding: 3rem 2rem 1rem 2rem; } .filter-editor:not(.new){ margin-bottom: 1rem; } .filter-editor .modal { width: 100%; max-width: 800px; margin: auto; left: 0; right: 0; } .filter-editor .btn-filter-editor { margin: 0; padding: 4px 12px; } .filter-editor .delete-button { float: left; } /* hide the delete button for new filters */ .filter-editor.new .delete-button { display: none; } .filter-editor .modal-body { padding: 2rem; max-height: 600px; } .filter-editor .modal-instructions { font-weight: 500; font-size: 1.1rem; margin: 0; text-align: left; } .filter-editor .fields-container { display: grid; grid-template-columns: max-content auto; gap: 2rem; align-items: center; margin-bottom: 2rem; } .filter-editor .fields-container .modal-instructions { margin-top: 1rem; } /* the list of filter UI types to choose from */ .ui-builder-choices-container { display: grid; grid-template-columns: max-content auto; gap: 2rem; align-items: center; margin-bottom: 2rem; } .ui-builder-choices { margin-top: 1rem; margin-bottom: 1rem; } .ui-builder-choice { margin: 0 .6em; display: inline-block; cursor: pointer; } /* the icon representing the interface type */ .ui-builder-choice svg { width: 3rem; height: 100%; max-height: 3.5rem; vertical-align: middle; fill: #b5c4ca; } /* the label for the interface type */ .ui-builder-choice-label { color: #b5c4ca; text-transform: uppercase; font-weight: 500; font-size: 0.6rem; margin: 0; } .ui-builder-choice:hover svg { fill: #419ecc; } .ui-builder-choice:hover .ui-builder-choice-label{ color: #419ecc; } .ui-builder-choice.selected svg { fill: #2c6f90; } .ui-builder-choice.selected .ui-builder-choice-label{ color: #2c6f90; } .ui-builder-choice.disabled { cursor: not-allowed; } .ui-builder-choice.disabled svg { fill: #EEF3F8; } .ui-builder-choice.disabled .ui-builder-choice-label{ color: #EEF3F8; } /* Modify the filter styles for editing */ .filter-group .filter.ui-build { margin: auto; } .filter-group .filter.ui-build:not(.date) label { padding-right: 30px; } .filter.ui-build .icon-on-left { margin: 8px; } .filter.ui-build input[type='text'], .filter.ui-build select { height: 44px; box-sizing: border-box; } .filter.ui-build .filter-input-contain { /* width: unset; */ max-width: 350px; min-width: 300px; } .ui-build.choice .ui-build-input.placeholder { max-width: 91%; } .choices-editor .modal-instructions { margin: 2rem 0; } .filter.ui-build .btn { height: 44px; width: 44px; } /* value input in filter editor, where user can select icon, label, placeholder, etc */ .ui-build .ui-build-input { display: block; font-size: 0.95rem; box-sizing: border-box; border: 1px dashed #419ecc; color: #555555; border-radius: 4px; line-height: 1; padding: 0.42rem; padding-left: 0.6rem; min-height: 1rem; min-width: 1rem; width: 100%; min-width: 280px; max-width: 320px; background-color: transparent; /* width: 100%; */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: var(--fw-bold,500); text-shadow: none; box-shadow: 0 3px 5px #77797a17,0 1px 3px #77797a17; transition: background-color .2s ease, box-shadow .2s ease; } .ui-build .ui-build-input::placeholder{ text-shadow: none; } .ui-build .ui-build-input:focus{ background-color: #d1e8f3; outline: none; box-shadow: 0 6px 13px #77797a24,0 2px 5px #77797a24; } .ui-build .ui-build-input:hover{ /* background-color: #d1e8f3; */ /* outline: none; */ box-shadow: 0 6px 13px #77797a24,0 2px 5px #77797a24; } .ui-build input[disabled], .ui-build button[disabled], .ui-build select[disabled]{ cursor: default; } .ui-builder-container-label { font-size: 0.8rem; margin: 0 0 3px 2px; } /* Position the placeholder element over the input */ .ui-build .ui-build-input.placeholder { position: absolute; left: .5rem; top: 5px; min-width: 100px; max-width: 265px } /* Choice editor is where use selects a value and label for elements */ .choice-editor { display: grid; grid-template-columns: [handle] 0.8rem [label] 1fr [value] 1fr [remove] 1.2rem; grid-gap: 0.4rem; margin-bottom: 0.3rem; } .choice-editor .handle { grid-area: handle; height: 100%; display: flex; flex-direction: row; align-items: center; cursor: grab; } .choice-editor.sortable-chosen, .choice-editor.sortable-chosen .handle { cursor: grabbing; } .choice-editor .handle { color: #b5c4ca; } .choice-editor .handle i:nth-of-type(2) { margin-left: 2px; } .choice-editor .ui-builder-container-text { width: 234px; margin-left: 3px; margin-bottom: 0; font-size: 0.8rem; } .choice-editor .choice-label { grid-area: label; } .choice-editor .choice-value { grid-area: value; } .choice-editor input { border-radius: 3px; color: rgba(0,0,0,.87); border: 1px solid rgba(34,36,38,.15); line-height: 1em; padding: .4rem .8rem; } .choice-editor input.choice-label { font-weight: 560; } .choice-editor input.choice-value { font-weight: 400; } .choice-editor input:focus { border-color: #96c8da; outline: none; } .choice-editor .remove-choice { grid-area: remove; font-size: 1.2rem; cursor: pointer; opacity: 0.2; display: grid; align-content: center; justify-self: flex-end; } /* In a date filter where a user selects a minRange and maxRange */ .filter-group .ui-build.filter.date, .filter-group .ui-build.filter.choice { max-width: unset; min-width: unset; padding-right: 0; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; } .ui-build .slider-container { display: grid; grid-template-columns: 2.5rem minmax(300px, 400px) 2.5rem; grid-template-rows: min-content min-content; justify-items: center; grid-gap: 1rem; } .ui-build .slider-arrow { margin-top: 20px; fill: #419ecc; max-width: 40px; } .ui-build .year-slider{ margin-right: 4px; } .ui-build .range-inputs { width: 100%; grid-column: 1 / span 3; display: flex; justify-content: space-between; } .ui-build .range-input { min-width: unset; width: 90px; min-height: 2.2rem; } .ui-build .range-inputs > * { display: flex; flex-direction: column; } .ui-build .range-inputs .notification.error { max-width: 15rem; } .ui-build .range-inputs .range-input-min { align-items: start; } .ui-build .range-inputs .range-input-max .notification.error { text-align: right; } .ui-build .range-inputs .range-input-max { align-items: end; } /* toggle builder in UI build mode */ .toggle.ui-build .modal-instructions { margin: 2rem 0 1rem; } .filter-editor .can-toggle-switch:before { opacity: 0 } .filter-editor .can-toggle label .can-toggle-switch:after { color: white; } .ui-build .ui-build-input.true-label, .ui-build .ui-build-input.false-label{ font-size: 0.95em; box-sizing: border-box; position: absolute; top: 0; text-align: center; line-height: 1.9em; margin: 0.3em; width: calc(100px - 0.6em); padding: 0 12px; min-width: unset; max-width: unset; } .ui-build .ui-build-input.true-label { left: 100px; } /* Validation errors for Filters in UI Build mode */ .ui-build .ui-build-input.error { border: 1px dashed #e0b4b4; color: #9f3a38; background-color: #fff6f6; } .ui-build .ui-build-input.error::placeholder{ color: #9f3a38; } /* Portal Editor markdown section * SEE ALSO: .portal-display-image{} and .portal-display-text{} from portal styles */ .port-editor-section.port-editor-md { float: left; position: relative; width: 100% } .port-editor-section.port-editor-md .dropzone{ width: calc(100% - 2px); margin:1px; } .port-editor-section.port-editor-md .dropzone .dz-message{ flex-direction: column; justify-content: flex-end; padding-bottom: 0px; } .portal-editor .portal-display-image{ padding-top: 0px; padding-bottom: 0px; margin-top: -1px; } .portal-editor h2, .portal-view h2 { font-size: 2em; font-weight: normal; } .port-editor-md .portal-display-image .dropzone .icon-upload{ z-index: 1; } .portal-display-image .image-uploader .dz-image-preview .remove { font-size: 2em; margin-right: 10px; margin-top: 10px; color: red; z-index: 5; /* should be above all other elements in the dropzone area */ } /* for the cs-message: calc(100% - 1px) */ .Portal.Editor .portal-display-text { position: absolute; width: calc(100% - 6px); /* so it doesn't overlap the dropzone border */ top: 0; box-sizing: border-box; left: 0; margin: 60px 0px 0px 3px; padding: 20px 40px; z-index: 10; /* so it's above all the dropzone stuff */ } .port-editor-md > *{ padding-left: 40px; padding-right: 40px; } .port-editor-md > .portal-display-image{ padding-left: 0px; padding-right: 0px; } .port-editor-md .title, .port-editor-md .introduction { width: 100%; padding: 0px; background: transparent; color: white; border: none; border-radius: 0; border-bottom: 1.5px solid white; box-shadow: none; } .port-editor-md .title { font-weight: 300; font-size: 31.5px; line-height: 44px; margin: 15px 0; min-height: 44px; } .port-editor-md .introduction{ font-weight: 400; font-size: 14px; line-height: 1.5em; margin: 0 0 10px; min-height: 1.6em; } .port-editor-md .title::placeholder, .port-editor-md .introduction::placeholder { color: white; opacity: 0.4; } .port-editor-md .markdown-help{ display: flex; justify-content: space-around; align-items: stretch; align-content: stretch; flex-wrap: wrap; } .port-editor-md .markdown-help table { width: 100%; border-collapse: collapse; } .port-editor-md .markdown-help-column { box-shadow: 0 0px 4px 0 rgba(0, 0, 0, 0.15); padding: 15px; background-color: #fbfbfb; border-radius: 3px; margin: 10px } .port-editor-md .markdown-help-column td { padding: 2px 1px; border-top: 1px solid #ececec; } .port-editor-md .markdown-help-column th { padding-bottom: 9px; font-weight: 600; font-size: 13px; } .port-editor-md .markdown-help-column .more-help { font-weight: 600; font-size: 13px; margin: 5px 0 0 0; color: #555555; } .port-editor-md .markdown-help-column code, .port-editor-md .markdown-help-column pre { color: #999999; background-color: transparent; border: none; padding: 0px; font-size: 12px; margin: 0px; } .port-editor-md .markdown-help-column h1{ font-weight: 300; font-size: 21px; margin: 0; } .port-editor-md .markdown-help-column h2{ font-weight: 700; font-size: 16px; margin: 0; } .port-editor-md .markdown-help-column blockquote{ margin: 0; } /*** Portal Editor Data Visualization Sections **/ .port-editor-section.port-editor-viz{ padding-top: 40px; } /* Portal editor metrics page */ .editor-view.portal-editor div#Metrics svg{ width: 100%; height: 400px; margin-top: 40px; } /* Add section options */ #section-options-container{ display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; } .section-option { padding: 12px 13px; background-color: white; border: 1px solid #DEDEDE; border-radius: 4px; cursor: pointer; width: 175px; margin: 15px; transition: box-shadow 250ms, transform 250ms; } .section-option:hover{ box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 2px 5px rgba(0,0,0,0.06); transform: translate(0.2px,-0.2px); transition: box-shadow 200ms, transform 200ms; } .section-option.disabled{ background-color: #FAFAFA; cursor: not-allowed; color: #DCDCDC; } .section-option.disabled:hover{ box-shadow: none; transform: none; transition: none; } .section-option.disabled .subtle{ color: #DCDCDC; } .section-option p.description { font-weight: 300; line-height: 1.25; margin-block-end: 0; } .section-option h5 { margin: 11px 0 6px 0; } .section-option svg{ display: block; margin: auto; } .port-editor-section svg .theme-primary-fill{ fill: #05446A } .port-editor-section svg .theme-secondary-fill{ fill: #118AD5 } .port-editor-section svg .theme-accent-fill{ fill: #05ab8f } .port-editor-section svg .skintone-fill{ fill: #72351c } .port-editor-section svg .skintone2-fill{ fill: #9f7766 } /* Disabled add section image fill color */ .port-editor-section .disabled svg .theme-primary-fill{ fill: #3d3d3d } .port-editor-section .disabled svg .theme-secondary-fill{ fill: #ebebeb } .port-editor-section .disabled svg .theme-accent-fill{ fill: #d6d6d6 } .port-editor-section .disabled svg .skintone-fill{ fill: #575757 } .port-editor-section .disabled svg .skintone2-fill{ fill: #828282 } /****************************************** * Portals & Portal Editor (styles shared between both) ********************************************/ #editPortal.btn{ height: 2em; min-width: 180px; text-align: center; line-height: 2em; font-size: 1.1em; } .portal-editor #editor-header{ border-bottom: 0px; padding: 20px 40px; box-sizing: border-box; position: relative; display: flex; align-items: flex-start; } /* Top level app navigation in the PortalView and EditorView */ .Portal.Editor #Navbar, .PortalView #Navbar{ position: relative; width: 100%; left: 0px; margin: 0px; } .Portal.Editor .navbar, .PortalView .navbar{ margin: 0px; } .Portal.Editor .navbar-inner, .PortalView .navbar-inner{ background-image: none; box-shadow: none; background-color: #f2f2f2; padding-top: 5px; padding-bottom: 5px; min-height: 0px; } .Portal.Editor .navbar .nav > li > a.brand, .PortalView .navbar .nav > li > a.brand{ font-size: 25px; letter-spacing: -2px; } .Portal.Editor .navbar .nav > li > a, .Portal.Editor .nav .input > form > label, .PortalView .navbar .nav > li > a, .PortalView .nav .input > form > label{ font-size: 12px; } .Portal.Editor #Navbar a.brand, .Portal.Editor #Navbar a.brand { margin-left: 20px; } .Portal.Editor #Navbar .minimal-nav > a, .Portal.Editor #Navbar .minimal-nav > .icon, .Portal.Editor #Navbar .minimal-nav > a > .icon, .Portal.Editor #Navbar .minimal-nav > a, .PortalView #Navbar .minimal-nav > .icon, .PortalView #Navbar .minimal-nav > a > .icon{ color: inherit; } .Portal.Editor #Navbar .nav > li, .PortalView #Navbar .nav > li { display: none; } .Portal.Editor #Navbar .nav .minimal-nav, .PortalView #Navbar .nav .minimal-nav { display: block; } .Portal.Editor #Navbar .nav .minimal-nav:not(:last-child), .PortalView #Navbar .nav .minimal-nav:not(:last-child) { margin-right: 20px; } .Portal.Editor #Navbar .nav .minimal-nav a, .PortalView #Navbar .nav .minimal-nav a { font-size: .9em; text-transform: none; text-shadow: none; } .Portal.Editor #Navbar .nav .minimal-nav > a:not(.btn), .PortalView #Navbar .nav .minimal-nav > a:not(.btn) { margin-bottom: 0px; padding: 0px; } .Portal.Editor #Navbar .nav .minimal-nav.subtle a, .PortalView #Navbar .nav .minimal-nav.subtle a { color: #999; } .Portal.Editor #Navbar .nav, .PortalView #Navbar .nav { margin-top: 0px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .PortalView #Navbar #editPortal{ margin-top: 0px; margin-bottom: 0px; padding: 7px; } /****************************************** * Table of Contents ********************************************/ /* The TOC is used optionally in both the markdown view and the preview portion of the markdown editor view. Markdown & markdown editor views are used in the portal editor and portal views. */ .toc-view.affix{ top: 20px; } .toc-view.affix-bottom{ top: 20px; position: fixed; } .toc-view.span3.affix + .span9, .toc-view.span3.affix-bottom + .span9 { margin-left: 26.5%; } .toc-ul{ position: sticky; position: -webkit-sticky; padding: 0px; } .toc-ul > li > a { text-shadow: none; padding-left: 20px; padding-right: 20px; margin: 0px; } .toc-ul a{ line-height: 2em; } .toc-ul > li > ul{ margin-left: 0px; list-style: none; } .toc-ul > li > ul > li > a{ padding-left: 40px; } .toc-ul li, .toc-ul a { background-color: transparent; color: #FFF; border:0px; border-radius: 0px; text-shadow: none; } .toc-ul a:hover { color: #FFF; background-color: transparent; } .toc .icon{ color: #069; } i.toc-sub-item { margin-left: 18px; visibility: hidden; } /* hide mobile TOC by default */ .toc .mobile { display: none; } .submenu.hidden{ display: none; } /* end of markdown section table of contents */ /****************************************** * Portals ********************************************/ .portal-view{ width: calc(100% + 80px); margin-left: -40px; } .portal-view #sidebar { display: none; } .PortalView #Content{ padding-top: 0px; } #portal-header-container{ margin-top: 30px; margin-bottom: 30px; padding-left: 40px; box-sizing: border-box; } #portal-header-container > .row { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; width: 100%; } #portal-section-tabs{ margin-bottom: 0px; } #portal-section-tabs .portal-section-link { background-color: transparent; border-radius: 0px; text-align: center; box-sizing: border-box; } .section-link-container{ position: relative; } .portal-section-content{ padding: 20px; } .portal-section-content .toc-ul { margin-left: -20px; } .portal-display-image{ background-repeat: no-repeat; background-position-x: 50%; background-position-y: 50%; background-size: cover; min-height: 200px; padding-top: 60px; padding-bottom: 60px; color: #FFF; margin-bottom: 40px; } .portal-display-text{ box-sizing: border-box; padding: 20px; } .portal-display-image .portal-display-text, .portal-editor .portal-display-text{ background-color: rgba(44, 111, 144, .5); background-color: var(--portal-primary-color-transparent); } .portal-display-image .portal-display-text *, .portal-editor .portal-display-text *{ color: #FFF; } .portal-editor .portal-display-text .notification.error{ color: #a70704; margin-bottom: 0px; } .portal-editor .portal-display-text textarea{ padding-left: 10px; } .logo-container{ height: 100px; white-space: nowrap; width: 100%; display: table; padding-top:10px; } .logo-image{ vertical-align: middle; padding: 10px; display: table-cell; } .portal-view .portal-logo{ max-height: 80px; display: inline-block; margin-right: 30px; } .portal-view #results-container{ width: 100%; margin-left:0px; } .portal-view .mapMode #results-container, .portal-view .mapMode #map-container{ width: 50%; } .portal-view .data-catalog, .portal-view .data-catalog #results-container, .portal-view .data-catalog #map-container, .portal-view .data-catalog #map-canvas{ min-height: 700px; } .portal-view .data-catalog #clear-all{ display: none; } .portal-view .portal-title{ line-height: 1.5em; margin: 0px; font-size: 2em; display: inline-block; flex: 2; } .portal-view .portal-description{ margin-top: 10px; margin-right: 20px; color: #666; } .portal-view .portal-member-since { margin-left: -20px; margin-top: 10px; } .portal-logos-view{ padding-top: 6em; padding-left: 20px; padding-right: 20px; } .portal-logos-view .img-logo{ margin: auto; display: flex; justify-content: center; align-items: center; min-height: 100px; width: auto; max-height: 125px; } .well.awards-info { background: inherit; margin: 20px; } .portal-view .portal-section-link { width: 100%; } .portal-view .logo-row{ margin-bottom: 40px; display: flex; justify-content: center; align-items: center; } .portal-view .profile .profile-title, .portal-view .profile .charts-container > p{ padding-left: 20px; } .portal-view .profile .profile-title{ font-size: 1.5em; } .profile h4 { margin-top: 2rem; } .portal-view #Members .row-fluid{ padding: 20px; box-sizing: border-box; } .portal-view #Members .row-fluid:nth-child(odd) { background-color: #EEE; } /*** Colors used in the TOC in the portal view & portal editor view ***/ .portal-view .toc .icon, .portal-editor .toc .icon{ color: #2c6f90; /* Back-up color for IE */ color: var(--portal-primary-color); } .portal-view .toc li.active > a, .portal-editor .toc li.active > a { background-color: #2c7e90; /* Back-up color for IE */ background-color: var(--portal-secondary-color); } .portal-editor .toc-ul, .portal-view .toc-ul { background-color: #2c6f90; /* Back-up color for IE */ background-color: var(--portal-primary-color); } .portal-view .toc-ul li > a:hover, .portal-editor .toc-ul li > a:hover{ background-color: #2c7e90; /* Back-up color for IE */ background-color: var(--portal-secondary-color); color: white; } .portal-editor .toc-view a, .portal-view .toc-view a { color: #FFF; } /*** Colors used in the Portal View ***/ .portal-view a:not(.btn):hover, .portal-editor a:not(.btn):hover{ color: #2c7e90; /* Back-up color for IE */ color: var(--portal-secondary-color); } #portal-section-tabs{ display: flex; flex-wrap: wrap; align-items: stretch; border-bottom: 0px; } .portal-editor #portal-section-tabs{ display: block; border-bottom: 1px solid #CCC; max-width: 100%; box-sizing: border-box; } .portal-editor #portal-section-tabs, .portal-editor #portal-section-tabs li:not(.active) { box-shadow: inset 0 -10px 10px -10px rgba(0,0,0,0.05); } /* hide black border below active tabs */ .portal-editor #portal-section-tabs .section-link-container.active::after { content: ""; width: 100%; border-bottom: 1px solid white; height: 1px; position: absolute; bottom: -1px; left: 0; } #portal-section-tabs .section-link-container{ background-color: #2c6f90; /* Back-up color for IE */ background-color: var(--portal-primary-color); border: 0px; margin-bottom: 0px; flex-grow: 1; } /* show toggle for showing/hiding section links on mobile only */ .Editor.Portal .show-sections-toggle, .PortalView .show-sections-toggle{ visibility: hidden; display: none; } .portal-editor #portal-section-tabs * { transition: none; } .portal-editor #portal-section-tabs .section-link-container{ border-width: 1px 1px 0px 1px; border-color: #FFF; border-style: solid; border-top-right-radius: 4px; border-top-left-radius: 4px; height: 36px; } .portal-editor #portal-section-tabs .section-link-container.hidden-section{ background-color: #999; border-color: #666; } .portal-editor #portal-section-tabs .section-link-container.hidden-section .hidden-section-icon{ display: inline; } .portal-editor #portal-section-tabs .section-link-container.active{ background-color: #FFF; border-color: #CCC; } #portal-section-tabs .section-link-container.error{ border-color: #b94a48; background-color: #f2dede; } .portal-editor #portal-section-tabs .section-link-container.error .portal-section-link{ color: #b94a48; } .portal-view #portal-section-tabs .section-link-container .portal-section-link, .portal-view #portal-section-tabs .section-link-container.active .portal-section-link{ color: #FFF; } #portal-section-tabs .portal-section-link, #portal-section-tabs .section-menu-link{ color: #FFF; background-color: transparent; margin-right: 0px; float: left; border: 0px; cursor: pointer; } #portal-section-tabs .section-menu-link{ display: inline-block; padding: 8px 10px; box-sizing: border-box; max-width: 44px; } #portal-section-tabs .portal-section-link[contenteditable="true"]{ width: calc(100% - 48px); } #portal-section-tabs .section-link-container.page-AddPage{ flex-grow: unset; margin-right: 40px; } #portal-section-tabs .section-link-container.page-AddPage > a{ height: 36px; } #portal-section-tabs .section-link-container.page-AddPage .icon{ font-size: 1.75em; } #portal-section-tabs .section-link-container.page-AddPage .portal-section-link{ color: #FFF; width: 100%; } #portal-section-tabs .section-link-container:hover .portal-section-link, #portal-section-tabs .section-link-container.active:hover .section-menu-link, #portal-section-tabs .section-link-container:hover .section-menu-link, #portal-section-tabs .section-link-container:hover .handle { border-radius: 0; color: #FFF !important; } #portal-section-tabs .section-link-container .popover-content p { color: #333; margin: 10px 0px 0px 0px; } #portal-section-tabs .section-link-container.page-Settings{ flex-grow: unset; } #portal-section-tabs .section-link-container.page-Settings.error{ width: 120px; } #portal-section-tabs .section-link-container.page-Settings.error .portal-section-link{ color: #b94a48; } #portal-section-tabs .section-link-container .dropdown-menu>li>a{ color: #2c6f90; /* Back-up color for IE */ border-bottom: 1px solid #CCC; line-height: 25px; } #portal-section-tabs .section-link-container .dropdown-menu>li:last-child>a{ border-bottom-width: 0px; border-bottom-left-radius: 6px; border-botttom-right-radius: 6px; } #portal-section-tabs .section-link-container .dropdown-menu>li>a:hover{ background-image: none; background-color: #DDD; } /** --------------------------Portal colors -----------------------------***/ .portal-view #portal-section-tabs .section-link-container.active{ background-color: #2c7e90; /* Back-up color for IE */ background-color: var(--portal-secondary-color); } #portal-section-tabs .active .section-menu-link{ color: #2c6f90; /* Back-up color for IE */ color: var(--portal-primary-color); } #portal-section-tabs .section-link-container.page-AddPage .portal-section-link:hover, #portal-section-tabs .section-link-container.page-Settings .portal-section-link:hover{ background-color: transparent; color: #2c7e90; /* Back-up color for IE */ color: var(--portal-secondary-color); } #portal-section-tabs .section-link-container.active .portal-section-link, #portal-section-tabs .section-link-container.active .handle { color: #2c6f90; /* Back-up color for IE */ color: var(--portal-primary-color); } #portal-section-tabs .section-link-container.active:hover, #portal-section-tabs .section-link-container:hover { background-color: #2c7e90; /* Back-up color for IE */ background-color: var(--portal-secondary-color); } #portal-section-tabs .section-link-container .dropdown-menu>li>a{ color: var(--portal-primary-color); } .portal-editor #portal-section-tabs .section-link-container.active:hover::after { border-bottom: 1px solid #2c7e90; /* Back-up color for IE */ border-bottom: 1px solid var(--portal-secondary-color); } .portal-view .result-row .citation .title, .portal-editor .result-row .citation .title{ color: #2c6f90; /* Back-up color for IE */ color: var(--portal-primary-color); } .portal-view .pagination ul > li > a:hover, .portal-editor .pagination ul > li > a:hover{ background-color: var(--portal-primary-color); color: #FFF; } .portal-view .applied-filter, .portal-editor .applied-filter{ background-color: #2c6f90; /* Back-up color for IE */ background-color: var(--portal-primary-color); } .portal-view .filter-group-link a, .portal-editor .filter-group-link a{ color: #2c6f90; /* Back-up color for IE */ color: var(--portal-primary-color); } .portal-view .filter-group-link a:hover, .portal-editor .filter-group-link a:hover{ color: #2c7e90; /* Back-up color for IE */ color: var(--portal-secondary-color); } .portal-view .filter-group-link.active a, .portal-view .filter-group-link.active a:hover, .portal-editor .filter-group-link.active a, .portal-editor .filter-group-link.active a:hover{ color: inherit; } .portal-view .can-toggle input[type="checkbox"]:checked ~ label .can-toggle-switch, .portal-view .can-toggle input[type="checkbox"]:checked:focus ~ label .can-toggle-switch, .portal-editor .can-toggle input[type="checkbox"]:checked ~ label .can-toggle-switch, .portal-editor .can-toggle input[type="checkbox"]:checked:focus ~ label .can-toggle-switch{ background-color: #2c6f90; /* Back-up color for IE */ background-color: var(--portal-primary-color); } .portal-view .can-toggle input[type="checkbox"]:checked:hover ~ label .can-toggle-switch, .portal-editor .can-toggle input[type="checkbox"]:checked:hover ~ label .can-toggle-switch{ background-color: #2c7e90; /* Back-up color for IE */ background-color: var(--portal-secondary-color); } .portal-view .ui-slider-range, .portal-editor .ui-slider-range{ background-color: #2c6f90; /* Back-up color for IE */ background-color: var(--portal-primary-color); } .portal-view .result-row .citation a:hover, .portal-view .result-row .citation a:hover .title, .portal-view .result-row .citation a:hover .id, .portal-editor .result-row .citation a:hover, .portal-editor .result-row .citation a:hover .title, .portal-editor .result-row .citation a:hover .id{ color: #2c7e90; /* Back-up color for IE */ color: var(--portal-secondary-color); } .portal-view .result-row .icon, .portal-editor .result-row .icon{ color: #666; } .portal-view .profile .quick-stats circle, .portal-editor .profile .quick-stats circle{ stroke: #2c6f90; /* Back-up color for IE */ stroke: var(--portal-primary-color); } .portal-view svg .packages, .portal-view .chart-title .packages, .portal-editor svg .packages, .portal-editor .chart-title .packages{ color: #2c6f90; /* Back-up color for IE */ fill: #2c6f90; /* Back-up color for IE */ stroke: #2c6f90; /* Back-up color for IE */ color: var(--portal-primary-color); fill: var(--portal-primary-color); stroke: var(--portal-primary-color); } .portal-view svg circle.packages, .portal-editor svg circle.packages{ fill: none; } .portal-view svg .metadata, .portal-view .fallback.metadata, .portal-editor svg .metadata, .portal-editor .fallback.metadata{ color: #2c7e90; /* Back-up color for IE */ fill: #2c7e90; /* Back-up color for IE */ stroke: #2c7e90; /* Back-up color for IE */ color: var(--portal-secondary-color); fill: var(--portal-secondary-color); stroke: var(--portal-secondary-color); } .portal-view svg .data, .portal-view .fallback.data, .portal-editor svg .data, .portal-editor .fallback.data{ color: var(--portal-accent-color); fill: var(--portal-accent-color); stroke: var(--portal-accent-color); } .portal-view #metric-modal .metric-chart .bar, .portal-view .views-metrics .metric-chart .bar, .portal-view .downloads-metrics .metric-chart .bar, .portal-view #metric-modal .metric-chart .scale_button:hover rect, .portal-view #metric-modal .metric-chart .bar, .portal-view #metric-modal .metric-chart .bar_context, .portal-view .views-metrics .metric-chart .scale_button:hover rect, .portal-view .views-metrics .metric-chart .bar, .portal-view .views-metrics .metric-chart .bar_context, .portal-view .downloads-metrics .metric-chart .scale_button:hover rect, .portal-view .downloads-metrics .metric-chart .bar, .portal-view .downloads-metrics .metric-chart .bar_context { stroke: var(--portal-primary-color); fill: var(--portal-primary-color); } .portal-view .donut-title-count.data, .portal-view .donut-title-count.metadata, .portal-view .donut-title-text, .portal-view .donut-title-text{ fill: #555; } .portal-view .line-chart .line, .portal-editor .line-chart .line{ fill: none; } .portal-view .line-chart text.line-chart-label, .portal-editor .line-chart text.line-chart-label{ fill: #FFF; } .portal-view #portal-members a, .portal-editor #portal-members a{ color: #2c6f90; /* Back-up color for IE */ color: var(--portal-primary-color); } .portal-section-content thead tr { background-color: var(--portal-primary-color); } .portal-section-content a { color: var(--portal-primary-color); } .portal-section-view a { color: var(--portal-primary-color); } .portal-view .pagination ul > .active > a, .portal-view .pagination ul > .active > a:hover { background-color: var(--portal-primary-color); } .portal-view .info-icons .icon:hover { color: var(--portal-primary-color); } .portal-view, .portal-view .portal-section-content, .portal-view h2, .portal-view h3, .portal-view h4, .portal-view h5, .portal-view h6 { color: #555; } .portal-view .portal-title { color: var(--portal-primary-color); } .my-portals-container table td { vertical-align: middle; } .portal-list-container .logo img { min-width: 70px; width: 70px; height: 70px; object-fit: contain; } .portal-list-container .loading { height: 50px; text-align: center; } .my-portals-container table td.title > a { font-size: 15px; line-height: 0.9; color: #3a3a3a; } .my-portals-container table td.title > a:hover { color: #660000; } .my-portals-container table td.portal-label { color: #a4a4a4; } .create-btn-container .btn{ float: right; margin-bottom: 20px; } /** The Portal Visualization View **/ .portal-viz-section-view{ background-color: black; } .portal-viz-section-view iframe{ box-sizing: border-box; border: 0px; } /****************************************** * HTML converted from Markdown ********************************************/ /* images in markdown */ .markdown img.thumbnail { display: block; } /* the following two rules overwrite both: i. the bootstrap `pre` rules ii. individual theme `pre` rules */ div.markdown pre { color: #383a42; background: #fafafa; border-radius: 3px; } /* markdown citations */ .markdown .inlineCitation { } .markdown .csl-entry { text-indent: -15px; margin-left: 15px; margin-bottom: 10px; } .markdown #bibliography { margin-top: 40px; margin-bottom: 20px; } /****************************************** * Download / Resource Map contents table ********************************************/ #downloadContents .controls-well{ overflow-x: scroll; -webkit-transform: translate3d(0,0,0); } .download-contents{ float: none; clear: both; } .download-contents ~ .download-contents { margin-top: 20px; } table.download-contents { width: 100%; margin-bottom: 0px; } table.download-contents.nested{ margin-left: 5%; width: 95%; } .download-contents td{ overflow-wrap: break-word; vertical-align: middle; /*Oh tables, good for one thing...*/ } .download-contents th{ font-weight: normal; } .table-header.subtle{ font-size: .9em; line-height: 0.8em; border-top: 0px; } .table .table-header{ border-bottom: 1px solid #8DA2AA; } .table-header-link{ font-weight: normal; } .table tr > th .tooltip{ font-weight: normal; } .download-contents .btn .icon, .download-contents .preview .icon{ font-size: 1em; margin-left: 5px; } .download-contents a[href="tools/eml"]{ color: inherit; } .download .btn i{ margin-left: 5px; } .download-contents .format-type{ text-align: left; } .download-contents .file-type i { color: #999; margin-left: 5px; } .download-contents .ellipsis{ display: block; max-width: 250px; } table.download-contents .name{ min-width: 325px; max-width: 325px; } table.download-contents .btn-container, table.download-contents .btn-container .btn{ width: 140px; } .download-contents.service .btn-container .btn{ width: 135px; } .download-contents.service .btn-container .btn span { float: left; width: 80%; width: calc(100% - 20px); } .download-contents.service .btn-container .btn .icon { float: right; margin-top: 1em; } .download-contents th .btn-primary{ min-width: 138px; } .download-contents.nested .table-header.title a{ color: #FFF; } .parent-link{ font-size: .9em; margin-bottom: 10px; display: block; } /* The footer / expand-collapse control */ .table tfoot th{ text-align: center; } tfoot .control{ border-bottom-width: 1px; border-bottom-style: dotted; cursor: pointer; } tfoot .control i{ margin-left: 5px; } .download-contents ~ .expand-collapse-control{ line-height: 2em; text-align: center; font-weight: bold; margin-top: 20px; margin-bottom: 20px; } .expand-collapse-control > a > .icon{ margin-right: 5px; } /**----------------------------------------**/ /****************************************** /****************************************** * Service Registration table ********************************************/ .service-table { margin-top: 2em; } .service-table td { height: 1em; vertical-align: middle; } .service-table td.service-name { width: 150px; } .service-table td.service-description { min-width: 200px; max-width: 300px; } .service-description p { display: inline; margin-right: 5px; } .service-description .ellipsis { width: 80%; width: calc(100% - 48px); display: inline-block; margin: 0px; } .service-description .expand-collapse { vertical-align: top; } .service-table thead{ font-weight: bold; } .service-table td.service-type { width: 100px; } .service-table td.service-endpoint { width: 200px; } .service-table td.service-endpoint input { width: 120px; margin-bottom: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-color: #e6e6e6; } .service-table td.service-endpoint button { margin-bottom: 0px; border-left: 0px; padding: 4px 7px; border-top-left-radius: 0px; border-bottom-left-radius: 0px; } .service-table span.copy-success { position: absolute; margin-top: 4px; margin-left: 10px; } /**----------------------------------------**/ /****************************************** * Citations and Citation Popovers ********************************************/ .popover .citation .id{ word-wrap: break-word; word-break: break-all; } .popover .citation-container.multiple .citation{ padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid #999; } .popover .citation-container a{ margin-top: 10px; display: block; } .popover .citation-container a > i{ margin-left: 5px; } .citation .label{ display: inline; font-weight: bolder; text-shadow: none; } #results .popover{ min-width: 300px; max-width: 300px; font-size: .9em; line-height: 1.3em; } .popover cite{ display: block; margin-bottom: 20px; } .citation .id{ color: #888; font-size: .9em; } .result-row .citation a { color: inherit; font-weight: normal; } .result-row .citation .title{ font-weight: bold; } .route-to-metadata{ cursor: pointer; } .citation.collection .title{ display: block; } .citation.collection .id{ display: none; } /****************************************** ** User Profile *** ******************************************/ .user-view-section > section { max-width: 1200px; width: 90%; margin-left: auto; margin-right: auto; } #profile-content { float: right; } #user-profile #data-list{ padding-bottom: 20px; margin-bottom: 20px; } #user-profile #clear-all{ display: none; } .user-view-section > .section > .span12{ margin-left: 0px; } .user-view-section .hgroup{ margin-bottom: 20px; } .user-view-section .hgroup h2 a{ font-weight: lighter; color: inherit; } .user-view-section .hgroup h6, .user-view-section .hgroup h5{ font-weight: normal; } .user-view-section h5{ margin-bottom: 10px; margin-top: 5px; padding-bottom: 10px; } .user-view-section .hgroup .divided{ margin-top: 20px; padding-top: 20px; } #token-generator-container .notification.loading{ min-height: 236px; } textarea.token{ width: 100%; margin-top: 20px; font-size: .9em; } .form-group{ clear: both; } .list-group-item .remove-identity-btn { float: right; line-height: 2.7em; } .list-group-item.identity.pending .details{ margin-left: 52px; } .list-group-item.identity .details .orcid-logo{ margin-left: 0px; } .list-group-item .confirm-request-btn, .list-group-item .reject-request-btn{ margin-right: 5px; } .icon.is-owner{ color: #FFD700; } .member .has-member-controls{ float: left; width: 85%; } .member .member-controls{ float: left; width: 10%; width: calc(15% - 10px); } .member .member-controls .remove-member{ float: right; font-size: 1.3em; line-height: 2em; cursor: pointer; } .add-member label{ max-width: 100%; word-break: break-word; white-space: pre-wrap; } .add-member .notification{ margin-top: 10px; line-height: 30px; } .list-group-item.add-member input{ max-width: 75%; } #data-list > p.center{ margin-top: 40px; } .orcid-logo{ height: 16px; width: 16px; vertical-align: middle; } #user-profile .logo{ max-width: 100px; display: block; margin-bottom: 30px; } #identity-request-container label, .add-member label{ font-weight: bold; } #first-upload-year-container{ float: left; max-width: 115px; } #first-upload-container{ font-size: .9em; width: 50%; width: calc(97% - 135px); } #total-replicas-wrapper{ display: none; } address.email-container{ display: inline; } address.email-container:after{ content: attr(data-domain); } address.email-container:before{ content: attr(data-user); } [data-username="ORNLDAAC"] #user-profile .user-info .logo, [data-username="CDL"] #user-profile .user-info .logo, [data-username="PISCO"] #user-profile .user-info .logo, [data-username="ONEShare"] #user-profile .user-info .logo, [data-username="KUBI"] #user-profile .user-info .logo, [data-username="CLOEBIRD"] #user-profile .user-info .logo, [data-username="EDACGSTORE"] #user-profile .user-info .logo, [data-username="NKN"] #user-profile .user-info .logo, [data-username="NRDC"] #user-profile .user-info .logo{ max-width: 200px; width: 200px; } #quality-score, #quality-chart{ display: none; } .quality-report-view #suiteId { position: relative; width: auto; margin-top: 10px; margin-bottom: 10px; } .quality-report-view .metric-chart-loading { margin: 50px auto; } .new-icon{ color: #d2a908; } /****************************************** ** Stats *** ******************************************/ .no-activity h3, .no-activity h4, .no-activity h5, .no-activity h6, .no-activity p, .no-activity .summary-container p, .no-activity a, .no-activity .message, .no-activity svg .title, .no-activity svg .bar-label, .profile .no-activity .packages p{ color: #CCC; stroke: #CCC; fill: #CCC; } .no-activity svg.character { display: none; } /*Moving the circle badge at the center of the div*/ .profile .circle-badge { display: block; margin: auto; } .profile .circle-badge circle.no-activity{ stroke: #CCC; fill: transparent; } .profile .circle-badge text.no-activity{ fill: #CCC; } .profile .charts{ box-sizing: border-box; display: flex; justify-content: center; } .profile .chart{ float: left; margin-left: 20px; margin-right: 20px; margin-top: 30px; } .profile .stripe{ clear: both; min-height: 200px; } .profile .chart-title.uploads{ width: 100%; } .profile .downloads .chart-title, .profile .uploads .chart-title{ width: 100%; min-width: 250px; } .profile #downloads-title, .profile #uploads-title{ float: left; min-width: 200px; } .profile .chart.download-chart, .profile .chart.upload-chart{ width: 1000px; float: none; clear: both; } .profile .stripe{ border-top: 1px dashed #CCC; padding: 20px 20px 20px 20px; } .profile .packages p { color: #333; } .no-activity .profile .packages p{ color: inherit; } .profile .circle-badge circle{ fill: transparent; } .profile .quick-stats .circle-badge .count{ font-size: 24px; } .profile .quick-stats .circle-badge .title{ font-size: 16px; } .profile .charts + p{ margin-top: 20px; } /**** Bar Charts ******/ .bar-chart .bar-label.bg{ fill: rgba(0,0,0,0.8); stroke-width: 0px; } .bar-chart .bar-label.bg ~ text{ fill: #FFF; } .bar-chart.hide-labels .x.axis .tick:nth-child(even){ display: none; /* hide every other x-axis tick when there are too many bars */ } .bar-chart.log-scale .tick line{ stroke: #EEE; } .profile .temporal-coverage-chart{ width: calc(100% - 40px); } /**** Default Chart Styles *****/ svg .default, .fallback.default{ fill: #999; stroke: #999; color: #999; } .donut.default .donut-labels, .donut.no-activity .donut-labels{ visibility: hidden; } .donut.default > g .donut-arc, .donut.data.default > g .donut-arc, .donut.metadata.default > g .donut-arc, .donut.default .donut-title-count, .donut.default .donut-title-text{ fill: #999; } .circle-badge.default circle{ stroke: #999; } .circle-badge.default text{ fill: #999; } /**** Static Image Chart Styles *****/ .profile .stripe img{ width: 100%; max-width: 950px; min-width: 600px; max-height: 350px; padding-top: 30px; padding-left: 10px; overflow-x: scroll; } .profile .stripe .static-img-container { overflow-x: auto; } /**** No Activity Chart Styles (when Stats View is blank/ no activity found) *****/ svg .no-activity, .fallback.no-activity{ fill: #CCCCCC; stroke: #CCCCCC; color: #CCCCCC; } .donut.default > g .donut-arc, .donut.data.default > g .donut-arc, .donut.metadata.default > g .donut-arc, .donut.default .donut-title-count, .donut.default .donut-title-text{ fill: #CCCCCC; } /****************************************** ** Panels *** ******************************************/ .panel { margin-bottom: 20px; background-color: #fff; border: 1px solid transparent; border-radius: 4px; -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05); box-shadow: 0 1px 1px rgba(0,0,0,.05); transition: box-shadow 2s ease-out; -o-transition: box-shadow 2s ease-out; -moz-transition: box-shadow 2s ease-out; -webkit-transition: box-shadow 2s ease-out; -ms-transition: box-shadow 2s ease-out; -kthtml-transition: box-shadow 2s ease-out; transition: box-shadow 2s ease-out; } .panel.highlight{ box-shadow: 0 0 5px rgb(50, 161, 19),0 0 12px rgb(0, 255, 213); } .panel-default { border-color: #ddd; } .panel-default>.panel-heading { background-color: #f5f5f5; border-color: #ddd; } .panel-heading { padding: 10px 15px; border-bottom: 1px solid transparent; border-top-left-radius: 3px; border-top-right-radius: 3px; } .panel-title { color: inherit; } .panel-body { padding: 15px; } .panel-body .panel{ margin-top: 30px; } .panel-body form{ margin-bottom: 0px; } .panel>.list-group, .panel>.panel-collapse>.list-group { margin-bottom: 0; margin-left: 0px; } .list-group { padding-left: 0; margin-bottom: 20px; margin-left: 0px; list-style: none; } .panel>.list-group .list-group-item, .panel>.panel-collapse>.list-group .list-group-item { border-width: 1px 0; border-radius: 0; } .list-group-item:first-child { border-top-left-radius: 4px; border-top-right-radius: 4px; } .list-group-item { position: relative; display: block; padding: 10px 15px; margin-bottom: -1px; background-color: #fff; border: 1px solid #ddd; } .list-group-header.list-group-item{ background-color: #ECF1F5; min-width: auto; } #profile-group-list-container > ul > .list-group-header.list-group-item:hover, #profile-group-list-container > ul > .list-group-header.list-group-item.active{ background-color: #208095; min-width: auto; } #profile-group-list-container > ul > li.list-group-item.member.current-page:hover{ background-color: #fff; } #profile-group-list-container > ul > .pager.list-group-item:hover { background-color: #fff; } #profile-group-list-container > ul > .pager > .pager-link:hover { background-color: #208095; color: #fff; } .panel>.list-group .list-group-item.active{ border-left-width: 5px; } .list-group-item > .list-group { margin-bottom: 10px; margin-top: 10px; } .list-group-item > .list-group > .list-group-item:last-child{ border-bottom-width: 0px; } .list-group-item a > .icon{ margin-right: 5px; } .list-group-item:first-child { border-top-left-radius: 4px; border-top-right-radius: 4px; } .list-group-item { position: relative; display: block; padding: 10px 15px; margin-bottom: -1px; background-color: #fff; border: 1px solid #ddd; box-sizing: border-box; } .list-group-item .badge{ margin-top: 10px; } .panel>.list-identity .list-group-item.active{ border-left-width: 5px; } .list-group-item > .list-identity { padding-left: 20px; margin-bottom: 0px; } .list-group-item > .list-identity > .list-identity-item:last-child{ border-bottom-width: 0px; } .list-group-item a > .icon{ margin-right: 5px; } .list-group-item .details { font-size: .9em; display: block; color: #666; } .list-group-item.member .details{ margin-left: 18px; } .list-group-item.create-group a{ font-weight: normal; } /****************************************** ** Searching and Map *** ******************************************/ #clear-all{ width: 95%; width: calc(100% - 10px); padding: 2px 5px; margin-bottom: 0px; display: block; float: none; cursor: pointer; font-size: 1em; color: #FFF; font-weight: bold; background-color: #006699 } #clear-all .icon{ color: rgb(131, 131, 0); margin: 0px 5px; } #map-container{ display: none; } body.mapMode{ overflow-y: hidden; } .mapMode #map-container{ position: relative; display: block; } .map-toggle-container{ background-color: #333333; background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.7) 37%, rgba(0,0,0,0.7) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(37%,rgba(0,0,0,0.7)), color-stop(100%,rgba(0,0,0,0.7))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0.7) 37%,rgba(0,0,0,0.7) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0.7) 37%,rgba(0,0,0,0.7) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0.7) 37%,rgba(0,0,0,0.7) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0.7) 37%,rgba(0,0,0,0.7) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#b3000000',GradientType=0 ); /* IE6-9 */ padding: 5px; top: 0px; height: auto; position: relative; display: block; width: 95%; width: calc(100% - 10px); } .mapMode #results-view .map-toggle-container { display: none; } .map-toggle-container > a{ font-size: 1em; line-height: 1.3em; color: white; font-weight: normal; } .map-toggle-container > a:hover{ color: white; font-weight: bold; } .map-toggle-container > a > .icon{ margin-left: 5px; margin-right: 5px; } .map-toggle-container > label{ color: #FFF; float: right; } .map-toggle-container > input[type="checkbox"]{ float: right; margin-top: 2px; height: 20px; width: 20px; } /* For list mode only */ .list-only #sidebar{ display: none; } .list-only #results-container{ width: 100%; overflow-y: visible; overflow-x: visible; } .list-only .map-toggle-container{ display: none; } /****************************************** ** Filters *** ******************************************/ .filter-container{ width: 187px; } .filter-contain{ border-bottom: 1px dashed #CCC; padding: 10px 0px 5px 0px; width: 100%; height: auto; max-height: 1.4em; transition: max-height .5s ease-in-out; -webkit-transition: max-height .5s ease-in-out; -moz-transition: max-height .5s ease-in-out; overflow: hidden; } .filter-input-contain{ position: relative; width: 100%; } .filter.btn{ margin-bottom: 0px; } .filter-contain > label{ font-size: 13px; font-weight: bold; display: inline-block; height: 2em; } .current-filters-container{ margin-bottom: 10px; display: block; clear: both; border-bottom: 2px solid #DDD; padding-left: 10px; padding-right: 25px; } .current-filters > .current-filter, .current-filters > .current-filter[class*="span"]{ padding: 0px 5px 0px 5px; min-height: 1.5em; line-height: 1.5em; width: 100%; width: calc(100% - 20px); margin: 5px 0px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; font-size: 1em; } .current-filters, .current-filters[class*="span"]{ list-style: none; margin-left: 0px; min-height: 0px; } .current-filter > span{ max-width: 85%; max-width: calc(100% - 25px); overflow: hidden; white-space: normal; word-break: break-word; display: inline-block; vertical-align: middle; } .current-filter .category{ font-weight: bold; margin-right: 5px; } .current-filter > .icon{ margin-left: 5px; } .current-filters[data-category='resourceMap'] .current-filter .category{ margin-right: 0px; } #sidebar{ width: 225px; height: auto; overflow-y: visible; overflow-x: visible; float: left; clear: left; } .mapMode #sidebar{ width: 215px; height: 700px; border-right: 1px solid #CCC; overflow-x: hidden; overflow-y: overlay; -webkit-transform: translate3d(0,0,0); } #sidebar > *{ padding-left: 10px; padding-right: 10px; width: calc(100% - 30px); } #sidebar > .input-append{ margin-top: 10px; border-bottom: 2px solid #DDD; padding-bottom: 16px; } #sidebar > .input-append > label{ font-size: 15px; font-weight: bold; } #sidebar > .input-append .btn { margin-left: -6px; } #sidebar .tooltip-inner{ font-size: 1.2em; font-weight: normal; max-width: 181px; } #all_input { width: 75%; width: calc(100% - 60px); margin-left: 0px; margin-right: -3px; } .filter-input-contain input.filter{ margin-right: -3px; margin-left: 0px; border-radius: 5px 0px 0px 5px; -webkit-border-radius: 5px 0px 0px 5px; -moz-border-radius: 5px 0px 0px 5px; border: 1px solid #AAAAAA; border-right: 0px; height: 20px; width: 75%; } #filter-year{ width: 90%; } #filter-year input[type='text']{ max-width: 50px; } #sidebar .ui-helper-hidden-accessible{ display: none; } #filter-year .filter-input-contain{ margin-top: 10px; } .filter-contain input[type="checkbox"].filter{ width: 20px; float: left; margin-right: 5px; } /*-- Pagination and sort --*/ .sort-by{ float: right; } .sort-by label { display: inline; margin-right: 5px; line-height: 30px; vertical-align: top; } .sort-by select{ width: auto; } .pager-view li a{ min-height: 20px; min-width: 12px; } .pager-view li a:not([href]){ pointer-events: none; color: #CCC; } #results-container .pagination{ box-sizing: border-box; } /*-- The filter checkboxes --*/ #includes-files label{ margin-right: 4px; float: left; font-size: 13px; width: auto; } .filter-contain .checkbox-list { margin-left: 0px; list-style: none; } .checkbox-list > li > input{ float: left; margin-right: 10px; margin-left: 3px; } .checkbox-list label{ font-size: .9em; } .checkbox-list .more-link, .checkbox-list .less-link{ font-weight: normal; font-size: .9em; } .checkbox-list .more-link .icon, .checkbox-list .less-link .icon{ margin-left: 5px; font-size: 1.2em; vertical-align: text-bottom; line-height: .9em; } /** Filter icons **/ .filter-contain > label > .icon{ color: #888; font-size: 17px; float: left; margin: 0px; margin-right: 8px; } .filter-contain .icon.more-info{ font-size: 14px; line-height: 23px; top: 5px; float: left; cursor: default; } .filter-contain .icon.expand, .filter-contain .icon.collapse{ margin-right: 15px; } #filter-year > .icon, #includes-files > .icon{ margin-top: 0px; } .filter-contain > .icon-sitemap{ font-size: 18px; } .filter-contain > .icon-map-marker{ font-size: 22px; } .current-filters.active { background-color: inherit; border-color: inherit; display: inline-block; float: none; } /** For "My Packages" filter **/ .keyword-search-link, .current-filters > li.keyword-search-link { display: none; } .keyword-search-link.active, .current-filters > li.keyword-search-link.active{ border-color: inherit; display: inline-block; width: auto; } .btn-primary[disabled], .btn-primary[disabled]:hover, .btn[disabled], .btn[disabled]:hover { border-color: #CCC; background-color:#e6e6e6; color: #333; } /********* Filter Views ***********/ .filter-groups .tab-content { overflow: inherit; } .portal-view .filter-group{ padding: 0px 20px; } .filter-group .filters-container{ display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; } .filter-group .filter { flex-grow: 1; padding-right: 20px; max-width: 350px; min-width: 200px; } .filter-groups.vertical .filter-group .filter{ padding-right: 0px; min-width: 0px; max-width: 100%; margin-bottom: 10px; } .filter-groups .filter .btn:not(.btn-filter-editor){ box-shadow: none; border-color: #ccc; color: #999; padding: 4px 10px; } .filter-groups.vertical .filter .btn{ margin-left: -5px; padding: 4px 10px; } .filter-groups .filter .btn .icon{ line-height: 16px; margin: 0px; } .filter-group .filter input{ box-shadow: none; } .filter-groups .filter label{ cursor: default; margin-bottom: 13px; display: flex; align-items: center; } .filter-group-links{ border-top: 1px solid #DDD; clear: both; } .edit-mode .filter-group-links { margin-top: 2rem; margin-left: 1rem; } .edit-mode .filters-container { margin-top: 1rem; margin-left: 1.5rem; } .filter-groups.vertical .filter-group-links { border: 0px; } .filter-group-link a, .nav-tabs .filter-group-link a, .nav-tabs .filter-group-link.active a { background-color: #eee; border: 1px solid #ccc; border-bottom: 0px; border-top: 0px; border-radius: 0px; border-top-width: 0px; margin-right: 0px; border-right-width: 0px; text-align: center; } .nav-tabs .filter-group-link.active a{ background-color: #FFF; } .nav-tabs .filter-group-link a:hover{ border-color: #CCC; } .filter-group-link{ background-color: #eee; } .filter-groups.vertical .filter-group-link { float: none; } .filter-groups.vertical .filter-group-link a, .filter-groups.vertical .nav-tabs .filter-group-link a, .filter-groups.vertical .nav-tabs .filter-group-link.active a { border: 0px; text-align: left; padding-left: 0px; } .filter .ui-slider{ position: relative; height: 5px; margin-top: 20px; margin-bottom: 20px; width: 90%; width: calc(100% - 20px); } .filter .ui-slider-handle{ width: 7px; height: 16px; } .filters-title{ text-transform: uppercase; color: #999; font-size: .9em; font-weight: normal; margin-top: 0px; } .filter-groups:not(.vertical) .filters-title{ display: none; } .filter-groups.vertical .filters-title{ display: none; font-size: .85em; } .filter-groups.vertical .filters-title .clear-all{ margin-left: 10px; } .filter-groups.vertical .filters-title .clear-all .icon{ float: right; margin-top: 2px; font-size: 1.2em; } .filters-title .clear-all{ margin-left: 10px; } .filters-header label{ font-weight: bold; } .filters-header .applied-filters{ min-height: 25px; } .filters-header .applied-filters .applied-filter{ background-color: #166194; color: #FFF; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; display: inline-block; margin-bottom: 5px; text-shadow: none; font-size: 1em; font-weight: normal; padding: 5px; margin-right: 10px; } .filter-groups.vertical .applied-filters .applied-filter{ display: block; position: relative; } .filter-groups.vertical .filters-header .applied-filters .applied-filter > span{ width: calc(100% - 20px); display: inline-block; white-space: normal; } .filters-header .applied-filters .applied-filter .label{ font-weight: bold; margin-right: 10px; background-color: transparent; } .filter-groups.vertical .applied-filters .applied-filter .remove-filter{ font-size: 1.3em; position: absolute; right: 5px; } .filter-groups.vertical .filters-header .applied-filters{ min-height: 0px; } .filters-header > .filter{ float: left; margin-right: 10px; width: auto; } .filter-groups.vertical .filters-header > .filter{ float: none; margin-right:0px; } .filter-groups:not(.vertical) .filters-header > .filter{ display: inline-block; } .filter-groups:not(.vertical) .filters-header > .filter input[type='text']{ width: auto; } .filter.date .min, .filter.date .max, .filter.numeric .min, .filter.numeric .max{ max-width: 30%; } .filter.date .to, .filter.numeric .to{ width: 30%; width: calc(40% - 50px); text-align: center; display: inline-block; } .filter.date .min, .filter.numeric .min{ float: left; } .filter.date .max, .filter.numeric .max{ float: right; margin-left: 10px; } .filter .ui-slider{ min-height: 6px; border-radius: 4px; border: 0px; background: #CCC; } .filter.boolean input{ height: auto; font-size: 3em; margin-right: 10px; } .filter.boolean span{ display: inline; white-space: normal; } .filter.numeric input{ max-width: 70px; } .filter.toggle .can-toggle > span{ margin-bottom: 5px; display: block; } .filter input[type='text']{ width: 80%; } /* Overrides for default Bootstrap styling for the searchable select component when we use it as a Portal data search filter. These overrides make the component look nearly identical to other filters (that use native form elements) */ .filter-groups .filter.annotation-filter .ui.fluid.dropdown>.dropdown.icon { top: 25%; } .filter-groups .filter.annotation-filter .dropdown.search { padding: 0; font-size: 100%; box-sizing: border-box; border-color: #ccc; border-radius: 2px; } .filter-groups .filter.annotation-filter .dropdown.multiple.ui { padding: 0; } .filter-groups .filter.annotation-filter .ui.multiple.search.dropdown > input.search { font-size: inherit; line-height: 20px; margin: 4px 6px; } /* End Overrides for default Bootstrap styling for the searchable select */ .filter-group .filter select{ width: 100%; } .filter-group > .row-fluid:not(:first-child){ margin-top: 20px; } .applied-filter .icon.remove-filter{ opacity: .7; margin-left: 10px; color: inherit; } .applied-filters{ margin: 0px; } .filters-header{ margin: 10px; } .filter-groups.vertical .filters-header{ margin: 0px; border-bottom: 1px dashed #CCC; margin-bottom: 10px; padding-bottom: 10px; } #portal-filters{ border: 1px solid #CCC; box-sizing: border-box; } #portal-filters > .tab-content{ padding: 10px 20px; } #portal-filters > .nav-tabs{ margin-bottom: 0px; border: 1px solid #CCC; border-left: 0px; border-right: 0px; background-color: #eee; } #portal-filters > .nav-tabs > li:first-child > a{ border-left: 0px; } #portal-filters > .nav-tabs > li:last-child > a{ border-right: 0px; } /* Hide the Spatial Filter elements until we fully support spatial filters */ .portal-editor .filter-groups.vertical .applied-filter.label.custom{ display: none; } .portal-editor .toggle-map-filter { display: none !important; } /******** Toggle Widget ************/ .can-toggle { position: relative; } .can-toggle *, .can-toggle *:before, .can-toggle *:after { -moz-box-sizing: border-box; box-sizing: border-box; font-size: 1em; } .can-toggle input[type="checkbox"] { opacity: 0; position: absolute; top: 0; left: 0; } .can-toggle input[type="checkbox"][disabled] ~ label { pointer-events: none; } .can-toggle input[type="checkbox"][disabled] ~ label .can-toggle-switch { opacity: 0.4; } .can-toggle input[type="checkbox"]:checked ~ label .can-toggle-switch:before { content: attr(data-unchecked); left: 0; } .can-toggle input[type="checkbox"]:checked ~ label .can-toggle-switch:after { content: attr(data-checked); } .can-toggle label { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: relative; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .can-toggle label .can-toggle__label-text { -webkit-flex: 1; -ms-flex: 1; flex: 1; padding-left: 32px; } .can-toggle label .can-toggle-switch { position: relative; } .can-toggle label .can-toggle-switch:before { content: attr(data-checked); position: absolute; top: 0; text-align: center; } .can-toggle label .can-toggle-switch:after { content: attr(data-unchecked); position: absolute; z-index: 5; text-align: center; background: white; -webkit-border-radius: 4px; border-radius: 4px; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .can-toggle input[type="checkbox"][disabled] ~ label { color: rgba(119, 119, 119, 0.5); } .can-toggle input[type="checkbox"]:focus ~ label .can-toggle-switch, .can-toggle input[type="checkbox"]:hover ~ label .can-toggle-switch { background-color: #777; } .can-toggle input[type="checkbox"]:focus ~ label .can-toggle-switch:after, .can-toggle input[type="checkbox"]:hover ~ label .can-toggle-switch:after { color: #5e5e5e; } .can-toggle input[type="checkbox"]:hover ~ label { color: #6a6a6a; } .can-toggle input[type="checkbox"]:checked ~ label:hover { color: #55bc49; } .can-toggle input[type="checkbox"]:checked ~ label .can-toggle-switch { background-color: #00689d; } .can-toggle input[type="checkbox"]:checked ~ label .can-toggle-switch:after { color: #00689d; } .can-toggle input[type="checkbox"]:checked:focus ~ label .can-toggle-switch, .can-toggle input[type="checkbox"]:checked:hover ~ label .can-toggle-switch { background-color: #00689d; } .can-toggle input[type="checkbox"]:checked:focus ~ label .can-toggle-switch:after, .can-toggle input[type="checkbox"]:checked:hover ~ label .can-toggle-switch:after { color: #00689d; } .can-toggle label .can-toggle__label-text { -webkit-flex: 1; -ms-flex: 1; flex: 1; } .can-toggle label .can-toggle-switch { -webkit-transition: background-color 0.3s cubic-bezier(0, 1, 0.5, 1); transition: background-color 0.3s cubic-bezier(0, 1, 0.5, 1); background: #848484; } .can-toggle label .can-toggle-switch:before { color: rgba(255, 255, 255, 0.5); } .can-toggle label .can-toggle-switch:after { -webkit-transition: -webkit-transform 0.3s cubic-bezier(0, 1, 0.5, 1); transition: transform 0.3s cubic-bezier(0, 1, 0.5, 1); color: #777; } .can-toggle input[type="checkbox"]:focus ~ label .can-toggle-switch:after, .can-toggle input[type="checkbox"]:hover ~ label .can-toggle-switch:after { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4); } .can-toggle input[type="checkbox"]:checked ~ label .can-toggle-switch:after { -webkit-transform: translate3d(65px, 0, 0); transform: translate3d(65px, 0, 0); } .can-toggle input[type="checkbox"]:checked:focus ~ label .can-toggle-switch:after, .can-toggle input[type="checkbox"]:checked:hover ~ label .can-toggle-switch:after { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4); } .can-toggle label { font-size: 1em; } .can-toggle label .can-toggle-switch { height: 1.1em; -webkit-flex: 0 0 134px; -ms-flex: 0 0 134px; flex: 0 0 134px; border-radius: 4px; } .can-toggle label .can-toggle-switch:before { left: 67px; line-height: 1em; width: 67px; padding: 0 12px; } .can-toggle label .can-toggle-switch:after { top: 2px; left: 2px; border-radius: 2px; width: 65px; line-height: 1.1em; } .can-toggle label .can-toggle-switch:hover:after { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4); } .can-toggle.can-toggle-small input[type="checkbox"]:focus ~ label .can-toggle-switch:after, .can-toggle.can-toggle-small input[type="checkbox"]:hover ~ label .can-toggle-switch:after { box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4); } .can-toggle.can-toggle-small input[type="checkbox"]:checked ~ label .can-toggle-switch:after { -webkit-transform: translate3d(98px, 0, 0); transform: translate3d(98px, 0, 0); } .can-toggle.can-toggle-small input[type="checkbox"]:checked:focus ~ label .can-toggle-switch:after, .can-toggle.can-toggle-small input[type="checkbox"]:checked:hover ~ label .can-toggle-switch:after { box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4); } .can-toggle.can-toggle-small label { font-size: 1em; } .can-toggle.can-toggle-small label .can-toggle-switch { height: 2.5em; -webkit-flex: 0 0 200px; -ms-flex: 0 0 200px; flex: 0 0 200px; border-radius: 4px; -webkit-border-radius: 4px; } .can-toggle.can-toggle-small label .can-toggle-switch:before { left: 100px; line-height: 2.5em; width: 100px; padding: 0 12px; } .can-toggle.can-toggle-small label .can-toggle-switch:after { top: 1px; left: 1px; border-radius: 4px; width: 100px; line-height: calc(2.5em - 2px); } .can-toggle.can-toggle-small label .can-toggle-switch:hover:after { box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4); } /** Autocompletes **/ .ui-autocomplete{ width: 246px; background-color: #FFFFFF; border: 1px solid #999999; padding: 10px; list-style: none; overflow-y: scroll; -webkit-transform: translate3d(0,0,0); max-height: 150px; z-index: 99999; overflow-x: hidden; } .ui-autocomplete .ui-menu-item{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 0px 5px; width: 100%; } .ui-autocomplete .ui-menu-item:hover{ background-color: #DDD; cursor: pointer; } /****************************************** ** Edit Collection View *** ******************************************/ /* Make the sidebar a bit wider since filters will be used a lot while editing a collection */ .edit-collection #sidebar{ width: 0px; border-right: none; } .edit-collection .map-toggle-container { background: #ededed; } .edit-collection .map-toggle-container > a { color: #333; } .edit-collection #results-container{ width: 100%; overflow-y: auto !important; overflow-x: hidden !important; margin-left: 0; } .edit-collection .result-header-count { font-size: 1rem; font-weight: 500; margin-bottom: 2rem; } .edit-collection .mapMode #results-container{ width: 49%; } .edit-collection .mapMode #map-container{ width: 49%; } /* The Save and Cancel buttons */ .collection-controls{ margin-top: 20px; margin-bottom: 20px; } .collection-controls .save{ width: calc(50% - 10px); box-sizing: border-box; margin-right: 10px; } .collection-controls .cancel{ width: calc(50% - 10px); box-sizing: border-box; } /******************************************* Registry and Forms ******************************************/ /* Do not use the .label Bootstrap styles on labels in forms */ form .label, #DynamicContent .label { background-color: inherit; color: inherit; text-shadow: inherit; font-size: inherit; font-weight: inherit; display: inherit; padding: inherit; line-height: inherit; white-space: inherit; vertical-align: inherit; } .has-error input, input.has-error{ border-color: #a94442; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); box-shadow: inset 0 1px 1px rgba(0,0,0,.075); } .has-error input:focus, input.has-error:focus{ border-color: #843534; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483; box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483; } .has-error label, .has-error > div.text-left{ /* div.text-left is for Metacat-specific (2.4.X and before) login markup */ color: #a94442; font-weight: bold; } .has-warning label{ color: #8a6d3b; font-weight: bold; } .has-warning .help-block{ color: #8a6d3b; } .has-warning .form-control { border-color: #8a6d3b; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); } .has-warning .form-control:focus { border-color: #66512c; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #c0a16b; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #c0a16b; } .has-warning .input-group-addon { color: #8a6d3b; background-color: #fcf8e3; border-color: #8a6d3b; } .has-warning .form-control-feedback { color: #8a6d3b; } form .text-left > .icon { margin-left: 10px; font-size: 1.1em; } .input-append .tooltip-inner { white-space: normal; } .input-append .alert{ font-size: 14px; margin-top: 10px; } .form-group input.control-group{ line-height: 30px; } .form-group input ~ .help-text, .form-group input ~ .help-text ~ .form-feedback { display: block; margin-left: 24%; } .inline-input-group.controls-well{ margin-bottom: 20px; padding: 10px 20px; clear: both; } .inline-input-group label.inline{ line-height: 2em; } .inline-input-group > .input-append{ position: relative; } .input-append > .notification { position: absolute; right: 0; top: -25px; background-color: #FFF; } label.inline{ display: inline; margin-right: 10px; vertical-align: middle; } input.subtle{ width: 50px; font-size: .9em; -o-transition: width .2s ease-out; -moz-transition: width .2s ease-out; -webkit-transition: width .2s ease-out; -ms-transition: width .2s ease-out; -kthtml-transition: width .2s ease-out; transition: width .2s ease-out; } .input-append input.subtle{ font-size: 13px; } input.subtle:focus { width: 200px; } .input-append .uneditable-input, .input-append input, .input-append select, .input-prepend .add-on:first-child, .input-prepend .btn:first-child{ -webkit-border-radius: 2px 0 0 2px; -moz-border-radius: 2px 0 0 2px; border-radius: 2px 0 0 2px; } .jump-width-input{ transition: width 1000s; } .nav .input-submit{ margin-left: 10px; height: 1em; line-height: 1em; border-color: #666; color: #666; } #funding-group .ui-helper-hidden-accessible{ display: none; } #funding-group .ui-autocomplete{ width: 500px; position: absolute; top: 10px; left: 10px; } #funding-group .ui-autocomplete .ui-menu-item{ width: 500px; line-height: 1.4em; } #funding-group .ui-autocomplete .ui-menu-item a{ font-size: 1em; } .input-help-msg{ padding: .5em 0; } .cell-icon{ width: 1em; } .progress{ margin-top: 2em; } .ui-autocomplete-container.collapse.in{ overflow: visible; } #collapseParties .popover{ z-index: 0; } #RegistryGuide > div{ font-size: 1.8em; } .text-container input, .text-container textarea{ width: 100%; } /******************************************* Query builder & query rule view ******************************************/ .query-builder { box-shadow: 0 1px 6px rgba(0,0,0,0.16), 0 1px 8px -3px rgba(0,0,0,0.23); padding: 0; margin: 2rem 1rem 2.5rem; width: 100%; max-width: 1400px; border-radius: 3px; box-sizing: border-box; } /* For query builders that are within a query rule row */ .query-builder.nested{ box-shadow: none; margin: 0 0 0.3rem 0; } .query-builder-title { font-weight: 500; font-size: 1.1rem; width: 100%; margin: 0 0 1.2rem 0; border-bottom: 1px solid #eee; padding: 1.4rem 2rem 1.2rem; box-sizing: border-box; } .query-builder.nested .query-builder-title{ padding: 1rem 1rem 1rem 0.1rem; } .query-builder .exclude-input, .query-builder .operator-input { display: inline-block; } .query-builder .buttons-container { margin-left: 2rem; } .query-builder.nested .buttons-container { margin-left: 0.1rem; } .query-builder .btn.add-rule, .query-builder .btn.add-rule-group { padding: 0.25rem 0.55rem 0.25rem 0.25rem; margin-right: 0.5rem; } .rules-container { display: grid; grid-template-rows: auto; grid-template-columns: 100%; grid-gap: 1.5rem; padding: 1.9rem 2rem; } .query-builder.nested .rules-container{ padding: 1.9rem 0 0.9rem 0.3rem; } .query-rule { display: grid; grid-template-columns: 3.9rem 0.9fr 0.65fr 0.9fr 1.5rem; grid-template-rows: 1fr; grid-template-areas: "info field operator value remove"; grid-gap: 1.5rem; align-items: top; } /* For query rules that contain a query builder */ .query-rule.rule-group { grid-template-columns: 3.9rem auto 1.5rem; grid-template-areas: "info query-builder remove"; } .query-rule .rule-info { grid-area: info; font-weight: 700; font-size: 0.9rem; color: #00689d; color: var(--rule-color); display: flex; justify-content: space-between; } .query-rule .rule-info:after { content:""; float:right; background: #00689d; background: var(--rule-color); width:3px; height: calc(100% + 0.2rem); border-radius: 1.5px; } .query-rule .field{ grid-area: field; } .query-rule .operator{ grid-area: operator; } .query-rule .value{ grid-area: value; } /* the button used to remove a rule */ .query-rule .remove-rule { font-size: 1.5rem; grid-area: remove; cursor: pointer; opacity: 0.2; display: grid; align-content: center; justify-self: flex-end; } .query-rule.rule-group > .remove-rule { align-content: top; height: fit-content; margin-top: 4.1rem; } .searchable-select-label { margin: 0 0 3px 2px; font-size: 0.8rem; } .search-select-tooltip { /* one greater than the .modal z-index */ z-index: 1051 } /* make the number & date filter inputs match the operator and field inputs */ .query-rule .filter input { padding: .60em 1em; border: 1px solid rgba(34,36,38,.15); margin: 0; } .query-rule .slider-container { text-align: center; } .query-rule .filter label { display: none; } .query-rule .filter .ui-slider { margin: 0.6rem 0 1rem; } .query-rule .filter.date .to, .query-rule .filter.numeric .to { width: 10%; text-align: center; } .query-rule .filter.date .max, .query-rule .filter.numeric .max { margin-left: 0; } /* ---- Icons for the operator options not included in font-awesome ---- */ .icon-equal, .icon-not-equal, .icon-less-than, .icon-greater-than, .icon-less-than-or-eq, .icon-greater-than-or-eq { font-family: serif; font-weight: 900; font-size: larger; line-height: 14px; } .icon-equal:before{ content: "=" } .icon-not-equal:before{ content: "\2260" } .icon-less-than:before{ content: "<" } .icon-greater-than:before{ content: ">" } .icon-less-than-or-eq:before{ content: "≤" } .icon-greater-than-or-eq:before{ content: "≥" } /******************************************* Editor View ******************************************/ .Editor #Footer{ display: none; } .Editor #Navbar{ padding-bottom: 0px; } .Editor #logo{ height: 40px; margin-top: 5px; } .Editor .header .nav > li > a{ font-size: 1em; } .Editor .header .nav li a.btn{ font-size: .7em; } .Editor .header .border-image{ height: 15px; margin-bottom: 5px; } .editor-view { margin: 0px; width: 100%; max-width: 100%; } #editor-body{ padding-bottom: 100px; } .Editor #Content { padding-top: 70px; padding-left: 0px; padding-right: 0px; max-width: 100%; } #editor-header { border-bottom: 1px solid #DDDDDD; } #editor-header .citation{ padding: 1em; margin-bottom: 0px; font-size: 1.1em; line-height: 1.6em; } #editor-header .editor-controls{ min-height: 130px; align-items: center; display: flex; margin-left: 40px; height: 100%; } #editor-header .editor-controls:empty{ display: none; } #editor-header .editor-controls .btn{ align-self: center; margin-top: 14px; padding: 10px 15px; } .side-nav-item a { width: 100%; display: block; height: 3em; font-size: 1.3em; line-height: 3em; padding-left: 20px; box-sizing: border-box; } .side-nav-item a:focus { text-decoration: none; } .side-nav-item.error a{ color: #da4e4e; } .side-nav-item.error .active { background-color: #da4e4e; color: #FFFFFF; } .side-nav-item a .icon.hidden{ display: none; } ul.side-nav-items { margin-left: 0px; } .side-nav-item { list-style: none; display: block; } .side-nav { position: fixed; background-color: #EEE; height: 100%; max-width: 160px; min-width: 160px; margin-left: 0px; border-right: 1px solid #DDD; } .side-nav + .metadata-container{ margin-left: 160px; padding-left: 20px; } .Editor #Footer { left: 160px; width: calc(100% - 160px); margin-left: 0px; margin-bottom: 0px; } .Editor.rendering #Footer{ margin-left: 0%; width: 100%; } #editor-footer{ position: fixed; display: grid; box-sizing: border-box; width: 100%; bottom: 0px; padding: 0.8rem; z-index: 13; height: 74px; background-color: #333; align-items: center; grid-template-rows: auto; grid-template-columns: auto auto; grid-template-areas: "trial-message save-controls"; gap: 0.5rem; } #editor-footer .free-trial-message{ color: #FFF; grid-area: trial-message; } #editor-footer .free-trial-message .icon{ height: 1.1em; fill: #FFF; } .metadata-view #editor-footer{ display: none; left: 0px; } #editor-footer a:not(.btn){ color: #FFF; font-weight: bold; } /* The "view last saved version" and "save" button */ .editor-save-controls{ justify-self: right; display: grid; grid-template-columns: auto auto; gap: 1rem; grid-area: save-controls; } .editor-save-controls > a{ line-height: 1.5em; font-size: 1.1em; font-weight: bold; margin: 0; height: 1.5em; align-self: center; } .editor-save-controls > a:not(.btn){ color: #FFF; } .editor-save-controls .metadata-container textarea{ width: 100%; margin-bottom: 20px; } #cancel-metadata-prov{ margin-left: 30px; } /* Editor package table container */ #data-package-container { overflow: auto; position: relative; } /* Editor package table */ #data-package-table { margin-bottom: 0px; width: calc(100% - 2px); } /* Editor package table headers */ #data-package-table-share, #data-package-table-guide-status { text-align: center; } /* Editor package table row */ .data-package-item td { vertical-align: middle; white-space: nowrap; position: relative; } .data-package-item td.name div { padding: 8px; width: fit-content; cursor: not-allowed; } .data-package-item td.canRename div { cursor: text; } .data-package-item td.error > [contenteditable]{ border: 2px solid red; } /* Editor package table column 1 */ .data-package-item td:first-of-type { padding-left: 20px; width: 100px; } /* Editor package table file name column */ .data-package-item td.name { white-space: normal; } /* Editor package table size column */ .data-package-item td.size { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100px; } /* Editor package table type column */ .data-package-item td.type { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100px; } .data-package-item td.public { width: 60px; } /* Editor package table sharing column */ .data-package-item td.sharing { width: 60px; } .data-package-item td input[type='checkbox']{ margin-left: 30%; height: auto; } .data-package-item .sharing .disabled{ opacity: .5; } /* Editor package table column 5 */ .data-package-item td:last-of-type { text-align: right; padding-right: 10px; padding-left: 0px; width: 100px; } /* Editor package table buttons */ .data-package-item td button { text-align: center; vertical-align: middle; } .data-package-item td button .icon{ margin-left: 0px; } .data-package-item .icon{ margin-right: 10px; width: 1.4em; } .data-package-item .btn.edit{ width: 85px; color: #19B36A; } .data-package-item .btn-group .btn{ background-color: white; } .data-package-item .btn.warning { background-color: #FFF; color: #ffbc00; } .data-package-item .btn.error, .data-package-item .status .icon.danger, .data-package-item .status .icon.error{ color: #FF0000; } .data-package-item .dropdown-menu{ border-color: #CCC; border-width: 1px; border-style: solid; margin-top: 6px; min-width: 100px; } .data-package-item .dropdown-menu .muted { color: #CCC; } .data-package-item.error-saving .disable-layer{ width: 100%; } .data-package-item .btn-group .dropdown-toggle { border-bottom-left-radius: 0px; border-top-left-radius: 0px; width: 25px; } .data-package-item button{ border-color: #CCC; } .data-package-item.remove-preview { opacity: 1; } .data-package-item.remove-preview .name, .data-package-item.remove-preview .status, .data-package-item.remove-preview .size, .data-package-item.remove-preview .type, .data-package-item.remove-preview .type-icon{ opacity: .3; } .data-package-item.message-row td{ padding-top: 3%; } .data-package-item.message-row:hover td{ background-color: #FFF; } .data-package-item.message-row h2{ font-size: 2.1em; } .data-package-item.message-row button{ font-size: 1.2em; margin-top: 10px; display: block; } /* Editor package table status column */ .data-package-item .status{ width: 60px; } .data-package-item .progress{ margin: 0px; } .data-package-item .progress-striped .bar{ background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); -webkit-background-size: 40px 40px; -moz-background-size: 40px 40px; -o-background-size: 40px 40px; background-size: 40px 40px; } .data-package-item .status .icon{ display: block; margin-left: auto; margin-right: auto; } .data-package-item .status{ text-align: center; } .status-tooltip div{ white-space: normal; } .status-tooltip.error h6{ color: red; } .status-tooltip.error div{ color: white; } .data-package-item.loading{ opacity: .6; } .data-package-item .controls .btn.message{ font-size: 12px; } .data-package-item .controls .btn.message .icon{ margin-left: -5px; margin-right: 5px; } border: none; background-color: inherit; width: auto; } /* Editor package table button dropdown */ .Editor #data-package-table td:last-of-type ul { border-radius: 4px; left: 0px; width: 107px; min-width: 85px; } #data-package-container + .ui-resizable-handle{ border: 1px solid #D5D5D5; border-right-width: 0px; border-left-width: 0px; background-color: #FFF; height: 10px; width: 100%; bottom: 1px; } #data-package-container + .ui-resizable-handle .icon{ font-size: 15px; color: #D5D5D5; z-index: 91; margin: -3px auto 0px auto; display: block; width: 15px; } #data-package-container + .ui-resizable-handle:hover{ cursor:ns-resize; } textarea.xlarge{ min-height: 200px; } textarea.medium{ min-height: 50px; } /* Highlight drop zones with a dashed border */ .droppable { border: 2px dashed #1F254F; } .Editor .disable-layer{ background-color: rgba(255, 255, 255, 0.6); height: 100%; width: 100%; position: absolute; top: 0px; z-index: 2; } .Editor .dropdown-menu li a i { vertical-align: middle; } #editor-body .alert { position: relative; } .Editor #Content > .alert-container .alert{ position: fixed; left: 0px; min-width: 100%; z-index: 14; margin-left: 0px; top: 0px; max-width: 100%; } .Editor #Content > .alert-container .alert.non-fixed{ position: relative; min-width: auto; z-index: 0; } .Editor #Content > .alert-container .alert{ padding: 20px; font-weight: bold; box-sizing: border-box; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; z-index: 999; } .Editor #Content > .alert-container .alert .container { width: auto; max-width: 940px; text-align: center; }; .Editor input, .Editor select{ /*padding: .5em 1em;*/ height: 2.4em; box-sizing: border-box; font-size: 1em; } .Editor > #Navbar .navbar .navbar-inner .nav .input form input[type="text"]{ display: inline-block; position: relative; width: 75px; height: 30px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 7px; border-radius: 4px 0 0 4px; font-size: 14px; } .Editor textarea{ padding: .5em 1em; box-sizing: border-box; font-size: 1em; border-radius: 3px; width: 100%; } .Editor .checkbox{ clear: both; margin: 1em auto; } .Editor .checkbox input{ padding: 0px; height: auto; } .checkbox .disabled, .checkbox .disabled + .text{ opacity: .5; } .Editor input.error, .Editor select.error, .Editor textarea.error{ border: 1px solid red; } .Editor .input-logo{ height: 28px; width: 28px; margin-right: 5px; vertical-align: top; } .Editor .input-logo + input{ width: calc(100% - 42px); } .Editor .required-icon{ color: red; } .Editor .required-icon:after{ content: "*"; } .metadata-container *{ box-sizing: border-box; } .metadata-container h2{ margin-bottom: 30px; } .metadata-container h5 > .subtle{ margin-left: 20px; font-weight: normal; } .metadata-container .section h2 + .subtle { margin-top: -25px; } .metadata-container .section h4 + .subtle { margin-top: -10px; } .metadata-container .section { width: 100%; clear: both; } .metadata-container .section > .row-striped:last-child { margin-bottom: 0px; } .metadata-container .section .header{ font-weight: bold; border-bottom: 1px solid #DDD; padding-left: 10px; background-color: #EEE; border-top-left-radius: 4px; border-top-right-radius: 4px; padding-top: 10px; } .metadata-container .section .header h5{ min-height: 1em; } .Editor .header-dropdown{ font-size: 1.3em; width: 100%; height: 2.4em; } .metdata-container .checkbox{ clear: both; } /* ---- Attributes ----*/ .eml-attribute { padding-bottom: 20px; padding-top: 20px; } .eml-attribute.error{ color: inherit; } .eml-attribute.error .accordion-heading{ background-color: rgba(255, 0, 0, 0.11); } .eml-attribute.error .accordion-heading a{ color: #960303; font-weight: bold; } .eml-attribute .indent{ margin-left: 20px; } .enumerated-domain .table input { margin-bottom: 0px; } .attribute-menu.side-nav-items{ overflow-y: overlay; transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); overflow-y: auto; position: fixed; height: 400px; background-color: #EEE; border-right: 1px solid #DDD; } .attribute-list{ width: calc(100% - 170px - 60px); float: right; padding: 0px 20px; overflow: scroll; } .attribute-menu-container .fill-button-container { background-color: #EEE; border-right: 1px solid #DDD; width: 100%; } .attribute-menu-container .fill-button-container button { width: calc(100% - 10px); margin: 5px; } .eml-attribute .title{ margin-bottom: 20px; } .attribute-menu{ width: 170px; } .attribute-menu-item{ position: relative; } .attribute-menu-item a{ font-size: 1em; } .attribute-menu-item a.error{ color: #960303; } .attribute-menu-item.active a{ background-color: #1E254F; color: white; } .attribute-menu-item .add{ display: none; } .attribute-menu-item .remove{ position: absolute; top: 0px; right: 0px; font-size: 1.3em; color: red; display: none; padding: 13px; } .attribute-menu-item:hover .remove{ display: block; } .attribute-menu-item.side-nav-item.remove-preview a, .attribute-menu-item.side-nav-item.remove-preview a:hover{ background-color: #f7f7f7; color: red; } .attribute-menu-item.side-nav-item.remove-preview .remove:hover{ background-color: rgba(247, 247, 247, .5); } .attribute-menu-item.new:hover .remove{ display: none; } .attributes .attribute-menu-container{ width: 170px; } .eml-attribute .non-numeric-domain.error{ color: inherit; border-color: red; } .eml-attribute .category-container.error{ color: inherit; border: 1px solid red; padding: 10px; width: 100%; box-sizing: border-box; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; } .code-row.new .remove{ display: none; } .code-row .remove{ width: 20px; float: right; margin-left: 10px; line-height: 2.2em; } .code-row .definition{ width: calc(100% - 30px); } /* ---- Overview ---- */ .metadata-container .section.overview > div{ margin-bottom: 20px; } #data-sensitivity-container input:checked ~ .notification.hidden{ display: block; } /* ---- Funding ---- */ .metadata-container .funding-container{ padding-left: 0px; } .Editor input.funding{ padding-left: 35px; } .metadata-container .funding-row{ position: relative; } .Editor .funding-row .ui-autocomplete{ position: absolute !important; font-size: 1.2em; } .Editor .funding-container .ui-autocomplete .ui-menu-item { font-size: .7em; } .Editor .funding-container .ui-helper-hidden-accessible{ display: none; } .metadata-container .funding-container .autocomplete-container{ position: relative; } .Editor .funding-container .icon-spinner{ top: 5px; left: 45px; position: absolute; font-size: 1.5em; display: none; } .metadata-container #funding-visible{ padding-left: 30px; } /* ---- People / Parties ---- */ .Editor .eml-party{ position: relative; } .controls-well > .party{ margin-bottom: 30px; border-bottom: 1px solid #DDD; } .row-striped > .eml-party { padding-top: 10px; } .eml-party .notification{ height: 40px; } .metadata-container .section.people h4 { margin-top: 2em; margin-bottom: 1em; } .Editor .eml-party .phone{ font-size: .8em; padding: 5px; height: 3em; } .subtle-btn-group button, .subtle-btn-group button:hover { border-width: 0px; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; background-color: transparent; } .subtle-btn-group .icon-ellipsis-vertical { font-size: 1.2em; } .subtle-btn-group .dropdown-toggle:hover, .subtle-btn-group .dropdown-toggle:focus { background-color: #DDD; border-width: 0px; } .eml-party .party-menu { position: absolute; top: 5px; right: 10px; } .eml-party.new .party-menu{ display: none; } .eml-party .party-menu .dropdown-menu { margin-left: -142px; width: 160px; background-color: #FFF; border: 1px solid #CCC; box-shadow: 8px 6px 24px -1px #ccc; -moz-box-shadow: 8px 6px 24px -1px #ccc; -webkit-box-shadow: 8px 6px 24px -1px #ccc; } .eml-party .party-menu .dropdown-menu li { border-bottom: 1px solid #ccc; } .eml-party .party-menu .dropdown-menu li:hover{ background-color: rgba(255, 255, 255, 0.57); } .eml-party .party-menu .dropdown-menu>li>a:hover { color: white; } .eml-party .party-menu .remove, .eml-party .party-menu .remove:hover, .eml-party .party-menu .remove a, .eml-party .party-menu .remove a:hover { font-size: inherit; position: relative; margin: 0px; color: red; max-width: 100%; } /* ---- Keywords ---- */ .metadata-container .keywords .span2{ margin-left: 0px; width: 16.893617%; } .metadata-container .keyword-row{ padding-top: 10px; } /* ---- Usage ---- */ .metadata-container .usage input{ float: left; } .metadata-container .usage{ max-width: 500px; } .metadata-container .usage .text{ min-width: 225px; } /* ---- Basic text ---- */ .metadata-container .section .text-container { padding-left: 0px; } /* ---- Taxon Coverage ---- */ .root-taxonomic-classification-container .notification{ padding-left: 68px; position: absolute; margin-top: -31px; } .root-taxonomic-classification-container{ margin-top: 20px; position: relative; } .row-striped, .root-taxonomic-classification-container h6{ border-top: none; border-left: none; border-right: none; } .root-taxonomic-classification-container:first-child, .taxonomic-coverage > .notification + .row-striped:nth-child(2){ margin-top: 0px; } .root-taxonomic-classification{ margin-bottom: 0px; position: relative; } .root-taxonomic-classification th > .subtle { font-weight: normal; margin-bottom: 0px; } .taxon-rank-value{ width: calc(100% - 50px); } /* ---- Methods ---- */ .metadata-container .sampling{ margin-top: 20px; } /* ---- Remove icons in the Editor ---- */ .metadata-container .remove{ color: #cecece; } .metadata-container .remove{ position: absolute; margin-left: 20px; max-width: 1em; font-size: 1.7em; margin-top: .2em; } .Editor .remove:hover{ cursor: pointer; color: #FF0000; } .Editor .dropdown-menu .remove:hover{ background-image: none; background-color: transparent; } .taxonomic-coverage-row .remove{ position: relative; line-height: 2.2em; font-size: 1.1em; float: right; margin-right: 14px; } .taxonomic-coverage-row.new .remove, .eml-geocoverage.new .remove{ visibility: hidden; } .root-taxonomic-classification-container > .remove{ right: 20px; color: white; z-index: 1; } .root-taxonomic-classification > .remove { top: 10px; right: 18px; color: #999999; } .remove-preview, .locations-table .eml-geocoverage.remove-preview{ opacity: .3; } .method-step.new + .remove{ display: none; } /* The width of each input element next to the remove button */ .metadata-container .basic-text-row input, .metadata-container .keyword-row, .metadata-container .funding-row, .metadata-container .party-details, .metadata-container .method-step{ width: calc(100% - 20px - 1em); min-height: 30px; } .taxa input, .pubDate input, .party-details input{ min-height: 30px; } /** Locations section **/ .locations .coord{ width: 5em; padding: 5px; font-size: .9em; min-height: 30px; } .locations-table{ border: 1px solid #DDD; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; } .locations-table .header{ font-weight: bold; border-bottom: 1px solid #DDD; padding-bottom: 10px; padding-left: 10px; background-color: #EEE; border-top-left-radius: 4px; border-top-right-radius: 4px; } .locations-table .header .subtle{ font-size: .9em; font-weight: normal; } .locations-table .header h5{ margin-bottom: 0px; } .locations-table .eml-geocoverage{ padding-top: 10px; padding-bottom: 10px; padding-left: 10px; } .locations-table .eml-geocoverage:nth-child(odd) { background-color: #EEE; } .metadata-container .locations .remove { position: relative; margin-left: 0px; margin-top: 50%; display: block; } .locations-table .notification{ min-height: 1em; font-size: .9em; } .locations-table textarea.error{ border-color: red; } .eml-geocoverage.error, .locations-table .eml-geocoverage.error:nth-child(odd) { background-color: rgba(251, 188, 188, 0.35); } /** Entity section **/ .eml-entity.modal{ height: 80%; width: 80%; left: 40%; max-width: 1000px; min-width: 300px; transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); } .eml-entity .modal-body{ max-height: calc(100% - 110px); height: calc(100% - 110px); padding: 0px; overflow-y: hidden; } .eml-entity .entity-container > .nav-tabs{ position: fixed; width: 100%; background-color: white; min-height: 30px; margin-bottom: 0px; } .eml-entity .entity-container > .nav-tabs li { width: 50%; } .eml-entity .entity-container > .nav-tabs li.active{ border-top: 0px; } .eml-entity .entity-container > .nav-tabs li a{ border-radius: 0px; border-top: 0px; text-align: center; } .eml-entity > .entity-container > .tab-content{ width: 100%; box-sizing: border-box; margin-top: 40px; } .eml-entity .overview-container{ padding: 20px; margin-top: 0px; width: calc(100% - 40px); } .eml-entity .preview-container{ box-sizing: border-box; float: left; } .eml-entity .preview-container .thumbnail{ width: 100%; box-sizing: border-box; } .eml-entity .preview-container + .description{ float: right; width: 100%; } .preview-container .thumbnail-square{ height: 250px; width: 250px; overflow: hidden; } .preview-container .description textarea{ min-height: 175px; } .eml-attribute input { height: auto; } .eml-measurement-scale .options{ box-sizing: border-box; padding-top: 10px; margin-top: 20px; } .eml-measurement-scale .hidden{ display: none; } .eml-measurement-scale .full-width{ width: 100%; } /******************************************* Pager View ******************************************/ .pager .pager-link{ border: 1px solid #CCC; padding: 5px; } .pager-link.unactive { color: #999; cursor: default; } .pager .current-page.pager-link{ background-color: #ECF1F5; } .pager .pager-link.first{ border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .pager .pager-link.last{ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .list-group-item.pager{ margin-top: 0px; } /******************************************* D3 old style charts *******************************************/ .line-chart-label.text { color: white; stroke: white; fill: white; } /******************************************* Documentation and Help Pages ******************************************/ .documentation h5{ display: inline; } .documentation h4{ margin-top: 20px; } .documentation > section{ margin-bottom: 30px; } .code_example { display: block; white-space: pre; margin-top: 10px; margin-bottom: 10px; width: auto; padding: 5px 20px; border: 0px; color: #1192DD; } code{ color: #1192DD; } .example{ margin-top: 20px; margin-bottom: 20px; } table.api{ font-size: 1.1em; } table.api th { background-color: #90B5CE; color: white; font-weight: normal; font-size: 1.1em; } table.api th, table.api td { padding: 10px; } table.api tr:nth-child(odd) { background-color: #E7EAEA; } table.api tr td:nth-child(even) { background-color: rgba(192, 218, 218, 0.2); } .example h3{ font-weight: lighter; } #slaask-input{ height: 100px; word-break: break-word; } .slaask-widget-container{ } /******************************************* CSS library fixes ******************************************/ /* overflow-y:scroll fix for webkit browsers */ .pre-scrollable, /*Bootstrap */ .fancybox-lock .fancybox-overlay, .modal-body{ /* Fancybox */ transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); } /* make the modal appear a little faster */ .modal.fade { --speed: 0.13s; top: -8%; -webkit-transition: opacity var(--speed) linear, top var(--speed) ease-out; -moz-transition: opacity var(--speed) linear, top var(--speed) ease-out; -o-transition: opacity var(--speed) linear, top var(--speed) ease-out; transition: opacity var(--speed) linear, top var(--speed) ease-out; } /** Progress Bars from Bootstrap 3.3.6 **/ @-webkit-keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } } @-o-keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } } @keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } } .progress { height: 20px; margin-bottom: 20px; overflow: hidden; background-color: #f5f5f5; border-radius: 4px; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); } .progress-bar { float: left; width: 0; height: 100%; font-size: 12px; line-height: 20px; color: #fff; text-align: center; background-color: #337ab7; -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15); -webkit-transition: width .6s ease; -o-transition: width .6s ease; transition: width .6s ease; } .progress-striped .progress-bar, .progress-bar-striped { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); -webkit-background-size: 40px 40px; background-size: 40px 40px; } .progress.active .progress-bar, .progress-bar.active { -webkit-animation: progress-bar-stripes 2s linear infinite; -o-animation: progress-bar-stripes 2s linear infinite; animation: progress-bar-stripes 2s linear infinite; } .progress-bar.progress-bar-success { background-color: #5cb85c; } .progress-striped .progress-bar-success { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); } .progress-bar-info { background-color: #5bc0de; } .progress-striped .progress-bar-info { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); } .progress-bar.progress-bar-warning { background-color: #f0ad4e; } .progress-striped .progress-bar-warning { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); } .progress-bar.progress-bar-danger { background-color: #d9534f; } .progress-striped .progress-bar-danger { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); } /* Portal Citations Metric Chart */ #user-citations > .citations-metrics-list > .empty-citation-list { width: 90%; height: 5%; top: unset; left: 5%; margin: 0 auto; } #user-citations > .citations-metrics-list > .alert-container { width: 90%; left: 5%; margin: 0 auto; } /* Center Justify Metadata Assessment charts */ #metadata-assessment-graphic { display: flex; justify-content: center; } /* New Summary of Holdings design */ .summary-container { flex: 1; margin-right: 10px; margin-left: 10px; display: grid; } .summary-count-container { width: 100%; display: grid; align-self: center; ttext-ALIGN: center; justify-self: center; } .summary-container.span3 > div { margin-left: 17.02127659574468%; } .quick-stats-count{ color: #2c6f90; /* Back-up color for IE */ fill: #2c6f90; /* Back-up color for IE */ font-size: xx-large; } .portal-view .quick-stats-count{ color: #2c6f90; /* Back-up color for IE */ fill: #2c6f90; /* Back-up color for IE */ color: var(--portal-primary-color); fill: var(--portal-primary-color); font-size: xx-large; } /******* Loading styles *******/ .circle-loading{ border-radius: 50%; background-color: var(--loading-background-color); } /** Browser extension element fixes **/ body > #extension-is-installed{ display: none; } /* TODO: Move citation CSS into its own file */ .citation.copiable { font-size: 12px; background-color: #fbfbfb; border: 1px solid #e3e3e3; padding: 4px 15px; font-weight: 100; border-radius: 8px; /* Make it a 2x2 grid */ display: grid; grid-template-columns: 1fr 84px; grid-template-rows: auto 1fr; grid-gap: 0px; /* vertically center everything*/ align-items: center; } .cite-text { font-size: 12px; font-weight: 900; letter-spacing: 0.01em; margin-bottom: 3px; } .citation.header .top-info { text-transform: uppercase; font-size: 13px; letter-spacing: 0.02em; line-height: 1; margin-top: 20px; } .citation.header .type { color: #146660; font-weight: 700; letter-spacing: 0.035em; } .citation.header .title { margin-top: 20px; font-size: 29px; color: #333333; line-height: 1.26; } .citation.header .separator { color: #e3e3e3; padding: 0 5px; } .citation.header .authors { color: #202424; font-weight: 100; font-size: 15px; } .citation.header .show-authors{ background: none; border: 0; border-radius: 15px; color: #313d90; text-decoration: none; text-transform: uppercase; font-weight: bold; line-height: 15px; font-size: 13px; /* vertical-align: text-bottom; */ cursor: pointer; padding: 0 5px; letter-spacing: 0.02em; } .citation.header .show-authors:hover{ color: #166760; background-color: #e4faf8; } .citation.header button.show-authors{ margin-left: 5px; }