Stylus CSS for compact MorphoBank matrix editor display

morphobank.css

@-moz-document regexp("https://www.morphobank.org/myprojects/\\d+/matrices/\\d+/\\w+") {
.modal-dialog {
  max-width: var(--bs-modal-width);
  margin-right: 100px;
  margin-left: auto;
  width: 600px;
  height: 800px;
  top: 100px;
}

.modal-header {
  padding: 6px 16px 4px;  
}

.modal-body {
  padding-top: 6px;
}

.modal-content {
  font-size: smaller;
}
.characterDialog .characterPane .headerRow .value {font-size: inherit;}
.form-select {
  font-size: inherit;
}

.nav-tabs button, .btn {
   padding: 2px 6px;
}

.batchColumnPane > section > i {
  display: none;
}

.batchDialog .batchRowPane .characterSelect, .batchDialog .batchColumnPane .taxaSelect {
  height: 600px;
}

ol.selectList li, .form-select, .form-select option {
  padding: 0px 5px;
  font-size: 11px;
}

.cellStateNumber .matrixgridCharacters .matrixgrid tr th, .cellStateNumber .matrixgridCells .matrixgrid tr td {
  max-width: 36px;
  min-width: 36px;
  
}
.cellStateNumber .matrixgridTaxa .matrixgrid tr, .cellStateNumber .matrixgridCells .matrixgrid tr {
  max-height: 24px;
  min-height: 24px;
  height: 24px;  
}

.addRuleDialog .characters, .addRuleDialog .actionCharacters {
  height: 220px; 
}
.addRuleDialog .addStateRule .charactersSelect, .addRuleDialog .addStateRule .characterstatesSelect, .addRuleDialog .addStateRule .actionCharactersSelect, .addRuleDialog .addStateRule .actionCharacterstatesSelect {
  height: 200px;
}

.descriptionInput{
  font-size: 11px;
}

.characterDialog .characterPane .descriptionInput {
  height: 252px;
  margin-bottom: -24px;
}

.matrixgrid {
  font-size: 12px;
}

.matrixgrid tr th {
  writing-mode: vertical-lr;  
}

.dataGrid table tr {
  font-family: Open Sans, sans-serif;
  font-size: 11px;
  height: 24px;
  min-height: 24px;
  max-height: 24px;
}
.dataGrid table tr td {
  padding: 0 6px;
}

.popover-body {
  writing-mode: lr;
  padding: 0;
}

.dataGrid table tr[data-id^="3"],
.dataGrid table tr[data-id^="42"], 
.dataGrid table tr[data-id^="4323"], 
.dataGrid table tr[data-id^="4321"], 
.dataGrid table tr[data-id^="4322"], 
.dataGrid table tr[data-id^="431"],
.dataGrid table tr[data-id^="430"],
.dataGrid table tr[data-id^="4324"], 
.dataGrid table tr[data-id^="4273"] {
  display: none !important;
}

.form-check-input {
  width: 1.8em;
  margin-top: 0;
  height: 1.8em;
}

@keyframes Pulsate {
  from {opacity: 1;}
  50% {opacity: 0.5; color: #184;}
  to {opacity: 1;}
}

#matrixgridTable * {
  font-family: "Open Sans";
  font-size: 10px;
}

#matrixgridTable td {
  font-size: 12px;
}

.matrixgrid tr td.active {
  background-color:  #66ffaaff !important;
  animation: Pulsate 1.3s linear infinite;
  font-weight: bold;
  font-family: sans-serif;
}

}

This script reduces the font size and padding to make the MorphoBank v4 interface more usable.

To use: Install the Stylus browser extension, then import this script.