diff options
Diffstat (limited to 'webapp/sass')
-rw-r--r-- | webapp/sass/components/_dropdown.scss | 5 | ||||
-rw-r--r-- | webapp/sass/components/_modal.scss | 4 | ||||
-rw-r--r-- | webapp/sass/components/_module.scss | 1 | ||||
-rw-r--r-- | webapp/sass/components/_save-button.scss | 7 | ||||
-rw-r--r-- | webapp/sass/components/_scrollbar.scss | 8 | ||||
-rw-r--r-- | webapp/sass/components/_videos.scss | 20 | ||||
-rw-r--r-- | webapp/sass/layout/_headers.scss | 8 | ||||
-rw-r--r-- | webapp/sass/layout/_markdown.scss | 8 | ||||
-rw-r--r-- | webapp/sass/layout/_post.scss | 116 | ||||
-rw-r--r-- | webapp/sass/layout/_sidebar-left.scss | 8 | ||||
-rw-r--r-- | webapp/sass/responsive/_mobile.scss | 30 | ||||
-rw-r--r-- | webapp/sass/responsive/_tablet.scss | 114 | ||||
-rw-r--r-- | webapp/sass/routes/_about-modal.scss | 3 | ||||
-rw-r--r-- | webapp/sass/routes/_admin-console.scss | 512 | ||||
-rw-r--r-- | webapp/sass/routes/_settings.scss | 6 | ||||
-rw-r--r-- | webapp/sass/routes/_signup.scss | 4 |
16 files changed, 581 insertions, 273 deletions
diff --git a/webapp/sass/components/_dropdown.scss b/webapp/sass/components/_dropdown.scss index 1168c9b27..5ed0bca61 100644 --- a/webapp/sass/components/_dropdown.scss +++ b/webapp/sass/components/_dropdown.scss @@ -6,6 +6,11 @@ z-index: 2500; } + .fa { + @include opacity(.6); + margin-right: 5px; + } + .divider { @include opacity(.15); } diff --git a/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss index d53be29dc..3d3a11de0 100644 --- a/webapp/sass/components/_modal.scss +++ b/webapp/sass/components/_modal.scss @@ -448,7 +448,7 @@ @include opacity(.8); float: right; margin-right: 3px; - margin-top: 12px; + margin-top: 8px; } .member-select__container { @@ -459,7 +459,7 @@ select { @include opacity(.8); float: right; - margin: 5px 5px 0 2px; + margin: 1px 5px 0 2px; width: auto; } } diff --git a/webapp/sass/components/_module.scss b/webapp/sass/components/_module.scss index 24488df96..e74404d9c 100644 --- a/webapp/sass/components/_module.scss +++ b/webapp/sass/components/_module.scss @@ -11,6 +11,7 @@ @import 'modal'; @import 'oauth'; @import 'popover'; +@import 'save-button'; @import 'scrollbar'; @import 'search'; @import 'suggestion-list'; diff --git a/webapp/sass/components/_save-button.scss b/webapp/sass/components/_save-button.scss new file mode 100644 index 000000000..12f793aa1 --- /dev/null +++ b/webapp/sass/components/_save-button.scss @@ -0,0 +1,7 @@ +@charset 'UTF-8'; + +.save-button { + .glyphicon { + margin-right: 10px; + } +}
\ No newline at end of file diff --git a/webapp/sass/components/_scrollbar.scss b/webapp/sass/components/_scrollbar.scss index b6ec4f22f..b868c0bf0 100644 --- a/webapp/sass/components/_scrollbar.scss +++ b/webapp/sass/components/_scrollbar.scss @@ -29,3 +29,11 @@ body { @include border-radius(2px); @include alpha-property(background-color, $black, .5); } + +.scrollbar--view { + -ms-overflow-style: none; + + .browser--ie & { + margin: 0 !important; + } +}
\ No newline at end of file diff --git a/webapp/sass/components/_videos.scss b/webapp/sass/components/_videos.scss index e009e6538..b2230f71d 100644 --- a/webapp/sass/components/_videos.scss +++ b/webapp/sass/components/_videos.scss @@ -10,6 +10,22 @@ max-width: 100%; } + .video-thumbnail__error { + height: 100%; + line-height: 2; + padding: 110px 0; + text-align: center; + width: 100%; + + .fa { + @include opacity(.5); + } + + div { + font-size: 1.2em; + } + } + .block { background-color: alpha-color($black, .5); border-radius: 10px; @@ -67,3 +83,7 @@ height: 500px; } } + +.video-loading { + height: 360px; +}
\ No newline at end of file diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss index 35fef8e08..7db561438 100644 --- a/webapp/sass/layout/_headers.scss +++ b/webapp/sass/layout/_headers.scss @@ -67,8 +67,9 @@ .channel-intro { border-bottom: 1px solid $light-gray; - margin: 0 18px 35px; - padding: 0 0 5px; + margin: 0 auto 15px; + max-width: 990px; + padding: 0 15px; .intro-links { display: inline-block; @@ -118,7 +119,8 @@ // Team Header in Sidebar .sidebar--left, -.sidebar--menu { +.sidebar--menu, +.admin-sidebar { .team__header { @include legacy-pie-clearfix; padding: 9px 10px; diff --git a/webapp/sass/layout/_markdown.scss b/webapp/sass/layout/_markdown.scss index cb29aa20e..9bac332d6 100644 --- a/webapp/sass/layout/_markdown.scss +++ b/webapp/sass/layout/_markdown.scss @@ -55,18 +55,14 @@ .post-code__language { @include opacity(0); - @include translate3d(0, 0, 0); + @include transition(opacity, .6s); background: #21586d; - border-radius: 0 .25em; + border-radius: 0 0 0 2px; color: $white; padding: 4px 10px 5px; position: absolute; right: 0; top: 0; - -webkit-transition: opacity 0.6s; - -moz-transition: opacity 0.6s; - -o-transition: opacity 0.6s; - transition: opacity 0.6s; z-index: 5; } diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss index a99c6d57c..e3818ea94 100644 --- a/webapp/sass/layout/_post.scss +++ b/webapp/sass/layout/_post.scss @@ -417,7 +417,8 @@ body.ios { .post-create-footer { @include clearfix; font-size: 13px; - padding: 3px 0 0 0; + padding: 3px 0 0; + .control-label { font-weight: normal; margin-bottom: 0; @@ -482,6 +483,80 @@ body.ios { background-color: beige; } + &.post--compact { + + .markdown__heading { + font-size: 1em; + margin: 0 0 7px; + } + + .post__body { + background: transparent !important; + margin-top: -1px; + padding: 3px 0; + } + + .post-image__columns { + clear: both; + } + + .post-image__column { + @include border-radius(2px); + font-size: .9em; + height: 26px; + line-height: 25px; + padding: 0 7px; + width: auto; + + .post-image__thumbnail { + display: none; + } + + .post-image__details { + background: transparent; + border: none; + padding: 0; + width: 100%; + + > div { + display: none; + } + } + + .post-image__name { + @include clearfix; + display: block; + margin: 0; + padding-right: 10px; + text-overflow: ellipsis; + white-space: nowrap; + + i { + font-size: .9em; + margin-right: 5px; + opacity: .5; + } + } + + a { + &:hover { + text-decoration: none; + } + } + } + + .post__img { + padding-top: 3px; + width: 28px; + + img, + svg { + height: 20px; + width: 20px; + } + } + } + p { font-size: .97em; line-height: 1.6em; @@ -526,6 +601,12 @@ body.ios { } } + .post__img { + img { + display: none; + } + } + .post__header { height: 0; margin: 0; @@ -545,9 +626,11 @@ body.ios { display: none; } - .post__img { - img { - display: none; + &.same--user { + .post__img { + img { + display: none; + } } } } @@ -644,11 +727,11 @@ body.ios { } .post__img { - width: 46px; + width: 42px; svg { - height: 36px; - width: 36px; + height: 32px; + width: 32px; } path { @@ -657,9 +740,9 @@ body.ios { img { @include border-radius(50px); - height: 36px; + height: 32px; vertical-align: inherit; - width: 36px; + width: 32px; } } @@ -731,6 +814,7 @@ body.ios { padding: .2em .5em; width: calc(100% - 75px); word-wrap: break-word; + position: relative; p { margin: 0 0 .4em; @@ -796,6 +880,20 @@ body.ios { margin-right: 8px; } } + + .pending-post-actions { + position: absolute; + right: 0; + top: 0; + padding: 5px 7px; + background: rgba(0, 0, 0, .7); + color: white; + font-size: .9em; + + a { + color: white; + } + } } .post__link { diff --git a/webapp/sass/layout/_sidebar-left.scss b/webapp/sass/layout/_sidebar-left.scss index 7ac1fee75..cc8f13730 100644 --- a/webapp/sass/layout/_sidebar-left.scss +++ b/webapp/sass/layout/_sidebar-left.scss @@ -40,7 +40,7 @@ } .dropdown-menu { - max-height: 400px; + max-height: 80vh; max-width: 200px; overflow-x: hidden; overflow-y: auto; @@ -140,6 +140,12 @@ text-transform: uppercase; } + .divider { + & + .divider { + display: none; + } + } + > a { border-radius: 0; line-height: 1.5; diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss index cc3d7a4b9..049e12055 100644 --- a/webapp/sass/responsive/_mobile.scss +++ b/webapp/sass/responsive/_mobile.scss @@ -1,6 +1,12 @@ @charset 'UTF-8'; @media screen and (max-width: 768px) { + .post-code__language { + @include opacity(.6); + @include transition(none); + display: block; + } + .backstage-filters { display: block; @@ -41,10 +47,15 @@ } .channel-intro { - margin: 0 15px 35px; + margin: 0 0 35px; } .post { + &.post--compact { + + + } + .post__dropdown { display: inline-block; height: 20px; @@ -136,10 +147,6 @@ &.same--root { &.same--user { - .post__time { - display: none; - } - .post__header { height: auto; margin-top: 5px; @@ -275,7 +282,7 @@ .signup-team__container { font-size: .9em; margin-bottom: 30px; - padding: 30px 0; + padding: 60px 10px 0; .signup-team__name { font-size: 2em; @@ -1010,12 +1017,19 @@ @media screen and (max-height: 640px) { .signup-team__container { - padding: 30px 0; - margin-bottom: 30px; font-size: .9em; + margin-bottom: 30px; .signup-team__name { font-size: 2em; } } } + +@media screen and (max-width: 320px) { + .tip-overlay { + &.tip-overlay--sidebar { + min-height: 440px; + } + } +} diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss index 72b4b5aad..f5e341b25 100644 --- a/webapp/sass/responsive/_tablet.scss +++ b/webapp/sass/responsive/_tablet.scss @@ -65,6 +65,7 @@ } } +// Tablet and desktop @media screen and (min-width: 768px) { .second-bar { display: none; @@ -83,6 +84,111 @@ } .post { + &.post--compact { + padding: 5px .5em 0 80px; + + .post__link { + margin: 4px 0 7px; + } + + .post__time { + font-size: .85em; + left: -70px; + position: absolute; + top: 2px; + } + + span { + p { + &:last-child { + margin-bottom: .3em; + } + } + } + + .post__header { + float: left; + height: 18px; + padding-top: 3px; + + .col__name { + font-weight: bold; + } + + .col__reply { + top: 2px; + } + } + + &.other--root { + .post__body { + > div { + &:first-child { + min-height: 21px; + } + } + } + + .post__link + .post__body { + clear: both; + } + + &.post--comment { + .post__header { + .col__reply { + top: 0; + } + } + } + } + + .post-code { + clear: both; + } + + &.same--root { + &.same--user { + padding-left: 80px; + + .post__img { + img { + display: none; + } + } + } + + &.post--comment { + padding-top: 1px; + + .post__img { + img { + display: inline-block; + } + } + + &.same--user { + .post__img { + img { + display: none; + } + } + } + + .post__header { + margin-left: 12px; + } + } + } + + .post__body { + width: 100%; + } + + .post__content { + padding-right: 85px; + } + } + &.same--root { &.same--user { .post__time { @@ -94,6 +200,14 @@ text-rendering: auto; top: -2px; } + + &.post--compact { + .post__time { + font-size: .85em; + left: -70px; + top: -5px; + } + } } } } diff --git a/webapp/sass/routes/_about-modal.scss b/webapp/sass/routes/_about-modal.scss index 43d04319d..4bfd04e57 100644 --- a/webapp/sass/routes/_about-modal.scss +++ b/webapp/sass/routes/_about-modal.scss @@ -59,6 +59,7 @@ p { &:first-child { float: left; + text-align: left; } } } @@ -79,4 +80,4 @@ } } -}
\ No newline at end of file +} diff --git a/webapp/sass/routes/_admin-console.scss b/webapp/sass/routes/_admin-console.scss index 0f47e7529..c8af72472 100644 --- a/webapp/sass/routes/_admin-console.scss +++ b/webapp/sass/routes/_admin-console.scss @@ -1,8 +1,16 @@ @charset 'UTF-8'; -.admin-controller { - > div { - height: 100%; +.admin-console { + color: #333; + height: 100%; + margin-left: 220px; + overflow: auto; + padding: 0 20px; + + .dropdown-menu { + .divider { + @include opacity(1); + } } .inner-wrap { @@ -17,6 +25,11 @@ padding-bottom: .5em; } + h4 { + font-weight: 600; + margin-bottom: 2em; + } + .form-control { background-color: $white; border: 1px solid $light-gray; @@ -34,122 +47,6 @@ } } - .sidebar--left { - &.sidebar--collapsable { - background: #333; - - .team__header { - background: transparent; - margin-bottom: 5px; - } - - .nav { - li { - padding: 0; - @include opacity(1); - - .icon { - width: 17px; - } - - &.divider { - @include alpha-property(background, $black, .1); - } - - > a { - &:hover, - &:focus { - @include alpha-property(background, $black, .1); - } - - &.active { - background-color: transparent; - } - } - - > h4 { - background: alpha-color($white, .15); - color: $white; - margin: 1px 0 0; - padding: 10px; - - .menu-icon--right { - right: 12px; - top: 6px; - } - } - } - - .menu-icon--right { - font-size: 18px; - font-weight: 600; - height: 20px; - line-height: 20px; - position: absolute; - right: 10px; - text-align: center; - top: 3px; - width: 20px; - - .fa { - color: $white; - font-size: 13px; - position: relative; - right: -2px; - } - } - - &.nav__sub-menu { - @include font-smoothing(initial); - background: #111; - - &.padded { - padding: 5px 0; - } - - li { - > a { - background: transparent; - color: #bbb; - font-size: 13px; - padding: 5px 35px 5px 15px; - - &:hover { - color: lighten($primary-color, 10); - } - - &.active { - color: $white; - font-weight: 600; - } - } - - .nav-more { - background: transparent; - color: #bbb; - cursor: pointer; - display: block; - font-size: 13px; - padding: 5px 15px; - - &:hover { - color: lighten($primary-color, 10); - } - } - } - } - - &.nav__inner-menu { - li { - > a { - padding-left: 20px; - } - } - } - } - } - } - .log__panel { background-color: white; border: 1px solid #ddd; @@ -160,168 +57,160 @@ width: 100%; } - .app__content { - color: #333; + &.admin { + background-color: #f1f1f1; + min-height: 600px; + overflow: auto; + padding: 0 40px 20px; + } - &.admin { - background-color: #f1f1f1; - min-height: 600px; - overflow: auto; - padding: 0 40px 20px; - } + .wrapper--fixed { + max-width: 800px; + } + + .form-horizontal { + margin-top: 40px; - .wrapper--fixed { - max-width: 800px; + .control-label { + font-weight: 600; + padding-right: 0; + text-align: left; } - .form-horizontal { - margin-top: 40px; + .form-group { + margin-bottom: 25px; + } - .control-label { - font-weight: 600; - padding-right: 0; - text-align: left; + .file__upload { + display: inline-block; + margin: 0 10px 10px 0; + position: relative; + + input { + @include opacity(0); + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; + z-index: 5; } + } - .form-group { - margin-bottom: 25px; + .help-text { + color: #777; + margin: 10px 0 0 15px; - &.form-group--small { - margin-bottom: 10px; - } + &.no-margin { + margin: 0; } - .file__upload { - display: inline-block; - margin: 0 10px 10px 0; - position: relative; - - input { - @include opacity(0); - height: 100%; - left: 0; - position: absolute; - top: 0; - width: 100%; - z-index: 5; - } + &.no-margin--top { + margin-top: 0; } - .help-text { - color: #777; - margin: 10px 0 0 15px; - - &.no-margin { - margin: 0; - } - - &.no-margin--top { - margin-top: 0; - } - - ul, - ol { - padding-left: 23px; - } - - .help-link { - margin-right: 5px; - } - - .btn { - font-size: 13px; - } + ul, + ol { + padding-left: 23px; } - .alert { - display: inline-block; - margin: 1em 0 0; - padding: 5px 7px; - position: relative; - top: 1px; + .help-link { + margin-right: 5px; + } - .fa { - margin-right: 5px; - } + .btn { + font-size: 13px; } } - .banner { - background: $white; - border: 1px solid #ddd; - font-size: .95em; - margin: 2em 0; - padding: .7em 1.5em; + .alert { + display: inline-block; + margin: 1em 0 0; + padding: 5px 7px; + position: relative; + top: 1px; - .banner__heading { - font-size: 1.5em; + .fa { + margin-right: 5px; } + } + } - .banner__content { - width: 80%; - } + .banner { + background: $white; + border: 1px solid #ddd; + font-size: .95em; + margin: 2em 0; + padding: .7em 1.5em; - &.warning { - background: #e60000; - } + .banner__heading { + font-size: 1.5em; } - .popover { - border-radius: 3px; - font-size: .95em; - width: 100%; + .banner__content { + width: 80%; } - .panel { - background-color: transparent; - border: none; + &.warning { + background: #e60000; } + } - .panel-default { - > .panel-heading { - background-color: transparent; - padding: 10px 0; - } + .popover { + border-radius: 3px; + font-size: .95em; + width: 100%; + } - .panel-body { - padding: 30px 0 10px; - } - } + .panel { + background-color: transparent; + border: none; + } - .panel-group { - margin-bottom: 50px; + .panel-default { + > .panel-heading { + background-color: transparent; + padding: 10px 0; } - .panel-title { - font-size: 24px; - line-height: 1.5; + .panel-body { + padding: 30px 0 10px; + } + } - a { - @include clearfix; - display: block; - text-decoration: none; + .panel-group { + margin-bottom: 50px; + } - &.collapsed { - .fa-minus { - display: none; - } + .panel-title { + font-size: 24px; + line-height: 1.5; - .fa-plus { - display: inline-block; - } - } + a { + @include clearfix; + display: block; + text-decoration: none; - .fa { - color: #aaa; - float: right; - font-size: 18px; - margin-top: 8px; + &.collapsed { + .fa-minus { + display: none; } .fa-plus { - display: none; + display: inline-block; } } + + .fa { + color: #aaa; + float: right; + font-size: 18px; + margin-top: 8px; + } + + .fa-plus { + display: none; + } } } @@ -343,3 +232,146 @@ margin-bottom: 1.5em; max-width: 150px; } + +.admin-console__disabled-text { + color: #777; + margin: 10px 0 0 15px; +} + +.admin-sidebar { + background: #333; + height: 100%; + left: 0; + position: absolute; + width: 220px; + z-index: 5; + + .dropdown-menu { + min-width: 200px; + } + + .team__header { + background: transparent; + } + + .nav-pills__container { + background: #111; + @include font-smoothing(initial); + height: calc(100% - 80px); + margin-top: 1px; + position: relative; + } + + .sidebar-category { + .category-title { + background: alpha-color($white, .15); + color: $white; + line-height: 15.4px; + padding: 10px; + + .category-icon { + right: 12px; + top: 6px; + width: 17px; + } + } + + .sections { + padding: 5px 0; + } + } + + .sidebar-section { + > .sidebar-section-title { + position: relative; + } + } + + .sidebar-section-title { + padding: 5px 35px 5px 15px; + } + + .sidebar-subsection-title { + padding: 5px 35px 5px 30px; + } + + .sidebar-section-title, + .sidebar-subsection-title { + color: #bbb; + display: block; + font-size: 13px; + position: relative; + + &:focus { + text-decoration: none; + } + + &:hover { + color: lighten($primary-color, 10); + text-decoration: none; + } + + &--active { + color: $white; + font-weight: 600; + + &:after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + color: whitesmoke; + content: "\f0d9"; + display: inline-block; + font: normal normal normal 26px/1 FontAwesome; + position: absolute; + right: -1px; + text-rendering: auto; + top: 3px; + } + } + } + + .sidebar-subsection-title { + &--active { + &:after { + top: 2px; + } + } + } + + .menu-icon--right { + font-size: 18px; + font-weight: 600; + height: 20px; + line-height: 20px; + position: absolute; + right: 12px; + text-align: center; + top: 8px; + width: 20px; + + .fa { + color: $white; + font-size: 13px; + position: relative; + right: -2px; + } + + &.menu__close { + cursor: pointer; + right: 10px; + top: 3px; + } + } +} + +.email-connection-test { + margin-top: -15px; +} + +.reload-config { + margin-bottom: 50px !important; +} + +.recycle-db { + margin-top: 50px !important; +}
\ No newline at end of file diff --git a/webapp/sass/routes/_settings.scss b/webapp/sass/routes/_settings.scss index 1551e5f4d..6986959b2 100644 --- a/webapp/sass/routes/_settings.scss +++ b/webapp/sass/routes/_settings.scss @@ -146,10 +146,10 @@ @include appearance(none); appearance: none; padding-right: 25px; + } - &::ms-expand { - display: none; - } + select::ms-expand { + display: none; } &:before { diff --git a/webapp/sass/routes/_signup.scss b/webapp/sass/routes/_signup.scss index 08bd0d12d..d3fe0363f 100644 --- a/webapp/sass/routes/_signup.scss +++ b/webapp/sass/routes/_signup.scss @@ -26,6 +26,10 @@ @include flex(1.3 0 0); padding-right: 80px; + img { + max-width: 450px; + } + p { color: lighten($black, 50%); } |