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;
+}