Mercurial
view .cms/css/menu.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
#menu { display: grid; height: 100%; overflow-y: auto; grid-auto-rows: max-content; } @media (max-width: 1023px) { #menu .main-main { padding: 0.4rem; } } @media (min-width: 1024px) { #menu .main-main { padding: 1rem 1rem 0.3rem 1rem; } } #menu .menu.last-edited::before, #menu .item.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); } #menu .menu-grid { display: grid; row-gap: 2rem; color: var(--windows-font); } #menu .menu-grid > div { box-shadow: 0 0 3px 0 #00000096; border-radius: 0.3rem; } #menu .menu { display: grid; grid-template-areas: "title sort" "buttons buttons"; grid-template-columns: 1fr auto; column-gap: 0.5rem; row-gap: 0.5rem; background-color: var(--windows); border-radius: 0.3rem; position: relative; padding: 0.7rem; } #menu .menu.open { grid-template-areas: "title sort" "buttons buttons" "menu-prop menu-prop"; } #menu .menu.open .prop { color: var(--menu-menu-open-prop); } #menu .menu.changed { outline: 1px dashed var(--save-menu); outline-offset: 0px; } #menu .menu .save > span { display: none; } #menu .menu.changed .save > span { display: block; color: var(--save-menu); } #menu .menu .menu-prop { display: none; } #menu .menu.open .menu-prop { display: grid; grid-area: menu-prop; } @media (max-width: 1023px) { #menu .menu.open .menu-prop { grid-template-areas: "area-title" "select" "classes-title" "classes"; } #menu .menu .menu-prop > div:not(:first-child) { padding-top: 0.75rem; } #menu .menu .menu-prop > .area-select-grid:not(:first-child) { padding-top: 0; } } @media (min-width: 1024px) { #menu .menu.open .menu-prop { grid-template-areas: "area-title select classes-title classes"; grid-template-columns: 6em minmax(240px, 100%) 6em minmax(240px, 100%); row-gap: 0.75rem; column-gap: 0.7rem; padding: 0.5rem 0 0.3rem 0; } } #menu .menu input[name=title] { grid-area: title; line-height: 27px; background-color: var(--menu-input-bg); border: 2px solid var(--menu-input-border); } #menu .menu input[name=sort] { grid-area: sort; width: 4rem; text-align: center; font-size: 0.9rem; background-color: var(--menu-input-bg); border: 2px solid var(--menu-input-border); } #menu .menu .area.title { grid-area: area-title; font-size: 1rem; line-height: 27px; } #menu .menu .classes.title { grid-area: classes-title; font-size: 1rem; line-height: 27px; } #menu .menu input[name=classes] { grid-area: classes; font-size: 0.9rem; background-color: var(--menu-input-bg); border: 2px solid var(--menu-input-border); } @media (min-width: 1024px) { #menu .menu .area.title, #menu .menu .classes.title { justify-self: right; } } #menu input[type="text"] { padding: 0 0.54rem; border-radius: 4px; min-height: 30px; font-size: 0.94rem; height: 100%; background-color: var(--bg-4); border: 1px solid var(--bg-4); color: var(--text); width: 100%; max-width: 100%; } #menu .menu-buttons { grid-area: buttons; display: grid; column-gap: 0.7rem; font-size: 0.9rem; } #menu .menu-buttons > div { display: flex; /* Chrome Mobile Browser - Fonts Size */ } #menu .menu .menu-buttons { grid-template-columns: auto auto 1fr auto; } #menu .menu-buttons div { cursor: pointer; user-select: none; color: var(--buttons-font); width: max-content; } #menu .menu-buttons div:active { color: var(--buttons-hover); } @media (min-width: 1024px) { #menu .menu-buttons div:hover { color: var(--buttons-hover); } } /*Items*/ #menu .items-grid { display: grid; row-gap: 0.3rem; padding: 0.8rem 0 0.5rem 0.5rem; margin-top: -5px; background-color: var(--windows); border-radius: 0 0 0 0.3rem; } @media (min-width: 768px) { #menu .items-grid .items-grid { padding-left: 1rem; } } #menu .menu-grid > div > .items-grid { border-radius: 0 0 0.3rem 0.3rem; } #menu .items-grid .items-grid { box-shadow: inset 0 0 0 1px var(--windows-hover); } #menu .item { display: grid; grid-template-areas: "title" "buttons"; row-gap: 0.5rem; background-color: var(--bg-3); background-image: var(--noise); border-radius: 0.3rem 0 0 0.3rem; position: relative; padding: 0.7rem; } /*Lines*/ #menu .item.clicked + .items-grid { box-shadow: inset 1px -1px 0 0 var(--green-3); } #menu .items-grid:has(> * > .last-edited) { box-shadow: inset 1px -1px 0 0 var(--green-3); } #menu div:has(> .item > .menu-buttons .append:hover) > .items-grid { box-shadow: inset 1px -1px 0 0 var(--green-3); } #menu > .main-main .menu-grid > div > .items-grid.highlite-parent > div > .item.highlite-children::after { margin-left: -7px; width: 7px; } #menu .items-grid.highlite-parent { box-shadow: inset 1px 0px 0 0 var(--sub-line); } #menu .item.highlite-children::after { content: ""; position: absolute; margin-left: -15px; top: calc(50% - 1px); border-top: 1px solid var(--sub-line); width: 15px; } @media (max-width: 767px) { #menu .item.highlite-children::after { margin-left: -7px; width: 7px; } } #menu .item.highlite-children + .items-grid { box-shadow: inset 1px -1px 0 0 var(--green-3); } /*Lines End*/ @media (min-width: 1024px) { #menu .item:hover { background-color: var(--open-menu); } } #menu .item.open { grid-template-areas: "title" "buttons" "menu-prop"; background-color: var(--open-menu); } #menu .item .menu-buttons { grid-template-columns: auto auto 1fr auto; } #menu .item.open .menu-buttons { grid-template-columns: auto auto 1fr auto; } #menu .item.changed { outline: 1px dashed var(--save-menu); outline-offset: 0px; } #menu .item .save > span { display: none; } #menu .item.changed .save > span { display: block; color: var(--save-menu); } #menu .item .menu-prop > .title { font-size: 1rem; line-height: 27px; color: var(--names); } #menu .menu-grid > div.will-be-deleted { outline: 1px dashed red; outline-offset: 0px; } #menu .menu-grid > div.will-be-deleted .del { outline: 1px dashed red; outline-offset: 2px; border-radius: 1px; } #menu .will-be-deleted .item { outline: 1px dashed red; outline-offset: -1px; } #menu .will-be-deleted .item .del { outline: 1px dashed red; outline-offset: 2px; border-radius: 1px; } @media (min-width: 1024px) { #menu .item .menu-buttons div { opacity: 0; } #menu .item:hover div { opacity: 1; } #menu .item.open div { opacity: 1; } #menu .item .menu-prop > .title { text-align: right; } } #menu .item .menu-prop { display: none; } #menu .item.open .menu-prop { display: grid; grid-area: menu-prop; } #menu .item.open .prop { color: var(--menu-item-open-prop); } #menu .item a { grid-area: title; display: flex; width: fit-content; margin-top: -5px; font-size: 1rem; text-decoration: none; min-height: 21px; /* for empty title */ } #menu .item a[href] { color: var(--menu-item-a); } #menu .item a[href]:hover { color: var(--menu-item-a-hover); } #menu .item a:not([href]) { width: fit-content; margin-top: -5px; font-size: 1rem; min-height: 21px; color: var(--menu-item-a-none-link); } @media (max-width: 1023px) { #menu .item .menu-prop { grid-template-areas: "page-title" "select-grid" "parent-title" "pid" "title-name" "title" "tag-title" "tag_title" "url-title" "target-blank" "classes-title" "classes" "sort-title" "sort"; } } @media (min-width: 1024px) { #menu .item .menu-prop { grid-template-areas: "page-title select-grid parent-title pid" "title-name title tag-title tag_title" "url-title target-blank classes-title classes" ". . sort-title sort"; grid-template-columns: 6em minmax(240px, 100%) 6em minmax(240px, 100%); row-gap: 0.75rem; column-gap: 0.7rem; padding: 0.5rem 0 0.3rem 0; } } #menu .item .page.title { grid-area: page-title; } #menu .item .select-grid { grid-area: select-grid; } #menu .item .parent.title { grid-area: parent-title; } #menu .item input[name=pid] { grid-area: pid; } #menu .item .title.name { grid-area: title-name; } #menu .item input[name=title] { grid-area: title; } #menu .item .tag.title { grid-area: tag-title; } #menu .item input[name=tag_title] { grid-area: tag_title; } #menu .item .classes.title { grid-area: classes-title; } #menu .item input[name=classes] { grid-area: classes; } #menu .item .url.title { grid-area: url-title; } #menu .item .target-blank { grid-area: target-blank; display: grid; grid-template-columns: 1fr 30px; column-gap: 0.5rem; position: relative; } #menu .item input[name=url] { width: 100%; grid-column: 1/-1; grid-row: 1/2; } #menu .item input[name=url][disabled] { color: var(--menu-input-select-font-disabled); } #menu .item .sort.title { grid-area: sort-title; } #menu .item input[name=sort] { grid-area: sort; width: 5rem; text-align: center; } @media (max-width: 1023px) { #menu .item .parent-title, #menu .item .title, #menu .item .tag-title, #menu .item .url-title, #menu .item .classes-title, #menu .item .sort-title { padding-top: 0.75rem; } } #menu .target-blank input[type="checkbox"] { grid-row: 1/2; grid-column: 2/3; align-self: center; justify-self: center; border: 2px solid var(--orange); } #menu .select-grid .field-options { position: relative; } #menu .select-grid .select-dropdown { display: grid; position: absolute; left: 0; right: 0; top: 2px; background-color: var(--bg-3); border: 2px solid var(--bg-4); color: var(--menu-item-select-dropdown-font); border-radius: 0.25rem; z-index: 7; overflow: hidden; box-shadow: 0 2px 3px 0 #00000033; } #menu .select-grid .field-search { display: grid; padding: 0.37rem; border-bottom: 2px solid var(--bg-4); } #menu .select-grid .field-search input { width: 100%; background-color: var(--menu-item-field-search-input-bg); color: var(--text); border: 2px solid var(--bg-4); font-size: 0.94rem; background-repeat: no-repeat; background-position: right .37rem center; padding: 0.25rem 2rem 0.25rem 0.25rem; background-size: 17px 14px; } #menu .select-grid .field-search input { background-image: var(--search-icon); } #menu .select-grid .field-search input:focus { border: 2px solid var(--menu-item-field-search-input-focus); transition: all .700s ease 0s; } #menu .select-grid ul.list-search, #menu .item .field-search { background-color: var(--bg-3); } #menu .select-grid ul.list-search { display: grid; margin: 0; padding: 0; overflow-y: auto; max-height: 17rem; overscroll-behavior: contain; } #menu .select-grid .list-search li { display: block; list-style-type: none; padding: 0.4rem 0.44rem; cursor: pointer; font-size: 0.94rem; text-align: left; } #menu .select-grid .list-search li:hover { background-color: var(--menu-item-list-search-li-hover-active); } #menu .select-grid .list-search li.active { background-color: var(--menu-item-list-search-li-hover-active); } #menu .select-grid .list-search li.searcher-hidden { display: none; } #menu .select-grid .field-options { overflow: hidden; } #menu .select-grid .field-options.open { overflow: initial; } #menu .main-footer { padding: 1rem; } @media (max-width: 1023px) { #menu .main-footer { padding: 0.7rem 0.4rem 1rem 0.4rem; } } @media (min-width: 1024px) { #menu .main-footer { padding: 1rem; } } #menu .main-footer .create { display: block; width: max-content; padding: 0.4rem 0.7rem 0.5rem 0.7rem; background-color: var(--bg-4); text-decoration: none; font-size: 0.9rem; color: var(--windows-font); border-radius: 0.3rem; cursor: pointer; user-select: none; } /* Select */ #menu .menu-prop .area-select-grid, #menu .item .menu-prop .parent-select-grid { position: relative; } #menu .menu-prop .field-select-menu { display: grid; grid-template-columns: 1fr 26px; height: 100%; cursor: pointer; background-color: var(--menu-input-bg); border: 2px solid var(--menu-input-border); border-radius: 4px; user-select: none; line-height: 26px; font-size: 1rem; } #menu .menu-prop .field-select-menu > .value { padding: 0 0 0 0.44rem; white-space: nowrap; overflow: hidden; line-height: 26px; font-size: 0.94rem; color: var(--text); } #menu .menu-prop .field-select-menu > .icon { background-image: var(--select-icon); background-repeat: no-repeat; background-position: center; background-size: 12px; } #menu .menu-prop .field-select { display: grid; grid-template-columns: 1fr 26px; height: 100%; min-height: 30px; cursor: pointer; background-color: var(--bg-4); border: 1px solid var(--bg-4); border-radius: 4px; user-select: none; } #menu .menu-prop .field-select > .value { padding: 0 0 0 0.44rem; white-space: nowrap; overflow: hidden; line-height: 26px; font-size: 0.94rem; color: var(--text); } #menu .menu-prop .field-select > .icon { background-image: var(--select-icon); background-repeat: no-repeat; background-position: center; background-size: 12px; } #menu .menu-prop .area-select-grid .field-options, #menu .menu-prop .parent-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; } #menu .menu-prop .area-select-grid .field-options.open, #menu .menu-prop .parent-select-grid .field-options.open { background-color: var(--bg-3); border: 2px solid var(--bg-4); color: var(--text); margin-top: 2px; overflow: auto; height: auto; } #menu .menu-prop .area-select-grid .field-options .option, #menu .menu-prop .parent-select-grid .field-options .option { padding: 0.4rem 0.44rem; cursor: pointer; font-size: 0.94rem; } #menu .menu-prop .area-select-grid .field-options .option:hover, #menu .menu-prop .parent-select-grid .field-options .option:hover { background-color: var(--bg-2); } #menu .no-database, #menu .no-tables { color: var(--windows-font); border-radius: 0.4rem; }