excalidraw/src/styles.css
Faustino Kialungila 922ad6edcb Improve Buttons UX
2020-01-04 15:35:46 +01:00

102 lines
1.4 KiB
CSS

/* http://www.eaglefonts.com/fg-virgil-ttf-131249.htm */
@font-face {
font-family: "Virgil";
src: url("https://uploads.codesandbox.io/uploads/user/ed077012-e728-4a42-8395-cbd299149d62/AflB-FG_Virgil.ttf");
font-display: swap;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.container {
display: flex;
}
.sidePanel {
width: 230px;
background-color: #eee;
padding: 10px;
}
.sidePanel h4 {
margin: 10px 0 10px 0;
}
.sidePanel .panelTools {
display: flex;
}
.sidePanel .panelColumn {
display: flex;
flex-direction: column;
}
.tool input[type="radio"] {
display: none;
}
.tool input[type="radio"] + .toolIcon {
background-color: #ddd;
width: 41px;
height: 41px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 3px;
}
.tool input[type="radio"]:hover + .toolIcon {
background-color: #e7e5e5;
}
.tool input[type="radio"]:checked + .toolIcon {
background-color: #bdbebc;
}
label {
margin-right: 6px;
}
label span {
display: inline-block;
}
input[type="number"] {
width: 30px;
}
input[type="color"] {
margin: 2px;
}
input {
margin-right: 5px;
}
button {
background-color: #ddd;
border: 1px solid #ccc;
border-radius: 4px;
margin: 2px 0;
padding: 5px;
outline: none;
}
button:hover {
background-color: #e7e5e5;
border-color: #d6d4d4;
}
button:active {
background-color: #bdbebc;
border-color: #bdbebc;
}
button:disabled {
cursor: not-allowed;
}