dialog{button.btn--secondary { gap: 1rem; padding: 1rem; width: 100%; img { height: 80px; width: auto; } .icon { width: 80px; height: 80px; --main: var(--on-background); } }}.mol-view-dialog{.viewer { position: relative; width: 100%; height: 600px; } .focus-text { position: absolute; top: 16px; left: 16px; z-index: 1; display: none; }}.seq-preview,.smiles-preview,.msa-preview{position:relative;margin:1rem 0;padding:.7rem;line-height:1.1;border:solid 1px var(--accent);border-radius:5px;background:var(--surface);.title { display: inline-block; margin-bottom: .8rem; } .seq { white-space: pre-wrap; overflow-wrap: break-word; word-break: break-all; font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; overflow: auto; padding-right: 10px; height: auto; max-height: 20ch; .marked { background-color: color-mix(in srgb, var(--warn) 10%, transparent); border-bottom: solid 2px var(--warn); } } select { font-size: .9rem; padding: .5rem; }}.msa-preview{min-height:100px;.search { margin-bottom: .8rem; input { background: var(--background); font-size: .9rem; } } .seq { position: relative; max-height: 580px; display: block; white-space: nowrap; line-height: 0.81; sub { font-size: 0.6rem; user-select: none; margin-right: 1rem; } .consensus-fixed { position: sticky; top: -2px; z-index: 2; display: block; span.score { display: inline-block; width: 1ch; background-color: var(--error); } .conservation-score { display: inline-flex; align-items: flex-end; white-space: nowrap; background: var(--surface); padding-bottom: 4px; } } .msa-list { position: absolute; top: 0; left: 0; right: 0; will-change: transform; } .msa-row>span { font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; transition: background-color 300ms ease; } .msa-row.highlight>span { background-color: color-mix(in srgb, var(--warn) 25%, transparent); border-bottom: solid 2px color-mix(in srgb, var(--warn) 90%, transparent); transition: background-color 300ms ease; } } dialog img { width: 100%; margin-top: 1rem; border: solid 1px var(--accent); .msa-fullscale-scroll { margin-top: 1rem; height: 600px; overflow: auto; img { width: 100%; margin: auto; } } }}.upload-zone{background-color:var(--surface);border:solid 1px var(--accent);height:120px;width:100%;border-radius:7px;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:10px;cursor:pointer;transition:border-color .25s; *{ margin: auto 0px; opacity: 0.7; transition: opacity .25s; } .btn--icon { --img: url('/assets/icons/upload.svg'); --size: 3em; --main: var(--on-surface); --main-alt: var(--on-surface); border-radius: 4px; padding: 8px; background: none; border: none; } p { font-size: 1.3em; } input { display: none; }}.upload-zone:hover{border:solid 1px var(--primary)}.upload-zone:active,.upload-zone.active{border:solid 1px var(--secondary)}.upload-zone:hover>*{opacity:1}.widget-activation-btn{gap:10px;.img { width: 18px; height: 18px; content: " "; mask-size: contain; mask-position: center; mask-repeat: no-repeat; mask-image: url('/assets/icons/upload.svg'); display: block; background-color: #fff; transition: background-color .3s; } input { display: none; } .small { font-size: 16px; }}.widget-button:hover .img{background-color:var(--secondary)}#sequence-list,#text-input-list{h3 { margin-top: 0px; } .ptm-dialog { width: min(460px, calc(100vw - 2rem)); form { display: flex; flex-direction: column; gap: .8rem; } input { display: block; } } .row { display: flex; flex-direction: row; gap: 1rem; } .search { .grow-wrap { display: grid; } .grow-wrap::after { content: attr(data-replicated-value) " "; white-space: pre-wrap; word-break: break-all; visibility: hidden; } .grow-wrap>textarea { resize: none; overflow: hidden; } .grow-wrap>textarea, .grow-wrap::after, .search-field { padding-left: 55px; padding-right: 55px; overflow-y: auto; max-height: 200px; font-family: "Google+Sans+Code", "Consolas", "Monaco", "Andale Mono", "Ubuntu Mono", monospace; grid-area: 1 / 1 / 2 / 2; } } .seq-type { display: flex; flex-direction: row; gap: 8px; align-items: center; margin: 12px 0px; .focus-text { --main: var(--primary); display: none; font-weight: 400; font-size: 14px; } .focus-text.active { --main: var(--secondary); } } .hint { z-index: 1; padding: 6px; border-radius: 8px; border: solid 1px var(--hint-color); background-color: color-mix(in srgb, var(--hint-color) 15%, transparent); transition: border-color .3s, background-color .3s, height .3s; } .hint.error { --hint-color: var(--error); } .hint.warn { --hint-color: var(--warn); } .hint.success { --hint-color: var(--success); } .results { display: block; overflow-y: auto; height: 400px; .item { position: relative; width: 99%; margin: 6px 0px 6px 0px; padding: 10px 20px; border-radius: 4px; border: 0px; overflow: hidden; background-color: var(--surface); transition: background-color .25s; p { margin-top: .5em; margin-right: auto; word-wrap: break-word; font-family: "Google+Sans+Code", "Consolas", "Monaco", "Andale Mono", "Ubuntu Mono", monospace; line-height: 1.15; } .sequence-text { padding-right: 150px; .sequence-token { display: inline-block; border-radius: 4px; transition: background-color .2s, border-color .2s; } .sequence-token--ptm { margin: 0px 1px; padding: 0px 4px; border: solid 1px color-mix(in srgb, var(--secondary) 65%, transparent); background-color: color-mix(in srgb, var(--secondary) 20%, transparent); } } .focus-text.warn { font-size: 15px; margin-top: 10px; } .floating-toolbar { --size: 30px; top: 5px; right: 5px; z-index: 1; .focus-text.st { --main: var(--secondary); margin: 0px; padding: .25rem .5rem; font-size: 14px; } } &.ptm-mode { .sequence-text .sequence-token { cursor: pointer; } .sequence-text .sequence-token:hover { background-color: color-mix(in srgb, var(--tertiary) 50%, transparent); } .sequence-text .sequence-token--ptm:hover { border-color: color-mix(in srgb, var(--secondary) 75%, transparent); background-color: color-mix(in srgb, var(--secondary) 30%, transparent); } } .floating-toolbar .ptm-toggle { --main: var(--on-background); --main-alt: var(--secondary); --img: url('/assets/icons/ptm.svg'); --size: 30px; } .floating-toolbar .ptm-toggle.active { background-color: color-mix(in srgb, var(--secondary) 18%, transparent); } .floating-toolbar .trash { --main: var(--on-background); --main-alt: var(--error); --img: url('/assets/icons/trash.svg'); --size: 30px; } } .item:hover, .item:focus, .item.active { background-color: color-mix(in srgb, var(--surface) 94%, white); } } #upload-dialog { width: 800px; label { display: inline-block; margin: .6em 0px .3em 0px; } .hint { margin-top: 1em; } }}#protein-structure-list,#files-list{h3 { margin-top: 0px; } .hint { z-index: 1; padding: 6px; border-radius: 8px; border: solid 1px var(--hint-color); background-color: color-mix(in srgb, var(--hint-color) 15%, transparent); transition: border-color .3s, background-color .3s, height .3s; margin: 1em 0px; } .hint.error { --hint-color: var(--error); } .hint.warn { --hint-color: var(--warn); } .hint.success { --hint-color: var(--success); } .entries { display: block; overflow-y: auto; max-height: 400px; min-height: 250px; .entry { position: relative; width: 99%; margin: 6px 0px 6px 0px; padding: 10px 20px; border-radius: 4px; border: 0px; overflow: hidden; background-color: var(--surface); transition: background-color .25s; p { margin-right: auto; word-wrap: break-word; } .focus-text.warn { font-size: 15px; margin-top: 10px; } } .item:hover, .item:focus, .item.active { background-color: color-mix(in srgb, var(--surface) 94%, white); } }}#mol-list{h3 { margin-top: 0px; } h4 { margin-top: 1em; margin-bottom: .5em; } dialog { max-width: 800px; } .row { display: flex; flex-direction: row; gap: 1rem; } .menu { display: flex; flex-direction: row; gap: 8px; align-items: center; margin-bottom: 18px; label { display: inline-block; margin: .6em 0px .3em 0px; } } .hint { margin: .8rem 0px; } .views { .view { display: none; >p:first-of-type { margin-bottom: 1rem; } } .view.active { display: block; } } .search-results { display: block; overflow-y: auto; height: 300px; .item { --height: 100px; margin: 6px 0px 6px 0px; width: calc(100% - 14px); display: flex; flex-direction: row; justify-content: start; align-items: center; gap: 20px; border-radius: 4px; border: 0px; overflow: hidden; text-align: left; background-color: var(--surface); transition: background-color .25s; position: relative; h5 { width: 24ch; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } img, svg { height: var(--height); width: var(--height); background-color: white; } } .item:hover, .item:focus { background-color: color-mix(in srgb, var(--surface) 80%, var(--primary)); } } .saved-entries { display: block; overflow-y: auto; max-height: 400px; min-height: 250px; .item { display: flex; flex-direction: row; align-items: center; gap: 1rem; position: relative; width: 99%; height: 160px; margin: 10px 0px 10px 0px; border-radius: 4px; border: 0px; overflow: hidden; background-color: var(--surface); transition: background-color .25s; .img { background-position: center; background-size: contain; background-repeat: no-repeat; height: 100%; width: auto; aspect-ratio: 1 / 1; } >img, >svg { width: auto; height: 100%; } >span { display: block; padding: 10px 20px; min-width: 0; p { font-size: 16px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; margin-right: auto; } } } .item:hover, .item:focus, .item.active { background-color: color-mix(in srgb, var(--surface) 94%, white); } } #upload-dialog { label { display: inline-block; margin: .6em 0px .3em 0px; } }}.protein-viewer{color-scheme:dark;width:100%;background-color:var(--background);border:solid 1px var(--accent);border-radius:3px;padding:5px;.panel { background: var(--surface); color: var(--on-surface); margin: 5px; border-radius: 5px; overflow: hidden; } .row { display: flex; flex-direction: row; gap: 0px; } .viewer { width: 100%; min-height: 800px; position: relative; .hint { position: absolute; top: 10px; left: 10px; z-index: 1; padding: 6px; border-radius: 8px; border: solid 1px var(--hint-color); background-color: color-mix(in srgb, var(--hint-color) 15%, transparent); transition: border-color .3s, background-color .3s, height .3s; } .hint.error { --hint-color: var(--error); } .hint.warn { --hint-color: var(--warn); } .hint.success { --hint-color: var(--success); } #plddt-legend { z-index: 2; display: none; position: absolute; bottom: 10px; left: 10px; padding: 15px; border-radius: 5px; background: color-mix(in srgb, var(--background) 85%, #00000055); h4 { margin-top: 0px; } .items { margin-top: .5em; display: grid; grid-template-columns: auto auto; justify-content: flex-start; gap: 1em .5em; div { height: 16px; width: 16px; display: inline-block; margin-top: 5px; border-radius: 3px; } div:nth-of-type(1) { background: var(--quality-vhigh) } div:nth-of-type(2) { background: var(--quality-high) } div:nth-of-type(3) { background: var(--quality-low) } div:nth-of-type(4) { background: var(--quality-vlow) } } } } .side-menu { width: 380px; padding: 20px; display: flex; flex-direction: column; gap: 1em; h4 { margin-top: 10px; } .btn { padding: .6em 1em; } select { padding: .5em; } input, select { width: 100%; } span { display: flex; flex-direction: row; gap: 1em; justify-content: flex-start; align-items: center; text-wrap: wrap; white-space: initial; } } .seq-explorer { padding: 20px; max-height: 300px; overflow-y: auto; .title { margin-top: 10px; margin-bottom: 3px; color: #67ffe1; } .title:first-of-type { margin-top: 0px; } .seq { text-wrap: wrap; white-space: initial; word-wrap: break-word; font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; span { cursor: pointer; } span.selected { color: #00ff77 !important; } } }}