diff --git a/nullboard.html b/nullboard.html index fd164a3..83fd14f 100644 --- a/nullboard.html +++ b/nullboard.html @@ -1,14 +1,16 @@ - - - - Nullboard - + .board .list .note.raw.editing { + background: #fff; + } + + .board .list .note.raw .text {} + + .board .list .note.collapsed { + height: 23px; + } + + .board .list .note.collapsed .text { + height: 13px; + overflow: hidden; + line-height: 22px; + padding-top: 0; + } + + .board .list .note.collapsed .ops { + opacity: 1; + } + + .board .list .note.collapsed .ops .teaser { + padding: 1px 3px 0 1px; + } + + .board .list .note.collapsed .ops .teaser:before { + content: '_'; + top: 1px; + } + + .board .list .note.collapsed:hover .ops .teaser:before { + content: '\2261'; + } + + /***/ + .dragster { + z-index: 2; + position: absolute; + opacity: 0; + box-shadow: 1px 2px 3px #00000050; + background: #fff; + white-space: pre-wrap; + cursor: move; + + padding: 5px 25px 5px 10px; + font-size: 11px; + + box-shadow: 0 +1px 0 #ACB4BC inset, + 0 -1px 0 #ACB4BC inset, + +1px 0 0 #ACB4BC inset, + -1px 0 0 #ACB4BC inset, + 0px 1px 3px #00000030; + } + + .dragster.collapsed { + overflow: hidden; + line-height: 22px; + padding-top: 0; + } + + /***/ + .logo { + position: absolute; + top: 9px; + left: 9px; + font-size: 11px; + line-height: 19px; + padding: 6px 12px; + opacity: 0.6; + z-index: 3; + background: #f8f9fb; + } + + body.crowded .logo:hover { + background: #fff; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); + } + + .logo:hover { + opacity: 1.0; + } + + .logo .bulk { + overflow: hidden; + height: 0; + opacity: 0; + transition: opacity 400ms; + } + + .logo:hover .bulk { + height: auto; + opacity: 1; + } + + .logo a { + color: #000; + display: block; + } + + .logo a:hover { + color: #1489db; + } + + .logo .bulk a:before { + display: inline-block; + content: '-'; + width: 11px; + } + + /***/ + .config { + position: absolute; + top: 10px; + right: 21px; + font-size: 11px; + line-height: 19px; + z-index: 3; + background: #f8f9fb; + } + + body.crowded .config:hover { + background: #fff; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); + } + + .config a { + display: block; + color: #000; + transition: color 200ms; + } + + .config a:hover { + color: #1489db; + } + + .config .teaser { + padding: 5px; + color: #999; + } + + .config .bulk { + margin-right: 20px; + padding: 5px 0 10px 22px; + transition: opacity 400ms; + } + + .config .bulk div { + display: none; + padding: 6px 2px; + margin: 6px -2px; + border-top: 1px solid #00000028; + border-bottom: 1px solid #00000028; + } + + .config .bulk div a { + display: block; + margin-right: 10px; + } + + .config .bulk div a.active { + color: #1489db; + } + + .config .bulk div a.active:before { + content: '\2022 '; + display: inline-block; + width: 13px; + margin-left: -13px; + } + + .config .bulk div a.active:hover { + color: #000; + } + + .config .bulk input.imp-board-select { + position: absolute; + width: 1px; + height: 1px; + visibility: hidden; + } + + /***/ + .config .bulk { + display: none; + opacity: 0; + } + + .config:hover .teaser { + display: none; + } + + .config:hover .bulk { + display: block; + opacity: 1; + } + + /***/ + .overlay { + position: fixed; + z-index: 10; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.9); + display: none; + } + + /***/ + .overlay .license { + font-size: 12px; + line-height: 16px; + white-space: pre-wrap; + width: 384px; + height: auto; + max-height: 600px; + padding: 20px 25px 22px; + overflow-y: auto; + background: #fff; + position: absolute; + top: 100px; + left: 50%; + margin-left: -192px; + } + + .overlay .license a { + color: #1489db; + } + + .overlay .license span { + display: inline-block; + padding-right: 8px; + } + + /***/ + .overlay .about { + font-size: 12px; + line-height: 16px; + text-align: center; + width: 240px; + height: auto; + padding: 50px 25px; + background: #fff; + position: absolute; + top: 100px; + left: 50%; + margin-left: -145px; + } + + .overlay .about h1 { + font-size: 15px; + font-weight: 500; + margin-bottom: 10px; + } + + .overlay .about a { + display: block; + color: #1489db; + } + + .overlay .about div { + position: absolute; + bottom: -30px; + width: 240px; + color: #888; + } + + .overlay .about div span { + display: inline-block; + text-align: left; + padding-right: 10px; + } + + /***/ + + @media print { + + .logo, + .config, + .board .head .teaser, + .list .head .teaser { + visibility: hidden; + display: none; + } + + .board .list .note { + box-shadow: none; + outline: 1px solid #ccc; + } + + .board .list .note.raw { + outline: none; + } + } + - - -
- -
- Add new board... -
+ + + + +
-
-
- -
+
-
-
-
- -