| /* Adapted from the original Meteor Todos app CSS file. */ |
| |
| @import "constants"; |
| |
| *, |
| :before, |
| :after { |
| box-sizing: border-box; |
| } |
| |
| html { |
| font: 400 16px/1.5 sans-serif; |
| } |
| |
| html, body { |
| height: 100%; |
| } |
| |
| body { |
| font-size: 16px; |
| line-height: 1.5; |
| background-color: #eee; |
| color: #333; |
| margin: 0; |
| } |
| |
| h1, h2, h3, h4, h5, h6, p { |
| margin: 0; |
| |
| &:not(:last-child) { |
| margin-bottom: 1em; |
| } |
| } |
| |
| h1, h2, h3, h4, h5, h6 { |
| &:not(:first-child) { |
| margin-top: 2em; |
| } |
| } |
| |
| p { |
| &:not(:first-child) { |
| margin-top: 1em; |
| } |
| } |
| |
| input { |
| font: inherit; |
| margin: 0; |
| padding: 0; |
| |
| &:focus { |
| outline: none; |
| } |
| } |
| |
| /* Pane arrangement ***********************************************************/ |
| |
| #page-pane { |
| position: absolute; |
| top: 0; |
| right: 0; |
| bottom: 0; |
| left: 0; |
| overflow: hidden; |
| } |
| |
| #page-pane, #tags-and-todos-pane { |
| display: flex; |
| } |
| |
| #tags-and-todos-pane { |
| flex-direction: column; |
| } |
| |
| #tags-and-todos-pane, #todos-pane { |
| flex: 1; |
| } |
| |
| #lists-pane { |
| flex: 0 0 240px; |
| } |
| |
| #tags-pane { |
| flex: 0 0 48px; |
| } |
| |
| #todos-pane, #lists-pane, #tags-pane { |
| position: relative; |
| overflow: auto; |
| } |
| |
| /* Generic classes ************************************************************/ |
| |
| .hcenter { |
| display: flex; |
| justify-content: center; |
| } |
| |
| .vcenter { |
| display: flex; |
| align-items: center; |
| } |
| |
| #page-pane .msg { |
| padding: 4px 8px; |
| } |
| |
| #page-pane .tag { |
| display: inline-block; |
| margin-left: 8px; |
| padding: 4px 8px; |
| border-radius: 4px; |
| background-color: #999; |
| color: #fff; |
| font-size: 13px; |
| font-weight: bold; |
| cursor: pointer; |
| } |
| |
| /* Lists pane *****************************************************************/ |
| |
| #lists-pane { |
| border-right: 1px solid #999; |
| background-color: #ddd; |
| |
| .lists-title { |
| font-weight: bold; |
| text-decoration: underline; |
| font-size: 20px; |
| margin: 8px 0; |
| text-align: center; |
| } |
| |
| .list, .input-row { |
| .vcenter; |
| padding: 0 12px; |
| width: 100%; |
| height: 40px; |
| } |
| |
| .list { |
| &.selected { |
| background-color: #9be; |
| font-weight: bold; |
| } |
| |
| .status { |
| position: relative; |
| display: inline-block; |
| margin-left: -8px; |
| padding: 8px; |
| cursor: pointer; |
| |
| .circle { |
| width: 10px; |
| height: 10px; |
| border-radius: 50%; |
| background-color: #888; |
| |
| &.shared { |
| background-color: @color-red-500; |
| } |
| } |
| } |
| |
| .list-name { |
| cursor: pointer; |
| color: #000; |
| text-decoration: none; |
| } |
| } |
| |
| .input-row input { |
| margin-top: 8px; |
| width: 100%; |
| } |
| |
| .user-id { |
| position: absolute; |
| bottom: 0; |
| left: 0; |
| width: 100%; |
| padding: 8px; |
| word-break: break-word; |
| |
| /* HACKETY HACK for demo. */ |
| &[data-text*=hpucha] { |
| background-color: @color-green-100; |
| } |
| &[data-text*=sadovsky] { |
| background-color: @color-red-100; |
| } |
| } |
| } |
| |
| /* Status pane (currently, within #lists-pane) ********************************/ |
| |
| #status-pane { |
| .hcenter; |
| .vcenter; |
| position: fixed; |
| top: 0; |
| right: 0; |
| bottom: 0; |
| left: 0; |
| overflow: hidden; |
| background-color: rgba(255, 255, 255, 0.85); |
| z-index: 10; /* above everything */ |
| |
| .status-dialog { |
| position: relative; |
| width: 600px; |
| padding: 32px; |
| background-color: #fff; |
| border: 1px solid rgba(0, 0, 0, 0.3); |
| box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); |
| } |
| |
| input { |
| width: 70%; |
| } |
| |
| .shared-with, .url { |
| margin-top: 24px; |
| overflow-wrap: break-word; |
| } |
| |
| .subtitle { |
| margin-bottom: 4px; |
| color: #999; |
| font-size: 13px; |
| font-weight: bold; |
| text-transform: uppercase; |
| } |
| |
| .close { |
| position: absolute; |
| top: 0; |
| right: 0; |
| margin: 8px; |
| background: url("/public/destroy.png") no-repeat 0 0; |
| cursor: pointer; |
| height: 20px; |
| width: 20px; |
| |
| &:hover { |
| background-position: 0 -20px; |
| } |
| } |
| } |
| |
| /* Tags pane ******************************************************************/ |
| |
| #tags-pane { |
| .vcenter; |
| border-bottom: 1px solid #999; |
| background-color: #ddd; |
| |
| .label { |
| display: inline-block; |
| } |
| |
| .label { |
| margin-left: 16px; |
| margin-right: 8px; |
| } |
| |
| .tag { |
| border: 1px solid #666; |
| |
| &.selected { |
| background: #69d; |
| } |
| } |
| |
| .count { |
| font-weight: normal; |
| |
| &:before { |
| content: " "; |
| } |
| } |
| } |
| |
| /* Todos pane *****************************************************************/ |
| |
| #todos-pane { |
| overflow-y: scroll; |
| |
| #new-todo { |
| margin: 16px 32px; |
| font-size: 20px; |
| |
| input { |
| width: 100%; |
| } |
| } |
| |
| #todo-list { |
| list-style: none; |
| margin: 0; |
| padding: 0; |
| } |
| |
| #todo-list .todo-row { |
| .vcenter; |
| display: flex; |
| height: 48px; |
| margin: 0 16px; |
| border-top: 1px solid #ccc; |
| overflow: hidden; |
| |
| &.edit { |
| .destroy, .checkbox { |
| visibility: hidden; |
| } |
| } |
| |
| .destroy { |
| cursor: pointer; |
| height: 20px; |
| width: 20px; |
| margin: 6px; |
| } |
| |
| &:hover .destroy { |
| background: url("/public/destroy.png") no-repeat 0 0; |
| |
| &:hover { |
| background-position: 0 -20px; |
| } |
| } |
| |
| .description { |
| flex: 1; |
| margin-left: 16px; |
| } |
| |
| &.done .description { |
| text-decoration: line-through; |
| color: #999; |
| } |
| |
| .item-tags { |
| overflow: auto; |
| |
| #edittag-input { |
| width: 80px; |
| } |
| |
| .tag.removable { |
| position: relative; |
| padding-right: 24px; |
| } |
| |
| .remove { |
| position: absolute; |
| top: 0; |
| right: 4px; |
| bottom: 0; |
| width: 16px; |
| background: url("/public/close_16.png") no-repeat 0 center; |
| |
| &:hover { |
| background-position: -16px center; |
| } |
| } |
| |
| .addtag { |
| margin-right: 8px; |
| border: 1px dashed #999; |
| background-color: transparent; |
| color: #333; |
| } |
| } |
| } |
| } |
| |
| /* Other **********************************************************************/ |
| |
| #log { |
| position: fixed; |
| bottom: 0; |
| width: 100%; |
| height: 300px; |
| z-index: 2; /* above .disp-type */ |
| padding: 8px; |
| border-top: 1px solid rgba(0, 0, 0, 0.3); |
| overflow-y: scroll; |
| background-color: #fff; |
| color: #333; |
| font: 400 13px/1.4 monospace; |
| white-space: pre-wrap; |
| word-wrap: break-word; |
| transform: translate3d(0, 100%, 0); |
| transition: transform 0.2s ease-out; |
| |
| .error { |
| color: red; |
| } |
| |
| &.visible { |
| box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.2); |
| transform: translate3d(0, 0, 0); |
| } |
| } |
| |
| #disp-type { |
| position: fixed; |
| top: 0; |
| right: 0; |
| padding: 0 16px; |
| color: #fff; |
| cursor: pointer; |
| z-index: 1; |
| |
| &.mem-collection { |
| background-color: @color-red-700; |
| } |
| |
| &.syncbase { |
| background-color: @color-green-700; |
| } |
| } |