remirror/styles/components.css

One editing package to rule them all, one editing package to bind them.

/**
 * Styles extracted from: packages/remirror__theme/src/components-theme.ts
 */
.remirror-editor-wrapper {
  padding-top: var(--rmr-space-3);
}

.remirror-button-active {
  color: var(--rmr-color-primary-text) !important;
  background-color: var(--rmr-color-primary) !important;
}

.remirror-button {
  display: inline-flex;
  font-weight: 400;
  align-items: center;
  justify-content: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 0.375em 0.75em;
  line-height: 1.5;
  border-radius: var(--rmr-radius-border);
  text-decoration: none;
  border: 1px solid var(--rmr-color-border);
  cursor: pointer;
  white-space: nowrap;
  color: var(--rmr-color-text);
  background-color: var(--rmr-color-background);
  transition:
    color 0.15s ease-in-out,
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
  font-size: 100%;
}

.remirror-button[aria-disabled='true'] {
  cursor: auto;
}

.remirror-button:not([aria-disabled='true']):hover {
  color: var(--rmr-color-hover-primary-text);
  border-color: var(--rmr-color-hover-border);
  background-color: var(--rmr-color-hover-primary);
}

.remirror-button:not([aria-disabled='true']):active,
.remirror-button:not([aria-disabled='true'])[data-active],
.remirror-button:not([aria-disabled='true'])[aria-expanded='true'] {
  color: var(--rmr-color-active-primary-text);
  border-color: var(--rmr-color-active-border);
  background-color: var(--rmr-color-active-primary);
}

/* Ensure a perceivable button border for users with Windows High Contrast
  mode enabled https://moderncss.dev/css-button-styling-guide/ */

@media screen and (-ms-high-contrast: active) {
  .remirror-button {
    border: 2px solid currentcolor;
  }
}

.remirror-composite {
  align-items: center;
  justify-content: center;
  padding: 0.375em 0.75em;
  font-size: 100%;
  border: 0;
  color: inherit;
  background-color: inherit;
}

.remirror-composite:not([aria-selected='true']) {
  color: inherit;
  background-color: inherit;
}

[aria-activedescendant='*']:focus .remirror-composite[aria-selected='true'],
[aria-activedescendant='*']:focus ~ * .remirror-composite[aria-selected='true'] {
  color: var(--rmr-color-text);
  background-color: var(--rmr-color-background);
}

.remirror-dialog {
  position: fixed;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: var(--rmr-radius-border);
  padding: 1em;
  max-height: calc(100vh - 56px);
  outline: 0;
  border: 1px solid var(--rmr-color-border);
  color: var(--rmr-color-text);
  z-index: 999;
}

.remirror-dialog:focus {
  box-shadow: 0 0 0 0.2em var(--rmr-color-shadow-1);
}

.remirror-dialog-backdrop {
  background-color: var(--rmr-color-backdrop);
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
}

.remirror-form > *:not(:first-child) {
  margin-top: 1rem;
}

.remirror-form-message {
  font-size: 0.8em;
  margin-top: 0.5rem !important;
}

.remirror-form-label {
  display: block;
  margin: 0 0 0.5rem 0 !important;
}

input[type='checkbox'] + .remirror-form-label,
input[type='radio'] + .remirror-form-label {
  display: inline-block;
  margin: 0 0 0 0.5rem !important;
}

.remirror-form-group {
  display: block;
  color: var(--rmr-color-text);
  border: 1px solid var(--rmr-color-border);
  border-radius: var(--rmr-radius-border);
  padding: 0.5rem 1rem 1rem;
}

.remirror-form-group > * {
  display: block;
}

.remirror-group {
  display: flex;
}

.remirror-group > :not(:first-child) {
  margin-left: -1px;
}

.remirror-group > :not(:first-child):not(:last-child):not(.first-child):not(.last-child) {
  border-radius: 0;
}

.remirror-group > :first-child:not(:last-child),
.remirror-group > .first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.remirror-group > :last-child:not(:first-child),
.remirror-group > .last-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.remirror-input {
  display: block;
  width: 100%;
  border-radius: var(--rmr-radius-border);
  padding: 0.5em 0.75em;
  font-size: 100%;
  border: 1px solid var(--rmr-hue-gray-2);
  color: var(--rmr-hue-gray-5);
  margin: 0 !important;
}

.remirror-input:focus {
  border-color: var(--rmr-hue-gray-3);
}

.remirror-menu {
  display: flex;
  border-radius: 0;
}

.remirror-menu-pane {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: var(--rmr-space-1);
  padding-bottom: var(--rmr-space-1);
  padding-right: var(--rmr-space-2);
}

.remirror-menu-pane-active {
  color: var(--rmr-color-primary-text);
  background-color: var(--rmr-color-primary);
}

.remirror-menu-dropdown-label {
  padding: 0 var(--rmr-space-2);
}

.remirror-menu-pane-icon {
  position: absolute;
  left: 8px;
  width: 20px;
  color: var(--rmr-hue-gray-7);
}

button:hover .remirror-menu-pane-icon,
button:active .remirror-menu-pane-icon,
[aria-checked='true'] .remirror-menu-pane-icon {
  color: var(--rmr-hue-gray-1);
}

.remirror-menu-pane-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: var(--rmr-space-3);
}

.remirror-menu-pane-shortcut {
  align-self: flex-end;
  color: var(--rmr-hue-gray-6);
}

button:hover .remirror-menu-pane-shortcut,
button:active .remirror-menu-pane-shortcut,
[aria-checked='true'] .remirror-menu-pane-shortcut {
  color: var(--rmr-hue-gray-1);
}

[role='menu'] > .remirror-menu-button-left {
  left: var(--rmr-space-2);
}

[role='menu'] > .remirror-menu-button-right {
  right: var(--rmr-space-2);
}

.remirror-menu-button-nested-left svg {
  margin-right: var(--rmr-space-2);
}

[role='menu'] > .remirror-menu-button-nested-right {
  padding-right: 2em !important;
}

.remirror-menu-button-nested-right svg {
  margin-left: var(--rmr-space-2);
}

.remirror-menu-button {
  position: relative;
}

.remirror-menu-button svg {
  fill: currentColor;
  width: 0.65em;
  height: 0.65em;
}

[role='menu'] > .remirror-menu-button svg {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

[role='menubar'] > .remirror-menu-button svg {
  display: none;
}

.remirror-menu-bar {
  position: relative;
  display: flex;
  white-space: nowrap;
  box-shadow: none !important;
}

.remirror-menu-bar[aria-orientation='vertical'] {
  padding: 0.25em 0;
}

.remirror-menu-bar[aria-orientation='horizontal'] {
  padding: 0;
}

.remirror-flex-column {
  flex-direction: column;
}

.remirror-flex-row {
  flex-direction: row;
}

.remirror-menu-item {
  line-height: 1.5;
  text-align: left;
  justify-content: flex-start;
  border: 0;
  border-radius: 0;
  font-size: 100%;
  background: transparent;
  color: var(--rmr-color-foreground);
  margin: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
  text-decoration: none;
}

.remirror-menu-item:focus,
.remirror-menu-item[aria-expanded='true'] {
  background-color: var(--rmr-color-primary);
  color: var(--rmr-color-primary-text);
  box-shadow: none !important;
}

.remirror-menu-item:active,
.remirror-menu-item[data-active] {
  background-color: var(--rmr-color-active-primary) !important;
  color: var(--rmr-color-active-primary-text) !important;
}

.remirror-menu-item:disabled {
  opacity: 0.5;
}

.remirror-menu-item-row {
  padding: 0 var(--rmr-space-2);
}

.remirror-menu-item-column {
  padding: 0 var(--rmr-space-4);
}

.remirror-menu-item-checkbox {
  position: relative;
  outline: 0;
}

.remirror-menu-item-checkbox[aria-checked='true']:before {
  content: '✓';
  position: absolute;
  top: 0;
  left: 0.4em;
  width: 1em;
  height: 1em;
}

.remirror-menu-item-radio {
  position: relative;
  outline: 0;
}

.remirror-menu-item-radio[aria-checked='true']:before {
  content: '•';
  position: absolute;
  font-size: 1.4em;
  top: -0.25em;
  left: 0.35em;
  width: 0.7142857143em;
  height: 0.7142857143em;
}

.remirror-menu-group {
  display: inherit;
  flex-direction: inherit;
}

.remirror-floating-popover {
  /* padding: var(--rmr-space-2); */
  padding: 0;
  border: none;
  max-height: calc(100vh - 56px);
}

.remirror-popover [data-arrow] {
  background-color: transparent;
}

.remirror-popover [data-arrow] .stroke {
  fill: var(--rmr-color-border);
}

.remirror-popover [data-arrow] .fill {
  fill: var(--rmr-color-background);
}

.remirror-animated-popover {
  transition:
    opacity 250ms ease-in-out,
    transform 250ms ease-in-out;
  opacity: 0;
  transform-origin: top center;
  transform: translate3d(0, -20px, 0);
}

[data-enter] .remirror-animated-popover {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.remirror-role {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  font-family: var(--rmr-font-family-default);
  color: var(--rmr-color-text);
  background-color: var(--rmr-color-background);
  /* border: 1px solid var(--rmr-color-border); */
}

.remirror-separator {
  border: 1px solid var(--rmr-color-border);
  border-width: 0 1px 0 0;
  margin: 0 0.5em;
  padding: 0;
  width: 0;
  height: auto;
}

.remirror-separator[aria-orientation='horizontal'] {
  border-width: 0 0 1px 0;
  margin: 0.5em 0;
  width: auto;
  height: 0;
}

.remirror-tab {
  background-color: transparent;
  border: 1px solid transparent;
  border-width: 1px 1px 0 1px;
  border-radius: var(--rmr-radius-border) var(--rmr-radius-border) 0 0;
  font-size: 100%;
  padding: 0.5em 1em;
  margin: 0 0 -1px 0;
}

.remirror-tab[aria-selected='true'] {
  background-color: var(--rmr-color-background);
  border-color: var(--rmr-color-border);
}

[aria-orientation='vertical'] .remirror-tab {
  border-width: 1px 0 1px 1px;
  border-radius: 0.2em 0 0 0.2em;
  margin: 0 -1px 0 0;
}

.remirror-tab-list {
  display: flex;
  flex-direction: row;
  border: 1px solid var(--rmr-color-border);
  border-width: 0 0 1px 0;
  margin: 0 0 1em 0;
}

.remirror-tab-list[aria-orientation='vertical'] {
  flex-direction: column;
  border-width: 0 1px 0 0;
  margin: 0 1em 0 0;
}

.remirror-tabbable:not([type='checkbox']):not([type='radio']) {
  /* transition: box-shadow 0.15s ease-in-out; */
  outline: 0;
}

.remirror-tabbable:not([type='checkbox']):not([type='radio']):focus {
  box-shadow: var(--rmr-color-outline) 0px 0px 0px 0.2em;
  position: relative;
  z-index: 2;
}

.remirror-tabbable:not([type='checkbox']):not([type='radio']):hover {
  z-index: 2;
}

.remirror-tabbable[aria-disabled='true'] {
  opacity: 0.5;
}

.remirror-toolbar {
  display: flex;
  flex-direction: row;

  overflow-y: auto;
}

.remirror-toolbar > *:not(:first-child) {
  margin: 0 0 0 0.5em;
}

.remirror-toolbar[aria-orientation='vertical'] {
  display: inline-flex;
  flex-direction: column;
}

.remirror-toolbar[aria-orientation='vertical'] > *:not(:first-child) {
  margin: 0.5em 0 0;
}

.remirror-tooltip {
  background-color: var(--rmr-color-faded);
  color: white;
  font-size: 0.8em;
  padding: 0.5rem;
  border-radius: var(--rmr-radius-border);
  z-index: 999;
}

.remirror-tooltip [data-arrow] {
  background-color: transparent;
}

.remirror-tooltip [data-arrow] .stroke {
  fill: transparent;
}

.remirror-tooltip [data-arrow] .fill {
  fill: var(--rmr-hue-gray-8);
}

.remirror-table-size-editor {
  background: var(--rmr-color-background);
  box-shadow: var(--rmr-color-shadow-1);
  font-family: var(--rmr-font-family-default);
  font-size: var(--rmr-font-size-1);
}

.remirror-table-size-editor-body {
  position: relative;
}

.remirror-table-size-editor-body::after {
  background: rgba(0, 0, 0, 0);
  bottom: -50px;
  content: '';
  left: 0;
  position: absolute;
  right: -50px;
  top: -50px;
}

.remirror-table-size-editor-cell {
  border: var(--rmr-color-border);
  position: absolute;
  z-index: 2;
}

.remirror-table-size-editor-cell-selected {
  background: var(--rmr-color-table-selected-border);
  border-color: var(--rmr-color-border);
}

.remirror-table-size-editor-footer {
  padding-bottom: var(--rmr-space-1);
  text-align: center;
}

.remirror-color-picker {
  background: var(--rmr-color-background);
  box-shadow: var(--rmr-box-shadow-1);
  font-family: var(--rmr-font-family-default);
  font-size: var(--rmr-font-size-1);
  padding: var(--rmr-space-2) var(--rmr-space-3);
}

.remirror-color-picker-cell {
}

.remirror-color-picker-cell-selected {
}