/* DMPOPIDoR Stylesheet */ $blue: #2c7dad; $dark-blue: #1c5170; $very-light-blue: #dcecf6; $very-very-light-blue: #edf5fa; $white: #fff; $black: #000; $rust: #c6503d; $light-rust: #faefed; $yellow: #FFCC00; $light-yellow: #fff9e5; $green: #2CAD5D; $light-grey: #e5e4e7; body { display: flex; flex-direction: column; padding-bottom: 0; } .modal-backdrop { z-index: 4; } #header-signin { z-index: 7; } /* MENU & FOOTER */ /* MENU */ header .main-nav { display: flex; justify-content: center; } #app-navbar { position: fixed; top: 0; z-index: 5; width: 100%; &.navbar-dmpopidor { background-color: $white; color: $blue; } border-bottom: 2px solid $rust; .navbar-content { max-width: 1264px; } .navbar-nav { li { a, a:active,a:focus,a:visited { color: $blue; } a:hover { color: $white; background-color: $blue; } } li.active { a, a:active,a:focus,a:visited { color: $white; background-color: $blue; } } } } .navbar-toggle .icon-bar { background-color: $blue; } /* ORG BRANDING */ .org-branding { padding-top: 75px; .container-fluid { max-width: 1264px; padding-top: 5px; padding-bottom: 5px; } .org-banner-text { max-width: 1264px; color: #1a1a1a; text-align: center; border-top: 1px solid #e7e7e7; margin: auto; padding-top: 5px; } } #org-navbar { .navbar-nav { li { a { color: #727272; } } } } /* MAIN CONTENT */ /* FOOTER */ .navbar-fixed-bottom { z-index: 50; } #dmpopidor-footer { display: flex; flex-direction: column; align-items: center; bottom: 0; font-size: 15px; .footer-content { width: 100%; padding: 0px 100px; color: $white; background-color: $blue; border-top: 3px solid $yellow; .footer-links-logos { display: flex; .footer-links { flex: 9; } .footer-logos { flex: 1; padding: 5px; display: flex; align-items: center; img { max-height: 50px; } } } .footer-infos-sn { display: flex; border-top: 1px solid $white; .footer-infos { flex: 9; } .footer-sn { flex: 1; display: flex; align-items: center; justify-content: space-around; } } span { line-height: 50px; padding-left: 15px; padding-right: 15px; } a { &:focus, &:active { outline-style: dotted !important; outline-color: white !important; outline-width: 1px !important; } &:hover { outline-style: none !important; } } } a, a:active,a:focus,a:visited { color: $white; } } @media (max-width: 1023px) { .footer-links-logos { flex-direction: column; align-items: center; .break-point { display: none; } .footer-links { display: flex; align-items: center; flex-direction: column; } } .footer-infos-sn { flex-direction: column; align-items: center; } .org-branding { padding-top: 175px; } } @media (max-width: 767px) { .org-branding { padding-top: 75px; } } /* DROPDOWNS */ #change-language, #signin-signout, #app-navbar-menu, #admin-dropdown, .plan-actions { .dmpopidor-dropdown { background-color: $white; li { a, a:active,a:focus,a:visited { color: $blue; } a:hover { color: $white; background-color: $blue; } } li.active { a, a:active,a:focus,a:visited { background-color: $blue; color: $white; } } } .open { a { background-color: $white; } } } #admin-dropdown { .dmpopidor-dropdown { li.active { a, a:active,a:focus,a:visited { background-color: $rust; color: $white; } } } } /* MAIN CONTENT */ .dmpopidor-branding { .alert-warning { color: #5D4A27; a { color: #5D4A27; text-decoration: underline; } } .org-deactivated { max-width: 1264px; color: $rust; text-align: center; margin: auto; padding-top: 5px; font-weight: 600; a { color: black; } } /** tooltips */ .tooltip { .tooltip-arrow { color: $blue; border-bottom-color: $blue; } .tooltip-inner { background-color: $blue; font-size: 14px; font-weight: 600; text-align: center; min-width: initial; } } .label-info { background-color: $blue; } /** Focus outline required for accessibility */ input, select, .form-control { &:focus, &:hover, &:active { outline-style: solid !important; outline-color: $blue !important; outline-width: 2px !important; } } a { &:focus, &:active { outline-style: dotted !important; outline-color: $blue !important; outline-width: 1px !important; } &:hover:not(.accessible) { outline-style: none !important; } } /* PUBLIC AREA */ h1{ color: $blue; } h2, .fontsize-h2 { color: $rust; font-size: 20px; } h3, .fontsize-h3 { color: $blue; font-size: 17px; } a { color: $blue; } /* STATIC PAGES */ .static_page_content { padding-top: 25px; } /* TABLES */ .table { border: 1px solid $blue; // Cells borders thead > tr > th, tbody > tr > th, tfoot > tr > th, thead > tr > td, tbody > tr > td, tfoot > tr > td { border: 1px solid $blue; } // Cells hovering &.table-hover tbody tr:hover td, &.table-hover tbody tr:hover th { background-color: $very-light-blue; } // Header cells background thead > tr > th { background-color: $blue; } thead > tr > th:not(:last-child) { border-right: 1px solid $white; } .navbar-nav { a{ color: $white; } } } /* BUTTONS */ .btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:visited, .btn-primary:active:hover, .btn-primary.active:hover { border-color: $rust; background-color: $rust; color: $white; } .btn-default, .btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default:visited, .btn-default:active:hover, .btn-default.active:hover { border-color: $rust; background-color: $rust; color: $white; } .btn-secondary, .btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active, .btn-secondary:visited, .btn-secondary:active:hover, .btn-secondary.active:hover { border-color: $light-grey; background-color: $light-grey; color: $black; outline: none; margin-top: 5px; margin-bottom: 10px; } .combobox-clear-button, .combobox-clear-button:hover, .combobox-clear-button:focus { color: $blue; } .btn-link { color: $blue; } /* PLAN EDIT */ .write-plan { &.panel-body { padding: 15px 5px; } &.panel-body, .section-content { background-color: $very-very-light-blue; } .research-output-content{ background-color: $white; border: 1px solid $blue; &.multiple-research-output { border-top-color: transparent; } } .question { margin-left: 0px; margin-right: 0px; } } // Progress bar .progress-bar { background-color: $blue; } // Tabs .nav-tabs { background-color: $blue; li > a { color: $white } li > a:hover, li > a:focus, li.active > a, li.active > a:focus, li.active > a:hover { color: $blue; border: 1px solid $blue; border-bottom-color: transparent; background-color: $white; } li.phase-tab > a { background-color: $dark-blue; } li.phase-tab > a:hover, li.phase-tab > a:focus, li.active.phase-tab > a, li.active.phase-tab > a:focus, li.active.phase-tab > a:hover { color: $dark-blue; background-color: white; border: 1px solid $dark-blue; border-bottom-color: transparent; } } .nav-pills { background-color: $blue; li > a { color: $white; } li > a:hover, li > a:focus, li.active > a, li.active > a:focus, li.active > a:hover { color: $blue; border: 1px solid $blue; } } // example answer .example-answer { overflow: auto; .example-answer-link { cursor: pointer; background-color: $blue; display: block; } } // main border .panel-default { border-color: $blue; } // Sections #sections { .section-panel { border: none; } .section-title { background-color: $very-very-light-blue; h2 { font-weight: 700; } } .section-content { border-bottom: 2px solid $blue; padding: 5px; } } // Questions .question-text { background-color: $white; color: $dark-blue; border-bottom: 2px solid $dark-blue; border-right: 2px solid $dark-blue; .panel-title { color: $dark-blue; font-weight: bold; } } .question-body{ padding: 15px 0; display: flex; .answer-section { flex: 8; position: relative; min-height: 300px; .toggle-guidance-section { position: absolute; top: 0; right: 0; background-color: $blue; color: $white; padding: 10px 5px; cursor: pointer; text-orientation: mixed; writing-mode: vertical-rl; &.disabled { background-color: $light-grey; cursor: not-allowed; } } .question-form { padding-top: 10px; padding-right: 50px; } } .guidance-section { flex: 4; display: none; border-left: 5px solid $blue; padding-left: 5px; } } // Guidances .panel-title { color: $white; } .plan-guidance-tab { word-wrap: break-word; .run-zone { display: flex; flex-direction: column; .message-zone { text-align: center; font-weight: bold; color: $rust; display: none; &.valid { color: $green; } &.invalid { color: $rust; } } .btn { font-size: 20px; font-weight: 700; &.answer-save-button { background-color: gray; border-color: gray; } } .reload-button { background-color: $green; color: $white; display: none; } } } // .schema-picker{ // display: flex; // .tab-content { // flex: 10; // } // .nav-pills { // width: inherit; // display: flex; // flex: 2; // flex-direction: column; // li { // writing-mode: vertical-lr; // text-orientation: mixed; // } // } // } // Project Details .plan-details { .project-selector { display: none; .error-zone { font-weight: bold; color: $rust; display: none; } } .project-selector-link { cursor: pointer; color: $blue; font-weight: bold; &:hover { text-decoration: underline; } } .question-text { border-color: $rust; color: $rust; .panel-title { color: $rust; } } .madmp-fragment { position: relative; .answer-save-zone { display: flex; flex-direction: column; padding: 5px; .answer-save-button { color: $white; background-color: $rust !important; } } } .run-zone { display: flex; flex-direction: column; .message-zone { text-align: center; font-weight: bold; color: $rust; display: none; &.valid { color: $green; } &.invalid { color: $rust; } } .btn { font-size: 20px; font-weight: 700; &.answer-save-button { background-color: gray; border-color: gray; } } .reload-button { background-color: $green; color: $white; display: none; } } .linked-fragments { .actions { width: 20%; .delete{ cursor: pointer; color: $blue; &:hover { text-decoration: underline; } } } } .guidance-configuration { border-left: 2px solid $rust; border-bottom: 2px solid $very-very-light-blue; border-top: 2px solid $very-very-light-blue; } } // Plan Download #download_form { #json-formatting { display: none; } } // News .question-divider { border-bottom: 2px solid $very-very-light-blue; } /* ADMIN AREA */ .org-admin { h1, h2 { color: $rust; } a { color: $rust; } /* TABLES */ .table { border: 1px solid $rust; // Cells borders thead > tr > th, tbody > tr > th, tfoot > tr > th, thead > tr > td, tbody > tr > td, tfoot > tr > td { border: 1px solid $rust; } // Cells hovering &.table-hover tbody tr:hover td, &.table-hover tbody tr:hover th { background-color: $light-rust; } // Header cells background thead > tr > th { background-color: $rust; } .navbar-nav { a:hover, a:focus { color: $rust; background-color: $white; } } } /* BUTTONS */ .btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:visited, .btn-primary:active:hover, .btn-primary.active:hover { border-color: $blue; background-color: $blue; color: $white; } .btn-default, .btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default:visited, .btn-default:active:hover, .btn-default.active:hover { border-color: $blue; background-color: $blue; color: $white; } .combobox-clear-button, .combobox-clear-button:hover, .combobox-clear-button:focus { color: $rust; } // Tabs .nav-tabs { background-color: $rust; li > a:hover, li > a:focus, li.active > a, li.active > a:focus, li.active > a:hover { color: $rust; border: 1px solid $rust; border-bottom-color: transparent; } } .nav-pills { background-color: $rust; li > a:hover, li > a:focus, li.active > a, li.active > a:focus, li.active > a:hover { color: $rust; border: 1px solid $rust; } } // main border .panel-default { border-color: $rust; } // Sections & Phases .heading-button > .panel-heading, .panel-default > .panel-heading { background-color: $rust; } } /* SUPER ADMIN */ .super-admin { h1, h2 { color: $black; } a { color: $black; text-decoration: underline; } /* TABLES */ .table { border: 1px solid $yellow; // Cells borders thead > tr > th, tbody > tr > th, tfoot > tr > th, thead > tr > td, tbody > tr > td, tfoot > tr > td { border: 1px solid $yellow; } // Cells hovering &.table-hover tbody tr:hover td, &.table-hover tbody tr:hover th { background-color: $light-yellow; } // Header cells background thead > tr > th { background-color: $yellow; color: $black; } } /* BUTTONS */ .btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:visited, .btn-primary:active:hover, .btn-primary.active:hover { border-color: $yellow; background-color: $yellow; color: $black; text-decoration: none; } .btn-default, .btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default:visited, .btn-default:active:hover, .btn-default.active:hover { border-color: $yellow; background-color: $yellow; color: $black; text-decoration: none; } .combobox-clear-button, .combobox-clear-button:hover, .combobox-clear-button:focus { color: $yellow; } .btn-link { color: $black; text-decoration: underline; } .registry-value-actions a{ text-decoration: none; } } } /* CIL MESSAGE */ .cil_message > p { font-size: x-small; font-style: italic; line-height: 1.5em; padding-bottom: 4px; } .institution-login i { display: inline-block; padding-left: 5px; transform: scaleX(-1); -webkit-transform:scaleX(-1); -moz-transform:scaleX(-1); -o-transform:scaleX(-1); } /* CONTACT US */ .dmpopidor-contact-us { .column-right { border-left: 2px solid $rust; } } /* COOKIE BANNER */ .cookiebanner-close { &:focus, &:hover, &:active { outline-style: solid !important; outline-color: $blue !important; outline-width: 2px !important; } } /* FRONT PAGE */ .dmpopidor-front-page { .main-title { padding-bottom: 10px; } .join-div { margin-top: 20px; padding-bottom: 10px; border-left: 4px solid $rust; border-bottom: 2px solid $very-very-light-blue; border-top: 2px solid $very-very-light-blue; border-right: 2px solid $very-very-light-blue; } .discover-div { float: right; } .front-page-list-item { font-size: 1.1em; } .front-page-text { font-size: 1.1em; } .icon { padding: 20px 0; font-size: 2em; } .text { padding: 20px 0; } } /* PLAN CREATION */ .plan-form { .tab-content { padding: 25px 25px 50px 25px; border: 1px solid $blue; } .form-tabs { display: flex; flex: 1; li > span { display: block; padding: 10px 15px; cursor: pointer; i { display: none; } } li > span:hover, li > span:focus, li.active > span, li.active > span:focus, li.active > span:hover { color: $white; border-bottom-color: transparent; background-color: $white; color: $blue; border: 1px solid $blue; border-bottom-color: transparent; i { display: inline; } } } } #available-templates { .message-block { color: $blue; } } /* Share Form */ .share-form { display: flex; flex-direction: column; #new_role { border-bottom: 0.5px groove $color-border-light; } } /* Beta ribbons */ .corner-ribbon{ width: 200px; background: $rust; position: absolute; top: 25px; left: -50px; text-align: center; line-height: 50px; letter-spacing: 1px; color: #f0f0f0; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); &.sticky{ position: fixed; } &.shadow{ box-shadow: 0 0 3px rgba(0,0,0,.3); } &.top-left{ top: 25px; left: -50px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } &.red{background: $rust;} } /* Research Outputs */ .nav-tabs { li.disabled { cursor: not-allowed; a { pointer-events: none; } } } #research-outputs-list { width: 100%; padding: 0 5px; margin-top: 5px; .form-group { margin: 0; margin-right: 5px; } .research-output-element { display: flex; margin: 5px 0; .research-output-fields { flex: 9; border: 0.5px groove $color-border-light; box-shadow: 0px 0px 0px 0px $color-shadow-dark; padding: 5px; .research-output-field { padding-top: 7px; strong { padding-right: 5px; } } .edit, button { display: none; } } .research-output-actions { flex: 1; display: flex; align-items: center; justify-content: space-around; color: $blue; .handle, .edit, .cancel { cursor: pointer; } a { color: $blue; } } } fieldset { width: 100%; } } #show-research-outputs { display: flex; flex-direction: column; .research-output-element { margin: 5px 0; padding: 5px; border: 0.5px groove $color-border-light; box-shadow: 0px 0px 0px 0px $color-shadow-dark; .research-output-value { display: flex; strong { flex: 2; text-align: right; } span { padding-left: 20px; flex: 8; } } } } /* * maDMP FRAGMENTS */ .madmp-fragment { .dynamic-field { display: flex; align-items: center; padding-bottom: 5px; justify-content: space-between; input { flex: 9; } span { text-align: center; &.invalid { color: $rust; } &.valid { color: $green; } &.explanation { color: $blue; cursor: pointer; } } &.select-field, &.linked-fragments-select, &.contributor-field { select { width: 100% !important; } .overridable-link { float: left; width: 100%; } .custom-value { display: flex; padding: 5px 0 0 0; label { color: $blue; margin-right: 5px; padding: 0; } } .field-button-combo { display: flex; align-items: center; width: 100%; .remove-button { margin-left: 5px; color: $blue; cursor: pointer; } } .message-area { display: none; font-weight: bold; color: $rust; } } &.select-field, &.contributor-field { flex-direction: column; .selected-value { display: none; } } &.linked-fragments-select { flex-direction: row; .add-fragment { padding-left: 5px; } } .linked-fragments-list { margin-top: 10px; } } .const-field { display: flex; flex-direction: column; padding-bottom: 3px; .field-label { font-weight: bold; color: $black; } } fieldset { .intermediate-label { color: $dark-blue } &.sub-fragment { width: 100%; border-radius: 5px; margin: 15px 0; padding-bottom: 15px; legend { color: $rust; text-transform: none; } } &.fragment-fieldset { display: flex; flex-direction: column; .answer-bottom-zone { position: sticky; bottom: 0; background-color: $very-very-light-blue; z-index: 2; border: 1px solid $blue; color: $dark-blue; padding: 0 5px; display: flex; align-items: center; -webkit-transition: all .3s linear 0s; transition: all .3s linear 0s; .schema-picker-zone { flex: 2; } .answer-save-zone { flex: 1; } .answer-save-zone, .schema-picker-zone { display: flex; flex-direction: column; padding: 5px; .message-zone { text-align: center; font-weight: bold; color: $rust; display: none; &.valid { color: $green; } &.invalid { color: $rust; } } .btn { font-size: 20px; font-weight: 700; &.answer-save-button { background-color: gray; border-color: gray; } } &.unsaved { .answer-save-button { background-color: $rust; border-color: $rust; } .message-zone { visibility: inherit; } } } } } &.registry { legend { color: $blue; text-transform: none; } } } .actions { flex: 1; text-align: right; color: $blue; width: 20%; .delete{ cursor: pointer; color: $blue; &:hover { text-decoration: underline; } } } .overlay { background: #ffffff; color: #666666; position: absolute; height: 100%; width: 100%; z-index: 50; top: 0; left: 0; float: left; text-align: center; padding-top: 25%; opacity: 0.8; } } .spinner { margin: 0 auto; height: 64px; width: 64px; animation: rotate 0.8s infinite linear; border: 5px solid $rust; border-right-color: transparent; border-radius: 50%; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .fragment-display { display: flex; flex-direction: column; padding: 5px 20px; } #modal-window { .modal-dialog { width: 50%; } .modal-footer .message-area{ font-weight: bold; } } .select2-results__option--highlighted { color: white; background-color: $dark-blue !important; } .select2 { width: 100% !important; .select2-selection__choice { color: white !important; background-color: $blue; } } /* * ACCESSIBILITY */ a.has-new-window-popup-info, button.has-new-window-popup-info { z-index:4; &:hover, &:focus, &:active { & > span.new-window-popup-info { width:15em; border:1px solid $blue; background-color: white; color:$blue; } } }