iobroker.telegram-menu 2.2.0 → 2.2.1

package/admin/css/button.css

@@ -1,53 +1,96 @@
 .button__copy {
-    background-color: green !important;
-    color: white !important;
+    background-color: var(--button-bg-copy) !important;
+    color: var(--button-text-secondary) !important;
+    border: 2px solid var(--button-border-hover) !important;
 }
 
 .button__add {
-    background-color: #ddd !important;
+    background-color: var(--button-bg-add) !important;
+    border: 2px solid var(--button-border-hover) !important;
+    color: var(--button-text-secondary) !important;
 }
 
 .button__delete {
-    background-color: red !important;
-    color: white !important;
+    background-color: var(--button-bg-delete) !important;
+    color: var(--button-text-secondary) !important;
+    border: 2px solid var(--button-border-hover) !important;
 }
 
 .button__edit,
 .button__info {
-    background-color: blue !important;
-    color: white !important;
+    background-color: var(--button-bg-infoEdit) !important;
+    color: var(--button-text-secondary) !important;
+    border: 2px solid var(--button-border-hover) !important;
 }
 
 .button__ok {
-    background-color: #3399cc !important;
-    color: white !important;
+    background-color: var(--iobroker-blue) !important;
+    color: var(--button-text-secondary) !important;
     opacity: 1 !important;
+    border: 2px solid var(--button-border-hover) !important;
 }
 
 .button__ok:not([disabled]):hover {
-    background-color: rgb(35, 107, 142) !important;
+    background-color: var(--button-ok-bg-hover) !important;
     transition: background-color 0.5s ease;
 }
 
 .button__close {
-    background-color: #cdcdcd !important;
-    color: black !important;
+    background-color: var(--button-bg-close) !important;
+    color: var(--dark) !important;
     opacity: 1 !important;
+    border: 2px solid var(--button-border-hover) !important;
 }
 
 .button {
-    border-radius: 5px !important;
-    width: 100px !important;
+    border-radius: 6px !important;
+    min-width: 100px !important;
+    padding: 0 10px !important;
     height: 30px !important;
-    border: 3px solid transparent !important;
+    cursor: pointer;
+    margin: 0.5rem 0 0 0.5rem;
+}
+
+.button__primary {
+    background-color: var(--button-bg-primary) !important;
+    border: 2px solid var(--button-border-primary) !important;
+    color: var(--button-text-primary) !important;
+}
+
+.button__primary:hover {
+    background-color: var(--button-bg-hover) !important;
+    border: 2px solid var(--button-border-hover) !important;
+    color: var(--button-text-hover) !important;
+}
+
+.button__active {
+    border: 2px solid var(--button-border-active) !important;
+    background-color: var(--button-bg-active) !important;
+    color: var(--button-color-active) !important;
 }
 
 .button .button__label {
     white-space: nowrap;
 }
 
+button.icon {
+    border-radius: 6px !important;
+    height: 30px;
+    width: 30px;
+    position: relative;
+    margin: 0.5rem 0 0 0.5rem;
+}
+
+button.icon i.material-icons {
+    font-size: 20px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
 .button--hover:hover {
-    border: 3px solid rgb(103, 103, 103) !important;
+    border: 2px solid var(--button-border-hover) !important;
     opacity: 0.8 !important;
 }
 
@@ -63,20 +106,12 @@
     height: 100%;
 }
 
-.header__actions .button--children {
-    align-items: end;
-}
-
 .button__icon {
     width: 30px !important;
     height: 30px !important;
     margin: 0 5px 0 5px !important;
-    border: 1px solid black !important;
     border-radius: 6px !important;
-}
-
-.button__icon_text .button--children {
-    margin-top: 0.5rem !important;
+    border: 2px solid var(--button-border-primary) !important;
 }
 
 .button__icon-table {
@@ -96,15 +131,9 @@
     justify-content: center;
 }
 
-.button__primary {
-    background-color: white !important;
-    color: black !important;
-}
-
 .btn__menu_expand {
-    margin-left: 0.25rem;
+    margin-left: 0.5rem;
     width: auto !important;
-
 }
 
 .btn__menu_expand .button--children {
@@ -121,6 +150,11 @@
     width: calc(100% - 1rem) !important;
 }
 
+.button__menu .button--children {
+    margin-top: 0 !important;
+
+}
+
 .button__menu:last-child {
     margin-bottom: 0.5rem !important;
 }

package/admin/css/colors.css

@@ -0,0 +1,140 @@
+:root {
+    --red-dark: red;
+    --iobroker-blue: #3399cc;
+    --iobroker-blue-hover: #236B8EFF;
+    --blue-hover: rgba(51, 153, 204, 0.5); /*Is lighter than it seems, because of opacity , and much lighter than --iobroker-blue-hover*/
+    --blue-lighter: #99c0f9;
+    --blue-light: #2196F3FF;
+    --blue: blue;
+    --green-lighter: #b5fb6f;
+    --green-light: #96d15a;
+    --dark-green: green;
+    --yellow-lighter: #f1e4b0;
+    --gray-lightest: #f5f5f5;
+    --gray-lighter: #aaa;
+    --gray-light: #888;
+    --gray: #777;
+    --gray-dark: #555;
+    --gray-darker: #333;
+    --gray-darkest: #1e1e1e;
+    --light: #eee;
+    --dark: black;
+    --transparent-dark: rgba(0, 0, 0, 0.5);
+
+    --destructive: var(--red-dark);
+    --success: var(--green-lighter);
+    --startside: var(--green-light);
+    --startside-none: var(--blue-lighter);
+    --scrollbar: var(--gray-light);
+    --scrollbar-static: var(--gray-lightest);
+    --scrollbar-hover: var(--gray-dark);
+    --dialog-bg: var(--transparent-dark);
+
+
+    --text-primary: black;
+    --text-secondary: white;
+    --text-header: black;
+
+    --button-bg-primary: white;
+    --button-border-primary: var(--gray-darkest);
+    --button-text-primary: black;
+    --button-border: var(--gray);
+
+    --button-border-active: var(--gray-lightest);
+    --button-bg-active: var(--gray-lighter);
+    --button-color-active: black;
+
+    --button-bg-hover: var(--gray-lighter);
+    --button-text-hover: black;
+    --button-border-hover: var(--gray);
+
+    --button-ok-bg-hover: var(--iobroker-blue-hover);
+
+    --button-bg-add: var(--gray-light);
+    --button-bg-copy: var(--dark-green);
+    --button-bg-delete: var(--destructive);
+    --button-bg-infoEdit: var(--blue);
+    --button-bg-close: var(--gray-light);
+    --button-text-secondary: white;
+
+    --button-bg-true: var(--green-lighter);
+    --button-bg-false: var(--destructive);
+    --button-color-boolean: var(--gray-dark);
+
+    --select-bg: white;
+    --select-border: var(--gray-light);
+    --select-border-hover: var(--gray-dark);
+    --select-bg-hover: var(--gray-lightest);
+    --select-color: black;
+
+    --iobroker-color: var(--iobroker-blue);
+    --menu-function-row: peachpuff;
+
+    --row-button: var(--yellow-lighter);
+    --row-button-text: black;
+    --row-container: var(--blue-lighter);
+
+    --border-row-buttons: black;
+    --border-row-container: black;
+    --border-dark: var(--gray-dark);
+    --border-primary: var(--iobroker-blue);
+    --border-secondary: var(--gray-light);
+
+    --input-bg: white;
+    --input-text: black;
+    --input-border: var(--gray-light);
+    --input-placeholder-color: var(--gray);
+
+    --table-head: var(--iobroker-blue);
+    --table-hover: var(--blue-hover);
+    --table-row-even: var(--light);
+    --table-row-odd: white;
+
+    --checkbox-bg: var(--blue-light);
+
+    --background-primary: var(--gray-lightest);
+
+    --hover-dark: var(--gray-dark);
+
+}
+
+.dark {
+    --text-primary: white;
+    --text-secondary: black;
+    --text-header: var(--iobroker-blue);
+
+    --button-text-primary: var(--iobroker-blue);
+
+    --button-border-active: var(--gray-lightest);
+    --button-bg-active: var(--gray-dark);
+    --button-color-active: var(--gray-lightest);
+
+    --button-bg-hover: var(--gray-light);
+    --button-border-hover: var(--gray-lighter);
+    --button-text-hover: var(--gray-lightest);
+
+    --button-bg-primary: var(--gray-dark);
+    --button-border-primary: var(--gray);
+
+    --select-bg: var(--gray-light);
+    --select-border: var(--gray-lightest);
+    --select-border-hover: var(--gray-dark);
+    --select-bg-hover: var(--gray-lightest);
+    --select-color: white;
+
+    --iobroker-color: var(--gray-darkest);
+
+    --input-bg: var(--gray-light);
+    --input-text: white;
+    --input-border: var(--gray-darkest);
+    --input-placeholder-color: var(--gray-dark);
+
+    --table-head: var(--gray-dark);
+    --table-row-even: var(--gray-darker);
+    --table-row-odd: var(--gray-dark);
+
+    --primary-color: var(--gray-darkest);
+    --row-button: var(--gray-darker);
+    --row-button-text: white;
+    --background-primary: var(--gray-darker);
+}

package/admin/css/custom_classes.css

@@ -18,6 +18,10 @@
     align-items: center;
 }
 
+.items-start {
+    align-items: start;
+}
+
 .text-white {
     color: #fff;
 }
@@ -113,4 +117,20 @@
 
 .h-full {
     height: 100%;
+}
+
+.mt-2 {
+    margin-top: 0.5rem;
+}
+
+.mr-4 {
+    margin-right: 1rem;
+}
+
+.mr-2 {
+    margin-right: 0.5rem;
+}
+
+.relative {
+    position: relative;
 }

package/admin/css/description.css

@@ -9,7 +9,7 @@
 
 .table__container_description td input {
     height: 30px;
-    color: #4caaf4 !important;
+    color: var(--iobroker-blue) !important;
     width: calc(100% - 0.5rem) !important;
 }
 
@@ -20,10 +20,10 @@
 }
 
 .popup__description {
-    border: 1px solid black;
+    border: 1px solid var(--border-dark);
     padding: 10px;
 }
 
-.dark .tab__description_text {
-    color: white
+.tab__description_text {
+    color: var(--text-primary)
 }

package/admin/css/edit-container.css

@@ -1,54 +1,66 @@
-.edit__container p {
-	font-size: 0.8rem;
-	color: #777;
-	margin: 0 !important;
+.edit__container {
+    padding-top: 1rem;
 }
+
 .edit__container label {
-	width : 100%;
+    width: 100%;
 }
 
 .edit__container-Trigger {
-	margin-left: 20px;
-	margin-bottom: 30px;
-	display: inline-block;
+    margin-left: 20px;
+    margin-bottom: 30px;
+    display: inline-block;
 }
+
 .edit__container-ParseMode {
-	display: inline-block;
-	margin-left: 100px;
+    display: inline-block;
+    margin-left: 100px;
 }
 
 .edit__container .input__container {
-	width: 100% !important;
-	height: auto !important;
-
+    width: 100% !important;
+    height: auto !important;
 }
-.input__container label input{
-	margin-top: 0.5rem !important;
+
+.input__container label input {
+    margin-top: 0.5rem !important;
 }
+
 .input__container label {
-	display :inline-block;
-	height : 1rem
-}
-.edit__container label p {
-	margin-left: 8px !important;
+    display: inline-block;
+    height: 1rem
 }
-.edit__container .input__icon {
-	width: 10px !important;
+
+.edit__container {
+    display: flex;
+    flex-direction: column;
+    max-height: 100% !important;
 }
 
-.colored .edit__container input,
-.light .edit__container input {
-	background-color: white !important;
+.edit__container table {
+    overflow: auto;
+    max-height: 100%;
 }
 
-.edit__container input[type="checkbox"] {
-	margin-left: 8px;
+.edit__container label p {
+    margin-left: 8px !important;
 }
-.edit__container input[type="checkbox"]:checked {
-	color: #96d15a;
-	accent-color: rgb(33, 150, 243);
+
+.edit__container .input__icon {
+    width: 10px !important;
 }
 
+/*.edit__container input[type="checkbox"]:checked {*/
+/*    color: #96d15a;*/
+/*    accent-color: rgb(33, 150, 243);*/
+/*}*/
+
 .edit__container td:nth-child(1) {
-	padding-left: 0.35rem !important;
+    padding-left: 0.35rem !important;
 }
+
+.edit__container_action {
+    overflow: auto;
+    flex: 1;
+    max-height: 100%;
+}

package/admin/css/editor-header.css

@@ -1,15 +1,17 @@
 .editor__header {
-	display: flex;
-	align-items: center;
-	margin-bottom: 1rem;
-	margin-left: 5px;
+    display: flex;
+    align-items: center;
+    margin-bottom: 1rem;
+    margin-left: 5px;
 }
 
 .editor__header_trigger {
-	margin-left: 1rem !important;
-	margin-right: 1rem !important;
+    margin-left: 1rem !important;
+    margin-right: 1rem !important;
+    margin-bottom: 1.7rem !important;
 }
+
 .editor__header_parseMode {
-	margin-left: 1rem !important;
-	margin-right: 1rem !important;
+    margin-left: 1rem !important;
+    margin-right: 1rem !important;
 }

package/admin/css/header.css

@@ -1,26 +1,22 @@
 /* IconBar */
 img[alt="logo"] {
-	padding: 0 !important;
-	width: 40px !important;
+    padding: 0 !important;
+    width: 40px !important;
 }
 
 .header__icons {
-	margin-bottom: 0;
-	border-radius: 0 !important;
+    margin-bottom: 0;
+    border-radius: 0 !important;
 }
-.light .Header__icons,
-.colored .header__icons {
-	background-color: #3399cc;
-}
-.dark form.header__icons {
-	background-image: linear-gradient(rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.09));
-}
-.blue form.header__icons {
-	background-color: rgb(62, 68, 72);
+
+.light .header__icons {
+    background-color: var(--iobroker-blue);
 }
+
 .header__icons button {
-	margin-left: 5px;
+    margin-left: 5px;
 }
+
 .header__icons img {
-	margin: 5px;
+    margin: 5px;
 }

package/admin/css/input-select.css

@@ -0,0 +1,131 @@
+input {
+    margin: 0 !important;
+    padding: 0.5rem !important;
+    border: none !important;
+    width: calc(100% - 50px) !important;
+    font-size: 16px !important;
+    border-bottom: 1px solid var(--input-border) !important;
+    color: var(--input-text);
+    background: var(--input-bg);
+}
+
+input::placeholder {
+    color: var(--input-placeholder-color); /* Replace with your desired color */
+}
+
+body .header__menu_buttons input {
+    font-size: 1.0rem !important;
+    width: 300px !important;
+}
+
+.settings__tab input[type="checkbox"] {
+    margin-left: 8px;
+}
+
+.rename__card input {
+    text-align: center;
+}
+
+tr[draggable="true"] input {
+    cursor: text;
+    user-select: text; /* Standard */
+    -moz-user-select: text; /* Firefox */
+    -webkit-user-select: text; /* Safari */
+    -ms-user-select: text; /* Internet Explorer/Edge */
+}
+
+.inUse,
+.inUse input {
+    color: var(--destructive) !important;
+    border-color: var(--destructive) !important;
+}
+
+input ~ p {
+    margin-left: 5px !important;
+}
+
+input ~ p {
+    margin-top: 0 !important;
+    display: block;
+}
+
+input:focus {
+    outline: none;
+}
+
+input:disabled {
+    opacity: 0.3;
+}
+
+/* checkbox */
+
+label.checkbox {
+    height: 20px;
+    color: var(--text-primary);
+    display: flex;
+    align-items: end;
+}
+
+label.checkbox input {
+    display: inline-block !important;
+    width: 20px !important;
+    height: 20px !important;
+    margin-bottom: 6px !important;
+}
+
+label.checkbox span {
+    margin-left: 0.5rem;
+    display: inline-block;
+}
+
+#root table tbody input[type="checkbox"] {
+    width: 20px !important;
+    height: 20px !important;
+    vertical-align: text-bottom;
+    cursor: pointer !important;
+}
+
+input[type="checkbox"]:checked {
+    accent-color: var(--checkbox-bg);
+}
+
+/*.checkbox__line {*/
+/*    margin-left: 8px !important;*/
+/*    margin-top: 5px !important;*/
+/*}*/
+
+.input__container--settings {
+    width: 100% !important;
+}
+
+.select__label {
+    margin-bottom: 0.5rem;
+    display: block;
+    margin-left: 5px;
+}
+
+select {
+    background-color: var(--select-bg) !important;
+    color: var(--text-primary) !important;
+    border: none;
+    border-bottom: 1px solid var(--border-secondary);
+    padding: 0.5rem !important;
+    margin: -5px 0.5rem 0 0 !important;
+}
+
+select option:disabled {
+    background-color: var(--iobroker-blue);
+    color: var(--light);
+}
+
+select:hover {
+    border-color: var(--select-border-hover);
+    background: var(--select-bg-hover);
+}
+
+select:focus {
+    outline: none;
+}
+
+
+

package/admin/css/row-editor.css

@@ -1,5 +1,5 @@
-.popupContainer__copy .DialogContainer {
-	width: 90% !important;
-	height: 80% !important;
-	margin-top: 400px;
+.popupContainer__copy .dialog__card {
+    width: 90% !important;
+    height: 80% !important;
+    margin-top: 400px;
 }

package/admin/css/scrollbar.css

@@ -0,0 +1,21 @@
+/* Für Webkit-Browser wie Chrome und Safari */
+.navigation__container::-webkit-scrollbar,
+.action__container::-webkit-scrollbar {
+    width: 10px; /* Breite der Scrollbar */
+}
+
+.navigation__container::-webkit-scrollbar-thumb,
+.action__container::-webkit-scrollbar-thumb {
+    background: var(--scrollbar); /* Farbe des beweglichen Teils der Scrollbar */
+}
+
+.navigation__container::-webkit-scrollbar-thumb:hover,
+.action__container::-webkit-scrollbar-thumb:hover {
+    background: var(--scrollbar-hover); /* Farbe des beweglichen Teils der Scrollbar beim Überfahren mit der Maus */
+}
+
+/* Für Firefox */
+.navigation__container, .action__container {
+    scrollbar-width: thin; /* Breite der Scrollbar */
+    scrollbar-color: var(--scrollbar) var(--scrollbar-static); /* Farbe des beweglichen Teils der Scrollbar und Hintergrundfarbe der Scrollbar */
+}