From 4162ad30f7b754fd97aff2ed180483cc6518f567 Mon Sep 17 00:00:00 2001 From: Joris Date: Sat, 23 Jan 2021 12:12:44 +0100 Subject: Improve order list style --- public/main.css | 22 ++++++++++------------ 1 file changed, 10 insertions(+), 12 deletions(-) (limited to 'public') diff --git a/public/main.css b/public/main.css index 20d4683..b3359cf 100644 --- a/public/main.css +++ b/public/main.css @@ -72,6 +72,7 @@ ul, ol { padding-left: var(--size-dog); list-style-type: none; margin-bottom: var(--size-horse); + margin: var(--size-cat) 0 var(--size-dog); } ol { @@ -80,29 +81,26 @@ ol { } ol > li, ul > li { - margin-bottom: var(--size-dog); + padding: var(--size-mouse) 0; } ol > li { - padding-left: var(--size-camel); + padding-left: var(--size-horse); position: relative; text-align: justify; + transition: color 0.1s ease-in; } ol > li::before { display: inline; position: absolute; - top: 0; + top: var(--size-mouse); left: 0; counter-increment: ol; - content: counter(ol); - margin-right: var(--size-cat); - background-color: var(--color-brown); - color: white; - border-radius: 50%; + content: counter(ol) "."; + color: var(--color-brown); font-weight: bold; - width: var(--size-bear); - text-align: center; + transition: color 0.1s ease-in; } ol > li:hover { @@ -110,11 +108,11 @@ ol > li:hover { } ol > li.completed { - text-decoration: line-through; + color: var(--color-gray); } ol > li.completed::before { - background-color: var(--color-green); + color: var(--color-green); } input { -- cgit v1.2.3