Editor: UI Tweaks

Tips
1

My eyes are getting worse and have a need for bigger UI elements. Therefore I tweaked Cwiclys UI.

Here is what I did:

image
image382×729 19.4 KB

Download a chrome extension

There are a lot of addons and extensions that can inject custom CSS into defined websites. I use “User CSS” for chrome to achieve that.

Paste CSS

Copy/paste the following code into the extensions editor to get a similar experience:

.cwicly-inspector * {
  font-size:14px!important;
}

.cwicly-inspector .bn9uEThaiChzyUR6nrOC .SDb8Sy3Ds8i1EVUrgG75 {
  padding:4px 5px;
}

.bn9uEThaiChzyUR6nrOC {
  gap: 8px!important;
}

.components-panel__header {
  height: auto
}
.components-button.edit-site-sidebar-edit-mode__panel-tab
{
  padding: 0.5em 0.75em!important;
  height:auto;
}

.cwicly-inspector svg {
  width:1.2rem!important;
  height:auto!important;
}


.interface-interface-skeleton__sidebar {
  scrollbar-color: #2f2f2f #000000;
  scrollbar-width: thin;
  width: 20vw;
}

.interface-complementary-area{
  min-width:100%;
}

@Louis would be cool if you could introduce one or two helper classes on the tabs and pills, so the auto generated classes don’t get obsolete in the next build. :wink:

Please feel free to suggest any improvements you can think of!

2 Likes