Skip to content

Instantly share code, notes, and snippets.

@alexander-albul
Last active September 2, 2020 14:24
Show Gist options
  • Save alexander-albul/8ec2739ea721b972732c97cce03af17e to your computer and use it in GitHub Desktop.
Save alexander-albul/8ec2739ea721b972732c97cce03af17e to your computer and use it in GitHub Desktop.
Cleaner UI for plasmic.app
/*Cleaner properties panels*/
.canvas-editor__right-float-pane{
border-radius: 0px;
margin: 0px;
border-bottom: 1px solid #e5e5e5;
}
/*Make Artboard, Component and Root element titles smaller*/
.Textbox__textbox--xlarge__sHNW6M5Tin{
font-size: 12px;
}
/*Hide items distribution's description*/
.panel-row.panel-row--autoHeight{
display: none;
}
/*Remove shadow of fixed Artboard and Component panels*/
.canvas-editor__right-pane__top.canvas-editor__right-pane__top--with-bottom{
box-shadow: none;
border-bottom: 1px solid #d7dae2;
}
/* Hide arrow of "Add" button */
.AddButton__root__zCNBe .AddButton__svg__HKuHc{
display: none;
}
/* Smaller shadow thumbnail*/
.shadow-thumb {
width: 20px;
height: 20px;
margin-top: -1px;
}
/* Tabs in shadow pop-up */
.IconButton__slotChildren__soRPe{
font-size: 12px;
}
/* Arrows in Position panel*/
.PosControls_Nums__2eHEl svg{
display: none;
}
/* Transparent background of flex options */
div.panel-block {
background-color: transparent;
}
/* Less faded mixin pills*/
.mixin-bg > .dropdown-pill__contents{
font-family: Inter;
letter-spacing: .3px;
font-weight: 600;
color: #14412D;
}
.mixin-bg {
padding: 2px;
border-radius: 3px;
background-color: #d6f7e7
!important;
}
/*Darker canvas color*/
.canvas-editor__canvas-container{
background-color:#e5e5e5;
}
/*Remove white shadow of right panel*/
.canvas-editor__right-pane{
box-shadow: none;
}
/*Items direction's active button*/
.IconButton__root--isActive__yF-NMJ_yng {
background-color: #f0f2f5;
}
/* Resizable left panel */
.canvas-editor__left-pane, .canvas-editor__right-pane {
resize: horizontal;
overflow: hidden;
}
/*Smaller avatar at top bar*/
.Avatar{
height: 24px;
width: 24px;
}
/*Cleaner top bar controls*/
.toolbar__live-controls{
background-color: transparent;
}
.topbar-panel-divider {
opacity: 0;
}
/*Smaller minimal height of placeholder of empty component's slot */
.__wab_placeholder__inner__autoHeight{
min-height: 20px !important;
}
/* Don't lighten active icon buttons when right panel is not focused */
.IconButton__root--isActive__yF-NMJ_yng .custom-svg-icon:not(.monochrome-exempt) {
color: #6E7175!important;
}
/* Cleaner slot's placeholder design */
.__wab_placeholder {
border: 1px dashed rgba(0, 0, 0, 0.5);
}
.__wab_placeholder__inner{
box-shadow: none
}
.__wab_placeholder__tag{
font-family: monospace;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment