Mercurial
diff .cms/css/menu.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/menu.css Fri Oct 11 22:40:23 2024 +0000 @@ -0,0 +1,682 @@ +#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; +}