@striven-erp/striven-editor/src/striveneditor.css

The editor used for the Striven ERP system.

/**
** - Editor
** - Toolbar
** - Image Menu
** - File element
** - Meta Item
** - Link Menu
*/

/** Editor **/

.striven-editor {
    border: 1px solid #ddd;
    background-color: #fff;
    display: flex;
    position: relative;
    flex-direction: column;
    font-family: 'Segoe UI', Arial;
    max-width: 100%;
}

.striven-editor .se-body {
    position: relative;
    outline: none;
    padding: 10px 20px;
    min-height: auto;
    max-height: auto;
    height: auto;
    word-break: break-word;
    padding-bottom: 25px;
}

.striven-editor .se-body:empty::after {
    content: attr(data-placeholder);
    color: #777;
}

.striven-editor .se-body table {
    width: max-content;
}

.striven-editor .se-body a {
    position: relative;
}
.striven-editor .se-body .se-image-wrapper {
    position: relative;
    display: inline-block;
}
.striven-editor .se-body .se-image-wrapper .resize-marker {
    position: absolute;
    border: 1px dashed #0096fd;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.striven-editor .se-body .se-image-wrapper img {
    max-width: 100%;
}

.striven-editor .se-body .se-image-wrapper .resize-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: rgb(255, 255, 255);
    border: 1px solid #0096fd;
    cursor: pointer;
}

/* Positioning resize handles */
.striven-editor .se-body .se-image-wrapper .resize-handle.top-left {
    top: -5px;
    left: -5px;
    cursor: nwse-resize;
}

.striven-editor .se-body .se-image-wrapper .resize-handle.top-right {
    top: -5px;
    right: -5px;
    cursor: nesw-resize;
}

.striven-editor .se-body .se-image-wrapper .resize-handle.bottom-left {
    bottom: -5px;
    left: -5px;
    cursor: nesw-resize;
}

.striven-editor .se-body .se-image-wrapper .resize-handle.bottom-right {
    bottom: -5px;
    right: -5px;
    cursor: nwse-resize;
}

.striven-editor .se-body .se-image-wrapper .resize-handle.top-middle {
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    cursor: ns-resize;
}

.striven-editor .se-body .se-image-wrapper .resize-handle.bottom-middle {
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    cursor: ns-resize;
}

.striven-editor .se-body .se-image-wrapper .resize-handle.left-middle {
    left: -5px;
    top: 50%;
    transform: translateY(-50%);
    cursor: ew-resize;
}

.striven-editor .se-body .se-image-wrapper .resize-handle.right-middle {
    right: -5px;
    top: 50%;
    transform: translateY(-50%);
    cursor: ew-resize;
}

.striven-editor .se-body .se-link-options,
.striven-editor .se-body .se-image-options {
    position: absolute;
    left: 10px;
    bottom: -25px;
    padding: 5px;
    background-color: #fff;
    min-width: max-content;
    border: 1px solid #ddd;
    box-shadow: 5px 5px 5px #000;
    font-size: 12px;
    font-style: normal;
    font-weight: normal;
    z-index: 1;
}

.striven-editor .se-image-menu-tab {
    padding-top: 5px;
    border-top: 1px solid #ccc;
}

.striven-editor .se-body .se-link-options span,
.striven-editor .se-body .se-image-options span {
    cursor: pointer;
    color: #428bca;
    text-decoration: underline;
    user-select: none;
}

.striven-editor .se-body .se-link-options span:first-child:after {
    content: '|';
    margin: 0 5px;
    color: #000;
}

.striven-editor .se-file-drop-dropzone {
    border: 2px dashed #ddd;
    background-color: rgba(0, 0, 0, 0.025);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.striven-editor .se-file-drop-dropzone.dropzone-hot {
    border: 2px dashed #428bca;
}

.striven-editor .se-file-drop-dropzone.dropzone-overlay {
    height: 90%;
    width: 95%;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    position: absolute;
}

.striven-editor .se-file-drop-dropzone p {
    padding: 5px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #777;
    user-select: none;
    text-align: center;
    font-size: 25px;
}

.striven-editor .se-popup .se-file-drop-dropzone p {
    font-size: 16px;
}

.striven-editor .se-file-drop-dropzone svg > path {
    fill: #777 !important;
}


.striven-editor.se-image-uploading::after,
.striven-editor.se-image-uploading:empty::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.8);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctitle%3Ecloud-arrow-up-outline%3C/title%3E%3Cg %3E%3Cpath fill='%23666' d='M4.03 12.03C3.34 12.71 3 13.53 3 14.5S3.34 16.29 4.03 17C4.71 17.66 5.53 18 6.5 18H13.09C13.04 18.33 13 18.66 13 19C13 19.34 13.04 19.67 13.09 20H6.5C5 20 3.69 19.5 2.61 18.43C1.54 17.38 1 16.09 1 14.58C1 13.28 1.39 12.12 2.17 11.1S4 9.43 5.25 9.15C5.67 7.62 6.5 6.38 7.75 5.43S10.42 4 12 4C13.95 4 15.6 4.68 16.96 6.04C18.32 7.4 19 9.05 19 11C20.15 11.13 21.1 11.63 21.86 12.5C22.37 13.07 22.7 13.71 22.86 14.42C21.82 13.54 20.5 13 19 13C18.89 13 18.79 13 18.68 13C18.62 13 18.56 13 18.5 13H17V11C17 9.62 16.5 8.44 15.54 7.46C14.56 6.5 13.38 6 12 6S9.44 6.5 8.46 7.46C7.5 8.44 7 9.62 7 11H6.5C5.53 11 4.71 11.34 4.03 12.03M16 18H18V22H20V18H22L19 15L16 18Z' /%3E%3Canimate attributeName='opacity' values='0.2; 1; 0.2' dur='1.5s' repeatCount='indefinite' /%3E%3C/g%3E%3C/svg%3E");
    background-size: 128px;
    background-position: center;
    background-repeat: no-repeat;
}

/** Toolbar **/

.striven-editor .se-toolbar {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    min-height: 40px;
    transition: height 200ms;
}

.striven-editor .se-toolbar .se-divider-section {
    height: 100%;
    width: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.striven-editor .se-toolbar .se-divider-section .se-divider-bar {
    height: 50%;
    width: 1px;
    background-color: #ddd;
}

@media (max-width: 1000px) {
    .striven-editor .se-toolbar .se-divider-section {
        display: none;
    }
}

.striven-editor .se-html .se-toolbar-group {
    display: none !important;
}

.striven-editor .se-html .se-toolbar-selection {
    display: none !important;
}

.striven-editor .se-html .se-divider-section {
    display: none !important;
}

.striven-editor .se-html .se-toolbar-menu {
    display: none !important;
}

.striven-editor .se-toolbar-close {
    height: 0px;
}

.striven-editor .se-toolbar.se-toolbar-top {
    align-items: flex-start;
}

.striven-editor .se-toolbar.se-toolbar-bottom {
    align-items: flex-end;
}

.striven-editor .se-toolbar-options {
    display: flex;
    margin-right: 10px;
}

.striven-editor .se-toolbar-option {
    border: 1px solid transparent;
    display: inline-block;
    padding: 4px 7px;
    cursor: pointer;
    user-select: none;
    line-height: 2em;
}

.striven-editor .se-toolbar-option svg {
    width: 16px;
    height: 14px;
}

.striven-editor .se-toolbar-option img {
    width: 16px;
    height: 14px;
    vertical-align: middle;
}

.striven-editor .se-toolbar .se-arrow-span svg {
    transform: translateY(2px);
}

.striven-editor .se-toolbar.se-toolbar-bottom .se-arrow-span svg {
    transform: rotate(180deg) translateY(-3px);
}

.striven-editor .se-toolbar-option.se-toolbar-option-active {
    border: 1px solid rgba(0, 0, 0, 0.25);
    background-color: #d4e7fc;
}

.striven-editor .se-toolbar-option:hover.se-toolbar-option-active {
    background-color: #b6d6fa;
}

.striven-editor .se-toolbar-group {
    z-index: 500;
    background-color: transparent;
    display: flex;
    align-items: stretch;
}

.striven-editor .se-toolbar-group[data-open='true'] {
    z-index: 999;
}

/* 
.striven-editor .se-toolbar-group:after {
  content: '';
  margin: 0 auto;
  padding-bottom: 5px; 
  border-right: 1px solid #ddd;
}
*/

/*
.striven-editor .se-toolbar-group[data-open='true'] .se-toolbar-option {
  background-color: #fff;
  border: 1px solid #ddd;
}

.striven-editor .se-toolbar-group[data-open='true'] .se-toolbar-option:hover {
  background-color: #eee;
}
*/

.striven-editor .se-toolbar-option > svg {
    transform: scale(1); /* chrome bug fix */
    vertical-align: middle;
}

.striven-editor .se-toolbar-option:hover,
.striven-editor .se-toolbar-option:focus,
.striven-editor .se-toolbar-option:active {
    background-color: #eee;
    border-color: transparent;
}

.striven-editor .se-toolbar #toolbar-template {
    min-height: 40px;
    flex-grow: 1;
    justify-content: flex-end;
}

.striven-editor .se-toolbar .se-toolbar-selection {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    cursor: pointer;
    padding: 0 5px;
    transition: background-color 100ms;
}

.striven-editor .se-toolbar .se-toolbar-selection:hover {
    background-color: #eee;
}

.striven-editor .se-toolbar .se-toolbar-selection p {
    margin: 0;
    background-color: transparent;
}

/*
.striven-editor .se-toolbar .se-toolbar-selection .se-toolbar-option {
  border: 1px solid #ddd; 
  user-select: none;
  margin: 0;
  padding: 5px 15px;
  font-size: 14px;
  text-align: center;
  background-color: #eee;
  transition: background-color 100ms;
  cursor: pointer;
}

.striven-editor .se-toolbar .se-toolbar-selection .se-toolbar-option:hover {
  background-color: #ddd;
}
*/

.striven-editor .se-toolbar .se-toolbar-color {
    height: 16px;
    width: 16px;
}

.striven-editor .se-toolbar .se-toolbar-colorholder {
    /* padding: 4px;          */
    /* border: 1px solid #ddd;*/
    /* background-color: #eee;*/
    transition: background-color 100ms;
}

.striven-editor .se-toolbar .se-toolbar-colorholder:hover {
    background-color: #ddd;
}

.striven-editor .se-toolbar-popup-option {
    padding: 10px 15px;
    background-color: transparent;
    transition: background-color 200ms;
    font-size: 16px;
    cursor: pointer;
}

.striven-editor .se-toolbar-popup-option:hover {
    background-color: #eee;
}

/** Toolbar Menu **/

.striven-editor .se-toolbar-menu {
    border: 1px solid transparent;
    padding: 4px 7px;
    cursor: pointer;
    align-items: center;
    user-select: none;
}

.striven-editor .se-toolbar-menu:hover {
    background-color: #eee;
}

.striven-editor .se-toolbar-menu > svg {
    transform: scale(1); /* chrome bug fix */
    vertical-align: middle;
}

/** File Element **/

.striven-editor .se-file {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: 10px;
    position: relative;
}

.striven-editor p.se-file-name {
    font-weight: bold;
    font-size: 14px;
    margin: 0;
}

.striven-editor .se-file-size {
    font-size: 12px;
    margin: 2px 0;
}

.striven-editor .se-remove-link {
    margin: 0;
    user-select: none;
    color: black;
    position: absolute;
    right: 5px;
    top: -5px;
    cursor: pointer;
    background-color: #fff;
}
.striven-editor .se-remove-link:hover,
.striven-editor .se-remove-link:focus,
.striven-editor .se-remove-link:active {
    color: #ddd;
}

/** Meta Item **/

.striven-editor .se-meta-item {
    width: 100%;
    display: flex;
    margin: 10px;
    position: relative;
}

.striven-editor .se-meta-image {
    margin-right: 10px;
    height: 50px;
    width: 75px;
}

.striven-editor .se-meta-data-title {
    font-weight: bold;
    margin: 0;
}

.striven-editor .se-metadata-section,
.striven-editor .se-files-section {
    display: flex;
    flex-wrap: wrap;
    z-index: 500;
}

/** Popup Menu **/

.striven-editor .se-popup {
    visibility: hidden;
    position: absolute;
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 5px;
    z-index: 999;
    opacity: 0;
    transition: opacity, transform, box-shadow, 500ms;
}

.striven-editor .se-popup.se-popup-top {
    top: 40px;
    transform: translateY(-30px);
}

.striven-editor .se-popup.se-popup-bottom {
    bottom: 40px;
    transform: translateY(30px);
}

.striven-editor .se-popup.se-popup-open {
    visibility: visible;
    transform: translateY(0);
    box-shadow: 5px 5px 5px #000;
    opacity: 1;
}

.striven-editor .se-popup-header {
    color: #888;
    font-size: 12px;
    margin: 0;
    border-bottom: 1px solid #ddd;
    padding-bottom: 3px;
}

.striven-editor .se-popup .se-popup-form {
    display: flex;
    justify-content: space-between;
    margin: 5px 0;
}

.striven-editor .se-popup .se-popup-form > .se-form-label {
    margin: 8px 10px 8px 0;
    font-size: 12px;
    text-align: right;
    margin-right: 10px;
}

.striven-editor .se-popup .se-popup-form > .se-form-input {
    outline: none;
    padding: 5px;
}

@media (min-width: 900px) {
    .striven-editor .se-popup .se-popup-form > .se-form-input {
        width: 250px;
    }
}

.striven-editor .se-popup-button-container {
    float: right;
}

.striven-editor .se-popup-button {
    cursor: pointer;
    padding: 6px 12px;
    border: 1px solid transparent;
    font-size: 14px;
    outline: none;
    color: #333;
    margin: 2px;
}

.striven-editor .se-popup-button.se-button-primary {
    border-color: #357ebd;
    background-color: #428bca;
    color: #fff;
}
.striven-editor .se-popup-button.se-button-secondary {
    border-color: #ccc;
    background-color: #fff;
    color: #333;
}
.striven-editor .se-popup-button.se-button-primary:hover,
.striven-editor .se-popup-button.se-button-primary:active,
.striven-editor .se-popup-button.se-button-primary:focus {
    background-color: #285e8e;
    border-color: #285e8e;
}
.striven-editor .se-popup-button.se-button-secondary:hover,
.striven-editor .se-popup-button.se-button-secondary:active,
.striven-editor .se-popup-button.se-button-secondary:focus {
    background-color: #d4d4d4;
    border-color: #8c8c8c;
}

/* Button tabs. Style button to look like a tab with rounded top borders */
.striven-editor .se-tab-button {
    background-color: #f1f1f1;
    border: 1px solid #ccc;
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    padding: 5px;
    cursor: pointer;
    user-select: none;
}

/* Active class for the active tab */
.striven-editor .se-tab-button.tab-button-active {
    background-color: #fff;
    border-bottom: 1px solid #ccc;
}