body { background-color: #303030; } chunk { color: #ffffff; } #gametext.adventure action { color: #9ff7fa; font-weight: bold; } #gametext comment { color: #888; font-style: italic; } chunk.editing, chunk.editing * { color: #cdf !important; font-weight: normal !important; font-style: normal !important; } .setting-value-warning { color: #ff7777; } .setting-value-warning:focus { color: #ffaaaa !important; } .settinglabel input { width: 5ch; background-color: inherit; border: none; outline: none; } .settinglabel input:focus { color: #cdf; } #gametext, chunk, chunk * { outline: 0px solid transparent; } #topmenu { background-color: #757575; padding: 10px; display: flex; } body.connected #topmenu, #topmenu.always-available { background-color: #337ab7; } #topic { margin-top: 20px; resize: none; overflow: auto; background-color: #404040; color: #ffffff; } #rngmemory { height: 80px; resize: none; overflow:auto; background-color: #404040; color: #ffffff; } #chatname { background-color: #404040; color: #ffffff; width: 200px; margin-left: 10px; } #menuitems { display: flex; width: 100%; } #navbar { margin: 0px; } #navbar li { margin-right: 5px; background-color: #828282; border-radius: 5px; } body.connected #navbar li, #navbar li.always-available { background-color: #4787be; } #navbar li > a { color: #ffffff; font-weight: bold; } #settingsmenu { display: flex; flex-wrap: wrap; background-color: #4d4d4d; padding: 10px; } body.connected #settingsmenu, #settingsmenu.always-available { background-color: #295071; } #formatmenu { display:none; background-color: #4d4d4d; padding: 10px; } body.connected #formatmenu, #formatmenu.always-available { background-color: #295071; } #connectstatusdiv { display: flex; text-align: right; } #gamescreen { overflow-x: hidden; height: 490px; margin-top: 10px; display: flex; vertical-align: bottom; background-color: #262626; color: #ffffff; font-size: 12pt; font-family: "Helvetica"; } #gamescreen.wigamescreen { padding: 10px; overflow-y: scroll; } #gamescreen span { align-self: flex-end; } #gametext { max-height: 100%; width: 100%; word-wrap: break-word; padding: 10px; overflow-y: auto; } #seqselmenu { display:none; padding: 10px; border-top: 2px solid #303030; background-color: #262626; } #actionmenu { margin-top: 10px; } #actionmenuitems { } #actionmenuitems button { width: 80px; } #messagefield { margin-left: 20px; } #inputrow.show_mode { grid-template-columns: 7% 83% 10%; } #inputrow { margin-top: 10px; padding: 0px; width: 100%; display: grid; grid-template-columns: 0% 90% 10%; } #inputrowmode { position: relative; padding-right: 0px; } #inputrowleft { padding-right: 10px; } #inputrowright { position: relative; } #input_text { height: 80px; resize: none; overflow:auto; background-color: #404040; color: #ffffff; resize: vertical; } #btnmode { width: 100%; height: 100%; overflow: auto; overflow-x: hidden; } #btnsend { width: 100%; height: 100%; } #btnsend.wait { background-color: #6c6c6e; } #btnsend.wait:hover { background-color: #98989a; } #waitanim { pointer-events: none; position:absolute; top:18px; left:5px; } #anoterowcontainer { display: none; } #anoterow { margin-top: 10px; padding: 0px; width: 100%; display: grid; grid-template-columns: 90% 10%; } #anoterowleft { padding-right: 10px; } #anoteinput, #anotetemplate { background-color: #404040; color: #ffffff; resize: none; overflow: auto; } #anoteinput { height: 60px; } #anotetemplate { height: 60px; } #anoteslidelabel { color: #ffffff; display: grid; grid-template-columns: 80% 20%; } #popupcontainer { position: absolute; top: 0px; left: 0px; z-index: 3; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); flex-direction: column; align-items: center; } #popup { width: 75%; min-width: 500px; max-width: 1000px; background-color: #262626; margin-top: 100px; } #popuptitlebar { padding: 10px; background-color: #757575; } body.connected #popuptitlebar, #popuptitlebar.always-available { background-color: #337ab7; } #popuptitletext { height: 100%; display: flex; align-items:center; color: #ffffff; font-size: 12pt; } #popuplistheader { padding-left: 10px; display: grid; grid-template-columns: 28% 10% 60%; color: #737373; } #popupcontent { height: 325px; overflow-y: scroll; } #popupfooter { width: 100%; padding: 10px; display: flex; justify-content: center; background-color: #4d4d4d; } body.connected #popupfooter, #popupfooter.always-available { background-color: #295071; } #popupfooter button { width: 100px; margin-left: 10px; margin-right: 10px; } #wimenu { padding-top: 10px; max-height: 100%; width: 100%; } #aidgpopup { width: 350px; background-color: #262626; margin-top: 100px; } #aidgpromptnum { background-color: #404040; color: #ffffff; } #saveaspopup { width: 350px; background-color: #262626; margin-top: 200px; } #loadpopup { width: 500px; background-color: #262626; margin-top: 100px; } @media (max-width: 768px) { #loadpopup { width: 100%; background-color: #262626; margin-top: 100px; } } #loadpopupdelete { width: 350px; background-color: #262626; margin-top: 200px; } #loadpopuprename { width: 350px; background-color: #262626; margin-top: 200px; } #loadlistcontent { height: 325px; overflow-y: scroll; } #sppopup { width: 800px; background-color: #262626; margin-top: 100px; } @media (max-width: 768px) { #sppopup { width: 100%; background-color: #262626; margin-top: 100px; } } #sppopupdelete { width: 350px; background-color: #262626; margin-top: 200px; } #sppopuprename { width: 350px; background-color: #262626; margin-top: 200px; } #splistcontent { height: 425px; overflow-y: scroll; overflow-wrap: anywhere; } #uspopup { width: 800px; background-color: #262626; margin-top: 100px; } @media (max-width: 768px) { #uspopup { width: 100%; background-color: #262626; margin-top: 100px; } } #uslistunloaded { height: 425px; overflow-y: scroll; overflow-wrap: anywhere; } #uslistloaded { height: 425px; overflow-y: scroll; overflow-wrap: anywhere; } #samplerspopup { width: 300px; background-color: #262626; margin-top: 100px; } @media (max-width: 768px) { #samplerspopup { width: 100%; background-color: #262626; margin-top: 100px; } } #samplerslist { height: 300px; overflow-y: scroll; overflow-wrap: anywhere; } #nspopup { width: 350px; background-color: #262626; margin-top: 200px; } #rspopup { width: 800px; background-color: #262626; margin-top: 50px; } /*================= Classes =================*/ body:not(.connected) .btn-primary { background-color: #757575; border-color: #4a4a4a; } .btn-primary.always-available { background-color: #337ab7; border-color: #2e6da4; } body:not(.connected) .btn-primary.focus, body:not(.connected) .btn-primary:focus { background-color: #5c5c5c; border-color: #292929; } .btn-primary.focus.always-available, .btn-primary.always-available:focus { background-color: #286090; border-color: #122b40; } body:not(.connected) .btn-primary:hover { background-color: #5c5c5c; border-color: #4a4a4a; } .btn-primary.always-available:hover { background-color: #286090; border-color: #204d74; } body:not(.connected) a.dropdown-item:focus, body:not(.connected) a.dropdown-item:hover { color: #4f4f4f; } a.dropdown-item.always-available:focus, a.dropdown-item.always-available:hover { color: #23527c !important; } .aidgpopupcontent { padding: 10px 40px 10px 40px; } .aidgpopuplistheader { color: #737373; text-align: center; } .dialogheader { padding: 10px 40px 10px 40px; color: #737373; text-align: center; } .anotelabel { font-size: 10pt; color: #ffffff; } .anotelabel:not(.no-padding) { padding-top: 10px; } .airange { width: 100px; } .box { border-radius: 5px; border: 1px solid #646464; padding: 4px; background: #373737; } .box-label { color: #ffffff; padding-left: 10px; padding-right: 10px; padding-bottom: 5px; padding-top: 5px; display: inline-block; } .chunkhov:hover { color: #c0fc51; cursor: pointer; } .chunkhov:hover > action { color: #00fa00; } .colorfade, .colorfade * { -moz-transition: color 1s ease-in, text-shadow 1s ease-in; -o-transition: color 1s ease-in, text-shadow 1s ease-in; -webkit-transition: color 1s ease-in, text-shadow 1s ease-in; transition: color 1s ease-in, text-shadow 1s ease-in; } .color_orange { color: #f7a223; } .color_green { color: #3bf723; } .color_cyan { color: #7afaff; } .color_red { color: #ff0000; } .dropdown-menu { background-color: #757575; width: 200px; } body.connected .dropdown-menu, .dropdown-menu.always-available { background-color: #337ab7; } .dropdown-item { display: block; padding: 10px; color: #ffffff; border-bottom: 1px solid #4d4d4d; } body.connected .dropdown-item, .dropdown-item.always-available { border-bottom: 1px solid #295071; } .dropdown-item:first-child { border-top: 1px solid #4d4d4d; } body.connected .dropdown-item:first-child, .dropdown-item:first-child.always-available { border-top: 1px solid #295071; } .dropdown-item:hover { background-color: #bababa; text-decoration: none; } body.connected .dropdown-item:hover, .dropdown-item.always-available:hover { background-color: #98bcdb; } .edit-flash, .edit-flash * { color: #3bf723 !important; } .status-flash, .status-flash { color: #fce94f !important; text-shadow: 0 0 50px #fce94f, 0 0 50px #fce94f, 0 0 10px #fce94f, 0 0 10px #fce94f, 0 0 10px #fce94f, 0 0 10px #fce94f, 0 0 10px #fce94f; } .flex { display: flex; align-items: center; } .flex-row-container { display: flex; flex-flow: wrap; } .flex-row { display: flex; flex-flow: row; flex-grow: 1; width: 100%; } .flex-push-right { margin-left: auto; } .formatcolumn { width: 25%; padding-left: 10px; padding-right: 10px; display: inline-block; } .formatcolumn > div:first-child { margin-bottom: 5px; } .formatrow:only-child { } .formatlabel { color: #ffffff; padding-left: 5px; } .hidden { display: none; } .heightfull { height: 100%; } .heighthalf { height: 50%; } .wiheightfull { height: 90%; } .wiheighthalf { height: 45%; } .wicomment { height: 10%; grid-column-start: 2; grid-column-end: 4; padding-top: 10px; padding-bottom: 6px; padding-right: 0px; } .wihandle, .wifolderhandle { grid-row: span 2; line-height: 100%; opacity: 30%; font-size: 8px; position: relative; } .wifoldericon { font-size: 28px; position: relative; grid-row: span 2; } .wicentered { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); } .wicentered-vertical { position: absolute; top: 50%; transform: translate(0%, -50%); -moz-transform: translate(0%, -50%); -webkit-transform: translate(0%, -50%); -ms-transform: translate(0%, -50%); -o-transform: translate(0%, -50%); } .wihandle:hover { cursor: move; } .wisortable-placeholder { height: 4px; transform: translate(0%, -14px); -moz-transform: translate(0%, -14px); -webkit-transform: translate(0%, -14px); -ms-transform: translate(0%, -14px); -o-transform: translate(0%, -14px); background-color: #3bf723; } .ussortable-placeholder, .samplerssortable-placeholder { height: 4px; background-color: #3bf723; } .wisortable-container.folder-expanded { padding-bottom: 50px; } .wisortable-container[folder-uid] { display: grid; grid-template-columns: 5% 95%; } .wifoldergutter-container { cursor: pointer; margin-right: 14px; display: grid; } .wifoldergutter { background-color: #cdf; margin-left: 48%; margin-right: 48%; margin-bottom: 20px; } .wisortable-body { } .wisortable-dummy { padding: 6px; } .helpicon { display: inline-block; font-family: sans-serif; font-weight: bold; text-align: center; width: 2.2ex; height: 2.4ex; font-size: 1.4ex; line-height: 1.8ex; border-radius: 1.2ex; margin-right: 4px; padding: 1px; color: #295071; background: #ffffff; border: 1px solid white; text-decoration: none; } .statusicon { display: inline-block; font-weight: bold; text-align: center; padding-left: 8px; padding-right: 8px; font-size: 30px !important; font-weight: bold; text-align: center; font-size: 1.4ex; line-height: 1.8ex; text-decoration: none; color: #9e9e9e; } body.connected .statusicon, .statusicon.always-available { color: #68a2d4; } .statusicon.active { color: #3bf723 !important; } .helpicon:hover, .statusicon:hover { cursor: pointer; } .helpicon:hover .helptext, .statusicon:hover .statustext, .statusicon.statustoggled .statustext { display: inline-block; width: 250px; background-color: #1f2931; color: #ffffff; font-size: 11pt; font-weight: normal; line-height: normal; border-radius: 6px; padding: 15px; margin-left:10px; border: 1px solid #337ab7; } .statusicon:hover .statustext.statustext-wide, .statusicon.statustoggled .statustext.statustext-wide { width: 350px; } .statusiconlabel { pointer-events: none; color: #757575; text-align: center; font-weight: bold; font-size: 13px; } body.connected .statusiconlabel, .statusiconlabel.always-available { color: #337ab7; } #usiconlabel { transform: translate(-3px, 10px); -moz-transform: translate(-3px, 10px); -webkit-transform: translate(-3px, 10px); -ms-transform: translate(-3px, 10px); -o-transform: translate(-3px, 10px); } .status-container { z-index: 1; text-shadow: none !important; } .helptext, .statustext { display: none; font-family: sans-serif; position: absolute; z-index: 1; text-shadow: none !important; } .statustext { transform: translate(-105%, 30px); -moz-transform: translate(-105%, 30px); -webkit-transform: translate(-105%, 30px); -ms-transform: translate(-105%, 30px); -o-transform: translate(-105%, 30px); } .statusheader { padding-bottom: 10px; } #stat-usactive { text-align: left; height: 270px; overflow-y: scroll; position: relative; padding-left: 20px; } .justifyleft { text-align: left; } .justifyright { text-align: right; } .layer-container { display: grid; } .layer-bottom { grid-area: 1/1; z-index: 0; } .layer-top { grid-area: 1/1; z-index: 2; } .icon-container { position: relative; } .folder-expand { opacity: 20%; } .folder-expand:hover { opacity: 44%; cursor: pointer; } .folder-expand.folder-expanded { opacity: 80% !important; } .folder-expand.folder-expanded:hover { opacity: 100% !important; } .selective-key-icon { position: absolute !important; top: 5px !important; right: 28px !important; z-index: 1; opacity: 20%; } *:hover > .selective-key-icon { opacity: 40%; } .selective-key-icon:hover { opacity: 65%; cursor: pointer; } .selective-key-icon-enabled { color: #3bf723; opacity: 65% } *:hover > .selective-key-icon-enabled { opacity: 65%; } .selective-key-icon-enabled:hover { opacity: 100% } .selective-key-icon-clickthrough { opacity: 0% !important; pointer-events: none; } .selective-key-icon-clickthrough.selective-key-icon-enabled { opacity: 35% !important; } .constant-key-icon { position: absolute !important; top: 5px !important; right: 5px !important; z-index: 1; transform: rotate(20deg); -moz-transform: rotate(20deg); -webkit-transform: rotate(20deg); -ms-transform: rotate(20deg); -o-transform: rotate(20deg); opacity: 20%; } *:hover > .constant-key-icon { opacity: 40%; } .constant-key-icon:hover { opacity: 65%; cursor: pointer; } .constant-key-icon-enabled { color: #3bf723; opacity: 65% } *:hover > .constant-key-icon-enabled { opacity: 65%; } .constant-key-icon-enabled:hover { opacity: 100% } .constant-key-icon-clickthrough { opacity: 0% !important; pointer-events: none; } .constant-key-icon-clickthrough.constant-key-icon-enabled { opacity: 35% !important; } .loadlistheader { padding-left: 68px; padding-right: 20px; display: flex; color: #737373; } .loadlistitem { padding: 0px 0px 0px 0px; display: flex; flex-grow: 1; color: #ffffff; -moz-transition: background-color 0.25s ease-in; -o-transition: background-color 0.25s ease-in; -webkit-transition: background-color 0.25s ease-in; transition: background-color 0.25s ease-in; } .loadlistitem:hover { cursor: pointer; background-color: #688f1f; } .breadcrumbitem { padding: 5px 10px 5px 10px; color: #ffffff; background-color: transparent; border: none; -moz-transition: background-color 0.25s ease-in; -o-transition: background-color 0.25s ease-in; -webkit-transition: background-color 0.25s ease-in; transition: background-color 0.25s ease-in; } .breadcrumbitem:hover { cursor: pointer; background-color: #688f1f; } hr { padding: 0px; margin: 0px; } .loadlistpadding { padding-right: 10px; } .loadlisticon { color: #333 } .loadlisticon.allowed { color: #ddd } .loadlisticon.allowed:hover { cursor: pointer; } .loadlisticon-delete.allowed:hover { color: #ef2929 } .loadlisticon-rename.allowed:hover { color: #fce94f } .usheadergrid { display: grid; grid-template-columns: 50% 50%; color: #ffffff; text-align: center; padding-top: 5px; padding-bottom: 5px; } .uslistgrid { display: grid; grid-template-columns: 50% 50%; } .navbar .navbar-nav .nav-link:hover { border-radius: 5px; background-color: #bababa; } body.connected .navbar .navbar-nav .nav-link:hover, .navbar .navbar-nav .nav-link.always-available:hover { background-color: #98bcdb; } body .navbar .navbar-nav .dropdown-item.always-available { background-color: #337ab7; } body .navbar .navbar-nav .dropdown-item.always-available:hover { background-color: #98bcdb; } .navbar .navbar-nav .nav-link:focus { border-radius: 5px; background-color: #bababa; } body.connected .navbar .navbar-nav .nav-link:focus, .navbar .navbar-nav .nav-link.always-available:focus { background-color: #98bcdb; } .navbar-toggler { background-color: #757575; border: 1px solid #bababa; height: 45px; width: 60px; border-radius: 6px; } body.connected .navbar-toggler, .navbar-toggler.always-available { border: 1px solid #98bcdb; } body .navbar-toggler { background-color: #337ab7; } .navbar-toggler:hover { background-color: #bababa; } body.connected .navbar-togger:hover, .navbar-togger.always-available:hover { background-color: #98bcdb; } @media (min-width: 768px) { .navbar-toggler { display: none; } } @media (max-width: 768px) { .nav-item { margin-bottom: 3px; } } .navbar-button-bar { display: block; height: 2px; width: 42px; border: 1px solid #fff; } .navbar-button-bar + .navbar-button-bar { margin-top: 4px; } .navcontainer { width: 100%; } .nowrap { white-space: nowrap; } .popupcontainer { position: absolute; top: 0px; left: 0px; z-index: 3; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); flex-direction: column; align-items: center; } .popuplistitem { padding: 5px 10px 5px 10px; display: grid; grid-template-columns: 30% 10% 60%; color: #ffffff; -moz-transition: background-color 0.25s ease-in; -o-transition: background-color 0.25s ease-in; -webkit-transition: background-color 0.25s ease-in; transition: background-color 0.25s ease-in; } .popuplistitem:hover { cursor: pointer; background-color: #688f1f; } .popuplistselected { background-color: #688f1f; } .popuptitlebar { padding: 10px; background-color: #757575; } body.connected .popuptitlebar { background-color: #337ab7; } .popuptitletext { height: 100%; display: flex; align-items:center; color: #ffffff; font-size: 12pt; } .popuperror { color: #ef2929; text-align: center; } .popupfooter { width: 100%; padding: 10px; display: flex; justify-content: center; background-color: #4d4d4d; } body.connected .popupfooter, .popupfooter.always-available { background-color: #295071; } .popupfooter button { width: 100px; margin-left: 10px; margin-right: 10px; } .saveasoverwrite { color: #ff9900; font-weight: bold; text-align: center; } .seqselheader { color: #737373; } .seqselitem { border: 1px solid #959595; border-radius: 5px; padding: 5px; color: #ffffff; -moz-transition: all 0.15s ease-in; -o-transition: all 0.15s ease-in; -webkit-transition: all 0.15s ease-in; transition: all 0.15s ease-in; white-space: pre-wrap; } .seqselitem:hover { cursor: pointer; border: 1px solid #ffffff; background-color: #3a3a3a; } .seqselitem + .seqselitem { margin-top: 5px; } .settingitem { width: 20%; padding-left: 10px; padding-right: 10px; padding-bottom: 5px; padding-top: 5px; display: inline-block; border-bottom: 1px solid #12324f; } .settingsave { width: 10%; display: inline-block; } .settinglabel { color: #ffffff; display: flex; flex-flow: wrap; } .settingminmax { display: grid; grid-template-columns: 50% 50%; } .settingminmax div { font-size: 8pt; color: #ffffff; } .spacer { display: inline-block; width: 50px; } .splistheader { padding-left: 68px; padding-right: 20px; display: flex; color: #737373; } .splistitem { padding: 12px 10px 12px 10px; display: flex; flex-grow: 1; color: #ffffff; -moz-transition: background-color 0.25s ease-in; -o-transition: background-color 0.25s ease-in; -webkit-transition: background-color 0.25s ease-in; transition: background-color 0.25s ease-in; } .splistitemsub { color: #ba9; text-align: right; } .splistitem:hover { cursor: pointer; background-color: #688f1f; } .uslistitem, .samplerslistitem { padding: 12px 10px 12px 10px; display: flex; flex-grow: 1; color: #ffffff; -moz-transition: background-color 0.25s ease-in; -o-transition: background-color 0.25s ease-in; -webkit-transition: background-color 0.25s ease-in; transition: background-color 0.25s ease-in; } .uslistitemsub, .samplerslistitemsub { color: #ba9; } .uslistitem:hover, .samplerslistitem:hover { cursor: move; background-color: #688f1f; } .width-auto { width: auto; } .wilistitem { height: 120px; display: grid; grid-template-columns: 4% 30% 63.5% 2.5%; margin-bottom: 24px; background-color: #212122; } .wilistfolder { height: 60px; grid-column: span 2; display: grid; grid-template-columns: 4% 5% 88.5% 2.5%; margin-bottom: 24px; background-color: #212122; } .wientry { padding-left: 10px; padding-right: 0px; background-color: #212122; } .wientry > textarea { height: 90%; resize: none; overflow:auto; background-color: #404040; color: #ffffff; } .wicomment > textarea { resize: none; height: 0px; overflow: hidden; background-color: #404040; color: #ffffff; } .wifoldername { position: relative; grid-row: span 2; } .wifoldername > div { width: 100%; padding-left: 10px; } .wifoldername > div > textarea { font-size: 20px; resize: none; height: 0px; overflow: hidden; background-color: #404040; color: #ffffff; } .wikey { background-color: #212122; } .wikey > input { background-color: #404040; color: #ffffff; } .wiremove { grid-row-start: 1; grid-row-end: 3; } .wiremove > button { width: 80%; overflow: hidden; font-size: 12pt; } .model_layers { width: 3ch; background-color: inherit; border: none; outline: none; } .model_layers:focus { color: #cdf; }