Mercurial
view .cms/css/pages.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 source
#pages { display: grid; height: 100%; grid-template-rows: auto 1fr auto; grid-template-areas: "main-header" "main-main" "main-footer"; } #pages .main-header { grid-area: main-header; display: grid; gap: 1rem; min-height: 35px; } @media (max-width: 1023px) { #pages .main-header { padding: 1rem 0.7rem 1rem 0.4rem; grid-template-columns: 1fr auto auto auto; } } @media (min-width: 1024px) { #pages .main-header { padding: 1rem 2.4rem 1rem 1rem; grid-template-columns: 1fr auto 1fr auto; } } /* вернули скролл к стандартной ширине @-moz-document url-prefix() { #pages .main-header { padding-right: 1.4rem; } } */ #pages .search-wrapper { display: grid; grid-template-columns: 1fr auto auto; min-width: 180px; } #pages .page-search { grid-column: 1/-1; grid-row: 1/2; border-radius: 0.3rem; font-size: 0.875rem; padding: 0 4.7rem 0 0.54rem; height: 100%; width: 100%; background-color: var(--page-search); border: 2px solid var(--input-border); color: var(--text); } #pages .reset { grid-column: 2/3; grid-row: 1/2; cursor: pointer; margin: 4px; border-radius: 50%; outline: none; width: 27px; height: 27px; background-color: transparent; background-repeat: no-repeat; background-position: center center; background-size: 12px; background-image: var(--icon-clear); } @media (max-width: 1023px) { #pages .reset:active { background-color: var(--bg-4); } } @media (min-width: 1024px) { #pages .reset:hover { background-color: var(--bg-4); } } #pages .page-search-button { grid-column: 3/4; grid-row: 1/2; border-radius: 3px; cursor: pointer; border: none; outline: none; width: 42px; min-height: unset; background-color: transparent; background-repeat: no-repeat; background-position: center center; background-size: 48%; background-image: var(--search-icon); } #pages .add-page-btn { display: flex; width: 35px; border-radius: 0.3rem; cursor: pointer; background-color: var(--bg-3); position: relative; } #pages .add-page-btn:hover { background-color: var(--add-page-btn-hover); } #pages .add-page-btn .x1 { width: 2px; height: 16px; border-radius: 2px; position: absolute; top: 50%; left: 50%; transform: rotate(0deg) translate(-50%, -50%); } #pages .add-page-btn .x2 { width: 16px; height: 2px; border-radius: 2px; position: absolute; top: 50%; left: 50%; transform: rotate(0deg) translate(-50%, -50%); } #pages .add-page-btn .x1, #pages .add-page-btn .x2 { background-color: var(--add-page-btn-svg-b-plus); } #pages .add-pages { display: grid; grid-auto-flow: column; column-gap: 1rem; align-content: center; } #pages .del-pages-btn { display: grid; cursor: pointer; width: 35px; border-radius: 0.3rem; user-select: none; background-repeat: no-repeat; background-position: center center; background-size: 100%; background-image: var(--icon-trash); } @media (max-width: 1023px) { #pages .add-page-btn .add-page-label { display: none; } } @media (min-width: 1024px) { #pages .add-page-btn { width: auto; } #pages .add-page-btn .add-page-label { display: block; width: max-content; padding: 4px 10px 4px 10px; background-color: var(--bg-3); border: 2px solid var(--add-page-btn-br); text-decoration: none; font-size: 0.9rem; color: var(--add-page-btn-font); border-radius: 0.3rem; cursor: pointer; user-select: none; } #pages .add-page-btn .add-page-label:hover { background-color: var(--bg-2); } #pages .add-page-btn .x1, #pages .add-page-btn .x2 { display: none; } #pages .del-pages-btn:hover { background-color: var(--bg-4); } } #pages .main-main { grid-area: main-main; overflow-y: scroll; } @media (max-width: 1023px) { #pages .main-main { padding: 0 0.4rem 0.3rem 0.4rem; } } @media (min-width: 1024px) { #pages .main-main { padding: 0rem 1rem 0.3rem 1rem; } } #pages .pages-grid { display: grid; row-gap: 0.3rem; } #pages .pages-grid > div { border-radius: 0.3rem; display: grid; padding: 0.7rem; column-gap: 0.7rem; box-shadow: var(--shadows); position: relative; row-gap: 0.5rem; background-color: var(--windows); background-image: var(--noise); } @media (max-width: 1023px) { #pages .pages-grid > div { grid-template-areas: "page-name page-pin page-del" "page-butt published page-del"; grid-template-columns: 1fr auto 1.4rem; } } @media (min-width: 1024px) { #pages .pages-grid > div { grid-template-areas: "page-name page-pin page-date page-del" "page-butt published page-date page-del"; grid-template-columns: 1fr auto 6rem 1.4rem; } #pages .pages-grid > div:hover { background-color: var(--windows-hover) } } #pages .pages-grid > div.open { background-color: var(--pages-grid-div-open); box-shadow: 0 0 0 2px var(--pages-grid-div-open-shadow) inset; } #pages .pages-grid > div.home { box-shadow: 0 0 0 2px var(--pages-grid-div-open-shadow) inset; } #pages .pages-grid > div[data-published="0"] { box-shadow: 0 0 0 2px var(--hidden) inset; } @media (max-width: 1023px) { #pages .pages-grid > div.open { grid-template-areas: "page-name page-pin page-del " "page-butt published page-del " "page-prop page-prop page-prop"; } } @media (min-width: 1024px) { #pages .pages-grid > div.open { grid-template-areas: "page-name page-pin page-date page-del " "page-butt published page-date page-del " "page-prop page-prop page-prop page-prop"; } } #pages .pages-grid > div.last-edited::before { content: ""; position: absolute; left: 3px; top: 3px; z-index: 1; width: 7px; height: 7px; border-radius: 50%; background-color: var(--green-3); } #pages .pin { grid-area: page-pin; width: 15px; height: 15px; margin: -11px auto 0 auto; cursor: pointer; background-repeat: no-repeat; background-position: center center; background-size: 84%; background-image: var(--pages-pin-off); } #pages [data-pin="1"] .pin { background-image: var(--pages-pin-on); } @media (min-width: 1024px) { #pages .pages-grid > div .pin { display: none; } #pages .pages-grid > div[data-pin="1"] .pin { display: block; } #pages .pages-grid > div:hover .pin { display: block; } } #pages .pages-grid > div > .published { grid-area: published; width: 18px; height: 18px; cursor: pointer; background-size: 100%; background-position: center; background-repeat: no-repeat; background-image: var(--eye-on); grid-row: 2/3; align-self: end; } #pages .pages-grid [data-published="0"] .published { background-image: var(--eye-off); } @media (min-width: 1024px) { #pages .pages-grid > div > .published { opacity: 0; } #pages .pages-grid > div.open > .published { opacity: 1; } #pages .pages-grid > div:hover .published { opacity: 1; } #pages .pages-grid [data-published="0"] .published { opacity: 1; } } .page-buttons div { cursor: pointer; user-select: none; color: var(--buttons-font); position: relative; } .page-buttons .loading::after { content: ""; display: block; width: 100%; height: 2px; position: absolute; left: 0; right: 0; bottom: -3px; border-radius: 2px; background-image: repeating-linear-gradient(90deg, var(--link) -0.2rem, var(--windows) 0rem, var(--link) 0.2rem); animation: barberpole 10s linear infinite; background-size: 300% 300%; } @keyframes barberpole { 100% { background-position: 150% 150%; } } .page-buttons div:hover { color: var(--buttons-hover); } .pages-grid > div.open .page-prop-btn { color: var(--buttons-open); } .page-prop-save-btn { display: none; } .pages-grid > div.open .page-prop-save-btn { display: block; } .pages-grid > div.open .page-prop-save-btn.saved { color: var(--saved); } .pages-grid a.page-name { grid-area: page-name; width: fit-content; display: flex; margin-top: -5px; font-size: 1rem; min-height: 21px; /* for empty title */ text-decoration: none; color: var(--link); font-weight: 600; } .pages-grid a.page-name:hover { color: var(--link-hover); } .page-buttons { grid-area: page-butt; display: flex; column-gap: 0.7rem; font-size: 0.9rem; } @media (max-width: 320px) { .page-buttons { font-size: 0.7rem; align-self: center; } } @media (min-width: 1024px) { .page-buttons { opacity: 0; } .pages-grid > div:hover .page-buttons { opacity: 1; } .pages-grid > div.open .page-buttons { opacity: 1; } } @media (max-width: 1023px) { .page-date { display: none; } } @media (min-width: 1024px) { .page-date { grid-area: page-date; display: flex; justify-content: center; align-items: center; font-size: 0.8rem; color: var(--page-date); } .page-date.future { color: var(--page-date-planned); } } #pages .page-prop { display: none; grid-area: page-prop; } @media (max-width: 1023px) { #pages .pages-grid > div.open .page-prop { display: grid; } } @media (min-width: 1024px) { #pages .page-prop, #pages .page-properties { grid-template-areas: "cTitle vTitle cTemplate vTemplate" "cURL vURL cDate vDate" "cSEO vSEO cTime vTime" "cDesc vDesc cTags vTags"; grid-template-columns: 6em minmax(240px, 100%) 6em minmax(240px, 100%); row-gap: 0.75rem; column-gap: 0.7rem; } #pages .pages-grid > div.open .page-prop { display: grid; padding: 0.5rem 0 0.3rem 0; } } #pages .page-prop > .title, #pages .page-properties > .title { font-size: 1rem; line-height: 27px; color: var(--names); } /* Select */ #pages .page-prop .template-select-grid, #pages .page-properties .template-select-grid { position: relative; } #pages .page-prop .field-select, #pages .page-properties .field-select { display: grid; grid-template-columns: 1fr 28px; height: 100%; min-height: 30px; cursor: pointer; background-color: var(--bg-4); border: 1px solid var(--bg-4); border-radius: 4px; user-select: none; } #pages .page-prop .field-select > .value, #pages .page-properties .field-select > .value { padding: 0 0 0 0.44rem; white-space: nowrap; overflow: hidden; line-height: 26px; font-size: 0.94rem; color: var(--text); } #pages .page-prop .field-select > .icon, #pages .page-properties .field-select > .icon { background-image: var(--select-icon); background-repeat: no-repeat; background-position: center; background-size: 12px; } #pages .page-prop .template-select-grid .field-options, #pages .page-properties .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; } #pages .page-prop .template-select-grid .field-options.open, #pages .page-properties .template-select-grid .field-options.open { background-color: var(--bg-3); border: 2px solid var(--bg-4); margin-top: 2px; color: var(--text); overflow: auto; height: auto; } #pages .page-prop .template-select-grid .field-options .option, #pages .page-properties .template-select-grid .field-options .option { padding: 0.4rem 0.44rem; cursor: pointer; font-size: 0.94rem; } #pages .page-prop .template-select-grid .field-options .option:hover, #pages .page-properties .template-select-grid .field-options .option:hover { background-color: var(--bg-2); } @media (max-width: 1023px) { #pages .page-prop > .title:not(:first-child), #pages .page-properties > .title:not(:first-child) { padding-top: 0.75rem; } } @media (min-width: 1024px) { #pages .page-prop > .title, #pages .page-properties > .title { text-align: right; } #pages .page-prop .page.title, #pages .page-properties .page.title { grid-area: cTitle; } #pages .page-prop input[name=title], #pages .page-properties input[name=title] { grid-area: vTitle; } #pages .page-prop .seo.title, #pages .page-properties .seo.title { grid-area: cSEO; } #pages .page-prop input[name=seo_title], #pages .page-properties input[name=seo_title] { grid-area: vSEO; } #pages .page-prop .url.title, #pages .page-properties .url.title { grid-area: cURL; } #pages .page-prop .url-input, #pages .page-properties .url-input { grid-area: vURL; } #pages .page-prop .template.title, #pages .page-properties .template.title { grid-area: cTemplate; } #pages .page-prop .template-select-grid, .page-properties .template-select-grid { grid-area: vTemplate; } #pages .page-prop .description.title, #pages .page-properties .description.title { grid-area: cDesc; } #pages .page-prop textarea[name="description"], #pages .page-properties textarea[name="description"] { grid-area: vDesc; } #pages .page-prop .date.title, #pages .page-properties .date.title { grid-area: cDate; } #pages .page-prop input[name=date], .page-properties input[name=date] { grid-area: vDate; max-width: fit-content; } #pages .page-prop .time.title, #pages .page-properties .time.title { grid-area: cTime; } #pages .page-prop input[name=time], #pages .page-properties input[name=time] { grid-area: vTime; max-width: fit-content; } #pages .page-prop .tags.title, #pages .page-properties .tags.title { grid-area: cTags; } #pages .page-prop textarea[name="tags"], #pages .page-properties textarea[name="tags"] { grid-area: vTags; } } .page-prop .url-input { display: grid; grid-template-columns: 1fr 2.7rem; } @media (max-width: 1023px) { .page-prop > .url-input:not(:first-child), .page-prop > .template-select-grid:not(:first-child) { padding-top: 0; } } .page-prop .url-input > input { width: 100%; grid-column: 1/-1; grid-row: 1/-1; padding-right: 3rem; } .page-prop .url-input .url-translit { display: grid; grid-column: 2/3; grid-row: 1/-1; cursor: pointer; background-repeat: no-repeat; background-position: center center; background-size: 54%; background-image: var(--icon-link); } .pages-grid > div > input[type="checkbox"] { grid-area: page-del; } @media (min-width: 1024px) { .pages-grid > div > input[type="checkbox"] { align-self: center; } } .page-prop input, .page-prop textarea{ border-radius: 4px; font-size: 0.94rem; padding: 0 0.54rem; min-height: 30px; height: 100%; background-color: var(--bg-4); border: 1px solid var(--bg-4); color: var(--text); } .page-prop textarea { font-family: var(--sans-serif); line-height: 1.3em; resize: vertical; display: block; } .page-prop select, .page-prop input[type=date], .page-prop input[type=time] { -moz-padding-start: 4px; -moz-padding-end: 4px; } #pages .main-footer { grid-area: main-footer; padding: 1rem; display: grid; column-gap: 1rem; grid-auto-flow: column; justify-content: space-between; } #pages .main-footer .pager::-webkit-scrollbar { height: 0; } #pages .main-footer .pager { scrollbar-width: none; } #pages .counters { display: grid; column-gap: 0.5rem; grid-auto-flow: column; } #pages .counters input { border-radius: 4px; font-size: 0.875rem; padding: 0 0.3rem; min-height: 30px; height: 100%; width: 3.2rem; text-align: center; background-color: var(--bg-4); border: 1px solid var(--bg-4); color: var(--text); } #pages .counters span { display: flex; align-items: center; font-size: 0.875rem; color: var(--text); } #pages .main-footer .pager { display: grid; grid-auto-flow: column; column-gap: 0.5rem; overflow-x: auto; padding: 4px; } #pages .main-footer .pager > div { color: var(--text); background-color: var(--bg-3); display: flex; justify-content: center; align-items: center; min-width: 32px; border-radius: 0.7rem; font-size: 0.875rem; cursor: pointer; user-select: none; } #pages .main-footer .pager > div.active { color: var(--main-footer-pager-div-active-font); box-shadow: 0 0 0 0.25rem var(--pages-main-footer-pager-div-bg-active); } #pages .main-footer .pager > div:hover { color: var(--main-footer-pager-div-hover); } #pages .page-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) { #pages .page-editor-bg { padding: 1rem; } } #pages .page-editor-bg.hidden { display: none; } #pages .page-editor-grid { position: relative; background-color: var(--bg-3); box-shadow: 0 0 3px 0 #00000096; min-height: 0; /*Scroll*/ display: grid; grid-template-rows: auto auto auto auto 1fr 1rem; grid-template-areas: "page-editor-header page-editor-header" "page-editor-buttons page-editor-buttons" "page-properties page-properties" "page-editor-panel page-editor-panel" "page-editor tags" "bottom bottom"; } #pages .page-editor-grid::before { content: ""; position: absolute; left: 3px; top: 3px; z-index: 1; width: 7px; height: 7px; border-radius: 50%; } #pages .page-editor-grid[data-changed="true"]::before { background-color: var(--changes); } #pages .page-properties { grid-area: page-properties; display: grid; padding: 0.5rem 0.5rem 1rem 0.5rem; } @media (max-width: 414px) { #pages .page-properties { grid-row: 3/-1; z-index: 111; background-color: var(--bg-3); align-content: start; overflow-y: auto; } } #pages .page-properties.hidden { display: none; } /* Options */ #pages .page-properties select { appearance: none; background-repeat: no-repeat; background-position: right .37rem center; background-size: 16px 12px; } #pages .page-properties select { background-image: var(--select-icon); } #pages .page-properties .url-input { display: grid; grid-template-columns: 1fr 2.7rem; } #pages .page-properties .url-input > input { width: 100%; grid-column: 1/-1; grid-row: 1/-1; padding-right: 3rem; } #pages .page-properties .url-input .url-translit { display: grid; grid-column: 2/3; grid-row: 1/-1; cursor: pointer; background-repeat: no-repeat; background-position: center center; background-size: 54%; background-image: var(--icon-link); } #pages .page-properties input, #pages .page-properties textarea { border-radius: 4px; font-size: 0.94rem; padding: 0 0.54rem; min-height: 30px; height: 100%; background-color: var(--bg-4); border: 1px solid var(--bg-4); color: var(--text); } #pages .page-properties textarea { font-family: var(--sans-serif); font-size: 0.94rem; line-height: 1.3em; resize: vertical; min-height: 3.75rem; } #pages .page-properties select, #pages .page-properties input[type=date], #pages .page-properties input[type=time] { -moz-padding-start: 4px; -moz-padding-end: 4px; } @media (max-width: 1023px) { #pages .page-editor-grid { grid-template-columns: 1fr 0; } #pages .page-editor-grid.tags-opened { grid-template-columns: 1fr max-content; } #pages .tags { z-index: 3; } } @media (min-width: 1024px) { #pages .page-editor-grid { grid-template-columns: 1fr 0; } #pages .page-editor-grid.tags-opened { grid-template-columns: 1fr max-content; } } @media (min-width: 1024px) { #pages .page-editor-grid { border-radius: 5px; } } #pages .page-editor-header { grid-area: page-editor-header; display: grid; } @media (max-width: 1023px) { #pages .page-editor-header { grid-template-areas: "close title"; grid-template-columns: auto 1fr; column-gap: 1rem; row-gap: 0.5rem; padding: 10px 10px 0 10px; } } @media (min-width: 1024px) { #pages .page-editor-header { padding: 10px 10px 0 10px; grid-template-columns: max-content 1fr; column-gap: 1rem; } } #pages .close-page-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); } #pages .close-page-button:hover { background-color: var(--bg-4); } @media (max-width: 1023px) { #pages .close-page-button { grid-area: close; } } #pages .save-page-button { cursor: pointer; user-select: none; } #pages .page-editor-buttons .save-page-button.saved { color: var(--saved); } #pages .page-editor-buttons .save-page-button.error { color: var(--error); } #pages .open-properties { cursor: pointer; user-select: none; } #pages .page-editor-grid.properties .open-properties { color: var(--buttons-open); } #pages .page-editor-header a { color: var(--link); text-decoration: none; width: fit-content; align-self: center; font-weight: 600; } #pages .page-editor-header a:hover { color: var(--link-hover); text-decoration: none; } @media (max-width: 1023px) { .page-editor-title { grid-area: title; } } #pages .page-editor-buttons { display: grid; grid-area: page-editor-buttons; grid-auto-flow: column; gap: 0.7em; justify-content: start; overflow-x: auto; overflow-y: hidden; font-size: 1rem; color: var(--buttons-font); } @media (max-width: 1023px) { #pages .page-editor-buttons { padding: 10px 10px; } } @media (min-width: 1024px) { #pages .page-editor-buttons { padding: 10px 14px; } #pages .page-editor-buttons > div:hover { color: var(--buttons-hover); } } #pages .page-editor-buttons.hidden { display: none; } #pages .open-mediateka { cursor: pointer; user-select: none; } #pages .page-editor-grid.mediateka .open-mediateka { color: var(--buttons-open); } #pages .tags-helper { cursor: pointer; user-select: none; } #pages .page-editor-grid.tags-opened .tags-helper { color: var(--buttons-open); } #pages .codemirror-replace { cursor: pointer; user-select: none; } #pages .page-editor-buttons a { color: var(--uni-editor); text-decoration: none; } @media (min-width: 1024px) { #pages .page-editor-buttons a:hover { color: var(--buttons-hover); } } #pages .page-editor-panel { display: grid; grid-area: page-editor-panel; padding:10px; position: relative; max-width: 100%; } #pages .page-editor-panel.hidden { display: none; } #pages .upload-progress { position: absolute; width: 0%; height: 3px; background-color: tomato; } @keyframes barberpole { 100% { background-position: 100% 100%; } } #pages .mediateka-grid { display: grid; grid-template-rows: auto auto; grid-template-columns: 1fr; row-gap: 10px; grid-template-areas: "mediateka-files-hscroll" "mediateka-buttons"; } #pages .mediateka-grid.hidden { display: none; } #pages .mediateka-files-hscroll { grid-area: mediateka-files-hscroll; overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; } #pages .mediateka-files-grid { display: grid; column-gap: 5px; grid-auto-columns: 130px; grid-auto-flow: column; } #pages .file-block { height: 130px; background-color: var(--bg-2); box-shadow: 0 2px 3px 0 #0000004d; border: 2px solid var(--br-3); border-radius: 8px; overflow: hidden; position: relative; } #pages .file-block:hover { border: 2px solid var(--br-active); } #pages .file-block.active-file { border: 2px solid var(--br-active); } #pages .file-block img { object-fit: contain; width: 100%; height: 100%; display: block; } #pages .file-block .media-name { width: 100%; font-size: 60%; position: absolute; padding: 0 2%; overflow: hidden; color: var(--text); word-break: break-all; background-color: #0005; } #pages .file-block input[type="checkbox"] { position: absolute; right: 3px; top: 5px; z-index: 1; width: 1rem; height: 1rem; display: none; border-color: var(--orange); } #pages .file-block:hover input[type="checkbox"] { display: block; } #pages .file-block input[type="checkbox"]:checked { display: block; } #pages .file-block .ext { position: absolute; z-index: 12; bottom: 3px; left: 3px; font-size: 12px; padding: 1px 5px 1px 3px; border-radius: 3px; cursor: default; background-color: var(--bg-4); color: var(--ext); } #pages .mediateka-buttons { display: grid; grid-area: mediateka-buttons; } @media (max-width: 1023px) { #pages .mediateka-buttons { grid-template-rows: auto; grid-template-columns: 1fr 1fr; gap: 0.9rem; grid-template-areas: "upload-files del-uploaded-files" "link-file link-file"; } } @media (min-width: 1024px) { #pages .mediateka-buttons { grid-template-columns: auto 1fr auto; column-gap:15px; grid-template-areas: "upload-files link-file del-uploaded-files"; } } #pages .upload-files { grid-area: upload-files; min-height: 2.5rem; position: relative; background-color: var(--bg-2); user-select: none; } #pages .mediateka-buttons .inputfile { width: 100%; opacity: 0; position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden; } #pages .mediateka-buttons .inputfile + label { height: 100%; padding: 11px 10px 0 10px; display: flex; cursor: pointer; justify-content: center; border-radius: 4px; font-size: 1rem; line-height: 1; color: var(--buttons-font); } #pages .link-file { grid-area: link-file; display: grid; grid-template-columns: 1fr auto; column-gap: 1rem; line-height: 2; min-height: 2.5rem; align-items: center; padding-left: 10px; padding-right: 4px; border-radius: 5px; font-size: 1rem; word-break: break-all; background-color: var(--bg-2); color: var(--buttons-font); } #pages .link-file a { color: var(--link); text-decoration: none; border-bottom: 1px dashed; } #pages .link-file-tag { line-height: 1.4; } #pages .link-file-copy-btn { cursor: pointer; z-index: 1; font-size: 0.8rem; padding: 0 0.4rem 1px 0.4rem; border-radius: 0.2rem; display: flex; min-height: 2rem; height: calc(100% - 8px); user-select: none; justify-content: center; align-items: center; background-color: var(--bg-3); } #pages .del-uploaded-files { grid-area: del-uploaded-files; display: flex; justify-content: center; align-items: center; padding: 0 10px 2px 10px; border-radius: 4px; font-size: 1rem; cursor: pointer; line-height: 1; background-color: var(--orange); color: var(--white); user-select: none; } #pages .del-uploaded-files:hover { box-shadow: 0 0 0 0.25rem var(--focus-orange); } #pages .del-uploaded-files.disabled { background-color: var(--bg-2); color: var(--font-bg); cursor: context-menu; } #pages .del-uploaded-files.disabled:hover { box-shadow: unset; } /* теги, в которые заворачивается html-код */ #pages .page-editor-grid > .tags { grid-area: tags; display: none; width: max-content; overflow-y: auto; background-color: var(--tags-bg); position: relative; scrollbar-width: none; } #pages .page-editor-grid > .tags::-webkit-scrollbar { display: none; } #pages .page-editor-grid.tags-opened > .tags { display: block; } #pages .tags-grid { display: grid; position: relative; padding: 0.3rem 0; } #pages .tags-grid > div { display: flex; padding: 7px 15px 7px 15px; color: var(--tags-font); font-size: 0.9rem; cursor: pointer; justify-content: space-between; } #pages .tags-grid > div .tag { color: var(--windows-font); } #pages .tags-grid > div:hover { background-color: var(--codemirror-bg); } #pages .no-database, #pages .no-tables { color: var(--windows-font); border-radius: 0.4rem; } #pages .page-editor { grid-area: page-editor; } @media (max-width: 1023px) { #pages .page-editor { grid-column: 1/-1; } } body .CodeMirror { min-height: 100%; max-height: 100%; height: 2rem; font-family: var(--monospace); font-weight: normal; font-size: 1.04rem; } body .CodeMirror-dialog input { font-family: var(--monospace); font-size: 100%; } body .CodeMirror-wrap pre.CodeMirror-line, body .CodeMirror-wrap pre.CodeMirror-line-like { word-wrap: break-word; white-space: pre-wrap; word-break: break-all; } /* Codemirror dark and light theme Start */ .cm-s-default.CodeMirror { background-color: var(--codemirror-bg); color: var(--codemirror-text); } .cm-s-default .CodeMirror-gutters { background-color: var(--codemirror-bg); color: var(--codemirror-numbeslines); border: none; } /* Codemirror light theme Start */ .light .CodeMirror .CodeMirror-guttermarker, .light .CodeMirror .CodeMirror-guttermarker-subtle, .light .CodeMirror .CodeMirror-linenumber { color: var(--codemirror-numbeslines); } .light .CodeMirror .CodeMirror-cursor { border-left: 2px solid #ff5100; } .light .CodeMirror div.CodeMirror-selected { background-color: #0663d2; } .light .CodeMirror .cm-searching { background-color: rgb(112 112 100 / 30%); } .light .CodeMirror-focused div.CodeMirror-selected { background-color: #0663d2; } .light .CodeMirror .CodeMirror-line::selection, .light .CodeMirror .CodeMirror-line>span::selection, .light .CodeMirror .CodeMirror-line>span>span::selection { background-color: rgba(128, 203, 196, 0.2); } .light .CodeMirror .CodeMirror-line::-moz-selection, .light .CodeMirror .CodeMirror-line>span::-moz-selection, .light .CodeMirror .CodeMirror-line>span>span::-moz-selection { background-color: rgba(128, 203, 196, 0.2); } .light .CodeMirror .CodeMirror-activeline-background { background-color: #f5f1efb5; } .light .CodeMirror .cm-keyword { color: #C792EA; } .light .CodeMirror .cm-operator { color: #00a5e8; } .light .CodeMirror .cm-variable-2 { color: #373737; } .light .CodeMirror .cm-variable-3, .light .CodeMirror .cm-type { color: #f07178; } .light .CodeMirror .cm-builtin { color: #ffa706; } .light .CodeMirror .cm-atom { color: #F78C6C; } .light .CodeMirror .cm-number { color: #FF5370; } .light .CodeMirror .cm-def { color: #03A9F4; } .light .CodeMirror .cm-string { color: #71b199; } .light .CodeMirror .cm-string-2 { color: #f07178; } .light .CodeMirror .cm-comment { color: #546E7A; } .light .CodeMirror .cm-variable { color: #f07178; } .light .CodeMirror .cm-tag { color: #b6745c; } .light .CodeMirror .cm-meta { color: #ff7600; } .light .CodeMirror .cm-attribute { color: #C792EA; } .light .CodeMirror .cm-property { color: #373737; } .light .CodeMirror .cm-qualifier { color: #c868e9; } .light .CodeMirror .cm-variable-3, .light .CodeMirror .cm-type { color: #f71d1d; } .light .CodeMirror .cm-error { color: rgba(255, 255, 255, 1.0); background-color: #FF5370; } .light .CodeMirror .CodeMirror-matchingbracket { text-decoration: underline; color: #0004ff !important; } /* Codemirror dark theme Start */ .dark .CodeMirror .CodeMirror-guttermarker, .dark .CodeMirror .CodeMirror-guttermarker-subtle, .dark .CodeMirror .CodeMirror-linenumber { color: var(--codemirror-numbeslines); } .dark .CodeMirror .CodeMirror-cursor { border-left: 2px solid #FFCC00; } .dark .CodeMirror div.CodeMirror-selected { background-color: #0663d2; } .dark .CodeMirror .cm-searching { background-color: rgb(112 112 100 / 30%); } .dark .CodeMirror-focused div.CodeMirror-selected { background-color: #0663d2; } .dark .CodeMirror .CodeMirror-line::selection, .dark .CodeMirror .CodeMirror-line>span::selection, .dark .CodeMirror .CodeMirror-line>span>span::selection { background-color: rgba(128, 203, 196, 0.2); } .dark .CodeMirror .CodeMirror-line::-moz-selection, .dark .CodeMirror .CodeMirror-line>span::-moz-selection, .dark .CodeMirror .CodeMirror-line>span>span::-moz-selection { background-color: rgba(128, 203, 196, 0.2); } .dark .CodeMirror .CodeMirror-activeline-background { background-color: #2c2929b5; } .dark .CodeMirror .cm-keyword { color: #C792EA; } .dark .CodeMirror .cm-operator { color: #89DDFF; } .dark .CodeMirror .cm-variable-2 { color: #EEFFFF; } .dark .CodeMirror .cm-variable-3, .dark .CodeMirror .cm-type { color: #f07178; } .dark .CodeMirror .cm-builtin { color: #FFCB6B; } .dark .CodeMirror .cm-atom { color: #F78C6C; } .dark .CodeMirror .cm-number { color: #FF5370; } .dark .CodeMirror .cm-def { color: #82AAFF; } .dark .CodeMirror .cm-string { color: #94af6e; } .dark .CodeMirror .cm-string-2 { color: #f07178; } .dark .CodeMirror .cm-comment { color: #546E7A; } .dark .CodeMirror .cm-variable { color: #f07178; } .dark .CodeMirror .cm-tag { color: #FF5370; } .dark .CodeMirror .cm-meta { color: #FFCB6B; } .dark .CodeMirror .cm-attribute { color: #C792EA; } .dark .CodeMirror .cm-property { color: #C792EA; } .dark .CodeMirror .cm-qualifier { color: #DECB6B; } .dark .CodeMirror .cm-variable-3, .dark .CodeMirror .cm-type { color: #DECB6B; } .dark .CodeMirror .cm-error { color: rgba(255, 255, 255, 1.0); background-color: #FF5370; } .dark .CodeMirror .CodeMirror-matchingbracket { text-decoration: underline; color: white !important; } /* Codemirror dark theme End. */ #lbox-window { position: fixed; z-index: 999; cursor: pointer; background-color: var(--lbox-window); display: grid; height: 100vh; width: 100vw; grid-template-areas: "lightbox"; } #lbox-window img, #lbox-window video, #lbox-window audio { max-width: 100%; max-height: 100%; box-shadow: 0 3px 7px 0 #0000004d; grid-area: lightbox; align-self: center; justify-self: center; overflow: hidden; } #lbox-window audio { width: 97%; height: 54px; } /* Pages Utils */ #pages-utils { display: grid; gap: 1rem; overflow-y: auto; max-height: 100%; } @media (max-width: 1023px) { #pages-utils { padding: 1rem 0.4rem 1rem 0.4rem; } } @media (min-width: 1024px) { #pages-utils { padding: 1rem; } } #pages-utils .pages-utils-main { background-color: var(--windows); background-image: var(--noise); box-shadow: var(--shadows); border-radius: 0.3rem; } @media (max-width: 1023px) { #pages-utils .pages-utils-main { padding: 1rem 0.7rem 1rem 0.7rem; } } @media (min-width: 1024px) { #pages-utils .pages-utils-main { padding: 1rem; } } #pages-utils .replace-util { display: grid; gap: 1rem; } #pages-utils .replace-util > p { color: var(--text); font-size: 1rem; } #pages-utils .replace-inputs { display: grid; } @media (max-width: 1023px) { #pages-utils .replace-inputs { gap: 0.5rem; } } @media (min-width: 1024px) { #pages-utils .replace-inputs { grid-template-columns: 1fr 1fr; gap: 1rem; } } #pages-utils .regex, #pages-utils .replace, #pages-utils .replace_id_col, #pages-utils .replace_column, #pages-utils .replace_table { display: grid; row-gap: 0.2rem; } #pages-utils .regex .title, #pages-utils .replace .title, #pages-utils .replace_id_col, #pages-utils .replace_column, #pages-utils .replace_table { font-size: 1rem; color: var(--windows-font); } #pages-utils .replace-inputs input { border-radius: 4px; font-size: 0.875rem; padding: 0 0.54rem; min-height: 35px; width: 100%; color: var(--input-font); background-color: var(--input-bg); border: 2px solid var(--input-border); } #pages-utils .replace-btn { width: fit-content; display: flex; justify-content: center; align-items: center; padding: 0.44rem 0.74rem 0.47rem 0.74rem; min-height: 35px; border-radius: 0.25rem; background-color: var(--button-bg); border: 1px solid var(--button-border); color: var(--windows-font); font-size: 0.875rem; cursor: pointer; }