Shopware 6 - Admin - Styles.css

Shopware 6 - Admin - 1 - Show info.css

/**
 * CMS editor / Shopping experiences: Hide rarely used section by default.
 */

.sw-cms-slot {
  display: block;
  min-height: 100px !important;
}

.sw-cms-sidebar__block-settings .sw-collapse:first-child .sw-collapse__content {
  display: none;
}

.sw-cms-sidebar__block-settings .sw-collapse:first-child:hover .sw-collapse__content {
  display: block;
}

Shopware 6 - Admin - 2 - Show hidden information.css

/**
 * Show plugin configuration field names.
 */
[class*="sw-system-config--field"] .sw-field[name]::before {
  content: attr(name) " : " attr(defaultvalue);
  color: #AAA;
  font-size: 0.6rem;
  position: relative;
  left: 0;
  top: 0;
}

/**
 * Show slot IDs to help with manual SQL queries like migrations.
 *
 * @example SELECT * FROM `cms_slot_translation` WHERE cms_slot_id = X'...'
 */
.sw-cms-slot[id]::before {
  content: attr(id);
  color: #AAA;
  font-size: 0.6rem;
  position: absolute;
  top: -0.5rem;
}

Shopware 6 - Admin - 3 - TWIG dump.css

/**
 * TWIG dump() sometimes leads to visible injected code shown in plain text.
 * Hide script/ style tags output, but not completely, to be aware of this happening.
 * 
 * Maybe due to some Syntax error occurring in some templates.
 * This hides the boilerplate and just shows the debug.
 */
script,
style {
  border: 2px solid magenta !important;
  display: inline-block !important;
  overflow: hidden !important;
  width: 5px !important;
  height: 5px !important;
}

Shopware 6 - README.md

How to use

Copy CSS as needed in a browser plugin like Stylus.

Compatible and tested with Shopware 6.4/ 6.5