A matter of style
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 {...