rpg-dialogue-js/dist/tests/editor.css

A simple roleplay game dialogue engine and editor.

body {
    background: #a8a8a8;
}

canvas#my-canvas {
    position: absolute !important;
}

div#attribute-editor {
    position: absolute;
    width: 33%;
    height: calc( 100% - 12px );
    background: rgba(255,255,255, 0.8);
    border: 1px solid grey;
    border-radius: 4px;
    right: 0;
    margin: 5px;
    padding: 5px;
    box-sizing: border-box;
    overflow: scroll;
}

.d-none {
    display: none;
}

.a-droparea {
    height : 20px;
    /* background-image: url('img/bgtile2.png'); */
    background: repeating-linear-gradient(
        -45deg,
        rgba(0,0,0,0),
        rgba(0,0,0,0) 10px,
        rgba(128,128,128,0.25) 10px,
        rgba(128,128,128,0.25) 20px
    );
}

.dragover {
    /* border: 1px solid black; */
    background: repeating-linear-gradient(
        -45deg,
        rgba(0,0,0,0),
        rgba(0,0,0,0) 10px,
        rgba(0,128,128,0.25) 10px,
        rgba(0,128,128,0.25) 20px
    );
}

.e-hint {
    font-size: 9pt;
    font-family: Arial, Helvetica, sans-serif;
}

label, .e-label {
    font-size: 10pt;
    font-family: Arial, Helvetica, sans-serif;
}

#e-q {
    width: 95%;
}

.answer-wrapper-element {
    display: flex;
    flex-direction: row;
}

.answer-wrapper-element textarea {
    width: 100%;
    box-sizing: border-box;
}

.answer-wrapper-element select {
    width: 100%;
    box-sizing: border-box;
}

.answer-controls-element {
    display: flex;
    flex-direction: row;
}

.answer-up-down-element {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.a-dnd-element {
    width: 32px;
    height: 100%;
    /* background: rgba(128,128,128,0.5); */
    background: repeating-linear-gradient(
        90deg,
        rgba(0,0,0,0),
        rgba(0,0,0,0) 2px,
        rgba(128,128,128,0.33) 2px,
        rgba(128,128,128,0.33) 4px
    );
    padding: 4px;
    border: 4px solid rgb(216,216,216);
    box-sizing:border-box;
    border-radius: 3px;;
    display: flex;
    align-content: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    cursor: move;
}

.a-delete-button {

}

#b-add-dialogue-node {

}

#b-delete-dialogue-node {
    
}

#b-add-dialogue-node,
#b-delete-dialogue-node,
#b-add-answer-option {
    width: 24px;
    height: 24px;
    border: none;
    background-color: transparent;
    background-size: cover;
    cursor: pointer;
}

#b-add-dialogue-node {
    background-color: #36cd76;
    border-radius: 12px;
    background-image: url('img/icon-plus-512x512.png');
}

#b-delete-dialogue-node {
    background-color: #cd3657;
    border-radius: 12px;
    background-image: url('img/icon-minus-512x512.png');
}

#b-add-answer-option {
    float: right;
    background-color: #36cd76;
    border-radius: 12px;
    background-image: url('img/icon-plus-512x512.png');
}

.e-meta-npccontainer {
    margin-top: 15px;
}

textarea.json-preview {
    width: 100%;
    height: 100%;
    min-height: 50vh;
}

input[type=text], select, textarea {
    border: 1px solid rgba(128,128,128,0.2);
    padding: 4px;
}

.v-hidden {
    visibility: hidden;
}

#main-buttons {
    position: absolute;
    bottom: 10px;
}

#b-new,
#b-export-json,
#b-import-json,
#b-configure-meta,
#b-run-test,
#b-show-json,
#b-goto-github {
    position: absolute;
    bottom: 10px;
    width: 24px;
    height: 24px;
    border: none;
    background-color: transparent;
    background-size: cover;
    cursor: pointer;
}

#b-new {
    left: 15px;
    background-color: #36cd76;
    border-radius: 12px;
    /* background-image: url('img/icon-download-512x512.png'); */
}

#b-export-json {
    left: 45px;
    background-image: url('img/icon-download-512x512.png');
}

#b-import-json {
    left: 75px;
    background-image: url('img/icon-upload-512x512.png');
}

#b-configure-meta {
    left: 105px;
    background-image: url('img/icon-configure-512x512.png');
}

#b-run-test {
    left: 135px;
    background-color: #36cd76;
    border-radius: 12px;
    background-image: url('img/icon-angle-right-512x512.png');
}

#b-show-json {
    left: 165px;
    background-color: #36cd76;
    border-radius: 12px;
    background-image: url('img/icon-json-512x512.png');
}

#b-goto-github {
    left: 195px;
    background-color: #ffffff;
    border-radius: 12px;
    background-image: url('img/icon-github-512x512.png');
}


/*--- Mobile ---*/
body.is-mobile-device #main-buttons {
    transform-origin: 0% 100%;
    transform: scale(2);
}

body.is-mobile-device #b-add-dialogue-node,
body.is-mobile-device #b-delete-dialogue-node,
body.is-mobile-device #b-add-answer-option {
    width: 48px;
    height: 48px;
    border-radius: 24px;
}