Mercurial
diff .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 diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/.cms/css/pages.css Fri Oct 11 22:40:23 2024 +0000 @@ -0,0 +1,1664 @@ +#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; +} \ No newline at end of file