Custom Styling for SevDesk on laptop screens

-Custom styles for SevDesk.md

SevDesk is a useful tool, but on my 13" MacBook, I find it wastes too much whitespace on menu elements and such, which makes it hard to keep an overview.

These styles can easily be applied using StyleBot or your CSS-tweaking tool of choice.

Some aspect ratios will look yanky with this applied, so YMMV.

styles.css

/* navbar */

aside[class*="navigation-module_sidebar_"] {
  min-width: 0 !important;
  font-size: 14px;
  padding: 5px;
  max-width: 8em;
}
div[class*="item-module_label_"] {
  overflow: hidden;
  text-overflow: ellipsis;
}
div[class*="navigation-module_top-header_"]
 a > img{
   width: 90px;
 }
a[class*="item-module_wrapper_"] > svg {
  width: 15px;
}
a[class*="item-module_wrapper_"] {
  gap: 5px;
  padding: 5px 0px;
}

/* tablet view: top bar */
div[class*="navigation-module_header_"]{
  height: 30px;
  img {
    height: 20px;
  }
}
#main-header {
  min-height: 20px;
}
.cello-custom-button {
  padding: 5px;
  img {
    height: 15px;
    width: 15px;
  }
}

/* content */
.content-header {
  height: 40px;
}

.content-wrapper,.view-page {
  margin: 5px;
}

/* Zahlungen */
.pay-index-content {
  margin: 5px;

  height: calc(-210px + 100vh);
  min-height: 320px;
  max-height: calc(-210px + 100vh);
}
.ui-grid-styled-table table th {
  padding-top: 10px;
}
.card-head-filter {
  padding-top: initial;
}

.pay-index-content + div > .pagination {
  margin: 0;
}

/* Belege */
.default-grid .ui-grid-header-cell {
  padding: 0;
}
.ex-index-grid-container .view-page-head {
  padding-top: 0;
  min-height: 45px;
}
.default-grid {
  padding: 5px
}
.filters-collapse-container.open + .grid-block > .grid-content > sev-grid > .default-grid {
  max-height: inherit;
  height: calc(-375px + 100vh);
}

.filters-collapse-container.collapsed + .grid-block > .grid-content > sev-grid > .default-grid {  max-height: inherit;
  height: calc(-210px + 100vh);
}
.sev-grid-pagination-container {
  margin: 5px;
}

/* Belege -> Kategorien */
div.ex-index-category {
  /*width: 100px;*/
}

div.ex-index-categories {
  min-width: 100px;
  /*width: 100px !important;*/
  max-width: 120px;
  margin-right: 5px;

  max-height: calc(100vh - 100px);
  overflow-y: scroll !important;
}
.ex-index-category.row > .col-sm-3 {
  display: none;
}
.ex-index-grid-container {
  margin-bottom: 0;
}
.ex-index-grid-container.width-with-sidebar {
  width: calc(100% - 140px);
}

/* Help button */
.help-menu-btn {
  width: 30px;
  height: 30px;
  .help-icon {
    top: 5px;
    right: 5px;
    height: 20px;
  }
}