more css tweaks

new font and better margins
This commit is contained in:
Giulio Alessandrini 2021-08-03 13:26:56 +02:00
parent 8315ac0fd4
commit f5c71d71c1
2 changed files with 72 additions and 46 deletions

View File

@ -45,7 +45,7 @@
</script> </script>
<div class = "panel"> <div class = "panel">
<h2 class= "title">TODO</h2> <h2 class= "title">todo</h2>
<hr/> <hr/>
<div class="todo-input"> <div class="todo-input">
<input class="todo-text" bind:value="{todo_text}" placeholder="title"/> <input class="todo-text" bind:value="{todo_text}" placeholder="title"/>
@ -71,6 +71,7 @@
* { * {
--cream: #FEF9EF; --cream: #FEF9EF;
--blue: #227c9d; --blue: #227c9d;
--blue-disabled: #aabac0;
--green: #17C3B2; --green: #17C3B2;
--yellow: #FFCB77; --yellow: #FFCB77;
--red: #FE6D73; --red: #FE6D73;
@ -78,23 +79,33 @@
.panel { .panel {
padding: 10px; padding-top: 1rem;
padding-bottom: 1rem;
background-color: var(--cream); background-color: var(--cream);
font-size: 1rem;
font-family: 'Atkinson Hyperlegible', sans-serif;
} }
@media only screen and (min-width: 500px) { @media only screen and (min-width: 500px) {
.panel { .panel {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
width: 500px; width: 500px;
border: solid var(--cream) 1px; border: solid var(--cream) 0px;
border-radius: 5px; border-radius: 10px;
} }
} }
.title {
margin-left: 2rem;
font-weight: 400;
font-size: 3rem;
color: var(--yellow);
}
hr { hr {
margin-top: 10px; margin-left: 1rem;
margin-bottom: 20px; margin-bottom: 1rem;
border: 1px solid var(--yellow); border: 2px solid var(--yellow);
} }
button { button {
@ -103,99 +114,106 @@ button {
background-color: var(--blue); background-color: var(--blue);
border: solid var(--blue) 1px; border: solid var(--blue) 1px;
border-radius: 5px; border-radius: 5px;
color: var(--cream); color: white;
font-family: 'Atkinson Hyperlegible', sans-serif;
font-size: 1rem;
} }
.todo-input { .todo-input {
font-size: 0px; font-size: 0px;
margin: 1rem;
} }
.todo-text { .todo-text {
padding: 7px; padding: 4px;
margin: 0px; margin: 0px;
border: solid white 2px; border: solid white 2px;
border-right: 0px; border-right: 0px;
border-radius: 0px; border-radius: 0px;
border-bottom-left-radius: 5px; border-bottom-left-radius: 5px;
border-top-left-radius: 5px; border-top-left-radius: 5px;
font-family: 'Atkinson Hyperlegible', sans-serif;
font-size: 1rem;
} }
.todo-text:focus { .todo-text:focus {
outline: none; outline: none;
border-bottom-color: var(--blue); border-bottom-color: var(--blue);
/* border-left-color: var(--blue);
border-top-color: var(--blue); */
} }
.todo-add { .todo-add {
padding: 8px; border-bottom-left-radius: 0px;
border-radius: 0px; border-top-left-radius: 0px;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
} }
.disabled { .disabled {
background-color: var(--blue-disabled);
border-color: var(--blue-disabled);
}
button:active {
background-color: var(--yellow); background-color: var(--yellow);
border-color: var(--yellow); border-color: var(--yellow);
color: black; color: black;
} }
button:active { button:active.disabled {
background-color: var(--yellow); background-color: var(--blue-disabled);
color: black; border-color: var(--blue-disabled);
} color: white;
.title {
padding: 0px;
margin: 0px;
margin-left: 5px;
font-weight: 400;
font-size: 1.5rem;
color: var(--yellow);
} }
.todo-filter { .todo-filter {
padding-top: 10px; margin-top: 1rem;
padding-bottom: 10px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.todo-filter button { .todo-filter button {
margin-right: 5px; margin-right: 0.5rem;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
} }
.todo-list { .todo-list {
display: flex; padding: 1rem;
flex-direction: column; padding-bottom: 0.5rem;
min-height: 10em; background-color: var(--blue-disabled);
/* list
* padding 1.5rem
todo
* content 1.0rem
* padding 1.0rem
* marging 0.5rem
button
* padding 6px
* border 6px
total
(1.5 + 2.5*3)rem (9rem)
+ (12*3)px (36px)
*/
min-height: calc(11.5rem + 48px);
} }
.todo { .todo {
padding: 10px; padding: 0.5rem;
margin: 5px 0px 5px 0px; margin-bottom: 0.5rem;
background-color: var(--yellow); background-color: var(--yellow);
border-radius: 5px; border-radius: 5px;
display: flex; display: flex;
flex-wrap: wrap;
align-items: center; align-items: center;
font-size: 1.2rem;
} }
.todo.done { .todo.done {
/* background-color: #FEF9EF; */ background-color: var(--cream);
}
.done p {
/* text-decoration: line-through; */
color: var(--cream);
} }
.todo button { .todo button {
padding: 3px;
margin-left: auto; margin-left: auto;
background-color: var(--green); background-color: var(--green);
border-color: var(--green); border: solid 3px var(--green);
font-size: 1rem;
color: var(--cream) color: var(--cream)
} }
@ -205,4 +223,9 @@ button:active {
color: var(--cream); color: var(--cream);
} }
.todo button:active {
background-color: var(--yellow);
color: black;
}
</style> </style>

View File

@ -10,6 +10,8 @@
</div> </div>
<style> <style>
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&display=swap');
:global(*) { :global(*) {
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
@ -25,4 +27,5 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
</style> </style>