diff options
Diffstat (limited to 'client/components/main')
-rw-r--r-- | client/components/main/editor.jade | 9 | ||||
-rw-r--r-- | client/components/main/layouts.styl | 293 |
2 files changed, 298 insertions, 4 deletions
diff --git a/client/components/main/editor.jade b/client/components/main/editor.jade index c910b052..f10d64a1 100644 --- a/client/components/main/editor.jade +++ b/client/components/main/editor.jade @@ -7,7 +7,8 @@ template(name="editor") +Template.contentBlock template(name="viewer") - +mentions - +emoji - +markdown - {{> UI.contentBlock }} + .viewer + +mentions + +emoji + +markdown + {{> UI.contentBlock }} diff --git a/client/components/main/layouts.styl b/client/components/main/layouts.styl new file mode 100644 index 00000000..105709cf --- /dev/null +++ b/client/components/main/layouts.styl @@ -0,0 +1,293 @@ +@import 'nib' + +global-reset() + +html, body, input, select, textarea, button + font: 14px "Helvetica Neue", Arial, Helvetica, sans-serif + line-height: 18px + color: #4d4d4d + +html + font-size: 100% + max-height: 100% + -webkit-text-size-adjust: 100% + +body + background: darken(white, 13%) + margin: 0 + position: relative + z-index: 0 + overflow-y: auto + +#surface + display: flex + flex-direction: column + min-height: 100vh + overflow: hidden + +#content + position: relative + flex: 1 + +div::selection + background: transparent + +h1 + font-size: 22px + line-height: 1.2em + margin: 0 0 10px + +h2 + font-size: 18px + line-height: 1.2em + margin: 0 0 9px + +h3, h4, h5, h6 + font-size: 16px + line-height: 1.25em + margin: 0 0 6px + +.quiet, .quiet a + color: #8c8c8c + +.error, .error a + color: #eb3800 + +.no-items-message + color: darken(white, 60%) + margin: 30px 0 + text-align: center + +.warning + background: #f0ecdb + border-radius: 3px + color: #aa8f09 + padding: 6px 8px + + a + color: #aa8f09 + +a + color: inherit + cursor: pointer + text-decoration: none + + &.is-disabled, + &.is-disabled:hover + cursor: default + text-decoration: none + +strong + font-weight: bold + +p + a + text-decoration: underline + +table, p + margin-bottom: 8px + +pre + margin: 15px 0 + white-space: pre + max-height: 516px + +pre, +code, +tt + font-family: lucida console, monospace + line-height: 1.25em + +blockquote + margin: 8px 0 8px 8px + border-left: 1px solid #ccc + color: #666 + padding: 0 0 0 8px + +hr + height: 1px + border: 0 + border: none + width: 100% + background: #dbdbdb + color: #dbdbdb + margin: 15px 0 + padding: 0 + +table, td, th + vertical-align: top + border-top: 1px solid #ccc + border-left: 1px solid #ccc + +td, th + padding: 5px + border-right: 1px solid #ccc + border-bottom: 1px solid #ccc + +th + font-weight: 700 + +thead + background: #fff + background: linear-gradient(to bottom, #fff 0, #f0f0f0 100%) + +tbody + background-color: #fff + +dl, dt + margin-bottom: 8px + +dd + margin: 0 0 16px 24px + +.clear + clear: both + +.clearfix + clearfix() + +.hide + display: none + +.show + display: block + +.bold + font-weight: 700 + +.center + text-align: center + +.left + float: left + +.right + float: right + +.first + margin-left: 0 + padding-left: 0 + +.last + margin-right: 0 + padding-right: 0 + +.top + margin-top: 0 + padding-top: 0 + +.bottom + margin-bottom: 0 + padding-bottom: 0 + +.relative + position: relative + +.block + display: block + +.inline + display: inline + +.inline-block + display: inline-block + +.pointer + cursor: pointer + +.ellip + overflow: hidden + text-overflow: ellipsis + white-space: nowrap + +.underline + text-decoration: underline + +.lowercase + text-transform: lowercase + +.invisible + visibility: hidden + +.wrapword + word-wrap: break-word + +.grab + cursor: grab + +.grabbing + cursor: grabbing + +.emoji + height: 18px + width: 18px + vertical-align: text-bottom + +// Implement a thiner close icon as suggested in +// https://github.com/FortAwesome/Font-Awesome/issues/1540#issuecomment-68689950 +.fa.fa-times-thin:before + content: '\00d7'; + +.fa.fa-globe.colorful + color: #4caf50 + +.fa.fa-lock.colorful + color: #f44336 + +.pop-over .pop-over-list li a:hover + .fa, .fa.colorful + color: white + + &:hover + color: white + +a + &.fa, i.fa + color: darken(white, 35%) + + &:hover, &.is-active + &.fa, i.fa + color: darken(white, 60%) + +.ui-draggable-dragging + z-index: 200 + +.atMention + background: #dbdbdb + border-radius: 3px + padding: 1px 4px + margin: -1px 0 + display: inline-block + + &.me + background: #cfdfe8 + +.big-message + display: block + margin: 75px auto + text-align: center + max-width: 600px + + h1 + font-size: 26px + margin-bottom: 24px + + p + font-size: 18px + line-height: 22px + +.gutter + margin-left: 38px + +.viewer + ul + list-style-type: initial + padding-left: 20px + +@keyframes fadeIn + from + opacity: 0 + +@keyframes flexGrowIn + from + flex-basis: 0 |