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?
registry/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.
1772 lines (1769 sloc)
38 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 Registry 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 https://www.internet2.edu/comanage COmanage Project | |
| * @package registry | |
| * @since COmanage Registry 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; | |
| } | |
| h2 { | |
| font-size: 2em; | |
| line-height: 2em; | |
| margin: 0; | |
| } | |
| h3 { | |
| font-size: 1.4em; | |
| line-height: 1.4em; | |
| 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-002); | |
| } | |
| /* HEADER */ | |
| #banner { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: end; | |
| padding: 1em; | |
| margin: 0; | |
| background-color: var(--cmg-color-blue-002); | |
| color: var(--cmg-color-white); | |
| } | |
| #logo-title-wrapper { | |
| white-space: nowrap; | |
| } | |
| #siteTitle { | |
| font-size: 2em; | |
| min-height: 23px; | |
| padding: 0 40px 0 0; | |
| margin: 0; | |
| } | |
| #banner a { | |
| color: var(--cmg-color-white); | |
| text-decoration: none; | |
| } | |
| #user-defined-links-top ul { | |
| display: flex; | |
| column-gap: 1em; | |
| margin: 0; | |
| padding: 0 15px 0 0; | |
| } | |
| #user-defined-links-top li { | |
| list-style: none; | |
| } | |
| /* LOGO */ | |
| #logo { | |
| float: left; | |
| margin-right: 0.75em; | |
| } | |
| #logo img { | |
| height: 28px; | |
| } | |
| /* TOP BAR */ | |
| #top-bar { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 0; | |
| border-bottom: 1px solid var(--cmg-color-lightgray-006); | |
| min-height: 47px; | |
| } | |
| body.logged-out #top-bar, | |
| body.cos.select #top-bar { | |
| justify-content: end; | |
| } | |
| #top-bar .material-icons { | |
| vertical-align: bottom; | |
| } | |
| #top-bar .top-menu-button { | |
| padding: 0.5em 1em; | |
| background-color: transparent; | |
| border: none; | |
| } | |
| #top-bar .icon-adjust { | |
| margin-right: -8px; | |
| } | |
| #top-controls { | |
| display: flex; | |
| flex: 1; | |
| } | |
| /* Mobile menu icon */ | |
| #co-hamburger { | |
| margin: 0; | |
| padding: 0.5em 1em; | |
| cursor: pointer; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| /* GLOBAL SEARCH */ | |
| #global-search { | |
| width: 100%; | |
| background-color: var(--cmg-color-lightgray-003); | |
| border-radius: 0; | |
| border: none; | |
| border-top: 1px solid var(--cmg-color-lightgray-006); | |
| border-bottom: 1px solid var(--cmg-color-lightgray-006); | |
| } | |
| #global-search form { | |
| display: flex; | |
| justify-content: space-between; | |
| padding: 1em; | |
| } | |
| #global-search #q { /* search input */ | |
| padding-left: 0.5em; | |
| width: 100%; | |
| border-radius: 0; | |
| border: 1px solid var(--cmg-color-lightgray-006); | |
| } | |
| #global-search-button { | |
| background-color: var(--cmg-color-blue-002); | |
| color: white; | |
| border-radius: 0 3px 3px 0; | |
| } | |
| #global-search-clear { | |
| display: none; /* will only appear if input holds a value */ | |
| background-color: var(--cmg-color-blue-002); | |
| border-radius: 0; | |
| color: var(--cmg-color-white); | |
| border-right: 1px dotted var(--cmg-color-gray-004); | |
| } | |
| #q.hasValue + #global-search-clear { | |
| display: inline-block; | |
| } | |
| #top-bar #global-search-toggle { | |
| display: flex; | |
| align-items: center; | |
| padding: 0.5em 0; | |
| } | |
| /* TOP MENU */ | |
| #top-menu { | |
| z-index: 100; | |
| } | |
| #top-menu ul { | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| font-size: 1em; | |
| line-height: unset; | |
| } | |
| #top-menu .top-menu-link-text { | |
| display: none; | |
| } | |
| #top-menu li a.dropdown-toggle { | |
| color: var(--cmg-color-white); | |
| } | |
| #top-menu li a.dropdown-toggle:hover { | |
| text-decoration: none; | |
| } | |
| #top-menu .dropdown-item { | |
| padding: 0.5em 1em; | |
| } | |
| #top-menu .dropdown-item .material-icons { | |
| margin-right: 0.25em; | |
| vertical-align: middle; | |
| } | |
| #user-panel { | |
| color: var(--cmg-color-gray-001); | |
| background-color: var(--cmg-color-lightgray-002); | |
| border: 1px solid var(--cmg-color-lightgray-005); | |
| padding: 0; | |
| margin: 9px 0 0; | |
| min-width: 100vw; | |
| 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 { /* mobile only styling */ | |
| border-top: 1px solid var(--cmg-color-lightgray-006); | |
| padding: 1em; | |
| } | |
| #user-panel-user-info .material-icons { | |
| float: left; | |
| font-size: 5em; | |
| } | |
| #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; | |
| } | |
| #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 #user-panel-switch-co { | |
| clear: both; | |
| text-align: center; | |
| border-top: 1px solid var(--cmg-color-lightgray-006); | |
| margin-top: 2.5em; | |
| padding: 0; | |
| } | |
| #user-panel #co-switch-link { | |
| text-transform: unset; | |
| font-size: 1.1em; | |
| display: block; | |
| padding: 1em; | |
| } | |
| #user-panel-user-settings { | |
| float: right; | |
| margin: 0 1rem 1rem 0; | |
| } | |
| #user-panel-user-settings .dropdown-divider { | |
| margin: 0 0 0.25rem; | |
| } | |
| /* LOGIN & LOGOUT */ | |
| #login-button { | |
| display: inline-block; | |
| padding: 0.25em 1em; | |
| text-decoration: none; | |
| font-size: 1rem; | |
| } | |
| #welcome-login { | |
| text-align: center; | |
| margin: 1em auto; | |
| } | |
| #logout-in-panel { | |
| text-align: right; | |
| } | |
| #logout-in-panel-link { | |
| padding: 1em; | |
| margin: 0; | |
| width: 100%; | |
| } | |
| #login .material-icons, | |
| #logout-in-panel .material-icons { | |
| font-size: 1rem; | |
| vertical-align: top; | |
| margin-top: 0.25rem; | |
| } | |
| /* Shib IDP */ | |
| #idp-select-container { | |
| clear: both; | |
| padding: 1em 0; | |
| } | |
| /* 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-001); | |
| border-color: var(--cmg-color-green-003); | |
| } | |
| .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-005); | |
| border-color: var(--cmg-color-blue-001); | |
| } | |
| .co-alert .alert-icon { | |
| margin-right: 0.1rem; | |
| } | |
| .co-alert .alert-title-text { | |
| margin-right: 0.25em; | |
| } | |
| /* 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; | |
| } | |
| #lastLogin p { | |
| margin-bottom: 0; | |
| } | |
| /* MAIN NAVIGATION and CONTENT */ | |
| #main-wrapper { | |
| position: relative; | |
| } | |
| /* NAVIGATION / SIDE DRAWER */ | |
| #navigation-drawer { | |
| display: none; | |
| position: absolute; | |
| z-index: 20; | |
| border-right: 1px solid var(--cmg-color-lightgray-006); | |
| border-bottom: 1px solid var(--cmg-color-lightgray-006); | |
| background-color: var(--cmg-color-white); | |
| } | |
| #navigation-drawer.visible { | |
| display: block; | |
| } | |
| #navigation { | |
| z-index: 100; | |
| padding-top: 0; | |
| } | |
| #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-006); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| #main-menu > li a { | |
| display: block; | |
| cursor: pointer; | |
| margin: 0; | |
| padding: 1rem; | |
| text-decoration: none; | |
| color: var(--cmg-color-gray-001); | |
| position: relative; | |
| overflow:hidden; | |
| width: 100%; | |
| } | |
| #main-menu > li a:hover, | |
| #main-menu > li a:focus { | |
| background-color: var(--cmg-color-lightgray-005); | |
| } | |
| #main-menu a.selected { | |
| background-color: var(--cmg-color-lightgray-007); | |
| } | |
| #main-menu .material-icons { | |
| margin-right: 6px; | |
| vertical-align: bottom; | |
| } | |
| #main-menu .material-icons.dropdown-chevron { | |
| opacity: 0.3; | |
| } | |
| #co-menu-collapse { | |
| display: none; | |
| } | |
| /* Menu Panels */ | |
| .menu-panel { | |
| display: none; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| z-index: 200; | |
| padding: 1rem; | |
| width: 100vw; | |
| border-right: 1px solid var(--cmg-color-lightgray-006); | |
| border-bottom: 1px solid var(--cmg-color-lightgray-006); | |
| text-align: left; | |
| background-color: var(--cmg-color-white); | |
| -webkit-box-shadow: 5px 5px 8px 0px var(--cmg-color-lightgray-003); | |
| box-shadow: 5px 5px 8px 0px var(--cmg-color-lightgray-003); | |
| } | |
| #main-menu .menu-panel a { | |
| color: var(--cmg-color-blue-001); | |
| } | |
| #main-menu .menu-panel li a:hover, | |
| #main-menu .menu-panel li a:focus { | |
| background-color: transparent !important; | |
| } | |
| #main-menu .menu-panel li a:hover .menu-panel-link-text, | |
| #main-menu .menu-panel li a:focus .menu-panel-link-text { | |
| text-decoration: underline; | |
| } | |
| .menu-panel.visible { | |
| display: block; | |
| } | |
| .menu-panel-close.btn { | |
| position: absolute; | |
| right: 0; | |
| top: 0; | |
| color: #666; | |
| padding: 1rem; | |
| line-height: 1.2rem; | |
| } | |
| #main-menu .menu-panel-primary-link-text h3 { | |
| color: var(--cmg-color-blue-001); | |
| padding: 0; | |
| font-weight: 500; | |
| } | |
| #main-menu a.menu-panel-primary-link { | |
| display: flex; | |
| align-items: center; | |
| border: 1px solid var(--cmg-color-white); | |
| } | |
| #main-menu .menu-panel-links a.menu-panel-primary-link:hover { | |
| background-color: transparent; | |
| border: 1px solid var(--cmg-color-lightgray-006); | |
| } | |
| #main-menu .menu-panel-links a.menu-panel-primary-link:hover h3 { | |
| text-decoration: underline; | |
| } | |
| #main-menu .menu-panel-primary-link-text { | |
| flex: 1; | |
| } | |
| #main-menu ul.menu-panel-links ul li a { | |
| padding: 0.5em 1em; | |
| margin: 0; | |
| display: flex; | |
| gap: 0.5em; | |
| align-items: center; | |
| line-height: 1.4em; | |
| } | |
| #main-menu .menu-panel-links .material-icons, | |
| #main-menu .menu-panel-links .material-icons-outlined { | |
| font-size: 2.5rem; | |
| margin-right: 0.75rem; | |
| display: inline; | |
| color: var(--cmg-color-gray-002); | |
| } | |
| #main-menu .menu-panel-links li { | |
| margin-bottom: 1em; | |
| } | |
| #main-menu .menu-panel-links-inner .material-icons, | |
| #main-menu .menu-panel-links-inner .material-icons-outlined { | |
| font-size: 1.2em; | |
| } | |
| #main-menu .menu-panel-links .menu-panel-links-inner li { | |
| margin-bottom: 0; | |
| } | |
| #advanced-menu { | |
| margin: 1em 0; | |
| padding: 0; | |
| } | |
| #advanced-menu li { | |
| list-style: none; | |
| text-align: center; | |
| font-size: 0.9em; | |
| } | |
| #advanced-menu li a { | |
| display: block; | |
| padding: 0.5em 0; | |
| color: var(--cmg-color-gray-003); | |
| } | |
| #advanced-menu .menu-title-char { | |
| display: none; | |
| } | |
| .menu-panel-links-desc { | |
| margin-top: 0.5em; | |
| font-size: 0.9em; | |
| } | |
| .menu-panel-link-desc { | |
| color: var(--cmg-color-gray-001); | |
| } | |
| .menu-panel .az-link { | |
| position: absolute; | |
| right: 6em; | |
| top: 2em; | |
| font-size: 1.1em; | |
| } | |
| #main-menu .az-link a { | |
| padding: 0; | |
| } | |
| .menu-panel-sidepanel { | |
| padding: 0 1em 2em 1.25em; | |
| } | |
| #main-menu .menu-panel-sidepanel h3 { | |
| margin-bottom: 0.5em; | |
| } | |
| #main-menu .menu-panel-sidepanel ul li a { | |
| display: inline; | |
| padding: 0; | |
| } | |
| #main-menu .menu-panel-common-items { | |
| margin-top: 1rem; | |
| } | |
| #main-menu .menu-panel-common-items li { | |
| list-style: disc; | |
| } | |
| /* CONTENT */ | |
| #breadcrumbs { | |
| font-size: 0.9em; | |
| margin-top: -1em; | |
| } | |
| .pageTitleContainer { | |
| display: flex; | |
| justify-content: space-between; | |
| margin: 1em 0 0.5em; | |
| align-items: baseline; | |
| } | |
| .pageTitle { | |
| padding-bottom: 0.25em; | |
| } | |
| .pageTitle h2 { | |
| line-height: 1.2em; | |
| } | |
| .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; | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| gap: 1em; | |
| } | |
| .supertitle .person-status-badge { | |
| margin: 0; | |
| } | |
| #subnavigation nav { | |
| padding: 0.5em 0; | |
| } | |
| #cm-person-subnav-tabs { | |
| margin-bottom: 1.5em; | |
| } | |
| #cm-person-subnav-links { | |
| margin-top: -2em; | |
| } | |
| .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; | |
| } | |
| #external-id-role { | |
| border-top: 1px solid var(--cmg-color-lightgray-006); | |
| } | |
| #external-id-role h3 { | |
| padding: 0.5rem 1rem; | |
| background-color: var(--cmg-color-lightgray-003); | |
| } | |
| #external-id-role-nav { | |
| margin-left: 1rem; | |
| } | |
| /* INNER CONTENT - for non-table-based layouts */ | |
| #content { | |
| padding: 2rem; | |
| } | |
| .inner-content { | |
| clear: both; | |
| margin-top: 1em; | |
| } | |
| /* SEARCH RESULTS */ | |
| #search-results-meta { | |
| padding: 0; | |
| } | |
| #search-results-meta li { | |
| list-style: none; | |
| display: inline; | |
| } | |
| #search-results-meta li:after { | |
| content: ","; | |
| } | |
| #search-results-meta li:first-child:after, | |
| #search-results-meta li:last-child:after { | |
| content: ""; | |
| } | |
| #search-results ul.search-results-group { | |
| padding: 0; | |
| list-style: none; | |
| display: grid; | |
| gap: 1em; | |
| margin-bottom: 0; | |
| } | |
| #search-results li.search-result { | |
| padding: 0; | |
| border: 1px dashed var(--cmg-color-lightgray-008); | |
| } | |
| #search-results li.search-result a { | |
| display: block; | |
| padding: 1em; | |
| color: var(--cmg-color-gray-002); | |
| height: 100%; | |
| } | |
| #search-results li.search-result a:hover, | |
| #search-results li.search-result a:focus-visible { | |
| text-decoration: none; | |
| background-color: var(--cmg-color-lightgray-004); | |
| } | |
| #search-results .search-result-name { | |
| color: var(--cmg-color-blue-001); | |
| } | |
| #search-results .search-result-match-info { | |
| font-size: 0.8em; | |
| } | |
| #search-results .accordion-body { | |
| padding: 1em; | |
| } | |
| /* TOP FILTER */ | |
| .top-filters { | |
| margin-top: 0.5em; | |
| padding: 0; | |
| border: 1px solid var(--cmg-color-lightgray-005); | |
| } | |
| #content .top-filters legend button.cm-toggle { | |
| position: absolute; | |
| right: 0.5em; | |
| border: none; | |
| background-color: transparent; | |
| } | |
| #content .top-filters legend .material-icons { | |
| font-size: 1.4em; | |
| color: var(--cmg-color-gray-002); | |
| } | |
| #content .top-filters legend button.cm-toggle .material-icons { | |
| font-size: 34px; | |
| line-height: 17px; | |
| } | |
| .top-filters fieldset { | |
| clear: both; | |
| position: relative; | |
| padding: 0.5em 0.5em 0; | |
| margin: 0; | |
| background-color: var(--cmg-color-lightgray-001); | |
| } | |
| .top-filters.open fieldset { | |
| padding-bottom: 0.5em; | |
| } | |
| .top-filters legend { | |
| width: 100%; | |
| background-color: var(--cmg-color-lightgray-001); | |
| line-height: 1.8em; | |
| cursor: pointer; | |
| font-size: 1em; | |
| box-sizing: content-box; | |
| } | |
| #top-filters-fields { | |
| display: none; | |
| padding: 0.25em 0.5em; | |
| } | |
| #top-filters-submit { | |
| float: right; | |
| width: 200px; | |
| margin-bottom: 0.75em; | |
| } | |
| .top-filters input[type=text], | |
| .top-filters 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-filters label { | |
| margin-bottom: 0; | |
| } | |
| ::-webkit-input-placeholder, | |
| ::-moz-placeholder, | |
| :-ms-input-placeholder, | |
| :-moz-placeholder { | |
| opacity: 0.2; | |
| } | |
| .top-filters input[type=text]:focus, | |
| .side-search input[type=text]:focus { | |
| background-color: var(--cmg-color-yellow-004); | |
| } | |
| .top-filters .submit-button, | |
| .top-filters .clear-button { | |
| float: right; | |
| font-size: 0.9em; | |
| width: 80px; | |
| height: 28px; | |
| margin: 1em 0.5em; | |
| padding: 0; | |
| } | |
| .top-filters .top-filters-checkboxes { | |
| margin-top: 0.5em; | |
| } | |
| .top-filters .filter-clear-all-button { | |
| font-size: 0.9em; | |
| width: auto; | |
| height: auto; | |
| line-height: unset; | |
| padding: 0 1em; | |
| } | |
| .top-filters .filter-clear-all-button:hover { | |
| background-color: unset; | |
| } | |
| .top-filters.top-filters-hide-fields label, | |
| .side-search label { | |
| display: none; | |
| } | |
| #top-filters-active-filters { | |
| margin-left: 0.25em; | |
| padding: 0.5em 0; | |
| } | |
| .top-filters-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-filters-active-filter.btn.btn-sm:hover { | |
| background-color: var(--cmg-color-lightgray-006); | |
| color: black !important; | |
| } | |
| .top-filters-active-filter-title::after { | |
| content: ": "; | |
| } | |
| .top-filters-active-filter-title.no-value::after { | |
| content: none; | |
| } | |
| .top-filters-active-filters-remove button { | |
| margin-left: 2em; | |
| font-size: 0.9em; | |
| background-color: var(--cmg-color-lightgray-003); | |
| } | |
| .top-filters-active-filters-remove button:hover { | |
| background-color: var(--cmg-color-lightgray-005); | |
| } | |
| .filter-datepicker-lbl { | |
| white-space: nowrap; | |
| margin-right: 0.5em; | |
| } | |
| /* CO CONFIGURATION DASHBOARD */ | |
| .config-menu { | |
| list-style: none; | |
| padding: 0; | |
| } | |
| .config-menu a { | |
| display: inline-block; | |
| padding: 0.5em; | |
| text-indent: -0.9em; | |
| padding-left: 2em; | |
| } | |
| .config-menu a .material-icons { | |
| color: var(--cmg-color-gray-001); | |
| margin-right: 0.5em; | |
| } | |
| #platform-menu { | |
| border-bottom: 1px solid var(--cmg-color-lightgray-006); | |
| padding-bottom: 1em; | |
| } | |
| /* INDEX ACTION COMMAND MENUS */ | |
| a.action-menu-toggle { | |
| padding: 0.5rem; | |
| } | |
| .field-actions .dropdown-menu { | |
| padding: 0; | |
| font-size: 1em; | |
| border-radius: 0; | |
| } | |
| .field-actions a.dropdown-item { | |
| padding: 0.5em 1em; | |
| } | |
| #main .field-actions a.dropdown-item:hover { | |
| color: var(--cmg-color-black); | |
| text-decoration: none; | |
| } | |
| .dropdown-item.active, | |
| .dropdown-item:active { | |
| background-color: var(--cmg-color-lightgray-004); | |
| } | |
| a.dropdown-item.deletebutton { | |
| color: var(--cmg-color-red-002); | |
| } | |
| .dropdown-item.bottom-border { | |
| border-bottom: 1px solid var(--cmg-color-lightgray-005); | |
| } | |
| /* INDEX ACTION BULK EDIT */ | |
| .field-actions.top-links #bulk-edit-switch-container { | |
| padding: 0.5em 1em; | |
| } | |
| table.bulk-edit-mode a.row-link, | |
| table.bulk-edit-mode .read-only-link-container, | |
| table.bulk-edit-mode .row-link-heading, | |
| table.bulk-edit-mode td.actions .field-actions { | |
| display: none; | |
| } | |
| table.list-mode a.row-link, | |
| table.list-mode td.actions .field-actions { | |
| display: block; | |
| } | |
| table.list-mode .bulk-action-checkbox-container { | |
| display: none; | |
| } | |
| table.index-table .form-check { | |
| margin-bottom: 0; | |
| min-height: unset; | |
| } | |
| /* PAGINATION */ | |
| #pagination { | |
| margin: 0; | |
| min-height: 1.5em; | |
| padding: 0.5em 1em; | |
| background-color: var(--cmg-color-blue-002); | |
| 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 ul.paginationFirstPrev li { | |
| margin-right: 0.5em; | |
| font-size: 0.9em; | |
| } | |
| #pagination ul.paginationNextLast li { | |
| margin-left: 0.5em; | |
| font-size: 0.9em; | |
| } | |
| #pagination .pagination-form { | |
| display: inline-block; | |
| } | |
| #pagination #goto-page { | |
| margin: 0 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-lightgray-004); | |
| border-radius: 0.25rem; | |
| text-align: center; | |
| } | |
| #pagination .pagination-form select { | |
| margin: 0 0.25rem 0 0.5rem; | |
| padding: 0 2rem 0 0.25rem; | |
| font-size: 0.9em; | |
| display: inline-block; | |
| line-height: unset; | |
| width: unset; | |
| height: unset; | |
| border: 1px solid var(--cmg-color-lightgray-001); | |
| background-color: var(--cmg-color-lightgray-001); | |
| } | |
| #pagination .pagination-form option { | |
| padding: 0; | |
| } | |
| #pagination .pagination-form input[type="submit"] { | |
| width: auto; | |
| margin: -3px 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-blue-002); | |
| border-color: var(--cmg-color-blue-002); | |
| } | |
| #pagination .btn-primary:hover, | |
| #pagination .btn-primary:focus, | |
| #pagination .btn-primary:active { | |
| background-color: var(--cmg-color-gray-001) !important; | |
| border-color: var(--cmg-color-black); | |
| } | |
| #pagination div.submit, | |
| #pagination div.select { | |
| display: inline-block; | |
| } | |
| ::-webkit-input-placeholder, | |
| ::-moz-placeholder, | |
| :-ms-input-placeholder, | |
| :-moz-placeholder { | |
| opacity: 0.2; | |
| } | |
| /* PERSON CANVAS / CARDS */ | |
| #person-actions { | |
| display: flex; | |
| } | |
| #person-actions .action-menu-toggle { | |
| white-space: nowrap; | |
| } | |
| #mvea-add-menu-container { | |
| float: right; | |
| margin: 1em 0 0; | |
| } | |
| #mvea-canvas { | |
| clear: both; | |
| } | |
| #mvea-canvas-title-container { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin: 3em 0 -0.5em; | |
| } | |
| #mvea-canvas-attributes, | |
| #mvea-canvas-attributes-js { | |
| margin-top: 0; | |
| margin-bottom: 2em; | |
| } | |
| #mvea-canvas-attributes-js .badge { | |
| margin-right: 0.5em; | |
| } | |
| #mvea-canvas-attributes-js .canvas-url-link { | |
| margin-left: 1em; | |
| } | |
| #mvea-canvas-roles { | |
| margin-bottom: 2em; | |
| } | |
| h2.card-title { | |
| font-size: 1.2rem; | |
| margin-bottom: 0.5rem; | |
| line-height: 2rem; | |
| } | |
| h2.card-title a { | |
| display: block; | |
| color: var(--cmg-color-gray-002); | |
| } | |
| #main h2.card-title a:hover { | |
| text-decoration: none; | |
| } | |
| .field-data-container .id-col { | |
| text-align: right; | |
| padding-right: 1em; | |
| color: var(--cmg-color-gray-003); | |
| font-size: 0.8em; | |
| } | |
| /* DATA LISTS */ | |
| ul.data-list { | |
| padding-left: 0; | |
| } | |
| ul.data-list li { | |
| margin: 0 0 2px; | |
| 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 { | |
| padding: 0.25em 0.75em; | |
| } | |
| /* 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); | |
| } | |
| .cm-time-picker-vals ul li, | |
| 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.75em; | |
| list-style: none; | |
| } | |
| .cm-time-picker-vals ul li:nth-child(even), | |
| 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-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 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; | |
| width: 100%; | |
| height: 4em; | |
| } | |
| ul.form-list li.field-stack textarea { | |
| margin: 0; | |
| width: 100%; | |
| resize: vertical; | |
| } | |
| ul.form-list .field-suppliment { | |
| font-size: 0.9em; | |
| } | |
| .checkbox label input { | |
| margin-right: 0.5em; | |
| } | |
| .checkbox .subfield { | |
| margin-left: 1.5em; | |
| } | |
| .checkbox .subfield input { | |
| float: none; | |
| } | |
| .checkbox .subfield label { | |
| display: inline; | |
| margin: 0; | |
| } | |
| #content .material-icons, | |
| #content .material-icons-outlined { | |
| font-size: 17px; | |
| margin-top: 1px; | |
| vertical-align: top; | |
| } | |
| /* DATE and TIME PICKERS */ | |
| .cm-datetime-picker { | |
| display: flex; | |
| align-items: center; | |
| margin-left: 2.8em; | |
| } | |
| .duet-date__toggle { | |
| width: 30px; | |
| height: 30px; | |
| background-color: transparent; | |
| border-radius: 0; | |
| margin: -15px 0 0; | |
| box-shadow: none; | |
| } | |
| .duet-date__toggle:focus { | |
| border: 1px dotted var(--cmg-color-black); | |
| box-shadow: 0 0 0 .25rem rgba(13,110,253,.25); /* override Duet to be same as Bootstrap */ | |
| } | |
| table.duet-date__table tr th:first-child, | |
| table.duet-date__table tr td:first-child, | |
| table.duet-date__table th, | |
| table.duet-date__table td { | |
| padding: unset; | |
| } | |
| table.duet-date__table th.duet-date__table-header { | |
| padding: 8px; | |
| text-align: center; | |
| } | |
| .cm-time-picker button { | |
| width: 30px; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| #content .cm-time-picker .material-icons { | |
| font-size: 1.5em; | |
| margin: 0; | |
| } | |
| .duet-date__input { | |
| display: none; | |
| } | |
| ul.fields li.fields-datepicker { | |
| overflow: unset; | |
| } | |
| ul.fields li.fields-datepicker .field-info { | |
| width: auto; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .field-info .input-group { | |
| flex-wrap: unset; | |
| } | |
| .field-info .input-group .input.text { | |
| width: inherit; | |
| } | |
| .field-info .input-group .input-group-text{ | |
| border-radius: unset; | |
| font-size: inherit; | |
| line-height: inherit; | |
| padding: .25rem .75rem; | |
| } | |
| .cm-time-picker-panel { | |
| position: absolute; | |
| z-index: 100; | |
| right: 0; | |
| width: auto; | |
| background-color: white; | |
| border: 1px solid var(--cmg-color-lightgray-006); | |
| text-align: center; | |
| border-radius: 4px; | |
| align-items: center; | |
| box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1); | |
| } | |
| .cm-time-picker-title { | |
| padding: 0.25em; | |
| border-bottom: 1px solid var(--cmg-color-lightgray-005); | |
| font-size: 1.1em; | |
| } | |
| .cm-time-picker-vals ul { | |
| display: grid; | |
| /* Mobile view is long. The grid templates are reversed for desktop. */ | |
| grid-template-columns: repeat(6,40px); | |
| grid-template-rows: repeat(4,40px); | |
| padding: 0; | |
| align-content: center; | |
| } | |
| .cm-time-picker-minutes .cm-time-picker-vals ul { | |
| grid-template-columns: repeat(4,40px); | |
| grid-template-rows: repeat(1,40px); | |
| } | |
| .top-filters .cm-time-picker-vals li, | |
| ul.form-list .cm-time-picker-vals li { | |
| display: block; | |
| padding: 4px 0 0 0; | |
| } | |
| .cm-time-picker-vals button { | |
| background-color: transparent; | |
| border: none; | |
| width: 30px; | |
| height: 30px; | |
| font-size: 0.9rem; | |
| margin: 0; | |
| } | |
| .cm-time-picker-vals button:focus { | |
| background-color: var(--cmg-color-blue-002); | |
| color: var(--cmg-color-white); | |
| border-radius: 14px; | |
| } | |
| .cm-time-picker-colon { | |
| padding: 0 1em; | |
| } | |
| /* Vue transitions */ | |
| .v-enter-active, | |
| .v-leave-active { | |
| transition: opacity 0.2s; | |
| } | |
| .v-enter-from, | |
| .v-leave-to { | |
| opacity: 0; | |
| } | |
| /* ENTITY ID under each Edit/View Form/List */ | |
| #cm-entity-id { | |
| position: absolute; | |
| border: none; | |
| right: 2.5em; | |
| color: var(--cmg-color-gray-003); | |
| background-color: unset; | |
| } | |
| /* DIALOG BOX */ | |
| #dialog .modal-header { | |
| background-color: var(--cmg-color-lightgray-004); | |
| border-bottom: none; | |
| } | |
| #dialog .modal-footer { | |
| border-top: none; | |
| } | |
| /* MVEA MODAL */ | |
| .mvea-modal .modal-dialog { | |
| max-width: 90vw; | |
| } | |
| .mvea-modal .modal-header { | |
| padding: 0.5rem 1rem; | |
| background-color: var(--cmg-color-lightgray-004); | |
| border-bottom: none; | |
| } | |
| .mvea-modal .modal-content { | |
| height: 80vh; | |
| } | |
| .mvea-modal .modal-body { | |
| padding-top: 0; | |
| } | |
| .mvea-modal iframe { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| #comanage-iframe-wrapper #subnavigation .supertitle-container, | |
| #comanage-iframe-wrapper #subnavigation #cm-person-subnav-tabs, | |
| #comanage-iframe-wrapper #subnavigation #cm-person-subnav-links { | |
| display: none; | |
| } | |
| #comanage-iframe-wrapper #content { | |
| padding: 1rem 2em 0; | |
| } | |
| #comanage-iframe-wrapper .pageTitleContainer { | |
| margin: 1em 0; | |
| } | |
| /* GENERAL */ | |
| .hidden, | |
| .invisible, | |
| .co-dialog { | |
| display: none; | |
| } | |
| p { | |
| margin: 0 0 1em; | |
| } | |
| address { | |
| margin-bottom: 0; | |
| } | |
| .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; | |
| } | |
| .force-wrap { | |
| overflow-wrap: anywhere; | |
| } | |
| .text-muted-cmg { | |
| color: var(--cmg-color-gray-003) !important; | |
| } | |
| .cm-id-display { | |
| margin-left: 1em; | |
| font-size: 0.9em; | |
| } | |
| .smaller { | |
| font-size: smaller; | |
| } | |
| .invalid-feedback { | |
| font-size: 1em; | |
| } | |
| .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); | |
| } | |
| /* Sortable table headings and icons */ | |
| a.asc, | |
| a.desc { | |
| white-space: nowrap; | |
| } | |
| a.asc::after, | |
| a.desc::after { | |
| display: inline-block; | |
| content: ""; | |
| height: 0; | |
| width: 0; | |
| margin-left: 0.25em; | |
| border: 4px solid transparent; | |
| } | |
| a.asc::after { | |
| border-bottom-color: var(--cmg-color-blue-001); | |
| margin-bottom: 3px; | |
| } | |
| a.desc::after { | |
| border-top-color: var(--cmg-color-blue-001); | |
| margin-bottom: -3px; | |
| } | |
| /* CO GRID LAYOUT; currently used only on CO Selection */ | |
| .co-grid { | |
| clear: both; | |
| max-width: 100%; | |
| border-bottom: 1px solid var(--cmg-color-lightgray-005); | |
| } | |
| .co-grid .col { | |
| margin: 0; | |
| padding: 1em; | |
| } | |
| .co-grid .co-grid-header { | |
| font-weight: bold; | |
| } | |
| .co-grid .co-row { | |
| border-top: 1px solid var(--cmg-color-lightgray-005); | |
| } | |
| code, | |
| .fixed-width * { | |
| font-family: "Courier New","Courier",monospace !important; | |
| } | |
| /* INDEX VIEWS and 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-003); | |
| color: var(--cmg-color-black); | |
| } | |
| td { | |
| border-bottom: 1px solid var(--cmg-color-lightgray-005); | |
| } | |
| th:first-child, | |
| td:first-child { | |
| padding-left: 1.25em; | |
| } | |
| table.list-mode th.actions:first-child, | |
| table.list-mode td.actions:first-child { | |
| padding-left: 0; | |
| text-align: center; | |
| } | |
| table.bulk-edit-mode th.actions, | |
| table.bulk-edit-mode td.actions { | |
| width: 1.25em; | |
| } | |
| th:last-child, | |
| td:last-child { | |
| border-right: none; | |
| } | |
| tr.noborder td { | |
| border: none; | |
| } | |
| td.indented { | |
| border-left: 3em solid var(--cmg-color-white); | |
| } | |
| table.index-table tr:hover td { | |
| background-color: var(--cmg-color-lightgray-001); | |
| cursor: pointer; | |
| } | |
| table.index-table.with-actions th:nth-child(2), | |
| table.index-table.with-actions td:nth-child(2) { | |
| padding-left: 0; | |
| } | |
| .linked-row { | |
| cursor: pointer !important; | |
| } | |
| .linked-row:hover, | |
| .linked-row:hover td { | |
| background-color: var(--cmg-color-lightgray-001) !important; | |
| } | |
| table.list-mode .read-only-link-container { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .linked-row .read-only-icon { | |
| color: var(--cmg-color-gray-003); | |
| padding: 0 0.5em; | |
| } | |
| /* LOADING ANIMATION & SKELETONS */ | |
| @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-003); | |
| 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; | |
| } | |
| .skeleton-list li { | |
| height: 2.2rem; | |
| } | |
| /* 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; | |
| } | |
| .btn-primary, | |
| .btn-primary:focus, | |
| .btn-primary:active { | |
| background-color: var(--cmg-color-blue-002); | |
| color: var(--cmg-color-white); | |
| border-color: var(--cmg-color-blue-002); | |
| } | |
| .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-002); | |
| border-color: var(--cmg-color-blue-002); | |
| 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-002); | |
| 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-002); | |
| border: none; | |
| } | |
| /*Bootstrap badge*/ | |
| .badge { | |
| font-weight: normal; | |
| height: min-content; | |
| margin-top: auto; | |
| margin-bottom: auto; | |
| line-height: 1.2em; | |
| } | |
| .bg-light { | |
| color: var(--cmg-color-gray-004); | |
| } | |
| .bg-danger { | |
| color: var(--cmg-color-white); | |
| background-color: var(--cmg-color-red-005); | |
| } | |
| .bg-warning { | |
| background-color: var(--cmg-color-yellow-001) !important; | |
| color: var(--cmg-color-yellow-002); | |
| } | |
| .bg-primary { | |
| background-color: var(--cmg-color-blue-002); | |
| } | |
| .badge.bg-primary { | |
| background-color: var(--cmg-color-blue-002) !important; | |
| } | |
| .bg-secondary { | |
| background-color: var(--cmg-color-gray-002); | |
| } | |
| /* Bootstrap bg-outline */ | |
| .bg-outline-primary { | |
| color: var(--cmg-color-blue-002); | |
| border: 1px solid var(--cmg-color-blue-002); | |
| } | |
| .bg-outline-info { | |
| color: var(--cmg-color-blue-004); | |
| border: 1px solid var(--cmg-color-blue-004); | |
| } | |
| .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-002); | |
| border: 1px solid var(--cmg-color-green-002); | |
| } | |
| .bg-outline-warning { | |
| color: var(--cmg-color-yellow-001); | |
| border: 1px solid var(--cmg-color-yellow-001); | |
| } | |
| .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); | |
| } | |
| /* Bootstrap Accordion */ | |
| .accordion-button:not(.collapsed) { | |
| background-color: var(--cmg-color-lightgray-001); | |
| } | |
| /* FOOTER */ | |
| footer { | |
| text-align: center; | |
| padding: 2em 2em 1em; | |
| } | |
| /* Select2 */ | |
| .select2-container--default .select2-selection--single { | |
| border: 1px solid var(--cmg-color-lightgray-006); | |
| background-color: var(--cmg-color-white); | |
| } | |
| .select2-container--default .select2-selection--single .select2-selection__placeholder { | |
| color: var(--cmg-color-gray-003); | |
| } |