aboutsummaryrefslogtreecommitdiff
path: root/client/css/core-general.styl
diff options
context:
space:
mode:
authorrr-2016-08-27 18:19:42 +0200
committerrr-2016-08-27 22:19:01 +0200
commit514c4349e0533d67bea5d7588c68e9ec20e8ad87 (patch)
treeb6a1a98d2564882860cde47b71ba19df0046714c /client/css/core-general.styl
parent702ec3e6fe57744e56ffa1a4423d122a2d8a2a5c (diff)
client/css: split into files
Diffstat (limited to 'client/css/core-general.styl')
-rw-r--r--client/css/core-general.styl198
1 files changed, 198 insertions, 0 deletions
diff --git a/client/css/core-general.styl b/client/css/core-general.styl
new file mode 100644
index 0000000..6539712
--- /dev/null
+++ b/client/css/core-general.styl
@@ -0,0 +1,198 @@
+@import colors
+@import mixins
+
+/* latin */
+@font-face
+ font-family: 'Open Sans';
+ font-style: normal;
+ font-weight: 400;
+ src: local('Open Sans'), local('OpenSans'), url(/fonts/open_sans.woff2) format('woff2');
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
+
+/* make <body> cover entire viewport */
+html
+ height: 100%
+body
+ min-height: 100%
+
+body
+ background: $window-color
+ overflow-y: scroll
+ margin: 0
+ color: $text-color
+ font-family: 'Open Sans', sans-serif
+ font-size: 12pt
+ line-height: 18pt
+ @media (max-width: 800px)
+ font-size: 10pt
+ line-height: 15pt
+ @media (max-width: 1200px)
+ font-size: 11pt
+ line-height: 16.5pt
+
+h1, h2, h3
+ font-weight: normal
+ margin-bottom: 1em
+
+th
+ font-weight: normal
+
+a
+ cursor: pointer
+ color: $main-color
+ text-decoration: none
+ transition: color 0.1s linear
+ &.inactive
+ color: $inactive-link-color
+ cursor: default
+ &.icon
+ color: $inactive-link-color
+ opacity: .5
+ &:focus
+ outline: 2px solid $main-color
+ .vim-nav-hint
+ position: absolute
+ visibility: hidden
+
+a.append, span.append
+ margin-left: 1em
+form .fa-question-circle-o
+ font-size: 110%
+ vertical-align: middle
+
+#content-holder
+ padding: 1.5vw
+ text-align: center
+ >.content-wrapper
+ box-sizing: border-box /* make max-width: 100% on this element include padding */
+ text-align: left
+ display: inline-block
+ margin: 0 auto
+ >*:first-child, form h1
+ margin-top: 0
+ >.content-wrapper:not(.transparent)
+ background: $top-navigation-color
+ padding: 2vw
+
+hr
+ border: 0
+ border-top: 1px solid $line-color
+ margin: 1em 0
+ padding: 0
+
+nav
+ ul
+ list-style-type: none
+ padding: 0
+ margin: 0
+ display: inline-block
+ li
+ display: block
+ padding: 0
+ margin: 0
+ a
+ display: inline-block
+ img
+ margin: 0
+ vertical-align: top /* fix ghost margin under the image */
+
+ &.buttons
+ margin: 1em 0
+ line-height: 2.3em
+ vertical-align: middle
+ ul
+ li
+ display: inline-block
+ li a
+ padding: 0 1.2em
+ li:not(.active) a
+ color: $inactive-tab-text-color
+ li:hover:not(.active) a
+ color: $active-tab-text-color
+ li.active a
+ background: $active-tab-background-color
+ color: $active-tab-text-color
+ :focus
+ background: $focused-tab-background-color
+ outline: 0
+
+ &#top-navigation
+ background: $top-navigation-color
+ margin: 0
+ ul
+ display: block
+ text-align: right
+ li
+ display: inline-block
+ float: left
+ ul li[data-name=account],
+ ul li[data-name=register],
+ ul li[data-name=login],
+ ul li[data-name=logout],
+ ul li[data-name=settings],
+ ul li[data-name=help]
+ float: none
+ .access-key
+ text-decoration: underline
+ .thumbnail
+ width: 1.5em
+ height: 1.5em
+ margin: calc((2.3em - 1.5em) / 2)
+ margin-right: 0.6em
+ margin-left: calc(0.6em - 1.2em)
+ float: left
+
+a .access-key
+ text-decoration: underline
+
+.messages
+ margin: 0 auto
+ width: 30em
+ max-width: 100%
+ .message
+ margin: 0 0 1em 0
+ display: inline-block
+ text-align: left
+ padding: 0.5em 1em
+ .message.info
+ border: 1px solid $message-info-border-color
+ background: $message-info-background-color
+ .message.error
+ border: 1px solid $message-error-border-color
+ background: $message-error-background-color
+ .message.success
+ border: 1px solid $message-success-border-color
+ background: $message-success-background-color
+
+.thumbnail
+ /*background-image: attr(data-src url)*/ /* not available yet */
+ vertical-align: middle
+ background-repeat: no-repeat
+ background-size: cover
+ background-position: center
+ display: inline-block
+ width: 20px
+ height: 20px
+ &.empty
+ background-image: url('/img/transparency_grid.png')
+ background-repeat: repeat
+ background-size: initial
+ img
+ opacity: 0
+ width: 100%
+ height: 100%
+ video
+ width: 100%
+ height: 100%
+
+.flexbox-dummy
+ height: 0 !important
+ padding-top: 0 !important
+ padding-bottom: 0 !important
+ margin-top: 0 !important
+ margin-bottom: 0 !important
+
+/* hack to prevent text from being copied */
+[data-pseudo-content]:before {
+ content: attr(data-pseudo-content)
+}

© 2015 - 2026 Jakob L. Kreuze