Extracted ContextMenu css

litegraph-tsx · Jul 29, 2024 · 596b9bc · 596b9bc
1 parent 6f93854
commit 596b9bc
Show file tree

Hide file tree

Showing 2 changed files with 169 additions and 154 deletions.
diff --git a/css/contextmenu.css b/css/contextmenu.css
@@ -0,0 +1,165 @@
+
+.litegraph.litecontextmenu {
+    font-family: Tahoma, sans-serif;
+    position: fixed;
+    top: 100px;
+    left: 100px;
+    min-width: 100px;
+    color: #aaf;
+    padding: 0;
+    box-shadow: 0 0 10px black !important;
+    background-color: #2e2e2e !important;
+	z-index: 10;
+}
+
+.litegraph.litecontextmenu.dark {
+    background-color: #000 !important;
+}
+
+.litegraph.litecontextmenu .litemenu-title img {
+    margin-top: 2px;
+    margin-left: 2px;
+    margin-right: 4px;
+}
+
+.litegraph.litecontextmenu .litemenu-entry {
+    margin: 2px;
+    padding: 2px;
+}
+
+.litegraph.litecontextmenu .litemenu-entry.submenu {
+    background-color: #2e2e2e !important;
+}
+
+.litegraph.litecontextmenu.dark .litemenu-entry.submenu {
+    background-color: #000 !important;
+}
+
+.litegraph .litemenubar ul {
+    font-family: Tahoma, sans-serif;
+    margin: 0;
+    padding: 0;
+}
+
+.litegraph .litemenubar li {
+    font-size: 14px;
+    color: #999;
+    display: inline-block;
+    min-width: 50px;
+    padding-left: 10px;
+    padding-right: 10px;
+    user-select: none;
+    cursor: pointer;
+}
+
+.litegraph .litemenubar li:hover {
+    background-color: #777;
+    color: #eee;
+}
+
+.litegraph .litegraph .litemenubar-panel {
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    min-width: 100px;
+    background-color: #444;
+    box-shadow: 0 0 3px black;
+    padding: 4px;
+    border-bottom: 2px solid #aaf;
+    z-index: 10;
+}
+
+.litegraph .litemenu-entry,
+.litemenu-title {
+    font-size: 12px;
+    color: #aaa;
+    padding: 0 0 0 4px;
+    margin: 2px;
+    padding-left: 2px;
+    user-select: none;
+    cursor: pointer;
+}
+
+.litegraph .litemenu-entry .icon {
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    margin: 2px;
+    vertical-align: top;
+}
+
+.litegraph .litemenu-entry.checked .icon {
+    background-color: #aaf;
+}
+
+.litegraph .litemenu-entry .more {
+    float: right;
+    padding-right: 5px;
+}
+
+.litegraph .litemenu-entry.disabled {
+    opacity: 0.5;
+    cursor: default;
+}
+
+.litegraph .litemenu-entry.separator {
+    display: block;
+    border-top: 1px solid #333;
+    border-bottom: 1px solid #666;
+    width: 100%;
+    height: 0px;
+    margin: 3px 0 2px 0;
+    background-color: transparent;
+    padding: 0 !important;
+    cursor: default !important;
+}
+
+.litegraph .litemenu-entry.has_submenu {
+    border-right: 2px solid cyan;
+}
+
+.litegraph .litemenu-title {
+    color: #dde;
+    background-color: #111;
+    margin: 0;
+    padding: 2px;
+    cursor: default;
+}
+
+.litegraph .litemenu-entry:hover:not(.disabled):not(.separator) {
+    background-color: #444 !important;
+    color: #eee;
+    transition: all 0.2s;
+}
+
+.litegraph .litemenu-entry .property_name {
+    display: inline-block;
+    text-align: left;
+    min-width: 80px;
+    min-height: 1.2em;
+}
+
+.litegraph .litemenu-entry .property_value {
+    display: inline-block;
+    background-color: rgba(0, 0, 0, 0.5);
+    text-align: right;
+    min-width: 80px;
+    min-height: 1.2em;
+    vertical-align: middle;
+    padding-right: 10px;
+}
+
+.litemenu-entry.event {
+    border-left: 8px solid orange;
+    padding-left: 12px;
+}
+
+.litemenu-entry .property_value {
+    display: inline-block;
+    background-color: rgba(0, 0, 0, 0.5);
+    text-align: right;
+    min-width: 80px;
+    min-height: 1.2em;
+    vertical-align: middle;
+    padding-right: 10px;
+}
diff --git a/css/litegraph.css b/css/litegraph.css
@@ -1,5 +1,7 @@
 /* this CSS contains only the basic CSS needed to run the app and use it */
 
+@import url('./contextmenu.css');
+
 .lgraphcanvas {
     /*cursor: crosshair;*/
     user-select: none;
@@ -11,156 +13,6 @@
     box-sizing: border-box;
 }
 
-.litegraph.litecontextmenu {
-    font-family: Tahoma, sans-serif;
-    position: fixed;
-    top: 100px;
-    left: 100px;
-    min-width: 100px;
-    color: #aaf;
-    padding: 0;
-    box-shadow: 0 0 10px black !important;
-    background-color: #2e2e2e !important;
-	z-index: 10;
-}
-
-.litegraph.litecontextmenu.dark {
-    background-color: #000 !important;
-}
-
-.litegraph.litecontextmenu .litemenu-title img {
-    margin-top: 2px;
-    margin-left: 2px;
-    margin-right: 4px;
-}
-
-.litegraph.litecontextmenu .litemenu-entry {
-    margin: 2px;
-    padding: 2px;
-}
-
-.litegraph.litecontextmenu .litemenu-entry.submenu {
-    background-color: #2e2e2e !important;
-}
-
-.litegraph.litecontextmenu.dark .litemenu-entry.submenu {
-    background-color: #000 !important;
-}
-
-.litegraph .litemenubar ul {
-    font-family: Tahoma, sans-serif;
-    margin: 0;
-    padding: 0;
-}
-
-.litegraph .litemenubar li {
-    font-size: 14px;
-    color: #999;
-    display: inline-block;
-    min-width: 50px;
-    padding-left: 10px;
-    padding-right: 10px;
-    user-select: none;
-    cursor: pointer;
-}
-
-.litegraph .litemenubar li:hover {
-    background-color: #777;
-    color: #eee;
-}
-
-.litegraph .litegraph .litemenubar-panel {
-    position: absolute;
-    top: 5px;
-    left: 5px;
-    min-width: 100px;
-    background-color: #444;
-    box-shadow: 0 0 3px black;
-    padding: 4px;
-    border-bottom: 2px solid #aaf;
-    z-index: 10;
-}
-
-.litegraph .litemenu-entry,
-.litemenu-title {
-    font-size: 12px;
-    color: #aaa;
-    padding: 0 0 0 4px;
-    margin: 2px;
-    padding-left: 2px;
-    user-select: none;
-    cursor: pointer;
-}
-
-.litegraph .litemenu-entry .icon {
-    display: inline-block;
-    width: 12px;
-    height: 12px;
-    margin: 2px;
-    vertical-align: top;
-}
-
-.litegraph .litemenu-entry.checked .icon {
-    background-color: #aaf;
-}
-
-.litegraph .litemenu-entry .more {
-    float: right;
-    padding-right: 5px;
-}
-
-.litegraph .litemenu-entry.disabled {
-    opacity: 0.5;
-    cursor: default;
-}
-
-.litegraph .litemenu-entry.separator {
-    display: block;
-    border-top: 1px solid #333;
-    border-bottom: 1px solid #666;
-    width: 100%;
-    height: 0px;
-    margin: 3px 0 2px 0;
-    background-color: transparent;
-    padding: 0 !important;
-    cursor: default !important;
-}
-
-.litegraph .litemenu-entry.has_submenu {
-    border-right: 2px solid cyan;
-}
-
-.litegraph .litemenu-title {
-    color: #dde;
-    background-color: #111;
-    margin: 0;
-    padding: 2px;
-    cursor: default;
-}
-
-.litegraph .litemenu-entry:hover:not(.disabled):not(.separator) {
-    background-color: #444 !important;
-    color: #eee;
-    transition: all 0.2s;
-}
-
-.litegraph .litemenu-entry .property_name {
-    display: inline-block;
-    text-align: left;
-    min-width: 80px;
-    min-height: 1.2em;
-}
-
-.litegraph .litemenu-entry .property_value {
-    display: inline-block;
-    background-color: rgba(0, 0, 0, 0.5);
-    text-align: right;
-    min-width: 80px;
-    min-height: 1.2em;
-    vertical-align: middle;
-    padding-right: 10px;
-}
-
 .litegraph.litesearchbox {
     font-family: Tahoma, sans-serif;
     position: absolute;
@@ -506,8 +358,7 @@
     transition: all linear 0.3s;
 }
 
-.graphmenu-entry.event,
-.litemenu-entry.event {
+.graphmenu-entry.event {
     border-left: 8px solid orange;
     padding-left: 12px;
 }
@@ -538,8 +389,7 @@
     min-height: 1.2em;
 }
 
-.graphmenu-entry .property_value,
-.litemenu-entry .property_value {
+.graphmenu-entry .property_value {
     display: inline-block;
     background-color: rgba(0, 0, 0, 0.5);
     text-align: right;