@sfgrp/distinguish
Version:
An interactive key engine that feeds off of [TaxonWorks](https://taxonworks.org)' [API](https://api.taxonworks.org). Distinguish is a product of the [Species File Group](https://speciesfilegroup.org) and its collaborators.
2 lines (1 loc) • 6.61 kB
CSS
.distinguish-menu-list{display:flex;list-style:none;align-items:center;margin:0}.distinguish-menu-list li:first-child{padding-left:0}.distinguish-list-item{justify-content:center;padding-left:1em;padding-right:1em;border-right:1px solid #e5e5e5}.distinguish-row-filter-buttons{display:flex;flex-direction:row;gap:.5rem}:root{--distinguish-primary-content-color: #ffffff;--distinguish-bg-color: #f7f8fc;--distinguish-bg-panel-color: #ffffff;--distinguish-bg-modal-color: #ffffff;--distinguish-bg-disabled-color: #e5e5e5;--distinguish-disabled-color: #999;--distinguish-error-color: #ff0000;--distinguish-primary-color: #5d9ece;--distinguish-border-color: #cccccc;--distinguish-link-color: #5d9ece;--distinguish-btn-medium-size: 28px}.distinguish-link{color:var(--distinguish-link-color);cursor:pointer}.distinguish-btn{border-radius:8px;border:none;cursor:pointer}.distinguish-btn-primary-color{background-color:var(--distinguish-primary-color);color:var(--distinguish-primary-content-color)}.distinguish-btn-medium-size{min-height:var(--distinguish-btn-medium-size)}.distinguish-btn:disabled{background-color:var(--distinguish-bg-disabled-color);color:var(--distinguish-disabled-color)}.distinguish-panel{background-color:var(--distinguish-bg-panel-color);padding:1rem;overflow-y:scroll}.distinguish-spinner-container{display:flex;position:fixed;justify-content:center;width:100vw;height:100vh;background-color:var(--distinguish-bg-color);align-items:center;z-index:9999;height:100%;opacity:.9;top:0;left:0}.distinguish-spinner{border:5px solid rgba(0,0,0,.3);width:36px;height:36px;border-radius:50%;border-left-color:var(--distinguish-primary-color);margin:20px auto 0;animation:spin 1s ease infinite}.distinguish-spinner-legend{margin:1rem 0;font-size:1rem}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.distinguish-modal-mask{position:fixed;z-index:1099;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:table;transition:opacity .3s ease}.distinguish-modal-wrapper{display:table-cell;vertical-align:middle}.distinguish-modal-container{position:relative;width:600px;margin:0 auto;padding:20px 30px;background-color:var(--distinguish-bg-modal-color);border-radius:2px;box-shadow:0 2px 8px #00000054;transition:all .3s ease;max-height:90vh;overflow-y:auto}.distinguish-modal-close{position:absolute;cursor:pointer;top:26px;right:30px;width:10px;height:10px;background-size:10px 10px;opacity:.4}.distinguish-modal-close:hover{opacity:1}.distinguish-modal-header h3{margin-top:0}.distinguish-modal-body{margin:20px 0}.distinguish-modal-default-button{float:right}.distinguish-modal-enter,.distinguish-modal-leave-active{opacity:0}.distinguish-modal-enter .distinguish-modal-container,.distinguish-modal-leave-active .distinguish-modal-container{-webkit-transform:scale(1.1);transform:scale(1.1)}.distinguish-transparent-modal{background-color:#000c }.distinguish-transparent-modal .distinguish-modal-header h3{margin:0 0 2em 2em;padding:6px 6px 6px 12px;border-radius:3px;background-color:#0000004d;color:#ffffff80}.distinguish-transparent-modal .distinguish-modal-close{right:42px;top:30px;color:#ffffff80}.distinguish-transparent-modal .distinguish-modal-container{width:70%;position:relative;background-color:transparent ;box-shadow:none}.distinguish-transparent-modal .distinguish-modal-container .distinguish-modal-body{overflow:auto;margin-right:1em;max-height:80vh}.distinguish-transparent-modal .distinguish-modal-container .distinguish-modal-body::-webkit-scrollbar{position:absolute;right:40px;-webkit-appearance:none}.distinguish-transparent-modal .distinguish-modal-container .distinguish-modal-body::-webkit-scrollbar:vertical{width:6px}.distinguish-transparent-modal .distinguish-modal-container .distinguish-modal-body::-webkit-scrollbar:horizontal{height:6px}.distinguish-transparent-modal .distinguish-modal-container .distinguish-modal-body::-webkit-scrollbar-thumb{border-radius:8px;width:11px;height:5px;border:rgba(255,255,255,.5);background-color:#ffffff80}.distinguish-transparent-modal .distinguish-modal-container .distinguish-modal-body::-webkit-scrollbar-track{background-color:#0000004d;border-radius:8px}.distinguish-grid{width:100%;grid-template-rows:1fr;height:100%;overflow:hidden}.distinguish-layout-mode-1 .distinguish-panel-descriptors{grid-area:1/1/2/3}.distinguish-layout-mode-1 .distinguish-panel-remaining{grid-area:2/1/3/2}.distinguish-layout-mode-1 .distinguish-panel-eliminated{grid-area:2/2/3/3}.distinguish-layout-mode-2 .distinguish-panel-descriptors{grid-area:1/1/3/2}.distinguish-layout-mode-2 .distinguish-panel-remaining{grid-area:1/2/2/3}.distinguish-layout-mode-2 .distinguish-panel-eliminated{grid-area:2/2/3/3}.distinguish-app-container{display:flex;flex-direction:column;height:100%;max-height:100%;font-family:Arial,Helvetica,sans-serif;font-size:13px}.distinguish-app-container input,.distinguish-app-container select{padding:.5em 1em;border:1px solid;border-radius:2px;border-color:var(--distinguish-border-color)}.distinguish-app-container .distinguish-header-error-message{color:var(--distinguish-error-color)}.distinguish-depiction-box{display:flex;align-items:center;justify-content:center;border:1px solid black;height:300px;width:300px}.distinguish-row-item-error{cursor:pointer}.distinguish-character-descriptor__cell{display:flex;align-items:flex-end}.distinguish-character-states-grid{display:grid;grid-template-columns:repeat(3,minmax(33.33%,1fr));gap:1em}.distinguish-list-checkboxes{list-style:none;padding:0}.distinguish-input-label{display:block}.distinguish-header-bar{background-color:var(--distinguish-bg-panel-color);padding:1em;box-shadow:#24252614 4px 4px 15px;border-bottom:1px solid var(--distinguish-border-color);display:flex;justify-content:space-between;align-items:center}.distinguish-header-bar__buttons{display:flex;align-items:center}.distinguish-title-section{display:flex;justify-content:space-between;align-items:center}.distinguish-header-bar__buttons{display:flex;flex-direction:row;align-items:center;gap:.5em}.distinguish-descriptor-modal{width:1000px;max-height:90vh;overflow-y:scroll}.distinguish-descriptor-modal__depiction{display:flex;justify-content:center}.distinguish-grid-icon{width:20px;height:12px;border:2px solid transparent;background-color:transparent;grid-gap:2px}.distinguish-grid-icon>div{background-color:#fff}.distinguish-grid{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);grid-column-gap:0px;grid-row-gap:0px;grid-gap:1px;background-color:var(--distinguish-border-color);box-shadow:0 1px 1px #0003}