diff --git a/css/litegraph.css b/css/litegraph.css index 437219e25..5d8b7886d 100755 --- a/css/litegraph.css +++ b/css/litegraph.css @@ -1,333 +1,334 @@ -/* this CSS contains only the basic CSS needed to run the app and use it */ - -.lgraphcanvas { - cursor: crosshair; - user-select: none; - -moz-user-select: none; - -webkit-user-select: none; -} - - -.litegraph.litecontextmenu { - position: fixed; - top: 100px; - left: 100px; - min-width: 100px; - color: #AAF; - padding: 0; - box-shadow: 0 0 10px black !important; - background-color: #2E2E2E !important; -} - -.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; - -moz-user-select: none; - -webkit-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; - -moz-user-select: none; - -webkit-user-select: none; - 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; - background-color: rgba(0,0,0,0.5); - padding-top: 4px; -} - -.litegraph.litesearchbox input, .litegraph.litesearchbox select { - margin-top: 3px; - min-width: 60px; - min-height: 1.5em; - background-color: black; - border: 0; - color: white; - padding-left: 10px; - margin-right: 5px; -} - -.litegraph.litesearchbox .name { - display: inline-block; - min-width: 60px; - min-height: 1.5em; - padding-left: 10px; -} - -.litegraph.litesearchbox .helper { - overflow: auto; - max-height: 200px; - margin-top: 2px; -} - -.litegraph.lite-search-item { - font-family:Tahoma, sans-serif; - background-color: rgba(0,0,0,0.5); - color: white; - padding-top: 2px; -} - -.litegraph.lite-search-item:hover, .litegraph.lite-search-item.selected { - cursor: pointer; - background-color: white; - color: black; -} - -/* OLD */ - -.graphcontextmenu { - padding: 4px; - min-width: 100px; -} - - -.graphcontextmenu-title { - color: #DDE; - background-color: #222; - margin: 0; - padding: 2px; - cursor: default; -} - -.graphmenu-entry { - box-sizing: border-box; - margin: 2px; - padding-left: 20px; - user-select: none; - -moz-user-select: none; - -webkit-user-select: none; - transition: all linear 0.3s; -} - -.graphmenu-entry.event, .litemenu-entry.event { - border-left: 8px solid orange; - padding-left: 12px; -} - -.graphmenu-entry.disabled { - opacity: 0.3; -} - -.graphmenu-entry.submenu { - border-right: 2px solid #EEE; -} - - -.graphmenu-entry:hover { - background-color: #555; -} - -.graphmenu-entry.separator { - background-color: #111; - border-bottom: 1px solid #666; - height: 1px; - width: calc( 100% - 20px ); - -moz-width: calc( 100% - 20px ); - -webkit-width: calc( 100% - 20px ); -} - -.graphmenu-entry .property_name { - display: inline-block; - text-align: left; - min-width: 80px; - min-height: 1.2em; -} - -.graphmenu-entry .property_value, .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; -} - -.graphdialog { - position: absolute; - top: 10px; - left: 10px; - min-height: 2em; - background-color: #333; - font-size: 1.2em; - box-shadow: 0 0 10px black !important; -} - -.graphdialog.rounded { - border-radius: 12px; - padding-right: 2px; -} - -.graphdialog .name { - display: inline-block; - min-width: 60px; - min-height: 1.5em; - padding-left: 10px; -} - -.graphdialog input, .graphdialog select { - margin: 3px; - min-width: 60px; - min-height: 1.5em; - background-color: black; - border: 0; - color: white; - padding-left: 10px; - outline: none; -} - -.graphdialog button { - margin-top: 3px; - vertical-align: top; -} - -.graphdialog button.rounded, .graphdialog input.rounded { - border-radius: 0 12px 12px 0; -} - -.graphdialog .helper { - overflow: auto; - max-height: 200px; -} - -.graphdialog .help-item { - padding-left: 10px; -} - -.graphdialog .help-item:hover, .graphdialog .help-item.selected { - cursor: pointer; - background-color: white; - color: black; -} - +/* this CSS contains only the basic CSS needed to run the app and use it */ + +.lgraphcanvas { + cursor: crosshair; + user-select: none; + -moz-user-select: none; + -webkit-user-select: none; +} + + +.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; +} + +.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; + -moz-user-select: none; + -webkit-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; + -moz-user-select: none; + -webkit-user-select: none; + 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; + background-color: rgba(0,0,0,0.5); + padding-top: 4px; +} + +.litegraph.litesearchbox input, .litegraph.litesearchbox select { + margin-top: 3px; + min-width: 60px; + min-height: 1.5em; + background-color: black; + border: 0; + color: white; + padding-left: 10px; + margin-right: 5px; +} + +.litegraph.litesearchbox .name { + display: inline-block; + min-width: 60px; + min-height: 1.5em; + padding-left: 10px; +} + +.litegraph.litesearchbox .helper { + overflow: auto; + max-height: 200px; + margin-top: 2px; +} + +.litegraph.lite-search-item { + font-family:Tahoma, sans-serif; + background-color: rgba(0,0,0,0.5); + color: white; + padding-top: 2px; +} + +.litegraph.lite-search-item:hover, .litegraph.lite-search-item.selected { + cursor: pointer; + background-color: white; + color: black; +} + +/* OLD */ + +.graphcontextmenu { + padding: 4px; + min-width: 100px; +} + + +.graphcontextmenu-title { + color: #DDE; + background-color: #222; + margin: 0; + padding: 2px; + cursor: default; +} + +.graphmenu-entry { + box-sizing: border-box; + margin: 2px; + padding-left: 20px; + user-select: none; + -moz-user-select: none; + -webkit-user-select: none; + transition: all linear 0.3s; +} + +.graphmenu-entry.event, .litemenu-entry.event { + border-left: 8px solid orange; + padding-left: 12px; +} + +.graphmenu-entry.disabled { + opacity: 0.3; +} + +.graphmenu-entry.submenu { + border-right: 2px solid #EEE; +} + + +.graphmenu-entry:hover { + background-color: #555; +} + +.graphmenu-entry.separator { + background-color: #111; + border-bottom: 1px solid #666; + height: 1px; + width: calc( 100% - 20px ); + -moz-width: calc( 100% - 20px ); + -webkit-width: calc( 100% - 20px ); +} + +.graphmenu-entry .property_name { + display: inline-block; + text-align: left; + min-width: 80px; + min-height: 1.2em; +} + +.graphmenu-entry .property_value, .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; +} + +.graphdialog { + position: absolute; + top: 10px; + left: 10px; + min-height: 2em; + background-color: #333; + font-size: 1.2em; + box-shadow: 0 0 10px black !important; +} + +.graphdialog.rounded { + border-radius: 12px; + padding-right: 2px; +} + +.graphdialog .name { + display: inline-block; + min-width: 60px; + min-height: 1.5em; + padding-left: 10px; +} + +.graphdialog input, .graphdialog select { + margin: 3px; + min-width: 60px; + min-height: 1.5em; + background-color: black; + border: 0; + color: white; + padding-left: 10px; + outline: none; +} + +.graphdialog button { + margin-top: 3px; + vertical-align: top; +} + +.graphdialog button.rounded, .graphdialog input.rounded { + border-radius: 0 12px 12px 0; +} + +.graphdialog .helper { + overflow: auto; + max-height: 200px; +} + +.graphdialog .help-item { + padding-left: 10px; +} + +.graphdialog .help-item:hover, .graphdialog .help-item.selected { + cursor: pointer; + background-color: white; + color: black; +} +