Last active
September 2, 2020 14:24
-
-
Save alexander-albul/8ec2739ea721b972732c97cce03af17e to your computer and use it in GitHub Desktop.
Cleaner UI for plasmic.app
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*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