Permalink
Cannot retrieve contributors at this time
Name already in use
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
match/app/webroot/css/co-base.css
Go to fileThis commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
1491 lines (1489 sloc)
32.4 KB
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * COmanage Match Default Style Sheet | |
| * | |
| * Portions licensed to the University Corporation for Advanced Internet | |
| * Development, Inc. ("UCAID") under one or more contributor license agreements. | |
| * See the NOTICE file distributed with this work for additional information | |
| * regarding copyright ownership. | |
| * | |
| * UCAID licenses this file to you under the Apache License, Version 2.0 | |
| * (the "License"); you may not use this file except in compliance with the | |
| * License. You may obtain a copy of the License at: | |
| * | |
| * http://www.apache.org/licenses/LICENSE-2.0 | |
| * | |
| * Unless required by applicable law or agreed to in writing, software | |
| * distributed under the License is distributed on an "AS IS" BASIS, | |
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | |
| * See the License for the specific language governing permissions and | |
| * limitations under the License. | |
| * | |
| * @link http://www.internet2.edu/comanage COmanage Project | |
| * @package match | |
| * @since COmanage Match v1.0.0 | |
| * @license Apache License, Version 2.0 (http://www.apache.org/licenses/LICENSE-2.0) | |
| */ | |
| /* HTML, BODY, HEADINGS, ANCHORS, FONTS */ | |
| @import url("fonts/opensans/stylesheet.css"); | |
| @import url("fonts/material-icons/material-icons.css"); | |
| html * { | |
| font-family: 'open_sansregular','Trebuchet MS',Arial,Helvetica,sans-serif; | |
| } | |
| body { | |
| color: var(--cmg-color-gray-001); | |
| -webkit-overflow-scrolling: touch; /* for dialog boxes */ | |
| font-size: 14px; /* base font size */ | |
| } | |
| h1,h2,h3,h4,h5 { | |
| color: var(--cmg-color-gray-002); | |
| } | |
| h1 { | |
| font-size: 2em; | |
| margin: 0; | |
| } | |
| h1.loginMsg { | |
| font-size: 1.8em; | |
| margin: 1em 0; | |
| text-align: center; | |
| } | |
| h1.firstPrompt { | |
| font-family: 'Noto Sans','Trebuchet MS',Arial,Helvetica,sans-serif; | |
| font-size: 1.2em; | |
| font-weight: normal; | |
| } | |
| #fpDashboard h2 { | |
| margin: 0.5em 0; | |
| } | |
| h2 { | |
| font-size: 2em; | |
| line-height: 2.5em; | |
| margin: 0; | |
| } | |
| h3 { | |
| font-size: 1.6em; | |
| line-height: 1.6em; | |
| margin: 0; | |
| } | |
| a { | |
| color: var(--cmg-color-blue-001); | |
| text-decoration: none; | |
| } | |
| #main a:active, | |
| #main a:hover { | |
| color: var(--cmg-color-blue-002); | |
| text-decoration: underline; | |
| } | |
| #main a.ui-widget:active, | |
| #main a.ui-widget:hover { | |
| text-decoration: none; | |
| } | |
| /* ACCESSIBLE SKIP LINK */ | |
| #skip-to-content-box { | |
| position: absolute; | |
| left: 50%; | |
| margin-left: -100px; | |
| text-align: center; | |
| width: 200px; | |
| z-index: 40; | |
| } | |
| #skip-to-content { | |
| position: relative; | |
| background-color: var(--cmg-color-blue-001); | |
| color: var(--cmg-color-white); | |
| padding: 0 1em 0.25em ; | |
| border-bottom-left-radius: 10px; | |
| border-bottom-right-radius: 10px; | |
| top: -40px; | |
| text-decoration: underline; | |
| } | |
| #skip-to-content:focus { | |
| top: 0; | |
| transition: top 0.1s ease-in 0s, background 0.5s linear 0s; | |
| background-color: var(--cmg-color-blue-003); | |
| } | |
| /* HEADER */ | |
| #banner { | |
| display: flex; | |
| justify-content: space-between; | |
| padding: 1em; | |
| margin: 0; | |
| background-color: var(--cmg-color-green-001); | |
| color: var(--cmg-color-white); | |
| } | |
| /* TOP MENU (BLACK BAR) */ | |
| #top-bar { | |
| position: relative; | |
| line-height: 1.5em; | |
| height: 30px; | |
| background-color: var(--cmg-color-gray-001); | |
| } | |
| /* LOGO */ | |
| #logo { | |
| display: block; | |
| margin-right: 1em; | |
| overflow: hidden; | |
| width: 40px; | |
| } | |
| #logo img { | |
| height: 38px; | |
| } | |
| /* TOP MENU */ | |
| #top-menu { | |
| z-index: 4; | |
| } | |
| body.logged-out #top-menu { | |
| text-align: right; | |
| } | |
| body.logged-in #top-menu { | |
| position: absolute; | |
| right: 15px; | |
| z-index: 100; | |
| } | |
| #top-menu ul { | |
| display: flex; | |
| column-gap: 2em; | |
| list-style: none; | |
| font-size: 1em; | |
| line-height: unset; | |
| } | |
| #top-menu #global-search .material-icons { | |
| margin: 4px 22px 0 1px; | |
| vertical-align: bottom; | |
| font-size: 20px; | |
| } | |
| #top-menu #top-menu-user, | |
| #top-menu #logout { | |
| margin-right: 1em; | |
| } | |
| #top-menu .top-menu-link-text { | |
| display: none; | |
| } | |
| #top-menu li { | |
| margin-top: 2px; | |
| } | |
| #top-menu li a.dropdown-toggle { | |
| color: var(--cmg-color-white); | |
| } | |
| #top-menu li a.dropdown-toggle:hover { | |
| text-decoration: none; | |
| } | |
| #top-menu .material-icons { | |
| vertical-align: bottom; | |
| font-size: 23px; | |
| margin-right: -4px; | |
| } | |
| #top-menu .dropdown-item { | |
| padding: 0.5em 1em; | |
| } | |
| #top-menu .dropdown-item .material-icons { | |
| margin-right: 0.25em; | |
| vertical-align: middle; | |
| } | |
| #top-menu .icon-adjust { | |
| margin-right: -8px; | |
| } | |
| #user-panel { | |
| position: absolute; | |
| right: 0; | |
| top: 27px; | |
| z-index: 200; | |
| color: var(--cmg-color-gray-001); | |
| background-color: var(--cmg-color-lightgray-002); | |
| border: 1px solid var(--cmg-color-lightgray-005); | |
| padding: 1em; | |
| min-width: calc(100vw - 50px); | |
| box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12); | |
| font-size: 1em; | |
| } | |
| #user-panel a:hover { | |
| text-decoration: underline; | |
| } | |
| #user-panel-cn { | |
| margin-top: -8px; | |
| padding: 1em 0 0 0; | |
| font-size: 1.2em; | |
| line-height: 1em; | |
| } | |
| #user-panel-id { | |
| padding: 0.4em; | |
| max-width: 80vw; | |
| word-wrap:break-word; | |
| } | |
| #user-panel-user-info .material-icons { | |
| float: left; | |
| font-size: 5em; | |
| } | |
| #user-panel ul { | |
| padding-left: 2em; | |
| } | |
| #user-panel .co-info-topbox { | |
| background-color: var(--cmg-color-lightgray-004); | |
| margin-top: 2em; | |
| } | |
| #user-panel .co-info-topbox strong { | |
| font-weight: normal; | |
| } | |
| #user-panel #co-profile-link:hover { | |
| background-color: var(--cmg-color-lightgray-005); | |
| } | |
| #user-panel #co-profile-link .material-icons { | |
| vertical-align: middle; | |
| margin-right: 0.25em; | |
| font-size: 16px; | |
| color: var(--cmg-color-gray-002); | |
| } | |
| #user-panel h2 { | |
| font-size: 1.1em; | |
| font-weight: normal; | |
| margin: 1em 0 0 1em; | |
| font-family: 'Noto Sans','Trebuchet MS',Arial,Helvetica,sans-serif; | |
| } | |
| #user-panel #panel-orgid-container { | |
| margin-top: 2em; | |
| border-top: 1px solid #ddd; | |
| padding-top: 1em; | |
| } | |
| #user-panel #panel-orgid-container h2 { | |
| margin-top: -0.25em; | |
| } | |
| #user-panel .org-ids { | |
| font-style: italic; | |
| } | |
| #user-panel #user-panel-flows { | |
| column-count: 2; | |
| } | |
| #user-panel #user-panel-flows, | |
| #user-panel #user-panel-invite, | |
| #user-panel #panel-orgid { | |
| margin-top: 0; | |
| } | |
| #user-panel.with-mg-switcher { | |
| padding-bottom: 0; | |
| } | |
| #user-panel #user-panel-switch-mg { | |
| clear: both; | |
| text-align: center; | |
| border-top: 1px solid var(--cmg-color-lightgray-006); | |
| margin-top: 1em; | |
| padding: 0; | |
| } | |
| #user-panel #mg-switch-link { | |
| text-transform: unset; | |
| font-size: 1.1em; | |
| display: block; | |
| padding: 1em; | |
| } | |
| #user-panel #mg-switch-link .material-icons { | |
| margin-right: 1px; | |
| } | |
| /* LOGIN & LOGOUT */ | |
| #login { | |
| margin-top: -2px; | |
| margin-right: 0; | |
| color: var(--cmg-color-white); | |
| cursor: pointer; | |
| display: inline-block; | |
| font-family: "Roboto","Helvetica","Arial",sans-serif; | |
| font-size: 14px; | |
| font-weight: 500; | |
| letter-spacing: 0; | |
| line-height: 36px; | |
| min-width: 64px; | |
| padding: 0 16px; | |
| position: relative; | |
| text-align: center; | |
| text-decoration: none; | |
| text-transform: uppercase; | |
| vertical-align: middle; | |
| } | |
| #welcome-login { | |
| text-align: center; | |
| margin: 1em auto; | |
| } | |
| /* hide logout button on mobile; | |
| instead, reveal in user menu */ | |
| #logout { | |
| display: none; | |
| } | |
| #logout-in-panel { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| margin: 8px 0 -8px; | |
| text-align: right; | |
| } | |
| #login .material-icons, | |
| #logout-in-panel .material-icons { | |
| font-size: 1rem; | |
| vertical-align: top; | |
| margin-top: 5px; | |
| } | |
| #login .material-icons { | |
| margin: 0.5rem 0; | |
| } | |
| /* Shib IDP */ | |
| #idp-select-container { | |
| clear: both; | |
| padding: 1em 0; | |
| } | |
| /* NOTICES */ | |
| .noty_text { | |
| letter-spacing: 0.3px; | |
| font-size: 14px; | |
| } | |
| .noty_text .material-icons { | |
| font-size: 20px !important; | |
| padding: 0; | |
| margin: 0 4px 0 -10px; | |
| vertical-align: text-bottom; | |
| } | |
| /* ALERT MESSAGES */ | |
| #flash-messages { | |
| margin: 0; | |
| } | |
| .co-alert { | |
| margin: 0 auto 1em; | |
| border-radius: 0; | |
| } | |
| .co-alert.alert-success { | |
| background-color: var(--cmg-color-green-008); | |
| border-color: var(--cmg-color-green-009); | |
| } | |
| .co-alert.alert-warning { | |
| background-color: var(--cmg-color-yellow-001); | |
| color: var(--cmg-color-yellow-002); | |
| border-color: var(--cmg-color-yellow-003); | |
| } | |
| .co-alert.alert-danger { | |
| background-color: var(--cmg-color-red-001); | |
| color: var(--cmg-color-red-006); | |
| border-color: var(--cmg-color-red-007); | |
| } | |
| .co-alert.alert-information { | |
| background-color: var(--cmg-color-blue-006); | |
| color: var(--cmg-color-blue-007); | |
| border-color: var(--cmg-color-blue-001); | |
| } | |
| .co-alert .alert-icon { | |
| margin-right: 0.1rem; | |
| } | |
| .co-alert .alert-title-text { | |
| margin-right: 0.25em; | |
| } | |
| .co-alert .alert-body { | |
| gap: 1em; | |
| } | |
| /* Alerts in the add-edit form: */ | |
| ul.form-list li.alert-banner { | |
| display: block; | |
| padding: 0; | |
| } | |
| ul.form-list li.alert-banner .co-alert { | |
| margin: 0; | |
| border: none; | |
| } | |
| /* General icon and box styling */ | |
| .co-info { /* info icon */ | |
| float: left; | |
| margin: 0.3em 0.3em 0 0; | |
| } | |
| .co-info-topbox { | |
| clear: both; | |
| padding: 1em; | |
| background-color: var(--cmg-color-yellow-001); | |
| border: 1px solid var(--cmg-color-yellow-003); | |
| margin-bottom: 1em; | |
| } | |
| #lastLogin p { | |
| margin-bottom: 0; | |
| } | |
| #content .co-info-topbox .material-icons { | |
| color: var(--cmg-color-green-002); | |
| font-size: 26px; | |
| vertical-align: bottom; | |
| float: left; | |
| margin-right: 0.25em; | |
| margin-top: -0.1em; | |
| } | |
| .material-icons.error { | |
| color: var(--cmg-color-red-002); | |
| } | |
| /* NAVIGATION / SIDE DRAWER */ | |
| #navigation { | |
| z-index: 100; | |
| padding-top: 0; | |
| } | |
| #navigation-drawer { | |
| display: none; | |
| position: absolute; | |
| top: 30px; | |
| z-index: 20; | |
| background-color: var(--cmg-color-lightgray-001); | |
| border-right: 1px solid var(--cmg-color-lightgray-005); | |
| min-width: 160px; | |
| } | |
| /* show our custom navigation icon for shrinking and expanding the drawer | |
| - this baves a little differently in mobile vs desktop mode */ | |
| #co-hamburger { | |
| display: inline-block; | |
| float: left; | |
| position: relative; | |
| top: 3px; | |
| margin: 0; | |
| padding: 0 0 0 12px; | |
| color: var(--cmg-color-lightgray-003); | |
| cursor: pointer; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| #main-menu { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| #main-menu ul { | |
| padding: 0.5em 0 1em 0; | |
| } | |
| #main-menu li { | |
| list-style: none; | |
| } | |
| #main-menu > li { | |
| border-bottom: 1px solid var(--cmg-color-lightgray-004); | |
| } | |
| #main-menu > li a { | |
| display: block; | |
| cursor: pointer; | |
| margin: 0; | |
| padding: 8px 0 8px 12px; | |
| text-decoration: none; | |
| color: var(--cmg-color-gray-001); | |
| position: relative; | |
| overflow:hidden; | |
| } | |
| #main-menu > li li { | |
| border-bottom: none; | |
| position: relative; | |
| overflow:hidden; | |
| } | |
| #main-menu > li li a { | |
| font-size: 0.9em; | |
| padding: 7px 8px 7px 16px; | |
| line-height: 1.4em; | |
| color: var(--cmg-color-blue-001); | |
| border: 1px solid transparent; | |
| } | |
| #main-menu > li a:hover, | |
| #main-menu > li a:focus { | |
| background-color: var(--cmg-color-lightgray-004); | |
| } | |
| #main-menu > li li a:focus { | |
| border: 1px dotted var(--cmg-color-blue-005); | |
| } | |
| #main-menu a.selected { | |
| background-color: var(--cmg-color-lightgray-003); | |
| } | |
| #main-menu li li a.selected { | |
| color: var(--cmg-color-blue-001); | |
| background-color: var(--cmg-color-lightgray-003); | |
| } | |
| #main-menu .fa-fw { | |
| width: 2em; | |
| } | |
| #main-menu li.active a.menuTop { | |
| background-color: var(--cmg-color-lightgray-004); | |
| } | |
| #main-menu .menuTitleAdjust { | |
| margin-left: -4px; | |
| } | |
| #main-menu .material-icons { | |
| margin-right: 6px; | |
| vertical-align: bottom; | |
| } | |
| #main-menu #serviceMenu ul .material-icons { | |
| font-size: 1.1em; | |
| position: relative; | |
| top: -2px; | |
| color: var(--cmg-color-lightgray-008); | |
| } | |
| /* CONTENT */ | |
| #siteTitle { | |
| font-size: 2em; | |
| min-height: 23px; | |
| padding: 0 40px 0 0; | |
| margin: 0; | |
| } | |
| #siteTitle a { | |
| color: var(--cmg-color-white); | |
| text-decoration: none; | |
| } | |
| #breadcrumbs { | |
| font-size: 0.9em; | |
| } | |
| .pageTitleContainer { | |
| display: flex; | |
| justify-content: space-between; | |
| margin: 1em 0 0.5em; | |
| } | |
| .pageTitle { | |
| padding-bottom: 0.25em; | |
| } | |
| .pageTitle .deleted, | |
| .pageTitle .archived { | |
| background-color: var(--cmg-color-red-003); | |
| color: var(--cmg-color-white); | |
| font-size: 0.7em; | |
| font-weight: 600; | |
| letter-spacing: 0.8px; | |
| margin-left: 0.25em; | |
| padding: 0 4px; | |
| text-transform: uppercase; | |
| } | |
| .pageTitle .archived { | |
| background-color: var(--cmg-color-gray-003); | |
| } | |
| /* SUBNAVIGATION & TABS */ | |
| .supertitle { | |
| padding: 1em 0; | |
| } | |
| #subnavigation nav { | |
| padding: 0.5em 0; | |
| } | |
| .cm-subnav-tabs .nav-link { | |
| text-transform: uppercase; | |
| padding: 1em 1.5em; | |
| color: var(--cmg-color-blue-001); | |
| } | |
| .cm-subnav-links .nav-link.active { | |
| color: var(--cmg-color-gray-001); | |
| } | |
| .cm-subnav-links ul.list-inline { | |
| margin: 0.5em 0 0 0; | |
| font-size: 0.9em; | |
| } | |
| .cm-subnav-links .list-inline-item { | |
| margin: 0; | |
| } | |
| .cm-subnav-links .list-inline-item a.nav-link { | |
| padding: 0 1.5em 0.5em 0; | |
| } | |
| /* TOP CONTENT LINKS (contextual) */ | |
| #topLinks { | |
| margin: 1.5em 0 -1.5em 0; | |
| padding: 0; | |
| } | |
| #topLinks li { | |
| list-style: none; | |
| display: inline-block; | |
| margin: 0.5em 0; | |
| padding: 0; | |
| } | |
| #topLinks a { | |
| text-decoration: none; | |
| border: none; | |
| background: none; | |
| background-color: var(--cmg-color-white); | |
| } | |
| #topLinks a:hover { | |
| color: var(--cmg-color-gray-001); | |
| } | |
| #main #topLinks a:active, | |
| #main #topLinks a:hover { | |
| text-decoration: underline; | |
| } | |
| #topLinks a.dropdown-item.deletebutton { | |
| color: var(--cmg-color-red-002); | |
| } | |
| /* INNER CONTENT - for non-table-based layouts */ | |
| #content { | |
| padding: 1em 1.5em; | |
| } | |
| .inner-content { | |
| clear: both; | |
| margin-top: 1em; | |
| } | |
| /* TOP SEARCH */ | |
| .top-search { | |
| margin-top: 0.5em; | |
| padding: 0; | |
| border: 1px solid var(--cmg-color-lightgray-005); | |
| } | |
| #content .top-search legend button.cm-toggle { | |
| position: absolute; | |
| right: 0.5em; | |
| border: none; | |
| background-color: transparent; | |
| } | |
| #content .top-search legend .material-icons { | |
| font-size: 1.4em; | |
| vertical-align: text-top; | |
| color: var(--cmg-color-gray-002); | |
| } | |
| #content .top-search legend button.cm-toggle .material-icons { | |
| font-size: 34px; | |
| line-height: 17px; | |
| } | |
| .top-search fieldset { | |
| clear: both; | |
| position: relative; | |
| padding: 0.5em 0.5em 0; | |
| margin: 0; | |
| background-color: var(--cmg-color-lightgray-001); | |
| } | |
| .top-search.open fieldset { | |
| padding-bottom: 0.5em; | |
| } | |
| .top-search legend { | |
| width: 100%; | |
| background-color: var(--cmg-color-lightgray-001); | |
| line-height: 1.8em; | |
| cursor: pointer; | |
| font-size: 1em; | |
| box-sizing: content-box; | |
| } | |
| #top-search-fields { | |
| display: none; | |
| padding: 0.25em 0.5em; | |
| } | |
| #top-search-submit { | |
| float: right; | |
| width: 200px; | |
| margin-bottom: 0.75em; | |
| } | |
| .top-search input[type=text], | |
| .top-search select, | |
| .side-search input[type=text], | |
| .side-search select { | |
| width: 100%; | |
| box-sizing: border-box; | |
| margin: 0 0 0.5em 0; | |
| height: 28px; | |
| padding: 2px 4px; | |
| border: 1px solid var(--cmg-color-lightgray-006); | |
| background-color: var(--cmg-color-white); | |
| } | |
| .top-search label { | |
| margin-bottom: 0; | |
| } | |
| ::-webkit-input-placeholder, | |
| ::-moz-placeholder, | |
| :-ms-input-placeholder, | |
| :-moz-placeholder { | |
| opacity: 0.2; | |
| } | |
| .top-search input[type=text]:focus, | |
| .side-search input[type=text]:focus { | |
| background-color: var(--cmg-color-yellow-004); | |
| } | |
| .top-search .submit-button, | |
| .top-search .clear-button, | |
| .side-search .submit-button, | |
| .side-search .clear-button { | |
| float: right; | |
| font-size: 0.9em; | |
| width: 80px; | |
| line-height: 28px; | |
| height: 28px; | |
| margin: 1em 0.5em; | |
| padding: 0; | |
| } | |
| .top-search .top-search-checkboxes { | |
| margin-top: 0.5em; | |
| } | |
| .top-search .filter-clear-all-button { | |
| font-size: 0.9em; | |
| width: auto; | |
| height: auto; | |
| line-height: unset; | |
| margin: -6px 0 0; | |
| padding: 0 1em; | |
| } | |
| .top-search .filter-clear-all-button:hover { | |
| background-color: unset; | |
| } | |
| .top-search.top-search-hide-fields label, | |
| .side-search label { | |
| display: none; | |
| } | |
| #top-search-active-filters { | |
| margin-left: 0.25em; | |
| padding: 0.5em 0; | |
| } | |
| .top-search-active-filter.btn.btn-sm { | |
| padding: 0.2em 0.4em; | |
| white-space: nowrap; | |
| box-shadow: none; | |
| text-transform: none; | |
| font-size: 0.8em; | |
| border: 1px solid var(--cmg-color-lightgray-007); | |
| } | |
| .top-search-active-filter.btn.btn-sm:hover { | |
| background-color: var(--cmg-color-lightgray-006); | |
| color: black !important; | |
| } | |
| .top-search-active-filter-title::after { | |
| content: ": "; | |
| } | |
| .top-search-active-filter-title.no-value::after { | |
| content: none; | |
| } | |
| .top-search-active-filters-remove button { | |
| margin-left: 2em; | |
| font-size: 0.9em; | |
| background-color: var(--cmg-color-lightgray-003); | |
| } | |
| .top-search-active-filters-remove button:hover { | |
| background-color: var(--cmg-color-lightgray-005); | |
| } | |
| /* RECONCILE TABLE */ | |
| #reconcile-table { | |
| width: auto; | |
| border: none; | |
| font-size: 0.8em; | |
| } | |
| #reconcile-table td, | |
| #reconcile-table th { | |
| border: 1px solid var(--cmg-color-lightgray-006); | |
| } | |
| #reconcile-table th { | |
| font-weight: normal; | |
| } | |
| #reconcile-table th.col-names { | |
| text-align: center; | |
| background-color: var(--cmg-color-white); | |
| border: none; | |
| font-weight: bold; | |
| } | |
| #reconcile-table td.empty { | |
| background-color: var(--cmg-color-white) !important; | |
| border: none; | |
| font-size: 0.5em; | |
| } | |
| #reconcile-table tbody td.reference-ids { | |
| text-align: center; | |
| word-break: break-all; | |
| background-color: var(--cmg-color-lightgray-003) !important; | |
| } | |
| #reconcile-table td.reconcile-actions { | |
| text-align: center; | |
| } | |
| #reconcile-table .btn { | |
| font-size: 1em; | |
| } | |
| #reconcile-table th.attr-title { | |
| border: none; | |
| background-color: var(--cmg-color-white); | |
| text-align: right; | |
| } | |
| /* set the borders on the "new" reference id */ | |
| #reconcile-table tbody td:nth-child(2) { | |
| border-left: 2px solid var(--cmg-color-lightgray-007); | |
| border-right: 2px solid var(--cmg-color-lightgray-007); | |
| } | |
| #reconcile-table tbody tr:first-child td:nth-child(2) { | |
| border-top: 2px solid var(--cmg-color-lightgray-007); | |
| } | |
| #reconcile-table tbody tr:last-child td:nth-child(2) { | |
| border-bottom: 2px solid var(--cmg-color-lightgray-007); | |
| } | |
| /* no zebra for this table */ | |
| #reconcile-table tr:nth-child(2n+1) td { | |
| background-color: var(--cmg-color-white); | |
| } | |
| #reconcile-table.view-mode-match td.match, | |
| #reconcile-table.view-mode-both td.match { | |
| background-color: var(--cmg-color-green-003); | |
| } | |
| #reconcile-table.view-mode-diff td.diff, | |
| #reconcile-table.view-mode-both td.diff { | |
| background-color: var(--cmg-color-yellow-004); | |
| } | |
| #reconcile-table tr.defined-attr th { | |
| background-color: var(--cmg-color-lightgray-001); | |
| border-left: 4px solid var(--cmg-color-lightgray-007); | |
| } | |
| #reconcile-table tr.defined-attr td:last-child { | |
| border-right: 2px solid var(--cmg-color-lightgray-007); | |
| } | |
| #reconcile-table tr.matr-sorid th, | |
| #reconcile-table tr.matr-sorid td { | |
| border-bottom: 2px solid var(--cmg-color-lightgray-007); | |
| } | |
| #reconcile-table tr.matr-request_time th, | |
| #reconcile-table tr.matr-request_time td { | |
| border-top: 2px solid var(--cmg-color-lightgray-007); | |
| } | |
| /* view-controls */ | |
| .view-controls-title { | |
| margin-right: 1em; | |
| } | |
| /* MATCHGRID MANAGEMENT */ | |
| #matchgrid-management { | |
| padding: 0; | |
| margin: 0 0 3em; | |
| } | |
| .matchgrid-description { | |
| margin-top: -1em; | |
| margin-bottom: 2em; | |
| font-style: italic; | |
| } | |
| fieldset.content-fieldset { | |
| margin-bottom: 1.5em; | |
| } | |
| fieldset.content-fieldset legend { | |
| float: none; | |
| } | |
| /* MATCHGRID CONFIGURATION */ | |
| #matchgrid-config-menu { | |
| list-style: none; | |
| padding: 0; | |
| } | |
| #matchgrid-config-menu a { | |
| display: inline-block; | |
| padding: 0.5em; | |
| text-indent: -0.9em; | |
| padding-left: 2em; | |
| } | |
| #matchgrid-config-menu a .material-icons { | |
| color: var(--cmg-color-gray-001); | |
| margin-right: 0.5em; | |
| } | |
| /* MATCHGRID RECORDS INDEX */ | |
| body.matchgridrecords .popover { | |
| max-width: unset; | |
| } | |
| body.matchgridrecords .popover-header { | |
| font-size: 1em; | |
| } | |
| /* INDEX ACTION COMMAND MENUS */ | |
| td.actions, | |
| th.actions { | |
| text-align: center; | |
| } | |
| .field-actions .dropdown-menu { | |
| padding: 0; | |
| font-size: 1em; | |
| border-radius: 0; | |
| } | |
| .field-actions a.dropdown-item { | |
| padding: 0.5em 1em; | |
| color: var(--cmg-color-blue-001); | |
| } | |
| #main .field-actions a.dropdown-item:hover { | |
| color: var(--cmg-color-black); | |
| text-decoration: none; | |
| } | |
| /* PAGINATION */ | |
| #pagination { | |
| margin: 0; | |
| min-height: 1.5em; | |
| padding: 0.5em 1em; | |
| background-color: var(--cmg-color-green-004); | |
| color: var(--cmg-color-white); | |
| text-align: center; | |
| } | |
| #pagination ul, | |
| #pagination li { /* override defaults */ | |
| display: inline-block; | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| #pagination a { | |
| color: var(--cmg-color-white); | |
| } | |
| #pagination a:hover { | |
| color: var(--cmg-color-lightgray-002); | |
| text-decoration: underline; | |
| } | |
| #pagination .paginationNumbers a { | |
| display: inline-block; | |
| padding: 0 4px; | |
| } | |
| #pagination .paginationCounter { | |
| display: block; | |
| } | |
| #pagination .paginationFirst, | |
| #pagination .paginationPrev { | |
| margin-right: 0.5em; | |
| font-size: 0.9em; | |
| } | |
| #pagination .paginationLast, | |
| #pagination .paginationNext { | |
| margin-left: 0.5em; | |
| font-size: 0.9em; | |
| } | |
| #pagination .pagination-form { | |
| display: inline-block; | |
| margin-left: 2em; | |
| } | |
| #pagination .pagination-form label { | |
| margin-bottom: 0; | |
| } | |
| #pagination .pagination-form input[type=text] { | |
| height: 1.4em; | |
| width: 2em; | |
| margin: 0; | |
| padding: 2px; | |
| font-size: 0.9em; | |
| background-color: var(--cmg-color-lightgray-004); | |
| border: 1px solid var(--cmg-color-green-005); | |
| text-align: center; | |
| } | |
| #pagination .pagination-form select { | |
| margin: 0 0.5rem; | |
| padding: 0 0.25rem; | |
| font-size: 0.9em; | |
| display: inline-block; | |
| line-height: unset; | |
| width: unset; | |
| height: unset; | |
| } | |
| #pagination .pagination-form option { | |
| padding: 0; | |
| } | |
| #pagination .pagination-form input[type="submit"] { | |
| width: auto; | |
| margin: 0 0 0 2px; | |
| padding: 0 4px; | |
| min-width: 0; | |
| min-height: 0; | |
| line-height: initial; | |
| font-size: 0.9em; | |
| } | |
| #pagination li.active { | |
| font-weight: bold; | |
| font-size: 120%; | |
| position: relative; | |
| top: 1px; | |
| } | |
| #pagination .btn-primary { | |
| background-color: var(--cmg-color-green-006); | |
| border-color: var(--cmg-color-green-005); | |
| } | |
| #pagination .btn-primary:hover { | |
| background-color: var(--cmg-color-gray-001) !important; | |
| border-color: var(--cmg-color-black); | |
| } | |
| ::-webkit-input-placeholder, | |
| ::-moz-placeholder, | |
| :-ms-input-placeholder, | |
| :-moz-placeholder { | |
| opacity: 0.2; | |
| } | |
| /* DATA LISTS */ | |
| /*** ul.data-list is the main structure for representing data | |
| in which the field value is to the left, and actions on that | |
| value are to the right; this is used for canvases and explorers | |
| where the fields require no (or few) labels. | |
| see also ul.form-list below. ***/ | |
| ul.data-list li { | |
| margin: 0 0 2px !important; | |
| overflow: hidden; | |
| padding: 2px 0 3px 0; | |
| background-color: var(--cmg-color-lightgray-003); | |
| } | |
| ul.data-list li:nth-child(2n) { | |
| background-color: var(--cmg-color-lightgray-009); /* note that this is slightly lighter than the .form-list zebra */ | |
| } | |
| ul.data-table li { | |
| background-color: unset; | |
| } | |
| .field-data { | |
| float: left; | |
| padding: 4px 0 0 10px; | |
| } | |
| .field-data-alone { | |
| padding: 2px 0 2px 10px; | |
| } | |
| /* FORMS */ | |
| label { | |
| cursor: pointer; | |
| } | |
| ul.fields li { | |
| overflow-x: auto; /* required for data tables on mobile */ | |
| } | |
| /*** ul.form-list is the main structure for representing forms | |
| as well as data where field name is in the left column and | |
| field data is in the right column; see also ul.data-list | |
| above. ***/ | |
| ul.form-list { | |
| clear: both; | |
| padding: 0; | |
| border-top: 1px solid var(--cmg-color-lightgray-005); | |
| } | |
| ul.form-list li { | |
| background-color: var(--cmg-color-lightgray-001); | |
| border-left: 1px solid var(--cmg-color-lightgray-005); | |
| border-bottom: 1px solid var(--cmg-color-lightgray-005); | |
| border-right: 1px solid var(--cmg-color-lightgray-005); | |
| margin: 0; | |
| padding: 0.8em 0.5em; | |
| list-style: none; | |
| } | |
| ul.form-list li:nth-child(even) { | |
| background-color: var(--cmg-color-white); | |
| } | |
| ul.form-list li.fields-submit { | |
| background-color: unset; | |
| border: none; | |
| } | |
| ul.form-list .field-name { | |
| display: block; | |
| } | |
| ul.form-list .field-title { | |
| font-weight: bold; | |
| } | |
| ul.form-list .field-info { | |
| position: relative; | |
| } | |
| ul.form-list .field-desc { | |
| font-size: 0.9em; | |
| font-style: italic; | |
| } | |
| ul.form-list .fields-header { | |
| background-color: var(--cmg-color-white); | |
| } | |
| ul.form-list input[type="text"], | |
| ul.form-list input[type="number"], | |
| ul.form-list input[type="password"] { | |
| width: 100%; | |
| font-size: 1em; | |
| -webkit-border-radius: 0; | |
| -moz-border-radius: 0; | |
| border-radius: 0; | |
| border: 1px solid var(--cmg-color-lightgray-007); | |
| padding: 4px 6px; | |
| } | |
| ul.form-list input[type="text"]:focus, | |
| ul.form-list input[type="number"]:focus, | |
| ul.form-list input[type="password"]:focus { | |
| background-color: var(--cmg-color-yellow-004); | |
| } | |
| ul.form-list input[readonly="readonly"] { | |
| background-color: var(--cmg-color-lightgray-004); | |
| } | |
| ul.form-list select { | |
| font-size: 0.9em; | |
| } | |
| ul.form-list li.fields-submit .required { | |
| font-style: italic; | |
| } | |
| ul.field-children { | |
| margin: 0.5em; | |
| padding: 0; | |
| } | |
| ul.field-children li { | |
| margin: 0; | |
| border-left: 1px solid var(--cmg-color-lightgray-007); | |
| border-right: 1px solid var(--cmg-color-lightgray-007); | |
| border-bottom: 1px solid var(--cmg-color-lightgray-007); | |
| } | |
| ul.field-children li:nth-child(1) { | |
| border-top: 1px solid var(--cmg-color-lightgray-007); | |
| } | |
| ul.field-children li:nth-child(odd) { | |
| background-color: var(--cmg-color-lightgray-002); | |
| } | |
| ul.field-children li:nth-child(even) { | |
| background-color: var(--cmg-color-lightgray-006); | |
| } | |
| ul.form-list li.field-stack .field-name, | |
| ul.form-list li.field-stack .field-info { | |
| display: block; | |
| width: 97%; | |
| } | |
| ul.form-list textarea { | |
| font-size: 0.9em; | |
| } | |
| ul.form-list li.field-stack textarea { | |
| margin: 0; | |
| width: 100%; | |
| resize: vertical; | |
| } | |
| .checkbox input { | |
| margin: 0.25em 0.5em 0 0; | |
| } | |
| .checkbox .subfield { | |
| margin-left: 1.5em; | |
| } | |
| .checkbox .subfield input { | |
| float: none; | |
| } | |
| .checkbox .subfield label { | |
| display: inline; | |
| margin: 0; | |
| } | |
| /* Ensure datepicker renders properly. | |
| We are using javascript to move it near its input field so | |
| that it will scroll properly on mobile devices. */ | |
| #ui-datepicker-div table tr > *:first-child, | |
| #ui-datepicker-div table tr > *:nth-child(2) { | |
| min-width: 0; | |
| text-align: center; | |
| } | |
| #ui-datepicker-div table tr td:first-child { | |
| padding-left: 1px; | |
| } | |
| #ui-datepicker-div { | |
| top: 0 !important; | |
| } | |
| .ui-datepicker select.ui-datepicker-month-year { | |
| width: 100%; | |
| } | |
| .ui-datepicker select.ui-datepicker-month, | |
| .ui-datepicker select.ui-datepicker-year { | |
| width: 49%; | |
| } | |
| #content .material-icons { | |
| font-size: 17px; | |
| margin-top: 1px; | |
| vertical-align: top; | |
| } | |
| /* DIALOG BOX */ | |
| #dialog .modal-header { | |
| background-color: var(--cmg-color-lightgray-004); | |
| border-bottom: none; | |
| } | |
| #dialog .modal-footer { | |
| border-top: none; | |
| } | |
| /* GENERAL */ | |
| .hidden, | |
| .invisible, | |
| .co-dialog { | |
| display: none; | |
| } | |
| p { /* MDL override */ | |
| font-size: inherit; | |
| margin: 0 0 1em; | |
| line-height: 1.6em; | |
| } | |
| .clearfix { | |
| clear: both; | |
| } | |
| .fieldTitle { | |
| font-weight: bold; | |
| } | |
| .descr { | |
| font-style: italic; /* used for long descriptions of fields, typically near the field-title */ | |
| } | |
| .data-desc { | |
| margin-left: 0.5em; /* used for short, often parenthesized descriptions of data */ | |
| font-size: 0.9em; | |
| } | |
| .required { | |
| color: var(--cmg-color-red-002); | |
| } | |
| .center { | |
| text-align: center; | |
| } | |
| .vtop { | |
| vertical-align: top !important; | |
| } | |
| .warn-level-a, | |
| .warn-level-a td { | |
| background-color: var(--cmg-color-red-001); | |
| } | |
| .warn-level-b, | |
| .warn-level-b td { | |
| background-color: var(--cmg-color-yellow-001); | |
| } | |
| .asc, | |
| .desc { | |
| color: black; | |
| } | |
| a.asc::after, | |
| a.desc::after { | |
| position: relative; | |
| right: -2px; | |
| font-style: normal; | |
| } | |
| a.asc::after { | |
| content: "▲"; /*\25b2 in escaped hex*/ | |
| } | |
| a.desc::after { | |
| content: "▼"; /*\25bc in escaped hex*/ | |
| } | |
| .co-grid { | |
| clear: both; | |
| max-width: 100%; /* used with Bootstrap .container */ | |
| border-radius: 3px; | |
| box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12); | |
| } | |
| .co-grid .col { | |
| margin: 0; | |
| padding: 1em; | |
| } | |
| .co-grid .co-grid-header { | |
| background-color: var(--cmg-color-lightgray-010) !important; | |
| font-weight: bold; | |
| } | |
| .co-grid .co-row { | |
| border-top: 1px solid var(--cmg-color-lightgray-005); | |
| } | |
| .co-grid .co-row:nth-child(even) { | |
| background-color: var(--cmg-color-lightgray-002); | |
| } | |
| .co-grid > div:nth-child(2) { | |
| border-top: 1px solid var(--cmg-color-lightgray-010); | |
| } | |
| code, | |
| .fixed-width * { | |
| font-family: "Courier New","Courier",monospace !important; | |
| } | |
| /* Tables */ | |
| table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| border-left: 1px solid var(--cmg-color-lightgray-005); | |
| border-right: 1px solid var(--cmg-color-lightgray-005); | |
| } | |
| .table-container { | |
| overflow: auto; | |
| clear: both; | |
| } | |
| th, td { | |
| padding: 0.75em; | |
| text-align: left; | |
| } | |
| th { | |
| background-color: var(--cmg-color-lightgray-005); | |
| color: var(--cmg-color-black); | |
| } | |
| td { | |
| border-bottom: 1px solid var(--cmg-color-lightgray-005); | |
| } | |
| tr th:first-child, | |
| tr td:first-child { | |
| padding-left: 1.25em; | |
| } | |
| tr th:last-child, | |
| tr td:last-child { | |
| border-right: none; | |
| } | |
| tr.noborder td { | |
| border: none; | |
| } | |
| tr:nth-child(odd) td { | |
| background-color: var(--cmg-color-lightgray-001); | |
| } | |
| tr:nth-child(even) td { | |
| background-color: var(--cmg-color-white); | |
| } | |
| td.indented { | |
| border-left: 3em solid var(--cmg-color-white); | |
| } | |
| .linked-row { | |
| cursor: pointer !important; | |
| } | |
| .linked-row:hover, | |
| .linked-row:hover td { | |
| background-color: var(--cmg-color-lightgray-004) !important; | |
| } | |
| .menuitembutton { | |
| width: 250px; | |
| } | |
| .submitCell { | |
| text-align: right; | |
| } | |
| /* LOADING ANIMATION */ | |
| @keyframes loading { | |
| 0% { opacity: 0.3; } | |
| 30% { opacity: 1.0; } | |
| 100% { opacity: 0.3; } | |
| } | |
| #co-loading { | |
| display: none; /* revealed by JavaScript */ | |
| position: fixed; | |
| z-index: 1100; | |
| top: 50%; | |
| left: 50%; | |
| width: 120px; | |
| margin: -25px 0 0 -60px; | |
| padding: 2em 0; | |
| line-height: 0; | |
| text-align: center; | |
| background-color: var(--cmg-color-white); | |
| border: 1px solid var(--cmg-color-lightgray-006); | |
| border-radius: 60px; | |
| } | |
| #co-loading-redirect { | |
| padding: 1em 1em 0; | |
| text-align: center; | |
| } | |
| .co-loading-mini-input-container { | |
| position: relative; | |
| } | |
| .co-loading-mini-input-container .co-loading-mini { | |
| display: none; | |
| position: relative; | |
| right: 38px; | |
| bottom: 2px; | |
| margin-right: -26px; | |
| } | |
| #co-loading span, | |
| #co-loading-redirect span, | |
| .co-loading-mini span { | |
| animation: 1.2s linear infinite both loading; | |
| background-color: var(--cmg-color-blue-004); | |
| display: inline-block; | |
| } | |
| #co-loading span { | |
| height: 20px; | |
| width: 20px; | |
| border-radius: 10px; | |
| margin: 0 2.5px; | |
| } | |
| #co-loading-redirect span { | |
| height: 16px; | |
| width: 16px; | |
| border-radius: 8px; | |
| margin: 0 2px; | |
| } | |
| .co-loading-mini span { | |
| height: 6px; | |
| width: 6px; | |
| border-radius: 3px; | |
| margin: 0 1px; | |
| } | |
| #co-loading span:nth-child(2), | |
| #co-loading-redirect span:nth-child(2), | |
| .co-loading-mini span:nth-child(2) { | |
| animation-delay: 0.2s; | |
| } | |
| #co-loading span:nth-child(3), | |
| #co-loading-redirect span:nth-child(3), | |
| .co-loading-mini span:nth-child(3) { | |
| animation-delay: 0.4s; | |
| } | |
| /* BUTTONS */ | |
| .btn { | |
| text-transform: uppercase; | |
| font-weight: 500; | |
| border-radius: 3px; | |
| font-size: 1.2em; | |
| padding: 0.5em 1.5em; | |
| } | |
| .btn:focus { | |
| border: 1px dotted var(--cmg-color-black); | |
| } | |
| .btn.btn-sm { | |
| font-size: 0.9em; | |
| margin: -0.5em 0 0 0.1em; | |
| } | |
| .btn-primary, | |
| .btn-primary:focus, | |
| .btn-primary:active { | |
| background-color: var(--cmg-color-blue-003); | |
| color: var(--cmg-color-white); | |
| border-color: var(--cmg-color-blue-003); | |
| } | |
| .btn-primary, | |
| .btn-primary:active { | |
| box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12); | |
| } | |
| .btn-primary:hover { | |
| background-color: var(--cmg-color-black); | |
| color: var(--cmg-color-white) !important; | |
| border-color: var(--cmg-color-black); | |
| text-decoration: none !important; | |
| } | |
| .btn-primary.disabled, | |
| .btn-primary:disabled { | |
| color: var(--cmg-color-white); | |
| background-color: var(--cmg-color-blue-003); | |
| border-color: var(--cmg-color-blue-003); | |
| opacity: 0.4; | |
| } | |
| .btn-default, | |
| .btn-default:active { | |
| background-color: var(--cmg-color-lightgray-005); | |
| box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12); | |
| } | |
| .btn-default:hover { | |
| background-color: var(--cmg-color-blue-003); | |
| color: var(--cmg-color-white) !important; | |
| text-decoration: none !important; | |
| } | |
| .btn-secondary { | |
| background-color: var(--cmg-color-red-004); | |
| color: var(--cmg-color-white); | |
| } | |
| .btn.link { | |
| font-size: 1em; | |
| text-decoration: underline; | |
| color: var(--cmg-color-blue-003); | |
| border: none; | |
| } | |
| /* Call to Action Blocks */ | |
| .call-to-action { | |
| margin-bottom: 2em; | |
| } | |
| .call-to-action a.btn { | |
| display: block; | |
| margin-bottom: 0.5em; | |
| } | |
| #content .call-to-action .btn .material-icons { | |
| font-size: 1.4em; | |
| vertical-align: text-bottom; | |
| margin-right: 0.25em; | |
| } | |
| /*Bootstrap badge*/ | |
| .badge { | |
| font-size: 0.95em; | |
| font-weight: normal; | |
| height: min-content; | |
| margin-top: auto; | |
| margin-bottom: auto; | |
| } | |
| .bg-secondary, | |
| .bg-success, | |
| .bg-danger, | |
| .bg-warning, | |
| .bg-info, | |
| .bg-light, | |
| .bg-dark, | |
| .bg-primary { | |
| border: 1px solid transparent; | |
| } | |
| .bg-warning { | |
| background-color: var(--cmg-color-yellow-002); | |
| } | |
| .bg-primary { | |
| background-color: var(--cmg-color-blue-003); | |
| } | |
| .bg-secondary { | |
| background-color: var(--cmg-color-gray-002); | |
| } | |
| /* Bootstrap bg-outline */ | |
| .bg-outline-primary { | |
| color: var(--cmg-color-blue-003); | |
| border: 1px solid var(--cmg-color-blue-003); | |
| } | |
| .bg-outline-info { | |
| color: var(--cmg-color-blue-006); | |
| border: 1px solid var(--cmg-color-blue-006); | |
| } | |
| .bg-outline-danger { | |
| color: var(--cmg-color-red-005); | |
| border: 1px solid var(--cmg-color-red-005); | |
| } | |
| .bg-outline-success { | |
| color: var(--cmg-color-green-007); | |
| border: 1px solid var(--cmg-color-green-007); | |
| } | |
| .bg-outline-warning { | |
| color: var(--cmg-color-yellow-002); | |
| border: 1px solid var(--cmg-color-yellow-002); | |
| } | |
| .bg-outline-light { | |
| color: var(--cmg-color-gray-004); | |
| border: 1px solid var(--cmg-color-gray-004); | |
| } | |
| .bg-outline-secondary { | |
| color: var(--cmg-color-gray-002); | |
| border: 1px solid var(--cmg-color-gray-002); | |
| } | |
| /* FOOTER */ | |
| footer { | |
| text-align: center; | |
| padding: 2em 2em 1em; | |
| } |