# m-chart/2.2.1/components/css/m-chart-admin.css

M Chart, version 2.2.1. 487 lines.

- Page: https://pluginprobe.com/plugins/m-chart/2.2.1/code/components/css/m-chart-admin.css
- Raw: https://pluginprobe.com/plugins/m-chart/2.2.1/raw/components/css/m-chart-admin.css
- Modified: 2026-05-21T17:40:52+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/m-chart/2.2.1/code/components/css/m-chart-admin.css#L10-L20`.

```css
:root {
  --m-chart-accent: var( --wp-admin-theme-color, #3858e9 );
  --m-chart-accent-bg-hover: #f8f9fe;
  --m-chart-text: #000;
  --m-chart-text-muted: #666;
  --m-chart-text-inactive: #555;
  --m-chart-border: #ddd;
  --m-chart-border-strong: #cdd0d4;
  --m-chart-bg-sectioned: #f5f5f5;
  --m-chart-icon: #b8b8b8;
  --m-chart-icon-inactive: #82878c;
  --m-chart-disabled: #757575;
  --m-chart-alert-error: #cc1818;
  --m-chart-alert-success: #4ab866;
  --m-chart-alert-warning: #f0b849;
}

#m-chart .inside .hide,
#m-chart-spreadsheet .inside .hide,
#m-chart-csv .inside .hide {
  display: none;
}

#m-chart-subtitle {
  margin-left: 0;
}

.wp-list-table #m-chart-type {
  width: 2rem;
}
.wp-list-table #m-chart-library {
  width: 2.8125rem;
}

.column-m-chart-type span.type {
  display: block;
  position: relative;
  text-indent: -999rem;
  height: 1.5rem;
  width: 100%;
}
.column-m-chart-type span.type::after {
  background-position: left center;
  background-repeat: no-repeat;
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.column-m-chart-type span.type.line::after {
  background-image: url("../images/types/line.svg");
  background-size: contain;
}
.column-m-chart-type span.type.spline::after {
  background-image: url("../images/types/spline.svg");
  background-size: contain;
}
.column-m-chart-type span.type.area::after {
  background-image: url("../images/types/area.svg");
  background-size: contain;
}
.column-m-chart-type span.type.column::after {
  background-image: url("../images/types/column.svg");
  background-size: contain;
}
.column-m-chart-type span.type.stacked-column {
  background-color: transparent;
}
.column-m-chart-type span.type.stacked-column::after {
  background-image: url("../images/types/stacked-column.svg");
  background-size: contain;
}
.column-m-chart-type span.type.bar {
  background-color: transparent;
}
.column-m-chart-type span.type.bar::after {
  background-image: url("../images/types/bar.svg");
  background-size: contain;
}
.column-m-chart-type span.type.stacked-bar {
  background-color: transparent;
}
.column-m-chart-type span.type.stacked-bar::after {
  background-image: url("../images/types/stacked-bar.svg");
  background-size: contain;
}
.column-m-chart-type span.type.pie::after {
  background-image: url("../images/types/pie.svg");
  background-size: contain;
}
.column-m-chart-type span.type.doughnut::after {
  background-image: url("../images/types/doughnut.svg");
  background-size: contain;
}
.column-m-chart-type span.type.scatter::after {
  background-image: url("../images/types/scatter.svg");
  background-size: contain;
}
.column-m-chart-type span.type.bubble::after {
  background-image: url("../images/types/bubble.svg");
  background-size: contain;
}
.column-m-chart-type span.type.radar::after {
  background-image: url("../images/types/radar.svg");
  background-size: contain;
}
.column-m-chart-type span.type.radar-area::after {
  background-image: url("../images/types/radar-area.svg");
  background-size: contain;
}
.column-m-chart-type span.type.polar::after {
  background-image: url("../images/types/polar.svg");
  background-size: contain;
}
.column-m-chart-type span.type.treemap::after {
  background-image: url("../images/types/treemap.svg");
  background-size: contain;
}
.column-m-chart-type span.type.boxplot::after {
  background-image: url("../images/types/boxplot.svg");
  background-size: contain;
}
.column-m-chart-type span.type.violin::after {
  background-image: url("../images/types/violin.svg");
  background-size: contain;
}

.column-m-chart-library span.library {
  background-position: left center;
  background-repeat: no-repeat;
  display: block;
  filter: grayscale(100%);
  text-indent: -999rem;
  width: 100%;
}
.column-m-chart-library span.library.chartjs {
  background-image: url("../external/chartjs/chartjs-logo.svg");
  background-size: contain;
}

#m-chart-spreadsheet {
  border-left: none;
}
#m-chart-spreadsheet.closed {
  border-bottom: 0.0625rem solid var(--m-chart-border-strong);
}
#m-chart-spreadsheet .postbox-header {
  border-bottom: none;
}
#m-chart-spreadsheet .postbox-header h2.hndle {
  border-bottom: none;
  border-left: 0.0625rem solid var(--m-chart-border-strong);
}
#m-chart-spreadsheet h3 {
  border-bottom: none;
  border-left: 0.0625rem solid var(--m-chart-border-strong);
}
#m-chart-spreadsheet .handlediv {
  height: 2.1875rem;
}
#m-chart-spreadsheet .inside {
  margin: 0;
  padding: 0;
}
#m-chart-spreadsheet .m-chart-sheet-tabs {
  border-bottom: none;
  border-left: 0.0625rem solid var(--m-chart-border-strong);
  border-top: 0.0625rem solid var(--m-chart-border-strong);
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}
#m-chart-spreadsheet .m-chart-sheet-tabs.m-chart-hide {
  display: none;
}
#m-chart-spreadsheet .m-chart-sheet-tabs .m-chart-add-sheet {
  color: var(--m-chart-text);
  align-self: center;
}
#m-chart-spreadsheet .m-chart-sheet-tabs .m-chart-add-sheet:hover {
  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
}
#m-chart-spreadsheet .m-chart-sheet-tabs .m-chart-add-sheet:disabled {
  color: var(--m-chart-disabled);
}
#m-chart-spreadsheet .m-chart-sheet-tabs .m-chart-sheet-tab {
  display: flex;
  align-items: center;
}
#m-chart-spreadsheet .m-chart-sheet-tabs .m-chart-sheet-tab:focus-visible {
  outline: 2px solid var(--wp-admin-theme-color, #3858e9);
  outline-offset: -2px;
}
#m-chart-spreadsheet .m-chart-sheet-tabs .m-chart-sheet-tab .m-chart-sheet-tab-delete {
  color: var(--m-chart-text);
}
#m-chart-spreadsheet .m-chart-sheet-tabs .m-chart-sheet-tab .m-chart-sheet-tab-delete:hover {
  color: var(--m-chart-alert-error);
  background-color: color-mix(in srgb, var(--m-chart-alert-error) 8%, transparent);
  border-radius: 25px;
}
#m-chart-spreadsheet .m-chart-sheet-tabs .m-chart-sheet-tab .m-chart-sheet-tab-delete:disabled {
  color: var(--m-chart-disabled);
}
#m-chart-spreadsheet .m-chart-sheet-tabs .m-chart-sheet-tab .m-chart-sheet-tab-delete:focus:not(:focus-visible) {
  box-shadow: none;
  outline: none;
}
#m-chart-spreadsheet .m-chart-sheet-tabs .m-chart-sheet-tab .m-chart-sheet-tab-title {
  padding: 0 0.8125rem 0 0.75rem;
  border: 1px solid transparent;
  display: inline-block;
}
#m-chart-spreadsheet .m-chart-sheet-tabs .m-chart-sheet-tab input {
  min-width: 1.875rem;
  height: 2rem;
}
#m-chart-spreadsheet .m-chart-sheet-tabs .m-chart-sheet-tab:hover {
  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
}
#m-chart-spreadsheet .m-chart-sheet-tabs .m-chart-sheet-tab::after {
  background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
  bottom: 0;
  content: "";
  height: 0;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  transition: height 0.1s linear;
}
#m-chart-spreadsheet .m-chart-sheet-tabs .m-chart-sheet-tab.is-active::after {
  height: var(--wp-admin-border-width-focus, 2px);
}
#m-chart-spreadsheet .m-chart-sheet-tabs .m-chart-sheet-tab.is-active .m-chart-sheet-tab-delete {
  color: var(--m-chart-text);
}
#m-chart-spreadsheet .m-chart-sheet-tabs .m-chart-sheet-tab.is-active .m-chart-sheet-tab-delete:hover {
  color: var(--m-chart-alert-error);
}
#m-chart-spreadsheet .m-chart-sheet-tabs .m-chart-sheet-tab.is-active input[disabled=disabled] {
  color: var(--m-chart-text);
  -webkit-text-fill-color: var(--m-chart-text);
}
#m-chart-spreadsheet #spreadsheets .jtabs-content {
  border-left: 1px solid var(--m-chart-border-strong);
  overflow: auto;
  max-height: 23.125rem;
}
#m-chart-spreadsheet #spreadsheets .jtabs-content .jss_content {
  margin: -0.0625rem 0 -0.3125rem -0.125rem;
  padding: 0;
}
#m-chart-spreadsheet #spreadsheets .jtabs-content .jss_content table {
  margin-right: -0.0625rem;
}
#m-chart-spreadsheet #m-chart-csv {
  background-color: var(--m-chart-bg-sectioned);
  border-left: 0.0625rem solid var(--m-chart-border-strong);
  border-top: 0.0625rem solid var(--m-chart-border);
  padding: 0.9375rem 0.625rem 0.625rem;
}
#m-chart-spreadsheet #m-chart-csv .m-chart-csv-heading {
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.4;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.5rem;
  padding-top: 0;
  margin: 0 0 0.625rem 0;
}
#m-chart-spreadsheet #m-chart-csv .actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  flex-wrap: wrap;
}
#m-chart-spreadsheet #m-chart-csv .actions .button {
  margin-bottom: 0;
}
#m-chart-spreadsheet #m-chart-csv .actions .actions-left {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
#m-chart-spreadsheet #m-chart-csv .actions .confirmation {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
}
#m-chart-spreadsheet #m-chart-csv .actions .confirmation .components-base-control {
  margin: 0;
}
#m-chart-spreadsheet #m-chart-csv .file-info {
  padding-top: 0.625rem;
}
#m-chart-spreadsheet #m-chart-csv .warning,
#m-chart-spreadsheet #m-chart-csv .error {
  color: var(--m-chart-alert-error);
}
#m-chart-spreadsheet #m-chart-csv .error,
#m-chart-spreadsheet #m-chart-csv .in-progress {
  margin: 0.625rem 0 0 0.3125rem;
}
#m-chart-spreadsheet #m-chart-csv .m-chart-csv-cancel {
  color: var(--m-chart-text);
  position: relative;
  bottom: -0.4375rem;
  left: -0.125rem;
}
#m-chart-spreadsheet #m-chart-csv .m-chart-csv-cancel:hover {
  color: var(--m-chart-alert-error);
  background-color: color-mix(in srgb, var(--m-chart-alert-error) 8%, transparent);
  border-radius: 25px;
}

@media (prefers-reduced-motion: reduce) {
  #m-chart-spreadsheet .m-chart-sheet-tabs .m-chart-sheet-tab::after {
    transition: none;
  }
}
@media (pointer: coarse) {
  #m-chart-spreadsheet .m-chart-sheet-tabs .m-chart-sheet-tab .m-chart-sheet-tab-delete,
  #m-chart-spreadsheet #m-chart-csv .m-chart-csv-cancel {
    min-width: 2.75rem;
    min-height: 2.75rem;
  }
}
.m-chart-modal .components-modal__content {
  margin-top: 3.75rem;
}
.m-chart-modal .components-modal__content .components-modal__header {
  height: 3.75rem;
  padding-bottom: 0;
}
.m-chart-modal .components-modal__content .buttons {
  display: flex;
  gap: 0.625rem;
  justify-content: flex-end;
  margin-top: 1rem;
}

#m-chart .inside {
  padding: 0;
  margin-top: 0;
}
#m-chart .inside .settings {
  background-color: var(--m-chart-bg-sectioned);
  border-top: 1px solid var(--m-chart-border);
  padding: 0.625rem 0 0.625rem 0.625rem;
}
#m-chart .inside .settings .row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.625rem;
  width: 100%;
  border-top: none;
  padding: 0;
  margin-bottom: 0.625rem;
}
#m-chart .inside .settings .row:last-of-type {
  margin-bottom: 0;
}
#m-chart .inside .settings .row .column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
  margin-bottom: 0;
  justify-content: center;
}
#m-chart .inside .settings .row .column > div {
  width: fit-content;
}
#m-chart .inside .settings .row .column:last-of-type {
  gap: 0;
}
#m-chart .inside .settings .row.two .column.shared {
  display: none;
}
#m-chart .inside .settings .row.two.show-shared .column {
  width: 24%;
}
#m-chart .inside .settings .row.two.show-shared .column.shared {
  display: flex;
}
#m-chart .inside .settings .row.three .column, #m-chart .inside .settings .row.five .column {
  flex: 0 0 calc(75% - 0.625rem);
}
#m-chart .inside .settings .row.three .column > div, #m-chart .inside .settings .row.five .column > div {
  width: auto;
}
#m-chart .inside .settings .row.three .column.units, #m-chart .inside .settings .row.five .column.units {
  flex: 0 0 calc(25% - 0.625rem);
}
#m-chart .inside .settings .row.three .column.units > div, #m-chart .inside .settings .row.five .column.units > div {
  width: fit-content;
}
#m-chart .inside .settings .row.y-min {
  align-items: center;
}
#m-chart .inside .settings .row.y-min input[type=number] {
  margin-left: 0.4375rem;
  height: 2rem;
}
#m-chart .inside .settings .row.six .column {
  flex: 1;
}
#m-chart .inside .settings .row.six .column > div {
  width: auto;
}
#m-chart .inside .settings .row.six .column.source-url {
  margin-right: 0.625rem;
}
#m-chart .inside .settings .row.eight {
  align-items: center;
}
#m-chart .inside .row {
  display: flow-root;
  border-top: 1px solid var(--m-chart-border);
  padding: 0 0.625rem 0.625rem;
}
#m-chart .inside .row.seven .column > div {
  width: auto;
}
#m-chart .inside .row.seven .column:first-child {
  float: left;
}
#m-chart .inside .row.seven .column .components-base-control__field {
  margin-bottom: 0;
}
#m-chart .inside .row.seven .column.shortcode {
  position: relative;
}
#m-chart .inside .row.seven .column.shortcode .m-chart-input-action-button {
  height: 2rem;
  background-color: white;
  position: absolute;
  right: 0.25rem;
  top: 1.6875rem;
}
#m-chart .inside .row.seven .column.shortcode .m-chart-input-action-button:hover {
  background-color: color-mix(in srgb, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 4%, #fff);
}
#m-chart .inside .row.seven .column.image {
  position: relative;
  margin-right: 0.625rem;
}
#m-chart .inside .row.seven .column.image em {
  display: block;
  margin-top: 0.3125rem;
}
#m-chart .inside .row.seven .column.image .m-chart-input-action-button {
  height: 2rem;
  background-color: white;
  position: absolute;
  right: 0.25rem;
  top: 1.6875rem;
}
#m-chart .inside .row.seven .column.image .m-chart-input-action-button:hover {
  background-color: color-mix(in srgb, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 4%, #fff);
}
@media (max-width: 782px) {
  #m-chart .inside .row.seven .column.image .button,
  #m-chart .inside .row.seven .column.image .components-button {
    bottom: 0;
    line-height: 1.875rem;
    min-height: 2rem;
  }
}

#m-chart-settings-page span.description {
  color: var(--m-chart-text-muted);
}

#m-chart-settings-error {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

/*# sourceMappingURL=m-chart-admin.css.map */

```