Once we have our folder structure ready, we can proceed to create the style sheets. Inside the css folder, create an app.css file for the Main window and an options.css file for the Options window. Let's see the first one:
app.css:
/* Reset */
html, body, #mainView {
width: 100%; height: 100%; margin: 0; padding: 0;
}
/* Custom behaviors */
html * {
-webkit-user-select: none; box-sizing: border-box;
}
/* mainView container */
#mainView {
display: flex; border-top: 1px solid #c7c7c7;
}
/* Right sidebar */
#sidebar {
flex: 0 0 100px;
padding: 15px 0; text-align: center;
background: #414A4C; color: #f8f8f8;
}
/* Todo container */
#todoListContainer {
flex: 1;
background: #F8F8FF; overflow: auto;
}
/* Button styling */
.button {
font-family: sans-serif; font-weight: 800;
display: inline-block; border-radius: 100%;
color: #F8F8FF; text-align: center; text-decoration: none;
transition: background-color 0.2s linear;
}
/* Add button */
.add-button {
background...