@difizen/mana-app/lib/style/index.less

/* stylelint-disable property-no-vendor-prefix */
/* stylelint-disable custom-property-pattern */

.mana-app {
  padding: 0;
  margin: 0;
  font-family: var(--mana-ui-font-family);
}

.mana-input {
  padding-left: 5px;
  color: var(--mana-input-foreground);
  font-size: var(--mana-ui-font-size1);
  font-family: var(--mana-ui-font-family);
  line-height: var(--mana-content-line-height);
  background: var(--mana-input-background);
  border: var(--mana-border-width) solid var(--mana-input-border);
}

.mana-input::placeholder {
  color: var(--mana-input-placeholderForeground);
}

.mana-maximized {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 255 !important;
  width: auto !important;
  height: auto !important;
  background: var(--mana-editor-background);
}

.mana-visible-menu-maximized {
  top: var(--mana-private-menubar-height) !important;
}

.mana-ApplicationShell {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--mana-editor-background);
}

.mana-icon {
  width: 32px;
  height: 18px;
  margin: 5px;
  margin-left: 8px;
}

.mana-mod-disabled,
.mana-mod-disabled:focus {
  opacity: var(--mana-mod-disabled-opacity) !important;
}

.mana-header {
  font-weight: 450;
  font-size: var(--mana-ui-font-size0);
  text-transform: uppercase;
}

.p-Widget {
  font-size: var(--mana-ui-font-size1);
}

.p-Widget.p-mod-hidden {
  display: none !important;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
                                   supported by Chrome and Opera */
}

::selection {
  background: var(--mana-selection-background);
}

.p-Widget:focus {
  border: none;
  outline: none;
}

.action-item {
  padding: 2px;
  border-radius: 5px;
  cursor: pointer;
}

.action-item:hover {
  background-color: rgba(50%, 50%, 50%, 20%);
}

button.mana-button,
.mana-button {
  min-width: 65px;
  margin-left: calc(var(--mana-ui-padding) * 2);
  padding: 4px 9px;
  color: var(--mana-button-foreground);
  background-color: var(--mana-button-background);
  border: none;
  border-radius: 1px;
  outline: none;
  box-shadow:
    0 1px 5px 0 rgba(0, 0, 0, 20%),
    0 1px 2px 0 rgba(0, 0, 0, 14%),
    0 1px 1px -2px rgba(0, 0, 0, 12%);
  cursor: pointer;
  transition:
    background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
    box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

button.mana-button:hover,
.mana-button:hover,
.mana-button:focus {
  background-color: var(--mana-button-hoverBackground);
}

button.secondary,
.mana-button.secondary {
  color: var(--mana-secondaryButton-foreground);
  background-color: var(--mana-secondaryButton-background);
}

button.secondary:hover,
.mana-button.secondary:hover {
  background-color: var(--mana-secondaryButton-hoverBackground);
}

button.mana-button[disabled],
.mana-button[disabled] {
  color: var(--mana-button-disabledForeground);
  background-color: var(--mana-button-disabledBackground);
  cursor: default;
  opacity: 0.6;
}

button.secondary[disabled],
.mana-button.secondary[disabled] {
  color: var(--mana-secondaryButton-disabledForeground);
  background-color: var(--mana-secondaryButton-disabledBackground);
}

.mana-select {
  color: var(--dropdown-foreground);
  font-size: var(--mana-ui-font-size1);
  background: var(--mana-dropdown-background);
  border: 1px solid var(--mana-dropdown-border);
  border-radius: 0;
  outline: none;
}

.mana-select option {
  background: var(--mana-dropdown-listBackground);
}

.mana-transparent-overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  background-color: transparent;
}

.mana-cursor-no-drop,
.mana-cursor-no-drop:active {
  cursor: no-drop;
}