usfm-editor/dist/style.css

A WYSIWYG editor component for USFM

/* Hide extra breaks that are not created by the usfm editor */
.usfm-editor br {
    display: none;
}
.usfm-editor br.usfm-editor-break {
    display: block;
}
/* Don't display a break after a section header */
.usfm-marker-s + br {
    display: none;
}

h1.usfm-marker-s {
    text-align: center;
    margin: 0.5em 0;
    font-size: 2em;
}
h2.usfm-marker-s {
    text-align: center;
    margin: 0.5em 0;
    font-size: 1.5em;
}
h3.usfm-marker-s {
    text-align: center;
    margin: 0.5em 0;
    font-size: 1.17em;
}
h4.usfm-marker-s {
    text-align: center;
    margin: 0.5em 0;
    font-size: 1.12em;
}
h5.usfm-marker-s {
    text-align: center;
    margin: 0.5em 0;
    font-size: 0.83em;
}
h6.usfm-marker-s {
    text-align: center;
    margin: 0.5em 0;
    font-size: 0.75em;
}

hr.usfm-editor-hr {
    margin: 0;
}

.usfm-editor {
    margin-top: 1em;
    overflow-y: scroll;
    -ms-overflow-style: none; /* No scrollbar- IE and Edge */
    scrollbar-width: none; /* Firefox */
} /* Override font, bg color, etc. */

.usfm-editor::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.usfm-editor-chapter {
    overflow: auto;
    margin: 0 0.75em 0.5em 0.75em;
}

.usfm-editor-context-menu:not(:empty) {
    padding: 8px 7px 6px;
    position: absolute;
    z-index: 1;
    top: -10000px;
    left: -10000px;
    margin-top: -6px;
    opacity: 0;
    background-color: #222;
    border-radius: 4px;
    transition: opacity 0.75s;
}

/* Give space between verse numbers when a verse is empty. */
.usfm-editor-empty-verse {
    margin: 0 0.5em 0 0;
}

.usfm-editor-inline {
}

.usfm-editor-unrendered-marker {
    display: none;
}

.usfm-editor-verse {
}

/* Italics are accomplished via the <cite> tag so that
 other font styles may be applied */
.usfm-marker-bk {
}

.usfm-marker-c {
    float: left;
    font-size: 200%;
    margin: 0 0.2em 0 0;
    display: inline;
    background-color: lightgray;
}
.usfm-marker-c.usfm-editor-front,
.usfm-marker-v.usfm-editor-front {
    display: none;
}

.usfm-marker-nd {
    font-variant: small-caps;
}

.usfm-marker-v {
    display: inline;
    margin: 0 0.2em 0 0;
    background-color: lightgray;
    white-space: nowrap;
}

.usfm-editor-no-select {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.usfm-editor-toolbar {
    padding-left: 0;
}

.usfm-editor-toolbar-button {
    min-width: 3em;
    font-size: 16px; /* Default for material-UI icons */
    font-weight: bold;
}

.usfm-editor-toolbar-button-active {
    color: black;
}

.usfm-editor-toolbar-button-inactive {
    color: rgb(204, 204, 204);
}

.usfm-editor-toolbar-button:hover {
    background-color: transparent;
}

.usfm-editor-toolbar-button-active .usfm-editor-toolbar-icon {
    fill: black;
}

.usfm-editor-toolbar-button-inactive .usfm-editor-toolbar-icon {
    fill: rgb(204, 204, 204);
}

.usfm-editor-verse-selector {
    padding-bottom: 20px;
}

.usfm-editor-border-bottom {
    border-bottom: 3px solid rgb(238, 238, 238);
}