X-Git-Url: https://git.ktnx.net/?a=blobdiff_plain;f=public%2Fcss%2Fstyle.css;h=9637ab027746587d02ab08b1b938757cee10482d;hb=e21959e2553c43eb24c69c78818be475e653134a;hp=5b28d314705a2c2eadc9a8c835d70dc70b028fb0;hpb=14917f67156e10a628489226af6d9e7ed274ac4e;p=lsl.git diff --git a/public/css/style.css b/public/css/style.css index 5b28d31..9637ab0 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -35,7 +35,7 @@ input { } h1 { -font-size: 200%; +font-size: 150%; color: #000; } @@ -48,13 +48,15 @@ text-decoration: none; #page { background-color: #ddd; -max-width: 80em; -margin: auto; display: grid; -grid-template-columns: auto minmax(25%,20em); -grid-column-gap: 1em; margin: 0 1em 1em 1em; } +@media (min-width: 500pt) { + #page { + grid-template-columns: auto minmax(25%,20em); + grid-column-gap: 1em; + } +} #content { background-color: white; @@ -71,9 +73,16 @@ padding-left: 75px; padding-right: 30px; } +#head-list-name { + display: grid; + grid-template-columns: auto 2em; + grid-column-gap: 1ex; + min-height: 2em; + align-items: center; +} #header h1, #header h2 {margin: 0} -#header { font-weight: bold; } +#selected-list-name { font-weight: bold; } #header h2 { color: #888; font-weight: normal; @@ -158,10 +167,14 @@ font-size: 10px; column-gap: 1ex; background: hsla(0, 0%, 90%, 0); transition: 0.5s; + line-height: 1.7em; } .list-item-row:hover { background: hsla(0, 0%, 90%, 1); } +.list-item-row input[type="checkbox"] { + width: 1.3em; +} .list-item-row .description { cursor: text; min-width: 2em; } .list-item-row .edit-trigger { cursor: pointer; @@ -175,9 +188,8 @@ font-size: 10px; opacity: 1; padding: 0 0.5ex; } -.list-edit-trigger:hover { - background: hsla(0, 0%, 80%, 1); - border-left: 1px solid black; +#list-edit-trigger:hover { + background: hsla(0, 0%, 90%, 1); } #busy-screen { @@ -228,34 +240,43 @@ ul#lists > li.selected { #new-list-item { margin-top: 1em; } -span.list-edit-trigger { - visibility: hidden; - opacity: 0; +#list-edit-trigger { transition: 0.25s; - height: 100%; - min-width: 2em; + height: 2em; + width: 2em; display: grid; align-items: center; justify-items: center; -} -ul#lists > li:hover span.list-edit-trigger { - visibility: visible; - opacity: 1; + border-radius: 0.75ex; } ul#lists > li.editing span.ui-icon-disk { display: inline-block; } +ul#list-items { + padding: 0; +} + .ui-widget-overlay { opacity: 0.3; } +.ui-dialog .ui-dialog-buttonpane { + padding-left: 1.4em; +} .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: none; text-align: right; } .ui-dialog-buttonset > button.btn-delete { float: left; + margin-right: 2em; } .ui-button.btn-delete:hover { background: hsl(0, 70%, 92.9%); } + +.edit-item-dialog input[type="text"], +.edit-list-dialog input[type="text"] { + width: 100%; + box-sizing: border-box; +}