Stylus for Microsoft Edge

EdgeStylus.user.css

/* ==UserStyle==
@name           Stylus for Microsoft Edge
@description    Changes Stylus to look more like Microsoft Edge
@namespace      https://vivelin.net/
@version        0.2.1
@author         Vivelin (https://vivelin.net/)
@license        MIT-0
@updateURL      https://gist.githubusercontent.com/Vivelin/be46f8fd85fe86cb26e8cd4885792764/raw/EdgeStylus.user.css
@preprocessor   less
@var    text    codeFont "Code font" monospace
==/UserStyle== */
@fontFamily: 'system-ui', sans-serif, 'Segoe UI Emoji';
@fontSize: 0.875rem;
@fgColor: #262626;
@bgColor: #f7f7f7;
@popupBgColor: #fff;
@hoverBgColor: #e5e5e5;
@linkColor: #0072c9;
@linkHoverColor: #0060a9;
@buttonColor: #2b2b2b;
@buttonBgColor: #eee;
@buttonHoverBgColor: #e5e5e5;
@buttonPrimaryColor: #fff;
@buttonPrimaryBgColor: #0078d4;
@buttonPrimaryHoverBgColor: #006cbe;
@borderColor: #b6b6b6;
@borderFocusColor: #888;
@sidebarPadding: 30px 25px 0px 50px;
@sidebarWidth: 340px;
@h1Size: 24px;
@h1Height: 32px;
@h2Size: 20px;
@h2Height: 28px;
@inputBgColor: #fff;
@inputHeight: 32px;
@inputPadding: 11px;
@borderRadius: 2px;
@menuItemHeight: 32px;

.checkbox() {
  width: 20px;
  height: 20px;
  background: #fff;
  border: 1px solid @borderColor;
  border-radius: @borderRadius;

  &:hover {
    background: @inputBgColor !important;
    border-color: @borderFocusColor;
  }

  & + svg {
    display: none !important;
  }

  &:checked::before {
    top: 0;
    left: 0;
    z-index: 1;
    position: aboslute;
    width: 20px;
    height: 20px;
    content: '';
    background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill="%232B2B2B" fill-rule="evenodd" clip-rule="evenodd" d="M8.143 12.6697L15.235 4.5L16.8 5.90363L8.23812 15.7667L3.80005 11.2556L5.27591 9.7555L8.143 12.6697Z"/></svg>') no-repeat;
  }
}

.button() {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: @inputHeight;
  font-family: inherit;
  font-weight: 600;
  border: 2px solid transparent;
  border-radius: @borderRadius;
  transition: all 0.1s ease-in-out;
  min-width: 32px;
  max-width: 374px;
  color: @buttonColor;
  fill: @buttonColor;
  background: @buttonBgColor;

  &:not(:disabled) {
    cursor: pointer;

    &:hover {
      border: 2px solid transparent;
      background: @buttonHoverBgColor;
    }
  }
}

.primary-button() {
  .button();
  color: @buttonPrimaryColor;
  fill: @buttonPrimaryColor;
  background: @buttonPrimaryBgColor;

  &:not(:disabled) {
    &:hover {
      background: @buttonPrimaryHoverBgColor;
    }
  }
}

@-moz-document url-prefix("chrome-extension://clngdbkpkpeebahjckkjfobafhncgmne/edit.html") {
  // Base styles & layout
  body {
    font-family: @fontFamily;
    font-size: @fontSize;
    background-color: @bgColor;
    color: @fgColor;
  }

  h1 {
    font-size: @h1Size;
    font-weight: 600;
    line-height: @h1Height;
  }

  h2 {
    font-size: @h2Size;
    font-weight: 600;
    line-height: @h2Height;
  }

  .CodeMirror {
    &-linenumber {
      font-family: @codeFont, monospace;
      font-size: 0.875em;
    }

    pre.CodeMirror-line,
    pre.CodeMirror-line-like {
      font-family: @codeFont, monospace;
    }
  }

  #header {
    width: @sidebarWidth;
    border-right: 1px solid @borderColor;
    box-shadow: none;
    padding: @sidebarPadding;
  }

  #sections {
    padding-left: @sidebarWidth;
  } 
  
  // Form elements
  .form-element() {
    height: @inputHeight;
    background-color: @inputBgColor;
    border: 1px solid @borderColor;
    border-radius: @borderRadius;
    box-sizing: border-box;
    transition: all 0.2s ease-in-out 0s, margin 0s;
    padding: 0 @inputPadding;

    &:focus {
      border-color: @borderFocusColor;
      box-shadow: 0 0 0 1px @borderFocusColor inset;
    }
  }

  input:not([type=checkbox]),
  #options [type=number] {
    .form-element();
  }

  select {
    .form-element();
    padding: 0 @inputPadding+19px 0 @inputPadding;
  }


  button {
    .button();
  }

  #save-button:not(:disabled) {
    .primary-button();
  }

  input[type='checkbox']:not(.slider) {
    .checkbox();
  }

  .option label,
  #basic-info label {
    padding-left: 30px;
  }

  .options-column > div[class="option"] {
    margin-bottom: 10px;
  }

  .options-column {
    display: table;
    border-spacing: 0 10px;
  } 
  
  // Misc. style overrides
  #actions {
    display: flex;
    justify-content: space-between;

    * {
      flex: 1;
    }

    a {
      text-decoration: none;
    }
  }

  .svg-icon.select-arrow {
    top: 9px;
    right: 9px;
  }

  #basic-info-enabled {
    margin-top: 10px;
  }

  #options-wrapper .options-column:nth-child(2) {
    margin-top: 0;
  }

  .options-column > .usercss-only {
    margin-bottom: 0;
  }

  .CodeMirror-linewidget .applies-to {
    font-family: @fontFamily;
    display: flex;
    align-items: baseline;

    .add-applies-to,
    .remove-applies-to {
      height: auto;
    }
  }
}

@-moz-document url-prefix("chrome-extension://clngdbkpkpeebahjckkjfobafhncgmne/popup.html") {
  body {
    font-family: @fontFamily;
    font-size: 0.75rem;
    color: @fgColor;
    background-color: @bgColor;
    border-radius: 2px;
  }

  #find-styles-link:link,
  #find-styles-link:visited,
  .write-style-link:link,
  .write-style-link:visited {
    color: @linkColor;
    text-decoration: none !important;
    border-bottom: 2px solid transparent;

    &:hover {
      color: @linkHoverColor !important;
      border-bottom: 2px solid @linkHoverColor;
    }
  }

  #installed {
    background-color: @popupBgColor;
    border-bottom: 1px solid @borderColor;
  }

  button {
    .button();
  }

  #popup-manage-button {
    .primary-button();
  }

  .entry {
    height: @menuItemHeight;

    &:nth-child(even) {
      background-color: unset;
    }

    & .style-name {
      font-weight: 400;
      font-size: 0.75rem;
      line-height: @menuItemHeight;
      padding-left: 35px
    }

    & .style-name::before {
      display: none;
    }
  }

  .entry-content {
    height: @menuItemHeight;
  }

  input[type="checkbox"]:not(.slider) {
    .checkbox();
  }

  #disable-all-wrapper .main-controls label,
  #find-styles-inline-group label {
    font-size: 0.75rem;
    padding-left: 25px;
  }

  #find-styles {
    display: flex;
    align-items: center;
  }

  #find-styles-link {
    margin-top: 3px;
    margin-right: 10px;
  }

  .actions > .main-controls {
    margin-top: 10px;
    padding-left: 25px;
    display: block;
  } 
  
  // Stupid overrides
  .style-name:hover input[type="checkbox"]:checked,
  .style-name:hover input[type="checkbox"] {
    background: @inputBgColor !important;
    border-color: @borderFocusColor;
  }
}