kirby-panel.css

/**
 * A reset for Kirby’s panel
 * Work in progress
 *
 * Installation
 * - Create CSS file inside your site’s assets directory
 * - Open config.php and add the following line
 *   c::set('panel.stylesheet', 'assets/panel.css'); 
 * - Adjust to your liking
 */

* {
  font-size: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}


.btn-positive,
.message-is-notice .message-content,
.label abbr,
.nav-icon,
.breadcrumb-link {
  color: #000;
}


.btn-positive,
.input-is-focused,
.input:active,
.input:focus {
  border-color: #000;
}

.message-is-notice .message-content,
.search-input,
.nav-icon,
.languages, .topbar,
.breadcrumb,
.grey,
.app {
  background: #fff;
}

.message .message-content:after,
.breadcrumb-label:after,
.breadcrumb-link:before,
.breadcrumb-link:after {
  display: none;
}

.dashboard-section { padding: 0 }

.topbar:after {
  content: '';
  display: 'block';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(0, 0, 0, 0.15);
}

body.ltr .breadcrumb-link { padding: 0 }
body.ltr .breadcrumb-label { padding: 1em }

.breadcrumb-link {
  border-right: 1px dashed;
}

.breadcrumb-link,
body.ltr .nav-icon-right, body.rtl .nav-icon-left,
body.ltr .nav-icon-left, body.rtl .nav-icon-right {
  border-color: rgba(0, 0, 0, 0.15);
}

.sidebar-content.section {
  padding-right: 0;
}

@media screen and (min-width: 50em) {
  .mainbar .form {
    padding-left: 0;
    padding-right: 0;
  }
}

@media screen and (min-width: 50em) {
  .mainbar .form .buttons {
    background: #fff;
    background: -webkit-linear-gradient(bottom,#fff,rgba(255,255,255,.9) 75%,rgba(255,255,255,0));
    background: -moz-linear-gradient(bottom,#fff,rgba(255,255,255,.9) 75%,rgba(255,255,255,0));
    background: -ms-linear-gradient(bottom,#fff,rgba(255,255,255,.9) 75%,rgba(255,255,255,0));
    background: linear-gradient(bottom,#fff,rgba(255,255,255,.9) 75%,rgba(255,255,255,0));
  }
}

.grid-item figure {
  border: 1px solid rgba(0, 0, 0, 0.15); 
}

Still working on adding styles as I go along, but much improved.

• Simplified UI by removing colors.
• Minimal breadcrumb navigation styles.
• Typography is system default. On macOS this is San Fransisco.

To install:

• Create CSS file inside your site’s assets directory
• Open config.php and add c::set('panel.stylesheet', 'assets/panel.css');
• Adjust to your liking