Mercurial
view .cms/css/template.css @ 1:1d486627aa1e draft default tip
24.10
author | Coffee CMS <info@coffee-cms.ru> |
---|---|
date | Sat, 12 Oct 2024 02:51:39 +0000 |
parents | 78edf6b517a0 |
children |
line wrap: on
line source
#template { display: grid; height: 100%; } #template > .settings { display: grid; gap: 1rem; overflow-y: auto; grid-column: 1/-1; grid-row: 1/-1; } @media (max-width: 1023px) { #template > .settings { grid-template-areas: "template-install" "template-switch" "template-files" "template-manual" "template-headers" "milk"; grid-template-rows: auto auto auto auto 1fr; padding: 1rem 0.4rem 1rem 0.4rem; display: grid; } } @media (min-width: 1024px) { #template > .settings { grid-template-areas: "template-install template-headers template-manual" "template-switch template-headers template-manual" "template-files template-files template-files" "milk milk milk"; grid-template-columns: 17rem 1fr 1fr; grid-template-rows: auto auto auto 1fr; padding: 1rem; } } #template .template { grid-area: template-switch; display: grid; align-content: start; row-gap: 1rem; box-shadow: var(--shadows); background-color: var(--windows); background-image: var(--noise); border-radius: 0.3rem; } #template .template label { display: grid; grid-template-columns: auto 1fr; column-gap: 0.5rem; cursor: pointer; line-height: 1.3; color: var(--windows-font); user-select: none; } #template .template form { display: grid; row-gap: 1rem; } @media (max-width: 1023px) { #template .template { padding: 1rem 0.7rem 1rem 0.7rem; } } @media (min-width: 1024px) { #template .template { padding: 1rem; } } #template form > div { position: relative; color: var(--windows-font); } #template .template-install { grid-area: template-install; padding: 10px; border-radius: 0.3rem; background-color: var(--windows); } #template .upload_dnd { display: grid; position: relative; text-align: center; padding: 0.4rem 0.7rem 0.5rem 0.7rem; white-space: nowrap; cursor: pointer; border-radius: 0.3rem; background-color: var(--button-bg); color: var(--windows-font); font-size: 1rem; justify-content: center; display: block; } #template .upload_dnd #template-upload { width: 100%; height: 100%; left: 0; right: 0; top: 0; bottom: 0; opacity: 0; overflow: hidden; position: absolute; z-index: 7; cursor: pointer; } #template .template-headers { grid-area: template-headers; display: grid; grid-template-rows: auto 1fr auto; padding: 1rem; row-gap: 0.7rem; box-shadow: var(--shadows); border-radius: 0.3rem; background-color: var(--windows); background-image: var(--noise); } #template .template-headers textarea { line-height: 1.3em; resize: none; background-color: var(--input-bg); border: 2px solid var(--input-border); border-radius: 4px; font-family: var(--monospace); font-size: 1rem; color: var(--input-font); padding: 0 8px; min-height: 30px; } #template .template-manual { grid-area: template-manual; display: grid; grid-auto-rows: max-content; gap: 1rem; border-radius: 0.3rem; box-shadow: var(--shadows); background-color: var(--windows); background-image: var(--noise); } #template .template-manual div { color: var(--windows-font); } #template .template-manual p { font-size: 1rem; color: var(--text); } #template .template-manual p a { color: var(--link); } @media (max-width: 1023px) { #template .template-manual { padding: 1rem 0.7rem 1rem 0.7rem; } } @media (min-width: 1024px) { #template .template-manual { padding: 1rem; } } #template .template-files { grid-area: template-files; display: grid; align-content: start; row-gap: 1rem; background-color: var(--windows); background-image: var(--noise); box-shadow: var(--shadows); border-radius: 0.3rem; } @media (max-width: 1023px) { #template .template-files { padding: 1rem 0.7rem 1rem 0.7rem; } } @media (min-width: 1024px) { #template .template-files { padding: 1rem; } } .template-files .title { color: var(--windows-font); padding-bottom: 0.2rem; } .template-files .file { font-size: 1rem; font-family: var(--monospace); color: var(--template-files-file); width: fit-content; display: flex; /* Mobile Browser - fit-content inline */ cursor: pointer; } .template-files .file:hover { color: var(--template-files-file-hover); } .template-files .no-files { font-size: 1rem; color: var(--text); } /* Проверить */ #template .template-editor-bg { display: grid; position: relative; grid-row: 1/-1; grid-column: 1/-1; z-index: 9; background-color: var(--bg-3); background-image: var(--noise); } @media (min-width: 1024px) { #template .template-editor-bg { padding: 1rem; } } #template .template-editor-bg.hidden { display: none; } #template .template-editor-grid { background-color: var(--bg-3); display: grid; position: relative; box-shadow: 0 0 3px 0 #00000096; grid-template-rows: auto 1fr 1rem; grid-template-columns: 1fr auto; grid-template-areas: "template-editor-header template-editor-header" "template-editor snip" "bottom bottom"; } #template .template-editor-grid::before { content: ""; position: absolute; left: 3px; top: 3px; z-index: 1; width: 7px; height: 7px; border-radius: 50%; } #template .template-editor-grid[data-changed="true"]::before { background-color: var(--changes); } @media (min-width: 1024px) { #template .template-editor-grid { border-radius: 5px; } } .template-editor-header { grid-area: template-editor-header; display: grid; } @media (max-width: 1023px) { .template-editor-header { grid-template-areas: "close save title"; grid-template-columns: max-content max-content 1fr; grid-column-gap: 1rem; grid-row-gap: 0.5rem; padding: 10px; } } @media (min-width: 1024px) { .template-editor-header { padding: 10px; grid-template-columns: max-content max-content 1fr; gap: 1rem; } } #template .snip-grid { grid-area: snip; display: grid; gap: 15px; align-content: start; width: max-content; overflow-y: auto; background-color: var(--tags-bg); position: relative; scrollbar-width: none; } @media (max-width: 500px) { #template .snip-grid { display: none; } } #template .snip-grid > .html > div, #template .snip-grid > .css > div, #template .snip-grid > .php > div { display: flex; gap: 7px; padding: 7px 15px 7px 15px; color: var(--tags-font); font-size: 0.9rem; cursor: pointer; justify-content: space-between; } #template .snip-grid a { padding: 7px 15px 7px 15px; color: var(--link); font-size: 0.9rem; text-underline-offset: 0.22rem; text-decoration-color: var(--link); } #template .html, #template .css, #template .php { display: grid; } #template .html.hidden, #template .css.hidden, #template .php.hidden { display: none; } .close-template-button { position: relative; cursor: pointer; width: 2rem; height: 2rem; border-radius: 3px; background-color: var(--bg-3); background-repeat: no-repeat; background-position: center center; background-size: 40%; background-image: var(--icon-close); } .close-template-button:hover { background-color: var(--bg-4); } @media (max-width: 1023px) { .close-template-button { grid-area: close; } } .save-template-button { cursor: pointer; width: 2rem; height: 2rem; position: relative; background-color: var(--bg-3); background-repeat: no-repeat; background-position: center center; background-size: 55%; background-image: var(--icon-save); border-radius: 3px; } .save-template-button:hover { background-color: var(--bg-4); } .save-template-button.saved { background-color: var(--saved-bg); } @media (max-width: 1023px) { .save-template-button { grid-area: save; justify-self: right; } } @media (max-width: 1023px) { .template-editor-title { grid-area: title; } } .template-editor-title { font-family: var(--monospace); color: var(--template-files-file); width: fit-content; align-self: center; } .template-editor { grid-area: template-editor; } .template-editor .CodeMirror { min-height: 100%; max-height: 100%; height: 1rem; font-family: var(--monospace); font-weight: normal; font-size: 1.04rem; } .CodeMirror-dialog input { font-family: var(--monospace); font-size: 100%; } #template .CodeMirror-wrap pre.CodeMirror-line, #template .CodeMirror-wrap pre.CodeMirror-line-like { word-wrap: break-word; white-space: pre-wrap; word-break: break-all; } /* Select */ #template .template-select-grid { text-align: left; } #template .field-select { display: grid; grid-template-columns: 1fr 32px; height: 100%; min-height: 30px; cursor: pointer; background-color: var(--menu-input-bg); border: 2px solid var(--menu-input-border); border-radius: 4px; user-select: none; } #template .field-select > .value { padding: 0 0 0 0.44rem; white-space: nowrap; overflow: hidden; line-height: 32px; font-size: 1rem; color: var(--text); } #template .field-select > .icon { background-image: var(--select-icon); background-repeat: no-repeat; background-position: center; background-size: 12px; } #template .template-select-grid .field-options { display: grid; position: absolute; height: 0; overflow: hidden; width: 100%; border-radius: 0.25rem; box-shadow: 0 2px 3px 0 #00000033; max-height: 17rem; z-index: 7; } #template .template-select-grid .field-options.open { background-color: var(--bg-3); border: 2px solid var(--bg-4); color: var(--text); overflow: auto; height: auto; margin-top: 2px; } #template .template-select-grid .field-options .option { padding: 0.4rem 0.44rem; cursor: pointer; font-size: 0.94rem; } #template .template-select-grid .field-options .option:hover { background-color: var(--bg-2); }