backend-skins 0.1.24 → 0.1.26

package/dist/modern/css/my-menu.styl

@@ -1,326 +1,317 @@
-* {
-  font-family: 'Inter', Arial, sans-serif !important;
-}
-body {
-  background-color: #f8fafc !important; margin: 0;
-}
-
-#main-top-bar[dev-mode] {
-  background: repeating-linear-gradient(-45deg, #1976d2, #1976d2 8px, #5e7c9aff 8px, #5e7c9aff 16px) !important;
-}
-
-#main-top-bar {
-  top: 0;
-  background: #1976d2;
-  border: none;
-  padding-bottom: 0px;
-  
-  /* --- ESTO ES LO NUEVO --- */
-  display: flex;
-  //align-items: center; /* Centra verticalmente logo, items e iconos */
-  //flex-wrap: nowrap;   /* Evita que los elementos caigan abajo */
-  //overflow-x: auto;    /* Si hay demasiados items, permite scroll horizontal en vez de romperse */
-}
-#main-top-bar * {
-  margin-left: 8px;
-  margin-top: 0px;
-}
-
-#main-logo{
-  margin-top:5px;
-}
-
-#main-top-bar1, .sub-menu-bar {
-  background: #1565c0;
-  border: none;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-  display: flex;
-  align-items: center;
-  padding: 0 16px !important;
-}
-
-.top-menu-bar .menu-item, .sub-menu-bar .menu-item {
-  color: white;
-  background: transparent !important;
-  border: none;
-  font-size: 14px;
-  font-weight: 500;
-  text-transform: uppercase;
-  padding: 8px;
-  margin: 0;
-  border-radius: 0px;
-  text-decoration: none;
-  transition: background 0.2s;
-  border-radius: 0px !important;
-}
-
-.menu-item[menu-selected="yes"] { 
-  background: rgba(0,0,0,0.15) !important; 
-  box-shadow: inset 0 -3px 0 white;
-}
-
-.menu-item {
-  background-color: #1976d2;
-  border-radius: 3px;
-  color: #fff;
-  text-transform: uppercase;
-  font-weight: bold;
-  transition: 0.1s;
-  padding: 5px;
-}
-
-.menu-item:hover {
-  background-color: #0069d9 !important;
-}
-
-.menu-item[is-selected] {
-  background-color: #ddd !important;
-  color: #666 !important;
-}
-
-  #active-user, #right-menu-icon, .right-lights {
-  filter: brightness(0) invert(1); /* Iconos a blanco */
-  margin-left: 10px;
-  height: 25px;
-  width: auto;
-}
-
-/* --- CONSOLA FLOTANTE --- */
-#mini-console {
-  position: fixed;
-  top: 55px;
-  right: 20px;
-  z-index: 2000;
-  background-color: #fde8e8; 
-  color: #9b1c1c;
-  border: 1px solid #f8b4b4;
-  border-radius: 8px;
-  padding: 12px 12px 15px 8px;
-  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
-  white-space: pre-wrap;
-  max-width: 350px;
-}
-#mini-console:not(:empty) {
-  display: block;
-}
-
-
-
-/* dialogs */
-
-.dialog-promise {
-    border-radius: 5px;
-    padding: 2px;
-}
-
-.dialog-promise-inner-div input {
-  border-width: 1px;
-  border-radius: 3px;
-  border-color: #ddd;
-  padding: 3px;
-  box-shadow: 1px 1px 5px #ddd;
-}
-
-
-/* BOTONES */
-
-[color] {
-  border-radius: 3px;
-  padding: 5px;
-  cursor: pointer;
-  text-transform: uppercase;
-  text-decoration: none;
-  font-weight: bold;
-}
-
-[color=primary]:not([outline]) {
-  background-color: #1976d2;
-  color: #fff;
-  border: 1px solid #1976d2;
-  transition: 0.1s;
-}
-
-[color=primary]:not([outline]):hover {
-  background-color: #0069d9;
-}
-
-[color=primary][outline=true] {
-  background-color: transparent;
-  border: 1px solid #1976d2;
-  color: #1976d2;
-  transition: 0.1s;
-}
-
-[color=primary][outline=true]:hover {
-  background-color: #1976d2;
-  color: #fff;
-}
-
-[color=secondary]:not([outline]) {
-  background-color: #666;
-  color: #fff;
-  border: 1px solid #666;
-}
-
-[color=secondary]:not([outline]):hover {
-  background-color: #5a6268;
-}
-
-[color=secondary][outline=true] {
-  background-color: transparent;
-  border: 1px solid #666;
-  color: #666;
-  transition: 0.1s;
-}
-
-[color=secondary][outline=true]:hover {
-  background-color: #ddd;
-}
-
-[color=success]:not([outline]) {
-  background-color: #198754;
-  color: #fff;
-  border: 1px solid #198754;
-}
-
-[color=success]:not([outline]):hover {
-  background-color: #218838;
-}
-
-[color=success][outline=true] {
-  background-color: transparent;
-  border: 1px solid #198754;
-  color: #198754;
-  transition: 0.1s;
-}
-
-[color=success][outline=true]:hover {
-  background-color: #198754;
-  color: #fff;
-}
-
-[color=warning]:not([outline]) {
-  background-color: #ffc107;
-  color: #000;
-  border: 1px solid #ffc107;
-}
-
-[color=warning]:not([outline]):hover {
-  background-color: #e0a800;
-}
-
-[color=warning][outline=true] {
-  background-color: transparent;
-  border: 1px solid #ffc107;
-  color: #ffc107;
-  transition: 0.1s;
-}
-
-[color=warning][outline=true]:hover {
-  background-color: #ffc107;
-  color: #000;
-}
-
-[color=danger]:not([outline]) {
-  background-color: #dc3545;
-  color: #fff !important;
-  border: 1px solid #dc3545;
-}
-
-[color=danger]:not([outline]):hover {
-  background-color: #c82333;
-}
-
-[color=danger][outline=true] {
-  background-color: transparent;
-  border: 1px solid #dc3545;
-  color: #dc3545;
-  transition: 0.1s;
-}
-
-[color=danger][outline=true]:hover {
-  background-color: #dc3545;
-  color: #fff;
-}
-
-/*[disabled] {
-  background-color: #666 !important;
-  color: #fff !important;
-  border: 1px solid #666 !important;
-}*/
-
-.dialog-promise .dialog-promise-close-button:hover {
-    background-color: #aaa;
-}
-
-/* calendar */
-
-.pika-button {
-  background-color: #eee !important;
-  color: #666 !important;
-  border-radius: 0px !important;
-}
-
-.pika-button:hover {
-  background: #1976d2 !important;
-  color: #eee !important;
-  border-radius: 3px !important;
-}
-
-.date-year {
-  font-size: 100% !important;
-}
-
-/* proc input */
-.table-param-screen td[contenteditable="true"] {
-  border: 2px solid #ddd;
-  border-radius: 5px;
-  box-shadow: 0 0 5px #ddd;
-}
-
-/* proc result */
-
-.result-div {
-  padding: 8px 12px;
-  border-radius: 4px;
-  font-weight: 500;
-  width: fit-content;
-  min-height: none;
-}
-
-.result-div[result=success] {
-  background-color: #DCFCE7 !important;
-  color: #166534;
-  border-left: 4px solid #22C55E; 
-}
-
-.result-div[result=error] {
-  background-color: #FEF3C7 !important;
-  color: #92400E;
-  border-left: 4px solid #F59E0B;
-}
-
-.table-param-screen tr {
-  display: grid;
-}
-
-.table-param-screen td:not([contenteditable]) {
-  text-transform: uppercase;
-  font-size: x-small;
-  font-weight: bold;
-  color: #666;
-}
-
-.table-param-screen td[contenteditable] {
-  padding: 5px;
-  margin-bottom: -7px;
-  margin-top: -2px;
-  margin-left: 4px;
-}
-
-.table-param-screen a {
-  background-color: #1976d2 !important;
-  padding 8px;
-  color: #fff !important
-  border-radius: 5px;
+* {
+  font-family: 'Inter', Arial, sans-serif !important;
+}
+body {
+  background-color: #f8fafc !important; margin: 0;
+}
+
+#main-top-bar[dev-mode] {
+  background: repeating-linear-gradient(-45deg, #1976d2, #1976d2 8px, #5e7c9aff 8px, #5e7c9aff 16px) !important;
+}
+
+#main-top-bar {
+  top: 0;
+  background: #1976d2;
+  border: none;
+  padding-bottom: 0px;
+  display: flex;
+  box-sizing: border-box;
+}
+#main-top-bar * {
+  margin-left: 8px;
+  margin-top: 0px;
+}
+
+#main-top-bar1, .sub-menu-bar {
+  background: #1565c0;
+  border: none;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  display: flex;
+  align-items: center;
+  padding: 0 16px !important;
+}
+
+#main-top-bar > span {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  flex-wrap: wrap;
+}
+
+/* 1. Las luces son el inicio del bloque derecho (Order 1) */
+.right-lights {
+  order: 1;
+  margin-left: auto !important;
+}
+
+/* 2. Bob va en el medio (Order 2) */
+#active-user {
+  order: 2;
+  color: white;
+  margin-left: 10px !important;
+}
+
+#active-user, #right-menu-icon, .right-lights {
+  filter: brightness(0) invert(1); /* Iconos a blanco */
+}
+
+/* 3. Los puntos van al final (Order 3) */
+#right-menu-icon {
+  order: 3;
+  margin-left: 10px !important; /* Espacio respecto a Bob */
+  max-width:40px !important
+}
+
+#right-menu-icon, .right-lights img {
+  filter: brightness(0) invert(1) !important;
+  width: auto !important;
+  flex-shrink: 0 !important;
+}
+
+.top-menu-bar .menu-item, .sub-menu-bar .menu-item {
+  color: white;
+  background: transparent !important;
+  border: none;
+  font-size: 14px;
+  font-weight: 500;
+  text-transform: uppercase;
+  padding: 8px;
+  margin: 0;
+  border-radius: 0px;
+  text-decoration: none;
+  transition: background 0.2s;
+  border-radius: 0px !important;
+}
+
+.menu-item[menu-selected="yes"] {
+  background: rgba(0,0,0,0.15) !important;
+  box-shadow: inset 0 -3px 0 white;
+}
+
+.menu-item {
+  background-color: #1976d2;
+  border-radius: 3px;
+  color: #fff;
+  text-transform: uppercase;
+  font-weight: bold;
+  transition: 0.1s;
+  padding: 5px;
+}
+
+.menu-item:hover {
+  background-color: #0069d9 !important;
+}
+
+.menu-item[is-selected] {
+  background-color: #ddd !important;
+  color: #666 !important;
+}
+
+
+/* --- CONSOLA FLOTANTE --- */
+#mini-console {
+  position: fixed;
+  top: 55px;
+  right: 20px;
+  z-index: 2000;
+  background-color: #fde8e8;
+  color: #9b1c1c;
+  border: 1px solid #f8b4b4;
+  border-radius: 8px;
+  padding: 12px 12px 15px 8px;
+  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
+  white-space: pre-wrap;
+  max-width: 350px;
+}
+#mini-console:not(:empty) {
+  display: block;
+}
+
+button
+  @extend .menu-item
+
+/* BOTONES */
+
+[color] {
+  border-radius: 3px;
+  padding: 5px;
+  cursor: pointer;
+  text-transform: uppercase;
+  text-decoration: none;
+  font-weight: bold;
+}
+
+[color=primary]:not([outline]) {
+  background-color: #1976d2;
+  color: #fff;
+  border: 1px solid #1976d2;
+  transition: 0.1s;
+}
+
+[color=primary]:not([outline]):hover {
+  background-color: #0069d9;
+}
+
+[color=primary][outline=true] {
+  background-color: transparent;
+  border: 1px solid #1976d2;
+  color: #1976d2;
+  transition: 0.1s;
+}
+
+[color=primary][outline=true]:hover {
+  background-color: #1976d2;
+  color: #fff;
+}
+
+[color=secondary]:not([outline]) {
+  background-color: #666;
+  color: #fff;
+  border: 1px solid #666;
+}
+
+[color=secondary]:not([outline]):hover {
+  background-color: #5a6268;
+}
+
+[color=secondary][outline=true] {
+  background-color: transparent;
+  border: 1px solid #666;
+  color: #666;
+  transition: 0.1s;
+}
+
+[color=secondary][outline=true]:hover {
+  background-color: #ddd;
+}
+
+[color=success]:not([outline]) {
+  background-color: #198754;
+  color: #fff;
+  border: 1px solid #198754;
+}
+
+[color=success]:not([outline]):hover {
+  background-color: #218838;
+}
+
+[color=success][outline=true] {
+  background-color: transparent;
+  border: 1px solid #198754;
+  color: #198754;
+  transition: 0.1s;
+}
+
+[color=success][outline=true]:hover {
+  background-color: #198754;
+  color: #fff;
+}
+
+[color=warning]:not([outline]) {
+  background-color: #ffc107;
+  color: #000;
+  border: 1px solid #ffc107;
+}
+
+[color=warning]:not([outline]):hover {
+  background-color: #e0a800;
+}
+
+[color=warning][outline=true] {
+  background-color: transparent;
+  border: 1px solid #ffc107;
+  color: #ffc107;
+  transition: 0.1s;
+}
+
+[color=warning][outline=true]:hover {
+  background-color: #ffc107;
+  color: #000;
+}
+
+[color=danger]:not([outline]) {
+  background-color: #dc3545;
+  color: #fff !important;
+  border: 1px solid #dc3545;
+}
+
+[color=danger]:not([outline]):hover {
+  background-color: #c82333;
+}
+
+[color=danger][outline=true] {
+  background-color: transparent;
+  border: 1px solid #dc3545;
+  color: #dc3545;
+  transition: 0.1s;
+}
+
+[color=danger][outline=true]:hover {
+  background-color: #dc3545;
+  color: #fff;
+}
+
+/*[disabled] {
+  background-color: #666 !important;
+  color: #fff !important;
+  border: 1px solid #666 !important;
+}*/
+
+.dialog-promise .dialog-promise-close-button:hover {
+    background-color: #aaa;
+}
+
+
+/* proc input */
+.table-param-screen td[contenteditable="true"] {
+  border: 2px solid #ddd;
+  border-radius: 5px;
+  box-shadow: 0 0 5px #ddd;
+}
+
+/* proc result */
+
+.result-div {
+  padding: 8px 12px;
+  border-radius: 4px;
+  font-weight: 500;
+  width: fit-content;
+  min-height: none;
+}
+
+.result-div[result=success] {
+  background-color: #DCFCE7 !important;
+  color: #166534;
+  border-left: 4px solid #22C55E;
+}
+
+.result-div[result=error] {
+  background-color: #FEF3C7 !important;
+  color: #92400E;
+  border-left: 4px solid #F59E0B;
+}
+
+.table-param-screen tr {
+  display: grid;
+}
+
+.table-param-screen td:not([contenteditable]) {
+  text-transform: uppercase;
+  font-size: x-small;
+  font-weight: bold;
+  color: #666;
+}
+
+.table-param-screen td[contenteditable] {
+  padding: 5px;
+  margin-bottom: -7px;
+  margin-top: -2px;
+  margin-left: 4px;
+}
+
+.table-param-screen a {
+  background-color: #1976d2 !important;
+  padding 8px;
+  color: #fff !important
+  border-radius: 5px;
 }