index.css

html, body {
    height:100%;
    margin:0;
    padding:0;
}

body {
    color:white;
    background-color:black;
    font-family: 'Open Sans';
}

::selection {
    background: goldenrod;
    color:black;
}

#app {
    width:100%;
    display: flex;
    flex-direction: row;
}




/* entry list */

#div_entries {
    max-height:97vh;
    padding:6px;
    display:flex;
    flex-direction:column;
    
}

#ul_entries {
    overflow-y: auto;
    margin:4px;
    border-top: 1px solid #111;
    border-bottom: 1px solid #111;
    direction:rtl;
    margin-left:4px;
}
#ul_entries > li {
    direction:ltr;
    text-align:left;
}

#input_search {
    width:100%;
    margin:4px;
}

#ul_entries {
    list-style: none;
    padding:8px;
    margin:0px;
    cursor:default;
    color: grey;
}

#ul_entries li:hover {
    color:goldenrod;
}

#ul_entries li.selected {
    color:white;
}

#ul_entries li:active {
    color:white;
}

#ul_entries li:focus {
    color:white;
}

.scrollable::-webkit-scrollbar-track {
    background-color: #000000;
}

.scrollable::-webkit-scrollbar {
    width: 6px;
    background-color: #000000;
}

.scrollable::-webkit-scrollbar-thumb {
    background-color: #111;
}


/* buttons on the top-right side */
.top_bts {
    color: #333;
    float:right;
    margin-right:50px;
    clear:both;
    padding:6px;
    white-space: nowrap;
}


.top_bts > div {
    margin:4px;
    padding:2px 6px;
    display:inline;
    background-color:black;
    cursor:default;
}
.top_bts > div:hover {
    color:goldenrod;
}

/* module stuff */

#div_detail > div {
    margin: 12px 0;
}
#div_detail {
    padding: 0 20px 0 0;
}

h2 {
    font-size:30px;
    margin:0px;
}

#input_word {
    font-size:30px;
    width:98%;
    padding:1%;
}


input {
    color:white;
    background-color:black;
    border:0.5px solid #333;
    font-family: 'Open Sans';
}

input:focus {
    outline:none;
}


#span_definition {
    white-space: pre-wrap;
}

textarea {
    color:white;
    background-color:black;
    border:0.5px solid #333;
    width:98%;
    padding:1%;
    height:100%;
    font-family: 'Open Sans';
    font-size:16px;
}
textarea:focus {
    outline:none;
}

#div_tags {
    display:flex;
    flex-direction: row;
}
#input_tags {
    width:100%;
}

#div_synonyms {
    display:flex;
    flex-direction: row;
}
#input_synonyms {
    width:100%;
}



.bt_tag {
    border: 0.5px solid lightgrey;
    margin: 4px;
    padding:4px;
    cursor:default;
    color:lightgrey;
    font-size:10px;
}
.bt_tag:hover {
    color:goldenrod;
    border: 0.5px solid goldenrod;
}



/* split pane */

.gutter {
    cursor: col-resize;
}


.gutter:after{
    content: "";
    display: block;
    width: 1px;
    height: 100%;
    background-color: dimgrey;
    position: relative;
    left: 50%;
    z-index:2;
}


.split {
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
}


/* alert/confirm dialogs */

#div_alert_background {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index:4;
}

#div_alert_box {
    text-align:center;
    background-color:black;
    border: 0.5px solid white;
    position: absolute;
    top: 50%;
    left: 50%;
    height: 30%;
    width: 50%;
    margin: -15% 0 0 -25%;
}

#div_alert_box span {
    position: relative;
    float: left;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


#div_alert_buttons {
    position:absolute;
    left:100%;
    top:100%;
    transform: translate(-110%, -120%);
    white-space: nowrap;
}

#div_alert_buttons > div {
    border:0.5px solid white;
    padding: 2px 10px;
    font-size:10px;
    display: inline-block;
    cursor:default;
    margin:4px;
}