X-Git-Url: https://git.ktnx.net/?a=blobdiff_plain;f=public%2Fcss%2Fstyle.css;h=4634b150df1a5f5b9e4685010194bc5bb63ddc21;hb=refs%2Fheads%2Fmain;hp=6aecb3cd1a8be093ebf600185a65b793965b8ca3;hpb=871141f37497c7de80ab25708900364e8df204fa;p=lsl.git diff --git a/public/css/style.css b/public/css/style.css index 6aecb3c..4634b15 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -63,6 +63,7 @@ background-color: white; border: 3px solid #aaa; border-top: none; padding: 1em; +box-sizing: border-box; } #sidebar { @@ -82,7 +83,7 @@ padding-right: 30px; } #header h1, #header h2 {margin: 0} -#header { font-weight: bold; } +#selected-list-name { font-weight: bold; } #header h2 { color: #888; font-weight: normal; @@ -167,22 +168,26 @@ 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 .description { cursor: text; min-width: 2em; } +.list-item-row input[type="checkbox"] { + width: 1.2em; +} +.list-item-row .description { cursor: default; min-width: 2em; } .list-item-row .edit-trigger { cursor: pointer; visibility: hidden; opacity: 0; transition: 0.5s; background: hsla(0, 0%, 80%, 0); + padding: 0 0.5ex; } .list-item-row:hover .edit-trigger { visibility: visible; opacity: 1; - padding: 0 0.5ex; } #list-edit-trigger:hover { background: hsla(0, 0%, 90%, 1); @@ -253,7 +258,7 @@ ul#list-items { } .ui-widget-overlay { - opacity: 0.3; + opacity: 0.4; } .ui-dialog .ui-dialog-buttonpane { padding-left: 1.4em; @@ -276,3 +281,19 @@ ul#list-items { width: 100%; box-sizing: border-box; } +#item-multi-action { + display: block; + position: fixed; + top: -3em; + opacity: 0; + transition: .5s cubic-bezier(0.0, 0.0, 0.0, 1.0); + background: white; + box-shadow: 0 0 1em 1ex white; +} +#item-multi-action.in-view { + top: 4em; + opacity: 1; +} +#item-multi-action button { display: none; } +#item-multi-action.checking button#btn-check-all { display: block; } +#item-multi-action.clearing button#btn-clear-all { display: block; }