summaryrefslogtreecommitdiffstats
path: root/client/components/main
diff options
context:
space:
mode:
Diffstat (limited to 'client/components/main')
-rw-r--r--client/components/main/editor.jade9
-rw-r--r--client/components/main/layouts.styl293
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