more css tweaks
new font and better margins
This commit is contained in:
parent
8315ac0fd4
commit
f5c71d71c1
|
@ -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,106 +114,118 @@ 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)
|
||||||
}
|
}
|
||||||
|
|
||||||
.todo.done button {
|
.todo.done button {
|
||||||
background-color: var(--red);
|
background-color: var(--red);
|
||||||
border-color: var(--red);
|
border-color: var(--red);
|
||||||
color:var(--cream);
|
color: var(--cream);
|
||||||
|
}
|
||||||
|
|
||||||
|
.todo button:active {
|
||||||
|
background-color: var(--yellow);
|
||||||
|
color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
|
@ -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>
|
Loading…
Reference in New Issue
Block a user