1724 lines
26 KiB
CSS
1724 lines
26 KiB
CSS
body {
|
|
background-color: #303030;
|
|
}
|
|
|
|
chunk {
|
|
color: #ffffff;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
#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_old {
|
|
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: 310px;
|
|
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;
|
|
}
|
|
|
|
.menu_icon {
|
|
position: fixed;
|
|
top:10px;
|
|
left: 5px;
|
|
z-index:100;
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.SideMenu {
|
|
height: 100%;
|
|
width: 0;
|
|
position: fixed;
|
|
z-index: 1;
|
|
top: 0;
|
|
left: 0;
|
|
background-color: #111;
|
|
overflow-x: hidden;
|
|
transition: 0.5s;
|
|
padding-top: 60px;
|
|
}
|
|
|
|
.SideMenu.open {
|
|
width: 450px;
|
|
}
|
|
|
|
@media only screen and (max-width: 768px) {
|
|
.SideMenu.open {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
|
|
.menubar1, .menubar2, .menubar3 {
|
|
width: 21px;
|
|
height: 3px;
|
|
background-color: #999;
|
|
margin: 3px 0;
|
|
transition: 0.4s;
|
|
}
|
|
|
|
.change .menubar1 {
|
|
transform: translate(0px, 6px) rotate(-45deg);
|
|
}
|
|
|
|
.change .menubar2 {opacity: 0;}
|
|
|
|
.change .menubar3 {
|
|
transform: translate(0px, -6px) rotate(45deg);
|
|
}
|
|
|
|
|
|
/*---------------------------------- Popup -------------------------------------------------*/
|
|
.new_popup {
|
|
position: absolute;
|
|
top: 10vh;
|
|
left: 10%;
|
|
z-index: 999;
|
|
width: 80%;
|
|
height: 80vh;
|
|
background-color: black;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: #474B4F;
|
|
color: white;
|
|
}
|
|
|
|
.new_popup .title {
|
|
width: 100%;
|
|
background-color: #337AB7;
|
|
text-align: center;
|
|
font-size: 1.3em;
|
|
}
|
|
|
|
.new_popup .popup_list_area {
|
|
height: 70vh;
|
|
overflow-x: hidden;
|
|
}
|
|
.new_popup .item {
|
|
width: 100%;
|
|
background-color: #262626;
|
|
padding: 2px;
|
|
display: grid;
|
|
grid-template-areas: "folder_icon delete_icon edit_icon rename_icon file";
|
|
grid-template-columns: 20px 20px 20px 20px auto;
|
|
|
|
}
|
|
|
|
.new_popup .item .folder_icon {
|
|
grid-area: folder_icon;
|
|
}
|
|
|
|
.new_popup .item .edit_icon {
|
|
grid-area: edit_icon;
|
|
}
|
|
|
|
.new_popup .item .rename_icon {
|
|
grid-area: rename_icon;
|
|
}
|
|
|
|
.new_popup .item .delete_icon {
|
|
grid-area: delete_icon;
|
|
}
|
|
|
|
.new_popup .item .file {
|
|
grid-area: file;
|
|
}
|
|
|
|
.new_popup .item .file:hover {
|
|
background-color: #688f1f;
|
|
}
|
|
|
|
.new_popup textarea {
|
|
grid-area: textarea;
|
|
background-color: #404040;
|
|
color: white;
|
|
resize: none;
|
|
width: 100%;
|
|
}
|
|
|
|
.new_popup .popup_load_cancel {
|
|
text-align: center;
|
|
background-color: #285070;
|
|
}
|
|
|
|
.popup_load_cancel_button {
|
|
vertical-align: bottom;
|
|
display: inline;
|
|
}
|
|
|
|
.popup_load_cancel_button.btn-secondary {
|
|
color: rgb(51, 51, 51);
|
|
background-color: #686c68;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
#token_prob_menu {
|
|
color: white;
|
|
background-color: #262626;
|
|
}
|
|
|
|
.token-probs {
|
|
display: inline-block;
|
|
text-align: center;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.token-probs > table {
|
|
width: 100%;
|
|
}
|
|
|
|
.token-probs > table > tbody > tr > td {
|
|
border: 1px solid #262626;
|
|
border-collapse: collapse;
|
|
padding: 2px 15px;
|
|
}
|
|
|
|
.token-probs > table > tbody > tr {
|
|
background-color: #3e3e3e;
|
|
}
|
|
|
|
.token-probs > table > tbody > tr:nth-child(2n) {
|
|
background-color: #575757;
|
|
}
|
|
|
|
.token-probs-final-token {
|
|
font-weight: bold;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.token-probs-final-token > td {
|
|
background: #5c8a5a;
|
|
}
|
|
|
|
.token-probs-header {
|
|
display: block;
|
|
}
|
|
|
|
#token_prob_container {
|
|
overflow-x: auto;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tokens-counted {
|
|
position: relative;
|
|
}
|
|
|
|
.input-token-usage {
|
|
color: white;
|
|
position: absolute;
|
|
font-size: 10px;
|
|
bottom: 2px;
|
|
right: 5px;
|
|
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
/* Override needed here due to the 10px right padding on inputrowleft; add 10 px. */
|
|
#inputrowleft > .input-token-usage {
|
|
right: 15px;
|
|
bottom: 1px;
|
|
}
|
|
|
|
.wientry > .input-token-usage {
|
|
bottom: 8px;
|
|
} |