Stylus Extension to Customize CEDAR CSS Displays

After installing the Stylus extension (https://github.com/openstyles/stylus, available for Chrome or Firefox browsers), I ws able to customize the CEDAR look and feel in a persistent (to me) way.

For example, with the customizations in this content below (indicated by the necessary !important tags), I changed the standard CEDAR Workspace display to increase some font sizes and weights, compress the lists vertically, center the text in each row vertically, and make the header bars some shade(s) of dark green.

body {
    font-size: 16px !important;
    font-weight: 500 !important;
}
.all-items-view .populate-form-boxes .list-view .box-row {
    width: 100%;
    border: 1px solid #ebebeb;
    background: #ffffff;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #666666;
    cursor: pointer;
    margin: 2px !important;
    line-height: 1. !important;
}
.all-items-view .populate-form-boxes .list-view .box-row .cell {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 10px;
    vertical-align: middle !important; 
}
.template-body form .build .form-group .form-control,
#element_control_term .form-group .form-control { 
    font-size: 16px !important; 
    font-weight: 500 !important;
}

.template-body form .runtime .field-root .title {
  color: #666;
  font-weight: 400 !important;
  font-family: "Helvetica Neue Light", sans-serif;
  font-size: 1em;
}

.controls-bar {
    background-color: #073D46 !important;
}
.template-header.template {
    background-color: #244E55 !important;
}
#top-navigation.template {
  background-color: #073D46 !important;
  margin-right: 10px;
}
#top-navigation.element {
  background-color: #073D46 !important;
  margin-right: 10px;
}
#top-navigation.field {
  background-color: #073D46 !important;
  margin-right: 10px;
}
#top-navigation.metadata {
  background-color: #073D46 !important;
}

On some occasions the site view did not update live; some combination of making a trivial change to the code in the Stylus window, and toggling the Live Preview setting, seemed to take care of that.

The "Applies to" field at the bottom should be set to (for example) URLs starting withfollowed by the complete URL, e.g., https://cedar.metadatacenter.org/. Other configurations are also possible.