Mercurial
diff .cms/css/template.css @ 0:78edf6b517a0 draft
24.10
author | Coffee CMS <info@coffee-cms.ru> |
---|---|
date | Fri, 11 Oct 2024 22:40:23 +0000 |
parents | |
children |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/.cms/css/template.css Fri Oct 11 22:40:23 2024 +0000 @@ -0,0 +1,468 @@ +#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); +}