diff --git a/.sass-lint.yml b/.sass-lint.yml new file mode 100644 index 0000000000..71a68af113 --- /dev/null +++ b/.sass-lint.yml @@ -0,0 +1,178 @@ +# sass-lint config generated by make-sass-lint-config v0.1.1 +# +# The following scss-lint Linters are not yet supported by sass-lint: +# DisableLinterReason, ElsePlacement, PropertyCount, SelectorDepth +# SpaceAroundOperator, TrailingWhitespace, UnnecessaryParentReference, Compass::* +# +# The following settings/values are unsupported by sass-lint: +# Linter Indentation, option "allow_non_nested_indentation" +# Linter Indentation, option "character" +# Linter NestingDepth, option "ignore_parent_selectors" +# Linter PropertySortOrder, option "min_properties" +# Linter PropertySortOrder, option "separate_groups" +# Linter SpaceBeforeBrace, option "allow_single_line_padding" +# Linter VendorPrefix, option "identifier_list" + +files: + include: '**/*.scss' +options: + formatter: stylish + merge-default-rules: false +rules: + bem-depth: + - 1 + - max-depth: 3 + border-zero: + - 1 + - convention: none + brace-style: + - 2 + - allow-single-line: true + class-name-format: + - 1 + - convention: hyphenatedbem + clean-import-paths: + - 1 + - filename-extension: false + leading-underscore: false + empty-line-between-blocks: + - 2 + - ignore-single-line-rulesets: true + extends-before-declarations: 1 + extends-before-mixins: 1 + final-newline: + - 1 + - include: true + force-attribute-nesting: 1 + force-element-nesting: 1 + force-pseudo-nesting: 1 + function-name-format: + - 1 + - allow-leading-underscore: true + convention: hyphenatedlowercase + hex-length: + - 1 + - style: short + hex-notation: + - 1 + - style: lowercase + id-name-format: + - 1 + - convention: hyphenatedbem + indentation: + - 2 + - size: 4 + leading-zero: + - 1 + - include: false + mixin-name-format: + - 0 + - allow-leading-underscore: true + convention: hyphenatedlowercase + mixins-before-declarations: 1 + nesting-depth: + - 1 + - max-depth: 4 + no-color-keyword: 1 + no-color-literals: 1 + no-css-comments: 1 + no-debug: 1 + no-duplicate-properties: 1 + no-empty-rulesets: 1 + no-extends: 0 + no-ids: 1 + no-important: 1 + no-invalid-hex: 1 + no-mergeable-selectors: 1 + no-misspelled-properties: + - 1 + - extra-properties: ['overflow-scrolling', 'font-smoothing'] + no-qualifying-elements: + - 1 + - allow-element-with-attribute: false + allow-element-with-class: false + allow-element-with-id: false + no-trailing-zero: 1 + no-transition-all: 0 + no-url-protocols: 1 + no-vendor-prefixes: + - 1 + - additional-identifiers: [] + excluded-identifiers: [] + placeholder-in-extend: 1 + placeholder-name-format: + - 1 + - convention: hyphenatedlowercase + property-sort-order: + - 1 + - ignore-custom-properties: false + property-units: + - 1 + - global: + - ch + - em + - ex + - rem + - cm + - in + - mm + - pc + - pt + - px + - q + - vh + - vw + - vmin + - vmax + - deg + - grad + - rad + - turn + - ms + - s + - Hz + - kHz + - dpi + - dpcm + - dppx + - '%' + per-property: {} + quotes: + - 1 + - style: single + shorthand-values: + - 1 + - allowed-shorthands: + - 1 + - 2 + - 3 + single-line-per-selector: 2 + space-after-bang: + - 2 + - include: false + space-after-colon: + - 2 + - include: true + space-after-comma: + - 1 + - include: true + space-before-bang: + - 2 + - include: true + space-before-brace: + - 2 + - include: true + space-before-colon: 1 + space-between-parens: + - 2 + - include: false + trailing-semicolon: 2 + url-quotes: 1 + variable-for-property: + - 0 + - properties: [] + variable-name-format: + - 1 + - allow-leading-underscore: true + convention: hyphenatedlowercase + zero-unit: 1 diff --git a/web/react/package.json b/web/react/package.json new file mode 100644 index 0000000000..006901dc9c --- /dev/null +++ b/web/react/package.json @@ -0,0 +1,56 @@ +{ + "name": "mattermost", + "version": "0.0.1", + "private": true, + "dependencies": { + "autolinker": "0.24.0", + "fastclick": "1.0.6", + "flux": "2.1.1", + "highlight.js": "9.1.0", + "keymirror": "0.1.1", + "marked": "mattermost/marked#cb85e5cc81bc7937dbb73c3c53d9532b1b97e3ca", + "mm-intl": "mattermost/mm-intl#805442fd474fa40cd586ddeda404dbbe8e60626d", + "object-assign": "4.0.1", + "react": "0.14.3", + "react-router": "2.0.0", + "twemoji": "1.4.1" + }, + "devDependencies": { + "babel-eslint": "5.0.0", + "babel-plugin-transform-runtime": "6.5.2", + "babel-preset-es2015": "6.5.0", + "babel-preset-react": "6.5.0", + "babel-preset-stage-0": "6.5.0", + "babelify": "7.2.0", + "browserify": "13.0.0", + "eslint": "2.2.0", + "eslint-plugin-react": "4.0.0", + "exorcist": "0.4.0", + "sass-lint": "^1.5.1", + "uglify-js": "2.6.1", + "watchify": "3.7.0" + }, + "scripts": { + "check": "", + "build-libs": "browserify -r crypto -r autolinker -r flux -r keymirror -r marked -r object-assign -r twemoji | uglifyjs -c -m --screw-ie8 > ../static/js/libs.min.js", + "start": "watchify --fast -x crypto -x node -x autolinker -x flux -x keymirror -x marked -x object-assign -x twemoji -o ../static/js/bundle.js -v -d ./**/*.jsx", + "build": "browserify -x crypto -x autolinker -x flux -x keymirror -x marked -x object-assign -x twemoji -d ./**/*.jsx | exorcist ../static/js/inter.js.map > ../static/js/tmp.js && uglifyjs ../static/js/tmp.js --in-source-map \"../static/js/inter.js.map\" --source-map \"../static/js/bundle.min.js.map\" --source-map-url \"/static/js/bundle.min.js.map\" -c -m --screw-ie8 > ../static/js/bundle.min.js && rm ../static/js/tmp.js && rm ../static/js/inter.js.map" + }, + "browserify": { + "transform": [ + [ + "babelify", + { + "presets": [ + "es2015", + "react", + "stage-0" + ], + "plugins": [ + "transform-runtime" + ] + } + ] + ] + } +} diff --git a/web/sass-files/sass/routes/_print.scss b/web/sass-files/sass/routes/_print.scss new file mode 100644 index 0000000000..b03a549fba Binary files /dev/null and b/web/sass-files/sass/routes/_print.scss differ diff --git a/webapp/components/center_panel.jsx b/webapp/components/center_panel.jsx index 17e5e43d9b..6c156f2a83 100644 --- a/webapp/components/center_panel.jsx +++ b/webapp/components/center_panel.jsx @@ -120,7 +120,10 @@ export default class CenterPanel extends React.Component { id='app-content' className='app__content' > -
+
diff --git a/webapp/components/more_channels.jsx b/webapp/components/more_channels.jsx index fc047eaffe..d0eeec1efb 100644 --- a/webapp/components/more_channels.jsx +++ b/webapp/components/more_channels.jsx @@ -160,7 +160,7 @@ export default class MoreChannels extends React.Component { return (
{popoverHtml}
diff --git a/webapp/components/view_image.jsx b/webapp/components/view_image.jsx index e739fca305..2b7e033827 100644 --- a/webapp/components/view_image.jsx +++ b/webapp/components/view_image.jsx @@ -311,15 +311,15 @@ class ViewImageModal extends React.Component {
.container-fluid { - overflow: auto; - } + > .container-fluid { + overflow: auto; + } - .inner-wrap { - > .row.content { - min-height: 100%; + .inner-wrap { + > .row { + &.content { margin-bottom: -89px; + min-height: 100%; } } } @@ -30,9 +32,11 @@ body { .inner-wrap { height: 100%; - > .row.main { - height: 100%; - position: relative; + > .row { + &.main { + height: 100%; + position: relative; + } } } diff --git a/webapp/sass/base/_typography.scss b/webapp/sass/base/_typography.scss index 676a2c4058..f5795d862e 100644 --- a/webapp/sass/base/_typography.scss +++ b/webapp/sass/base/_typography.scss @@ -6,20 +6,20 @@ strong { } a { + color: $primary-color; cursor: pointer; text-decoration: none; word-break: break-word; - color: $color--primary; -} -a:focus, -a:hover { - color: $color--primary--hover; + &:focus, + &:hover { + color: $primary-color--hover; + } } body { + @include font-smoothing; font-family: 'Open Sans', sans-serif; - -webkit-font-smoothing: antialiased; } .word-break--all { diff --git a/webapp/sass/components/_alerts.scss b/webapp/sass/components/_alerts.scss index 49ca3e8aff..cb4c9c9e19 100644 --- a/webapp/sass/components/_alerts.scss +++ b/webapp/sass/components/_alerts.scss @@ -1,13 +1,13 @@ @charset 'UTF-8'; .alert { - padding: 8px 12px; @include border-radius($border-rad); + padding: 8px 12px; } .alert--confirm { display: inline-block; float: left; - padding: 4px 10px; margin: 1px 0 0 10px; -} \ No newline at end of file + padding: 4px 10px; +} diff --git a/webapp/sass/components/_buttons.scss b/webapp/sass/components/_buttons.scss index bb8efbb149..efef11ce9a 100644 --- a/webapp/sass/components/_buttons.scss +++ b/webapp/sass/components/_buttons.scss @@ -5,19 +5,19 @@ @include border-radius($border-rad); &.btn-primary { + background: $primary-color; border-color: transparent; - background: $color--primary; &:hover, &:focus, &:active { - background: $color--primary--hover; + background: $primary-color--hover; } } &.btn-inactive { + background: $light-gray; border-color: transparent; - background: #707070; - color: #fff; + color: $white; } } diff --git a/webapp/sass/components/_emoticons.scss b/webapp/sass/components/_emoticons.scss index 661b25d94d..80a8008634 100644 --- a/webapp/sass/components/_emoticons.scss +++ b/webapp/sass/components/_emoticons.scss @@ -1,27 +1,27 @@ @charset 'UTF-8'; .emoticon { - width: 1.5em; - height: 1.5em; - display: inline-block; - margin-bottom: .25em; background-size: contain; + display: inline-block; + height: 1.5em; + margin-bottom: .25em; + width: 1.5em; } .emoticon-suggestion { @include clearfix; - width: 100%; - height: 30px; cursor: pointer; font-size: 13px; + height: 30px; line-height: 30px; + width: 100%; } .emoticon-suggestion__image { - width: 20px; height: 20px; margin: 6px 6px 0 5px; padding: 0; text-align: center; vertical-align: top; + width: 20px; } diff --git a/webapp/sass/components/_error-bar.scss b/webapp/sass/components/_error-bar.scss index 2b74a33ae0..cda7d25bd1 100644 --- a/webapp/sass/components/_error-bar.scss +++ b/webapp/sass/components/_error-bar.scss @@ -1,29 +1,28 @@ @charset 'UTF-8'; .error-bar { - background-color: #09f; - text-align: center; - position: relative; - color: #fff; + background-color: darken($primary-color, 5%); + color: $white; + padding: 5px 30px; position: absolute; + text-align: center; top: 0; width: 100%; z-index: 9999; - padding: 5px 30px; &__close { - position: absolute; - right: 0; - top: 0; - color: #fff; + color: $white; + font-family: 'Open Sans', sans-serif; font-size: 20px; font-weight: 600; - text-decoration: none; padding: 0 10px; - font-family: 'Open Sans', sans-serif; + position: absolute; + right: 0; + text-decoration: none; + top: 0; &:hover { - color: #fff; + color: $white; text-decoration: none; } } diff --git a/webapp/sass/components/_files.scss b/webapp/sass/components/_files.scss index b9e2b5f7da..b854312c13 100644 --- a/webapp/sass/components/_files.scss +++ b/webapp/sass/components/_files.scss @@ -1,27 +1,31 @@ @charset 'UTF-8'; .file-preview__container { - position: relative; - margin: 1px 0 10px; - width: 100%; - max-height: 100px; height: 100px; - white-space: nowrap; + margin: 1px 0 10px; + max-height: 100px; overflow-x: auto; overflow-y: hidden; + position: relative; + white-space: nowrap; + width: 100%; } .file-preview { + @include clearfix; + border: 1px solid $light-gray; display: inline-block; - width: 120px; height: 100px; margin: 0 0 0 10px; position: relative; - border: 1px solid #ddd; - @include clearfix; + width: 120px; - &:hover .file-preview__remove:after { - @include opacity(1); + &:hover { + .file-preview__remove { + &:after { + @include opacity(1); + } + } } &:first-child { @@ -29,13 +33,13 @@ } .spinner { - position: absolute; - top: 50%; + height: 32px; left: 50%; margin-left: -16px; margin-top: -16px; + position: absolute; + top: 50%; width: 32px; - height: 32px; } } @@ -46,14 +50,15 @@ } .file-preview__remove { - position: absolute; - width: 100%; height: 100%; left: 0; + position: absolute; top: 0; + width: 100%; &:after { - background: rgba(0, 0, 0, .4); + @include opacity(0); + @include alpha-property(background, $black, .4); content: ''; height: 100%; left: 0; @@ -61,33 +66,31 @@ position: absolute; top: 0; width: 100%; - @include opacity(0); } i { - top: 5px; - right: 5px; - position: absolute; - color: #fff; + color: $white; cursor: pointer; - z-index: 5; opacity: inherit; - text-shadow: 0 0px 3px #444; - text-shadow: 0 0px 3px rgba(0, 0, 0, .7); + position: absolute; + right: 5px; + text-shadow: 0 0 3px alpha-color($black, .7); + top: 5px; + z-index: 5; } } .image-comment { background-position: left top; background-repeat: no-repeat; - width: 300px; height: 300px; + width: 300px; } .file-icon { - width: 100%; height: 100%; + width: 100%; &.audio { @include file-icon('../images/icons/audio.png'); @@ -131,36 +134,30 @@ } .post-image__column { + border: 1px solid alpha-color($black, .2); + float: left; + height: 100px; + margin: 5px 10px 5px 0; position: relative; width: 240px; - height: 100px; - float: left; - margin: 5px 10px 5px 0; - border: 1px solid lightgrey; - - a { - text-decoration: none; - color: grey; - } } .post-image__load { + background-position: center; + background-repeat: no-repeat; + background-size: 20px 20px; height: 100%; width: 100%; - background-size: 20px 20px; - background-repeat: no-repeat; - background-position: center; - background-image: url('~images/load.gif'); } .post-image { - width: 100%; - height: 100%; - background-color: #fff; + background-color: $white; background-repeat: no-repeat; + height: 100%; overflow: hidden; position: relative; text-align: center; + width: 100%; &.small { background-position: center; @@ -170,60 +167,59 @@ background-position: top left; } - .spinner.file__loading { - position: absolute; - left: 50%; - margin-left: -16px; - top: 50%; - margin-top: -16px; + .spinner { + .file__loading { + left: 50%; + margin-left: -16px; + margin-top: -16px; + position: absolute; + top: 50%; + } } .file__loaded { max-width: initial; + &.landscape, &.quadrat { height: 100px; } + &.portrait { width: 120px; } } - - &:hover .file-playback__controls.stop { - @include opacity(1); - } } .post-image__thumbnail { + @include cursor(zoom-in); float: left; - width: 50%; height: 100%; - cursor: zoom-in; - cursor: -webkit-zoom-in; + width: 50%; } .post-image__details { - float: left; @include clearfix; - word-break: break-word; - width: 50%; - height: 100%; - background: white; - border-left: 1px solid #ddd; + background: $white; + border-left: 1px solid $light-gray; + color: alpha-color($black, .8); + float: left; font-size: 13px; + height: 100%; padding: 7px; - color: #333; + width: 50%; + word-break: break-word; .post-image__name { - margin-bottom: 3px; display: block; + margin-bottom: 3px; } .post-image__download { + @include opacity(.7); + cursor: pointer; display: inline-block; padding-right: 7px; - cursor: pointer; - @include opacity(.7); } .post-image__type { @@ -231,57 +227,55 @@ } .post-image__size { - margin-left: 4px; @include opacity(.6); + margin-left: 4px; } } .file-details__container { @include display-flex; - display: -ms-flexbox; .file-details { - width: 320px; height: 270px; padding: 14px; text-align: left; vertical-align: top; + width: 320px; .file-details__name { - color: #333; + color: alpha-color($black, .9); font-size: 16px; } .file-details__info { - color: grey; + color: alpha-color($black, .5); } } + .file-details__preview { - width: 320px; + border-right: 1px solid $light-gray; height: 270px; - border-right: 1px solid #ddd; vertical-align: center; + width: 320px; // helper to center the image icon in the preview window .file-details__preview-helper { - height: 100%; display: inline-block; + height: 100%; vertical-align: middle; } } } .file-playback__controls { + @include single-transition(opacity, .6s); + bottom: 0; + cursor: pointer; + font-size: 22px; position: absolute; right: 5px; - bottom: 0; - font-size: 22px; - cursor: pointer; - z-index: 2; - -webkit-transition: opacity .6s; - -moz-transition: opacity .6s; - -o-transition: opacity .6s; transition: opacity .6s; + z-index: 2; &.stop { @include opacity(0); @@ -289,6 +283,6 @@ } .view-image__loading { - background: black; + background: $black; min-height: 100px; } diff --git a/webapp/sass/components/_inputs.scss b/webapp/sass/components/_inputs.scss index 5e33111824..42ab561287 100644 --- a/webapp/sass/components/_inputs.scss +++ b/webapp/sass/components/_inputs.scss @@ -15,12 +15,21 @@ &.no-resize { resize: none; } + + &[disabled], + [readonly] { + @include alpha-property(background, $white, .1); + color: inherit; + cursor: auto; + } } -.form-control[disabled], -.form-control[readonly], -fieldset[disabled] .form-control { - cursor: auto; - background: rgba(#fff, .1); - color: inherit; +fieldset { + &[disabled] { + .form-control { + @include alpha-property(background, $white, .1); + color: inherit; + cursor: auto; + } + } } diff --git a/webapp/sass/components/_links.scss b/webapp/sass/components/_links.scss index f31008b4f8..3d74726701 100644 --- a/webapp/sass/components/_links.scss +++ b/webapp/sass/components/_links.scss @@ -1,23 +1,22 @@ @charset 'UTF-8'; a { + color: $primary-color; cursor: pointer; text-decoration: none; word-break: break-word; - color: $color--primary; -} - -a:focus, -a:hover { - color: $color--primary--hover; -} - -.text-danger, -a.text-danger { - color: #e05f5d; &:hover, &:focus { - color: #e05f5d; + color: $primary-color--hover; + } +} + +.text-danger { + color: desaturate($red, 20%); + + &:hover, + &:focus { + color: desaturate($red, 20%); } } diff --git a/webapp/sass/components/_mentions.scss b/webapp/sass/components/_mentions.scss index 98efc599d5..98ae7d3201 100644 --- a/webapp/sass/components/_mentions.scss +++ b/webapp/sass/components/_mentions.scss @@ -1,24 +1,24 @@ @charset 'UTF-8'; .mention { - color: #fff; - background: $color--primary; + @include border-radius(3px); + background: $primary-color; + color: $white; + padding-bottom: 2px; position: relative; z-index: 10; - padding-bottom: 2px; - @include border-radius(3px); } .mentions__name { - position: relative; - width: 100%; - height: 36px; - padding: 2px; - z-index: 101; - line-height: 36px; - font-size: 13px; cursor: pointer; + font-size: 13px; + height: 36px; + line-height: 36px; + padding: 2px; + position: relative; white-space: nowrap; + width: 100%; + z-index: 101; .mention-align { @include clearfix; @@ -28,29 +28,29 @@ } .mention__image { - margin-right: 6px; - height: 32px; - width: 32px; - line-height: 36px; + @include border-radius(32px); display: block; font-size: 20px; + height: 32px; + line-height: 36px; + margin-right: 6px; text-align: center; - @include border-radius(32px); + width: 32px; .mention--align { + display: inline-block; max-width: 80%; overflow: hidden; - display: inline-block; - white-space: nowrap; text-overflow: ellipsis; + white-space: nowrap; } } .mention__fullname { - color: grey; + color: $dark-gray; padding-left: 10px; } .mention--highlight { - background-color: #fff2bb; + background-color: $yellow; } diff --git a/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss index a8e8a99f78..601aa33ab3 100644 --- a/webapp/sass/components/_modal.scss +++ b/webapp/sass/components/_modal.scss @@ -1,12 +1,24 @@ @charset 'UTF-8'; -#channel_members_modal .modal-body { - min-height: 110px; +.browser--ie { + .modal { + .modal-dialog { + @include translateY(0); + } + } } .modal-body { - padding: 20px 15px; overflow: auto; + padding: 20px 15px; + + .edit-modal-body { + overflow: visible; + + .suggestion-list__content { + max-height: 150px; + } + } } .more-table { @@ -15,27 +27,23 @@ } .modal { + color: alpha-color($black, .9); width: 100%; - color: #333; - body.browser--IE & { - .modal-dialog { - @include translateY(0); - } - } - - &.image_modal { - .modal-backdrop.in { - @include opacity(.7); + &.modal-image { + .modal-backdrop { + &.in { + @include opacity(.7); + } } } .custom-textarea { + border-color: $light-gray; color: inherit; - border-color: #ccc; &:focus { - border-color: #ccc; + border-color: $light-gray; box-shadow: none; } } @@ -44,15 +52,15 @@ font-size: 13px; &.btn-default { - border: none; background: transparent; + border: none; } } .info__label { font-weight: 600; - text-align: right; padding-right: 0; + text-align: right; } .team-member-list { @@ -60,21 +68,21 @@ } .remove__member { + color: $dark-gray; float: right; - color: #999; font-size: 20px; line-height: 0; padding: 6px; &:hover { - color: #e56565; + color: $red; } } .modal-dialog { - max-width: 95%; margin-left: auto; margin-right: auto; + max-width: 95%; } .modal-push-down { @@ -82,51 +90,51 @@ } .modal-next-bar { - position: absolute; - top: 0px; - right: 0; height: 100%; + position: absolute; + right: 0; + top: 0; } .modal-header { - border-radius: 0; - background: $color--primary; - color: #fff; - padding: 15px 15px 11px; - border: 1px solid #ddd; - min-height: 56px; + @include border-radius(0); @include clearfix; + background: $primary-color; + border: 1px solid $light-gray; + color: $white; + min-height: 56px; + padding: 15px 15px 11px; .modal-title { + color: $bg--gray; float: left; font-size: 17px; line-height: 27px; - color: #f4f4f4; .name { + color: $white; font-weight: 600; - color: #fff; } } .modal-action { - padding: 0; margin: 0; + padding: 0; } - button.close { - color: #fff; + .close { @include opacity(1); - z-index: 5; - width: 30px; + @include single-transition(all, .25s, ease-in); + color: $white; height: 30px; line-height: 30px; - @include single-transition(all, .25s, ease-in); position: absolute; right: 10px; + width: 30px; + z-index: 5; &:hover { - background: rgba(0, 0, 0, .1); + @include alpha-property(background, $black, .1); } span { @@ -149,8 +157,8 @@ } .no-channel-message { - text-align: center; padding: 2em 1em; + text-align: center; .primary-message { font-size: 1.25em; @@ -168,46 +176,46 @@ } .modal-chevron-icon { - top: 50%; font-size: 120%; + top: 50%; } .modal-prev-bar { - position: absolute; - top: 0px; - left: 0; height: 100%; + left: 0; + position: absolute; + top: 0; } - &#more_channels { + &.more-channel__modal { .modal-body { padding: 0; } } .modal-image { - position: relative; - width: 100%; height: 100%; margin: 0 auto; max-width: 100%; + position: relative; + width: 100%; .modal-body { @include clearfix; - height: 100%; display: table; + height: 100%; + max-height: 100%; table-layout: fixed; width: 100%; - max-height: 100%; } - .image-wrapper { - position: relative; - max-width: 90%; + .modal-image__wrapper { @include border-radius(3px); display: table-cell; - vertical-align: middle; + max-width: 90%; + position: relative; text-align: center; + vertical-align: middle; width: 100%; &:hover { @@ -215,33 +223,31 @@ } &.default { - width: 100%; height: 80%; + width: 100%; } audio, canvas, progress, video { - max-width: 100%; - height: auto; display: block; + height: auto; + max-width: 100%; } .modal-close { - background: url('../images/close.png') no-repeat; + @include single-transition(opacity, .6s); @include background-size(100% 100%); - width: 37px; + @include opacity(0); + background-image: url('../images/close.png'); + cursor: pointer; height: 37px; position: absolute; right: -13px; top: -13px; - @include opacity(0); - -webkit-transition: opacity .6s; - -moz-transition: opacity .6s; - -o-transition: opacity .6s; transition: opacity .6s; - cursor: pointer; + width: 37px; z-index: 9999; &.modal-close--show { @@ -250,99 +256,95 @@ } > div { + background: $white; + display: inline-block; min-height: 100px; min-width: 320px; - background: #fff; - display: inline-block; position: relative; - - &:hover .file-playback__controls.stop { - @include opacity(1); - } } img { - max-width: 100%; max-height: 100%; + max-width: 100%; } - .spinner.file__loading { - z-index: 2; - position: absolute; - left: 50%; - margin-left: -16px; - top: 50%; - margin-top: -16px; + .spinner { + .file__loading { + left: 50%; + margin-left: -16px; + margin-top: -16px; + position: absolute; + top: 50%; + z-index: 2; + } } } .modal-content { + background: alpha-color($black, 0); + border: none; box-shadow: none; - background: rgba(0, 0, 0, 0); - width: 100%; height: 100%; padding: 0; - border: none; + width: 100%; } - .image-body { - vertical-align: middle; + .modal-image__body { display: table-cell; - text-align: center; height: 100%; + overflow: visible; padding: 0; position: relative; - overflow: visible; + text-align: center; + vertical-align: middle; } .image-control { - width: 50px; - height: 45px; + background: url('../images/prev.png') left no-repeat; float: left; - background: url(../images/prev.png) left no-repeat; - top: 50%; - position: relative; + height: 45px; margin-top: -23px; + position: relative; + top: 50%; + width: 50px; + &.image-next { + background: url('../images/next.png') left no-repeat; float: right; - background: url(../images/next.png) left no-repeat; } } .loader-image { - position: absolute; - top: 0; bottom: 0; left: 0; - right: 0; margin: auto; + position: absolute; + right: 0; + top: 0; } .loader-percent { - position: absolute; - top: 55px; bottom: 0; - left: 0; - right: 0; - margin: auto; - color: grey; + color: $dark-gray; height: 20px; + left: 0; + margin: auto; + position: absolute; + right: 0; + top: 55px; } .modal-button-bar { - position: absolute; - bottom: -40px; - left: 0px; - right: 0px; - background-color: #222; + @include single-transition(opacity, .6s); @include border-radius(0 0 3px 3px); @include opacity(0); - -webkit-transition: opacity .6s; - -moz-transition: opacity .6s; - -o-transition: opacity .6s; - transition: opacity .6s; + background-color: $black; + bottom: -40px; + left: 0; line-height: 40px; padding: 0 10px; + position: absolute; + right: 0; &.footer--show { @include opacity(1); @@ -356,10 +358,10 @@ } .text { - vertical-align: middle; bottom: 0; - color: white; + color: $white; margin-left: 5px; + vertical-align: middle; } .public-link { @@ -376,11 +378,12 @@ } .row--invite { - margin-right: 40px; @include clearfix; + margin-right: 40px; .col-sm-6 { padding: 0 0 0 15px; + &:first-child { padding-left: 0; } @@ -389,26 +392,26 @@ .more-modal { .user-list { - overflow-y: auto; - overflow-x: hidden; margin-top: 10px; + overflow-x: hidden; + overflow-y: auto; position: relative; } .modal-body { - padding: 10px 0 20px; overflow-x: hidden; + padding: 10px 0 20px; } .filter-row { - margin: 10px 0; @include clearfix; + margin: 10px 0; } .member-count { - margin-top: 5px; - float: right; @include opacity(.8); + float: right; + margin-top: 5px; } .more-purpose { @@ -416,21 +419,13 @@ } } -.modal-body.edit-modal-body { - overflow: visible; - - .suggestion-list__content { - max-height: 150px; - } -} - .more-modal__list { - overflow: auto; display: flex; flex-direction: column; + overflow: auto; .popover & { - font-size: 0.95em; + font-size: .95em; .more-modal__row { padding: 5px 10px; @@ -442,9 +437,9 @@ } .more-modal__image { + @include border-radius(60px); flex-grow: 0; flex-shrink: 0; - @include border-radius(60px); margin-right: 8px; } @@ -462,33 +457,33 @@ } .more-modal__name { - font-weight: 600; font-size: .95em; - white-space: nowrap; + font-weight: 600; overflow: hidden; text-overflow: ellipsis; + white-space: nowrap; } .more-modal__description { @include opacity(.7); display: block; - white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + white-space: nowrap; } .more-modal__row { + border-bottom: 1px solid; display: flex; padding: 8px 15px; - border-bottom: 1px solid; } p { + @include opacity(.8); font-size: .9em; + margin: 5px 0; overflow: hidden; text-overflow: ellipsis; - @include opacity(.8); - margin: 5px 0; } } diff --git a/webapp/sass/components/_oauth.scss b/webapp/sass/components/_oauth.scss index cd8382a5ca..04840457c9 100644 --- a/webapp/sass/components/_oauth.scss +++ b/webapp/sass/components/_oauth.scss @@ -1,18 +1,18 @@ @charset 'UTF-8'; .prompt { - background: #fff; - border: 1px solid #ddd; - padding: 1em 2em 0; + background: $white; + border: 1px solid $light-gray; margin: 50px auto; max-width: 90%; + padding: 1em 2em 0; width: 600px; .prompt__heading { + display: table; font-size: em(20px); line-height: normal; margin: 1em 0; - display: table; width: 100%; > div { @@ -26,13 +26,13 @@ } .prompt__allow { - margin: 1em 0; font-size: em(24px); + margin: 1em 0; } .prompt__buttons { - text-align: right; - border-top: 1px solid #ddd; + border-top: 1px solid $dark-gray; padding: 1.5em 0; + text-align: right; } } diff --git a/webapp/sass/components/_popover.scss b/webapp/sass/components/_popover.scss index de66b67a72..0b2769f776 100644 --- a/webapp/sass/components/_popover.scss +++ b/webapp/sass/components/_popover.scss @@ -3,32 +3,38 @@ .popover { @include border-radius($border-rad); - color: #333; + color: lighten($black, 25%); &.bottom, &.right, &.top, &.left { - > .arrow:after { - border-color: transparent; + > .arrow { + &:after { + border-color: transparent; + } } } .popover-title { - background: rgba(black, .05); + background: alpha-color($black, .05); padding: 8px 10px; } .popover-content { - p:last-child { - margin-bottom: 5px; + p { + &:last-child { + margin-bottom: 5px; + } } } } -.channel-header__info .popover-content { - max-height: 250px; - overflow: auto; +.channel-header__info { + .popover-content { + max-height: 250px; + overflow: auto; + } } .user-popover { @@ -36,32 +42,35 @@ display: inline-block; } -.code-popover .popover-content { - padding: 5px; +.code-popover { + .popover-content { + padding: 5px; + } } .user-popover__image { - margin: 0 0 10px; @include border-radius(128px); + margin: 0 0 10px; } .user-popover__email { + display: block; max-width: 200px; overflow: hidden; text-overflow: ellipsis; - display: block; } .search-help-popover { - visibility: hidden; - max-width: none; - width: 100%; - top: 36px; @include single-transition(opacity, .3s, ease-in); font-size: em(13px); + max-width: none; + top: 36px; + visibility: hidden; + width: 100%; &.autocomplete { display: block; + .popover-content { padding: 10px; position: relative; @@ -69,65 +78,68 @@ } .search-autocomplete__divider { - margin: 10px 0 5px; line-height: 21px; + margin: 10px 0 5px; position: relative; + &:first-child { margin-top: 5px; } - span { + + > span { + background: $white; display: inline-block; padding-right: 10px; - background: #fff; - z-index: 5; position: relative; + z-index: 5; } + &:before { - content: ''; - position: absolute; - width: 100%; - height: 1px; - background: #ddd; - top: 10px; - left: 0; @include opacity(.2); + background: $dark-gray; + content: ''; + height: 1px; + left: 0; + position: absolute; + top: 10px; + width: 100%; } } .search-autocomplete__item { - cursor: pointer; - padding: 6px 8px; - margin: 3px 0 0 5px; @include border-radius(2px); - white-space: nowrap; + cursor: pointer; + margin: 3px 0 0 5px; overflow: hidden; + padding: 6px 8px; text-overflow: ellipsis; + white-space: nowrap; &:hover { - background: rgba(black, .1); + background: alpha-color($black, .1); } &.selected { - background: rgba(black, .2); + background: alpha-color($black, .2); } .fa { - margin-right: 5px; @include opacity(.5); + margin-right: 5px; } .profile-img { - margin-top: -1px; height: 16px; margin-right: 6px; + margin-top: -1px; width: 16px; } } &.bottom > .arrow { - top: -18px; border-width: 9px; left: 30px; + top: -18px; } .popover-content { @@ -142,9 +154,11 @@ ul { padding-left: 17px; + span { @include opacity(.8); } + strong, b { @include opacity(1); @@ -156,25 +170,28 @@ } &.visible { - visibility: visible; @include opacity(1); + visibility: visible; } } -#member-list-popover { +.member-list__popover { max-width: initial; + .popover-content { - position: relative; - padding: 0; - width: 260px; max-height: 350px; + padding: 0; + position: relative; + width: 260px; + .text-nowrap { + font-size: 13px; + line-height: 26px; + overflow: hidden; padding: 6px 10px; width: 100%; - overflow: hidden; - line-height: 26px; - font-size: 13px; } + .more__name { margin-left: 6px; max-width: 140px; diff --git a/webapp/sass/components/_scrollbar.scss b/webapp/sass/components/_scrollbar.scss index 4ecb38b1fd..0bb0e7e21e 100644 --- a/webapp/sass/components/_scrollbar.scss +++ b/webapp/sass/components/_scrollbar.scss @@ -1,28 +1,25 @@ @charset 'UTF-8'; -::-webkit-scrollbar -{ - width: 8px; /* for vertical scrollbars */ - height: 8px; /* for horizontal scrollbars */ +::-webkit-scrollbar { + height: 8px; // for horizontal scrollbars + width: 8px; // for vertical scrollbars } -::-webkit-scrollbar-track -{ - background: rgba(0, 0, 0, 0.1); +::-webkit-scrollbar-track { + background: rgba(0, 0, 0, .1); } -::-webkit-scrollbar-thumb -{ +::-webkit-scrollbar-thumb { @include border-radius($border-rad * 2); - background: rgba(0, 0, 0, 0.4); + background: rgba(0, 0, 0, .4); } -body{ - scrollbar-face-color: rgba(0, 0, 0, 0.1); - scrollbar-shadow-color: #2D2C4D; - scrollbar-highlight-color:#7D7E94; +body { scrollbar-3dlight-color: #7D7E94; - scrollbar-darkshadow-color: #2D2C4D; - scrollbar-track-color: rgba(0, 0, 0, 0.1); scrollbar-arrow-color: #C1C1D1; + scrollbar-darkshadow-color: #2D2C4D; + scrollbar-face-color: rgba(0, 0, 0, .1); + scrollbar-highlight-color: #7D7E94; + scrollbar-shadow-color: #2D2C4D; + scrollbar-track-color: rgba(0, 0, 0, .1); } \ No newline at end of file diff --git a/webapp/sass/components/_search.scss b/webapp/sass/components/_search.scss index faf0b81772..499c4fad41 100644 --- a/webapp/sass/components/_search.scss +++ b/webapp/sass/components/_search.scss @@ -1,15 +1,19 @@ @charset 'UTF-8'; -#channel-header .search-bar__container { - padding: 0 9px 0 3px; +.channel-header { + .search-bar__container { + padding: 0 9px 0 3px; + } } .search-bar__container { - padding: 12px 8px 0 0; @include flex(0 0 56px); + padding: 12px 8px 0 0; - .sidebar--right.move--left & { - padding-right: 42px; + .sidebar--right { + &.move--left & { + padding-right: 42px; + } } } @@ -18,62 +22,60 @@ } .search__clear { - display: none; - position: absolute; - right: 0; - line-height: 45px; - margin-right: 13px; @include single-transition(all, .2s, linear); @include translateX(60px); - z-index: 5; cursor: pointer; + display: none; + line-height: 45px; + margin-right: 13px; + position: absolute; + right: 0; + z-index: 5; } .search-item-snippet { @include clearfix; text-overflow: ellipsis; -} -.sidebar__collapse { - cursor: pointer; - z-index: 5; - fill: #fff; - position: absolute; - left: 0; - font-size: 35px; - width: 49px; - @include single-transition(all, .2s, linear); - @include translateX(0px); - text-align: center; - padding-left: 1px; - line-height: 40px; - display: none; -} - -.search-item-snippet { ul, ol { padding-left: 20px; } } +.sidebar__collapse { + @include single-transition(all, .2s, linear); + @include translateX(0); + cursor: pointer; + display: none; + fill: $white; + font-size: 35px; + left: 0; + line-height: 40px; + padding-left: 1px; + position: absolute; + text-align: center; + width: 49px; + z-index: 5; +} + .sidebar__search-icon { + @include opacity(.5); + color: $dark-gray; + display: none; + font-size: 14px; + margin-left: 10px; position: absolute; top: 15px; - margin-left: 10px; - font-size: 14px; - @include opacity(.5); - display: none; - color: #777; } .search__form { position: relative; .search-bar__container & { - margin: 0; - border: 1px solid #ddd; @include border-radius(2px); + border: 1px solid $light-gray; + margin: 0; width: 300px; } @@ -82,21 +84,21 @@ } .search-bar { + box-shadow: none; height: 40px; padding-right: 30px; - box-shadow: none; .search-bar__container & { - height: 30px; border: none; + height: 30px; } } .glyphicon-refresh-animate { - top: 27px; + color: $dark-gray; position: absolute; right: 27px; - color: #999; + top: 27px; .search-bar__container & { right: 7px; @@ -106,30 +108,29 @@ } .search-items-container { - position: relative; - overflow: auto; - -webkit-overflow-scrolling: touch; @include flex(1 1 auto); + -webkit-overflow-scrolling: touch; height: calc(100% - 56px); + overflow: auto; padding-top: 10px; + position: relative; } .search-results-header { + border-bottom: $border-gray; + color: #999999; font-size: 1em; - text-transform: uppercase; - color: #999; font-weight: 400; - color: #888; height: 44px; line-height: 44px; - padding: 0 10px 0 10px; - border-bottom: $border-gray; + padding: 0 10px; + text-transform: uppercase; } .search-item__container { .post { - padding: 0 1em 1em; margin: 0; + padding: 0 1em 1em; &:first-child { border: none; @@ -137,17 +138,17 @@ .search-channel__name { font-weight: 600; - margin: 0 0 10px 0; + margin: 0 0 10px; } } } .search-item__jump { + @include opacity(.8); + font-size: 13px; position: absolute; right: 0; - top: 0px; - font-size: 13px; - @include opacity(.8); + top: 0; &:hover { @include opacity(1); @@ -155,9 +156,9 @@ } .search-item__comment { + margin-right: 35px; position: absolute; right: 0; - margin-right: 35px; top: 0; } @@ -171,5 +172,5 @@ } .search-highlight { - background-color: #fff2bb; + background-color: $yellow; } diff --git a/webapp/sass/components/_suggestion-list.scss b/webapp/sass/components/_suggestion-list.scss index 125a3cf329..0100026cad 100644 --- a/webapp/sass/components/_suggestion-list.scss +++ b/webapp/sass/components/_suggestion-list.scss @@ -1,9 +1,9 @@ @charset 'UTF-8'; .suggestion-list { + @extend %popover-box-shadow; width: 100%; z-index: 100; - @extend %popover-box-shadow; } .suggestion-list--top { @@ -11,31 +11,31 @@ } .suggestion-list__content { - width: 100%; - max-height: 292px; - background-color: #fff; + background-color: $white; border: $border-gray; + max-height: 292px; overflow-x: hidden; overflow-y: scroll; + width: 100%; .command { - position: relative; - width: 100%; + border-bottom: 1px solid $light-gray; + font-size: .95em; line-height: 24px; padding: 5px 10px 8px; + position: relative; + width: 100%; z-index: 101; - font-size: .95em; - border-bottom: 1px solid #ddd; .command__desc { - margin-left: 5px; @include opacity(.5); line-height: normal; + margin-left: 5px; } } } .suggestion-list__content--top { - position: absolute; bottom: 0; + position: absolute; } diff --git a/webapp/sass/components/_tooltip.scss b/webapp/sass/components/_tooltip.scss index 44c10edb94..5e71e3a7b1 100644 --- a/webapp/sass/components/_tooltip.scss +++ b/webapp/sass/components/_tooltip.scss @@ -2,9 +2,9 @@ .tooltip { .tooltip-inner { - word-break: break-word; font-size: 13px; - padding: 3px 10px 4px; font-weight: 500; + padding: 3px 10px 4px; + word-break: break-word; } } diff --git a/webapp/sass/components/_tutorial.scss b/webapp/sass/components/_tutorial.scss index f159190090..6545d7764d 100644 --- a/webapp/sass/components/_tutorial.scss +++ b/webapp/sass/components/_tutorial.scss @@ -1,72 +1,76 @@ @charset 'UTF-8'; .tip-backdrop { - background: rgba(black, .5); + background: alpha-color($black, .5); + height: 100%; + left: 0; position: absolute; top: 0; - left: 0; width: 100%; - height: 100%; z-index: 999; } .tip-overlay { - width: 350px; - max-width: 90%; - position: absolute; - background-color: #fff; @include border-radius(3px); + background-color: $white; + max-width: 90%; padding: 20px; + position: absolute; + width: 350px; z-index: 1000; .arrow { - border-width: 10px; - position: absolute; - display: block; - width: 0; - height: 0; border-color: transparent; border-style: solid; + border-width: 10px; + display: block; + height: 0; + position: absolute; + width: 0; } &.tip-overlay--sidebar { - max-width: 75%; margin: 50px 0 0 10px; + max-width: 75%; min-height: 330px; + .tutorial__footer { - position: absolute; - width: 100%; bottom: 20px; left: 0; padding: 0 20px; + position: absolute; + width: 100%; } + .arrow { - top: 80px; + border-left-width: 0; + border-right-color: $white; left: -10px; margin-top: -10px; - border-left-width: 0; - border-right-color: #fff; + top: 80px; } } &.tip-overlay--header { margin: 10px 0 0 10px; + .arrow { - top: 15px; - left: -10px; border-left-width: 0; - border-right-color: #fff; + border-right-color: $white; + left: -10px; + top: 15px; } } &.tip-overlay--chat { margin-top: -10px; + .arrow { + border-bottom-width: 0; + border-top-color: $white; + bottom: -10px; left: 50%; margin-left: -10px; - border-bottom-width: 0; - border-top-color: #fff; - bottom: -10px; } } @@ -86,18 +90,18 @@ } .btn { - background: #ccc; - color: #fff; @include border-radius(3px); + background: alpha-color($black, .3); border: none; + color: $white; margin: 10px 0; &:hover, &:active, &:focus { - color: #fff; + background: alpha-color($black, .4); border: none; - background: #bbb; + color: $white; } } @@ -110,81 +114,88 @@ } .tutorial__circles { - margin: 1.5em 0px -1.7em -4px; + margin: 1.5em 0 -1.7em -4px; .circle { - width: 7px; height: 7px; margin: 0 4px; + width: 7px; } } } .tip-button { - z-index: 998; + cursor: pointer; + position: relative; right: -10px; top: -10px; - position: relative; - cursor: pointer; + z-index: 998; } .tip-div { position: absolute; - top: 0px; - right: 0px; + right: 0; + top: 0; &.tip-overlay--header { - top: 21px; right: 2px; + top: 21px; + .tip-button { @include opacity(.8); } } &.tip-overlay--sidebar { - left: 0; @include opacity(.8); + left: 0; top: -9px; } } .tutorial-steps__container { - text-align: center; - width: 100%; display: table; height: 100%; + text-align: center; + width: 100%; + .tutorial__content { display: table-cell; - vertical-align: middle; - padding-bottom: 100px; padding: 20px 40px 40px; + vertical-align: middle; + .tutorial__steps { - position: relative; + display: inline-block; + margin-bottom: 50px; max-width: 310px; min-height: 370px; - margin-bottom: 50px; + position: relative; text-align: left; - display: inline-block; } } + .tutorial__footer { - position: absolute; bottom: 0; + position: absolute; } + h1 { font-size: em(40px); - margin: -20px 0 30px; font-weight: 600; + margin: -20px 0 30px; } + h3 { font-size: em(24px); - margin-bottom: 30px; font-weight: 600; + margin-bottom: 30px; } + .tutorial__circles { - position: absolute; bottom: 40px; + position: absolute; } + .tutorial-skip { margin-left: 13px; } @@ -192,17 +203,19 @@ .tutorial__circles { margin: 2em 0; + .circle { - width: 9px; - height: 9px; @include border-radius(9px); @include opacity(.2); - background: #000; + background: $black; display: inline-block; + height: 9px; margin: 0 5px; + width: 9px; + &.active { - background: $color--primary; @include opacity(1); + background: $primary-color; } } } diff --git a/webapp/sass/components/_videos.scss b/webapp/sass/components/_videos.scss index 91db750bd3..e009e6538f 100644 --- a/webapp/sass/components/_videos.scss +++ b/webapp/sass/components/_videos.scss @@ -1,65 +1,68 @@ @charset 'UTF-8'; .video-div { - position: relative; - max-width: 480px; margin-bottom: 8px; + max-width: 480px; + position: relative; + .video-thumbnail { - max-width: 100%; height: auto; + max-width: 100%; } + .block { - background-color: rgba(0,0,0,.5); + background-color: alpha-color($black, .5); border-radius: 10px; + height: 150px; + left: 50%; + margin: -75px 0 0 -100px; position: absolute; top: 50%; - left: 50%; - margin-top: -100px; width: 200px; - margin: -75px 0 0 -100px; - height: 150px; } } .video-type { @include opacity(.8); font-size: 15px; - margin: 0px; - padding: 0px; + margin: 0; + padding: 0; } .video-title { font-size: 15px; margin-top: 3px; } + .play-button { - width: 100px; + @include border-radius(14px); + border: 4px solid alpha-color($white, .4); height: 100px; position: absolute; - top: 26px; right: 51px; - border: 4px solid; - border-color: rgba(255,255,255,.4); - border-radius: 14px; -} -.play-button span { - position: absolute; - top: 10px; - left: 20px; - width: 0; - height: 0; - border-top: 36px solid transparent; - border-bottom: 36px solid transparent; - border-left: 60px solid rgba(255,255,255,.4); + top: 26px; + width: 100px; + + span { + border-bottom: 36px solid transparent; + border-left: 60px solid alpha-color($white, .4); + border-top: 36px solid transparent; + height: 0; + left: 20px; + position: absolute; + top: 10px; + width: 0; + } } .img-div { -moz-force-broken-image-icon: 1; - position: relative; - max-width: 450px; - max-height: 500px; - margin-bottom: 8px; border-radius: 5px; + margin-bottom: 8px; + max-height: 500px; + max-width: 450px; + position: relative; + &.placeholder { height: 500px; } diff --git a/webapp/sass/layout/_content.scss b/webapp/sass/layout/_content.scss index 71bef0d7fd..bbc09a80ef 100644 --- a/webapp/sass/layout/_content.scss +++ b/webapp/sass/layout/_content.scss @@ -15,21 +15,22 @@ } .app__content { - height: 100%; - padding-top: 50px; - margin-left: 220px; - position: relative; - background: #fff; @include display-flex; @include flex-direction(column); + background: $white; + height: 100%; + margin-left: 220px; + padding-top: 50px; + position: relative; .channel__wrap & { padding-top: 0; } } + #post-create { @include flex(0 0 auto); - background: #fff; + background: $white; width: 100%; z-index: 3; } @@ -37,12 +38,12 @@ #archive-link-home { @include flex(0 0 auto); cursor: pointer; - padding: 10px 20px; font-size: 13px; + padding: 10px 20px; .fa { - font-size: 11px; @include opacity(.7); + font-size: 11px; } a { @@ -50,36 +51,6 @@ } } -.post-list { - .new-messages-hr { - margin-top: 5px; - margin-bottom: 0px; - border: 0; - border-top: 1px solid #f80; - } - - .new-messages-text { - margin-top: 2px; - margin-bottom: 5px; - color: #f80; - text-align: center; - } -} - -.new-messages-hr { - margin-top: 5px; - margin-bottom: 0px; - border: 0; - border-top: 1px solid #f80; -} - -.new-messages-text { - margin-top: 2px; - margin-bottom: 5px; - color: #f80; - text-align: center; -} - .delete-message-text { margin-top: 10px; } diff --git a/webapp/sass/layout/_footer.scss b/webapp/sass/layout/_footer.scss index 5624e63762..36f1fbc708 100644 --- a/webapp/sass/layout/_footer.scss +++ b/webapp/sass/layout/_footer.scss @@ -1,22 +1,22 @@ @charset 'UTF-8'; .footer-pane { - background: #eee; + background: $light-gray; padding-bottom: 1em; .footer-link { padding: 0 1.5em; &.copyright { - color: #999; + color: $dark-gray; padding-right: 0; } } .footer-site-name { - padding: 1.5em 0 1em; font-size: 14px; font-weight: bold; + padding: 1.5em 0 1em; text-transform: uppercase; } } diff --git a/webapp/sass/layout/_forms.scss b/webapp/sass/layout/_forms.scss index 1f51603cc6..259beeb572 100644 --- a/webapp/sass/layout/_forms.scss +++ b/webapp/sass/layout/_forms.scss @@ -6,32 +6,32 @@ } .form__label { - text-align: left; - padding-right: 3px; - font-weight: 600; font-size: 1.1em; + font-weight: 600; + padding-right: 3px; + text-align: left; &.light { - font-weight: normal; - color: #999; + color: $dark-gray; font-size: 1.05em; font-style: italic; + font-weight: normal; padding-top: 2px; } } .input__help { + @include opacity(.8); color: inherit; margin: 10px 0 0 10px; word-break: break-word; - @include opacity(.8); &.dark { @include opacity(1); } &.error { - color: #a94442; + color: darken($red, 20%); } } @@ -49,13 +49,9 @@ } .help-block { + color: $dark-gray; font-size: .95em; margin: 10px 0 0; - color: #999; -} - -.disabled-input { - background-color: #ddd !important; } .form-group { diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss index 0a6b9f920a..9b631d00f3 100644 --- a/webapp/sass/layout/_headers.scss +++ b/webapp/sass/layout/_headers.scss @@ -1,6 +1,6 @@ @charset 'UTF-8'; -#channel-header { +.channel-header { @include flex(0 0 56px); } @@ -15,8 +15,8 @@ } .header-dropdown__icon { - font-size: 11px; color: inherit; + font-size: 11px; top: 3px; } @@ -31,12 +31,12 @@ word-break: break-word; &.dropdown { + float: left; max-width: 100%; padding-right: 1em; - float: left; .header-dropdown__icon { - color: #777; + color: $dark-gray; } a { @@ -49,10 +49,11 @@ } &.description { - overflow: hidden; - text-overflow: ellipsis; margin-top: 2px; max-height: 45px; + overflow: hidden; + text-overflow: ellipsis; + .markdown-inline-img { max-height: 45px; } @@ -65,14 +66,14 @@ } .channel-intro { + border-bottom: 1px solid $light-gray; margin: 0 auto 35px; - padding: 0 1em 5px; max-width: 1000px; - border-bottom: 1px solid lightgrey; + padding: 0 1em 5px; .intro-links { - margin: 0 1.5em 10px 0; display: inline-block; + margin: 0 1.5em 10px 0; .fa { margin-right: 5px; @@ -80,28 +81,30 @@ } .channel-intro-profile { - margin-top: 5px; margin-left: 63px; + margin-top: 5px; } .channel-intro-img { float: left; + img { @include border-radius(100px); } } .channel-intro__title { - font-weight: 600; font-size: 20px; + font-weight: 600; margin-bottom: 15px; } .channel-intro__content { - background: #f7f7f7; - padding: 10px 15px; @include border-radius(3px); + background: $bg--gray; + padding: 10px 15px; } + .channel-intro-text { margin-top: 35px; } @@ -111,28 +114,28 @@ .sidebar--left, .sidebar--menu { .team__header { - position: relative; - padding: 9px 10px; @include legacy-pie-clearfix; + padding: 9px 10px; + position: relative; &:before { @include single-transition(all, .05s, linear); - content: ''; background: none; - top: 0; - left: 0; - width: 100%; + content: ''; height: 100%; + left: 0; position: absolute; + top: 0; + width: 100%; } &:hover { &:before { - background: rgba(black, .1); + @include alpha-property(background, $black, .1); } .user__name { - color: #fff; + color: $white; } .navbar-right { @@ -145,95 +148,88 @@ .navbar-right { font-size: .85em; position: absolute; - top: 10px; right: 22px; + top: 10px; z-index: 5; .dropdown-toggle { + @include opacity(.8); @include single-transition(all, .1s, linear); padding: 10px; - @include opacity(.8); } .dropdown-menu { - li a { + a { + overflow: hidden; padding: 3px 20px; text-overflow: ellipsis; - overflow: hidden; } } .dropdown__icon { - fill: #fff; + fill: $white; } } - .settings__link a:hover, - a:visited, - a:link, - a:active { - text-decoration: none; - } - .user__picture { - width: 36px; - height: 36px; - float: left; @include border-radius(36px); + float: left; + height: 36px; margin-right: 6px; + width: 36px; } .header__info { - color: #fff; @include clearfix; + color: $white; padding-left: 2px; - z-index: 1; position: relative; + z-index: 1; } .team__name, .user__name { display: block; - font-weight: 600; font-size: 16px; + font-weight: 600; max-width: 85%; overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; text-decoration: none; + text-overflow: ellipsis; + white-space: nowrap; } .team__name { + float: left; line-height: 22px; margin-top: -2px; - float: left; } .user__name { @include single-transition(all, .1s, linear); + @include alpha-property(color, $white, .8); font-size: 14px; - line-height: 18px; font-weight: 400; - color: #eee; - color: rgba(#fff, .8); + line-height: 18px; } > .nav { > li { > a { + background: none; float: right; - background: none !important; padding: 2px; + } - &.dropdown-toggle { - line-height: 1.8; - font-size: 1em; - color: #fff; - } + .dropdown-toggle { + color: $white; + font-size: 1em; + line-height: 1.8; } } } } + .search__clear { display: none; } @@ -250,27 +246,29 @@ } .channel-header { - width: 100%; border-left: none; font-size: 14px; line-height: 56px; + width: 100%; #member_popover { - width: 50px; - color: #999; + color: #999999; cursor: pointer; + width: 50px; .fa { - margin-left: 4px; font-size: 16px; + margin-left: 4px; } } &.alt { margin: 0; + th { font-weight: normal !important; } + td { border: none; } @@ -278,37 +276,39 @@ th { text-align: center; + &:first-child { - text-align: left !important; border-left: none; - width: 100%; padding-left: 1em; + text-align: left !important; + width: 100%; } + &:last-child { width: 8.9%; } } td { - padding: 5px 25px 5px !important; font-size: 13px; + padding: 5px 25px 5px !important; text-align: center !important; + &:first-child { text-align: left !important; } } .heading { - margin: 0; - color: #555; + color: #555555; + display: inline-block; font-size: 1.3em; font-weight: 600; + margin: 0 4px 0 0; + max-width: 100%; overflow: hidden; text-overflow: ellipsis; - max-width: 100%; - display: inline-block; vertical-align: middle; - margin-right: 4px; } .caret { @@ -318,13 +318,13 @@ .more { color: #81848b; display: inline-block; - vertical-align: top; - text-transform: capitalize; font-size: 13px; + text-transform: capitalize; + vertical-align: top; } .disabled { - color: #999; + color: #999999; } } @@ -342,11 +342,11 @@ .channel-header__links { font-family: 'Open Sans', sans-serif; + font-size: 22px; height: 30px; - width: 24px; line-height: 26px; margin-right: 9px; - font-size: 22px; + width: 24px; .channel__wrap.move--left & { position: absolute; @@ -355,14 +355,15 @@ } > a { - color: inherit; - text-decoration: none; @include opacity(.6); @include single-transition(all, .1s, ease-in); + color: inherit; + text-decoration: none; &:hover { @include opacity(1); } + &:focus { color: inherit; } diff --git a/webapp/sass/layout/_markdown.scss b/webapp/sass/layout/_markdown.scss index 307060ac37..e2180c64d9 100644 --- a/webapp/sass/layout/_markdown.scss +++ b/webapp/sass/layout/_markdown.scss @@ -16,8 +16,8 @@ #post-list { .markdown-inline-img { -moz-force-broken-image-icon: 1; - max-height: 500px; height: 500px; + max-height: 500px; } } @@ -26,33 +26,33 @@ pre { margin-bottom: 0; - word-break: normal; overflow: auto; + word-break: normal; word-wrap: normal; } } .post-body--code__language { - -webkit-transform: translate3d(0,0,0); - position: absolute; - top: 0; - right: 0; - color: #fff; + @include translate3d(0, 0, 0); background: #21586d; - padding: 4px 10px 5px 10px; + color: $white; font-size: 13px; opacity: .7; + padding: 4px 10px 5px; + position: absolute; + right: 0; + top: 0; z-index: 5; } .post__body { hr { - height: 4px; - padding: 0; - margin: 15px 0 16px; + @include opacity(.2); background-color: #e7e7e7; border: 0 none; - @include opacity(.2); + height: 4px; + margin: 15px 0 16px; + padding: 0; } code { @@ -67,50 +67,53 @@ } .markdown__table { - background: #fff; + background: $white; margin: 5px 0 10px; th, td { - padding: 6px 13px; border: 1px solid #ddd; + padding: 6px 13px; } tbody tr { - background: #fff; + background: $white; &:nth-child(2n) { background-color: #f8f8f8; } } } + blockquote { border: none; - position: relative; font-size: 16px; - padding: 10px 10px 10px 38px; margin-bottom: 0; + padding: 10px 10px 10px 38px; + position: relative; &:before { - font-family: FontAwesome; - font-weight: normal; - font-style: normal; - display: inline-block; - text-decoration: inherit; - content: '\f10d'; - left: 8px; - top: 5px; - position: absolute; - font-size: 20px; @include opacity(.6); + content: '\f10d'; + display: inline-block; + font-family: FontAwesome; + font-size: 20px; + font-style: normal; + font-weight: normal; + left: 8px; + position: absolute; + text-decoration: inherit; + top: 5px; } } + pre { border: none; + color: inherit; margin: 5px 0; - color: inherit; } + code { - background: #fff; + background: $white; color: inherit; } diff --git a/webapp/sass/layout/_navigation.scss b/webapp/sass/layout/_navigation.scss index 65c62cb17d..87e4b4d271 100644 --- a/webapp/sass/layout/_navigation.scss +++ b/webapp/sass/layout/_navigation.scss @@ -7,14 +7,14 @@ #navbar { input { - margin: 0px 5px 0px 2px; + margin: 0 5px 0 2px; } .navbar-default { - position: absolute; + background: $primary-color; border: none; min-height: 45px; - background: $color--primary; + position: absolute; .navbar-nav { > li { @@ -30,19 +30,19 @@ } .navbar-toggle { - width: 43px; - float: left; border-color: transparent; border-radius: 0; + fill: $white; + float: left; + height: 44px; + line-height: 48px; margin: 0; padding: 0 10px; - line-height: 48px; - height: 44px; + width: 43px; z-index: 5; - fill: #fff; .icon-bar { - background: #fff; + background: $white; width: 21px; } @@ -51,7 +51,7 @@ } .icon--white { - color: #fff; + color: $white; } &:hover, @@ -62,16 +62,16 @@ } .navbar-brand { - padding: 0 .5em; - height: 45px; - line-height: 45px; float: none; font-size: 16px; + height: 45px; + line-height: 45px; + padding: 0 .5em; .heading { - margin-right: 3px; + color: $white; font-weight: 600; - color: #fff; + margin-right: 3px; } .header-dropdown__icon { @@ -79,36 +79,36 @@ } .dropdown-toggle { - color: #fff; + color: $white; } .description { + color: $white; display: inline-block; margin-right: .5em; - color: #fff; &.info-popover { - width: 19px; - height: 19px; - background: url('../images/info__icon.png'); @include background-size(100% 100%); - vertical-align: middle; - top: -1px; - position: relative; + background: url('../images/info__icon.png'); cursor: pointer; + height: 19px; + position: relative; + top: -1px; + vertical-align: middle; + width: 19px; } } } } .sidebar-channel { - white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + white-space: nowrap; span { - white-space: nowrap; margin-left: 2px; + white-space: nowrap; } } @@ -117,11 +117,13 @@ } .more-channel-table { - width: 100%; border: 1px solid #dbdbdc; + width: 100%; + td { padding: 7px; } + button { width: 110px; } @@ -129,9 +131,9 @@ } .badge-notify { - background: red; - position: absolute; + background: $red; left: 4px; + position: absolute; top: 3px; z-index: 100; } diff --git a/webapp/sass/layout/_post-right.scss b/webapp/sass/layout/_post-right.scss index 595577564d..529f739954 100644 --- a/webapp/sass/layout/_post-right.scss +++ b/webapp/sass/layout/_post-right.scss @@ -27,8 +27,8 @@ .post { &.post--root { - padding-bottom: 1.2em; border-bottom: 1px solid #ddd; + padding-bottom: 1.2em; .post__body { background: transparent !important; @@ -37,8 +37,8 @@ .post__header { .col__reply { - top: 0; text-align: right; + top: 0; } } @@ -48,13 +48,13 @@ } hr { - margin-bottom: 0; border: none; + margin-bottom: 0; } .post-create__container { - width: 100%; margin-top: 10px; + width: 100%; .textarea-wrapper { min-height: 100px; @@ -70,48 +70,46 @@ .msg-typing { @include opacity(.7); - float: left; - margin-top: 3px; - font-size: 13px; - line-height: 20px; - min-width: 1px; display: block; + float: left; + font-size: 13px; height: 20px; + line-height: 20px; + margin-top: 3px; max-width: 230px; + min-width: 1px; } .post-create-footer { - width: 100%; padding: 5px 0 10px; + width: 100%; } .post-right-comments-upload-in-progress { - padding: 6px 0; color: #a8adb7; margin-right: 10px; + padding: 6px 0; } } } + .post-right-header { - font-size: 1em; - text-transform: uppercase; + border-bottom: $border-gray; color: #999; + font-size: 1em; font-weight: 400; - color: #888; height: 39px; padding: 10px 10px 0 15px; - border-bottom: $border-gray; + text-transform: uppercase; } .post-right-root-container { + border-bottom: $border-gray; padding: 5px 10px; - border-bottom: $border-gray; -} -.post-right-root-container { ul { - padding-left: 0; margin-bottom: 2px; + padding-left: 0; } } @@ -131,19 +129,19 @@ } .post-right-create-comment-container { - padding: 5px; - margin-bottom: 18px; - position: absolute; bottom: 0; left: 0; + margin-bottom: 18px; + padding: 5px; + position: absolute; width: 100%; } .post-right__scroll { - position: relative; - overflow: auto; - -webkit-overflow-scrolling: touch; @include flex(1 1 auto); + -webkit-overflow-scrolling: touch; + overflow: auto; + position: relative; .file-preview__container { margin-top: 5px; diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss index ce055035de..9d5be239a7 100644 --- a/webapp/sass/layout/_post.scss +++ b/webapp/sass/layout/_post.scss @@ -1,19 +1,20 @@ @charset 'UTF-8'; .custom-textarea { - white-space: pre-wrap; - word-wrap: break-word; background: transparent; - border: 1px solid #ccc; - position: absolute; - top: 0px; + border: 1px solid #cccccc; height: auto; - resize: none; line-height: 20px; min-height: 36px; overflow-x: hidden; + position: absolute; + resize: none; + top: 0px; + white-space: pre-wrap; + word-wrap: break-word; + &:focus { - border-color: #ccc; + border-color: #cccccc; box-shadow: none; } } @@ -24,23 +25,23 @@ } .textarea-div { - white-space: pre-wrap; - word-wrap: normal; + border: 0; color: rgba(0,0,0,0); - position: absolute; - top: 0px; - word-break: break-word; + height: auto; left: 1px; line-height: 20px; min-height: 36px; - height: auto; - border: 0; + position: absolute; + top: 0px; + white-space: pre-wrap; + word-break: break-word; + word-wrap: normal; } body.ios { .textarea-div { - padding: 7px 17px 7px 15px; -webkit-overflow-scrolling: auto; + padding: 7px 17px 7px 15px; } } @@ -49,133 +50,146 @@ body.ios { } .textarea-wrapper { + min-height: 36px; position: relative; + .textbox-preview-area { - position: absolute; - z-index: 2; - top: 0; - left: 0; box-shadow: none; - white-space: normal; - } - .help__text { - right: 0; + left: 0; position: absolute; - z-index: 3; - bottom: -23px; - font-size: 13px; - cursor: pointer; + top: 0; + white-space: normal; + z-index: 2; } + + .help__text { + bottom: -23px; + cursor: pointer; + font-size: 13px; + position: absolute; + right: 0; + z-index: 3; + } + .textbox-preview-link { margin-right: 8px; } - min-height: 36px; } .help_format_text { - display: none !important; - position: absolute; - bottom: -23px; - left: 0px; - overflow: hidden; - text-overflow: ellipsis; - font-size: .85em; @include opacity(0); @include single-transition(all .2s ease); + bottom: -23px; + display: none !important; + font-size: .85em; + left: 0; + overflow: hidden; + position: absolute; + text-overflow: ellipsis; b, i, code { margin-right: 3px; } + .textbox-preview-link { - font-size: 13px; cursor: pointer; + font-size: 13px; margin-left: 15px; } } .date-separator, .new-separator { - text-align: center; height: 2em; margin: 0; position: relative; + text-align: center; z-index: 0; + &:before, &:after { content: ''; - height: 1em; - position: absolute; - left: 0; - width: 100%; display: none; + height: 1em; + left: 0; + position: absolute; + width: 100%; } + &:before { bottom: 0; } + &:after { top: 0; } + &.hovered--after { &:before { background: #f5f5f5; display: block; } } + &.hovered--before { &:after { background: #f5f5f5; display: block; } } + .separator__hr { - border-color: #ccc; + border-color: #cccccc; margin: 0; position: relative; - z-index: 5; top: 1em; + z-index: 5; } + .separator__text { - line-height: 2em; - color: #555; - background: #fff; - display: inline-block; - padding: 0 1em; - font-weight: 700; @include border-radius(50px); + background: #ffffff; + color: #555555; + display: inline-block; + font-size: 13px; + font-weight: 700; + line-height: 2em; + padding: 0 1em; position: relative; z-index: 5; - font-size: 13px; } } + .new-separator { .separator__hr { border-color: #ffaf53; } + .separator__text { - color: #f80; + color: #ff8800; font-weight: normal; } } .file-overlay { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - text-align: center; - color: #fff; + color: #ffffff; font-size: em(20px); font-weight: 600; + height: 100%; + left: 0; + position: absolute; + text-align: center; + top: 0; + width: 100%; z-index: 6; .overlay__indent { - background-color: rgba(0, 0, 0, .6); - position: relative; - height: 100%; @include clearfix; + @include alpha-property(background-color, $black, .6); + height: 100%; + position: relative; } &.center-file-overlay { @@ -186,11 +200,13 @@ body.ios { &.right-file-overlay { font-size: em(18px); + .overlay__circle { - width: 300px; height: 300px; margin: -150px 0 0 -150px; + width: 300px; } + .overlay__files { margin: 60px auto 15px; width: 150px; @@ -198,16 +214,15 @@ body.ios { } .overlay__circle { - background: #111; - background: rgba(black, .7); - width: 370px; - height: 370px; - margin: -185px 0 0 -185px; @include border-radius(500px); + @include alpha-property(background, $black, .7); + height: 370px; + left: 50%; + margin: -185px 0 0 -185px; + pointer-events: none; position: absolute; top: 50%; - left: 50%; - pointer-events: none; + width: 370px; } .overlay__files { @@ -216,11 +231,11 @@ body.ios { } .overlay__logo { - position: absolute; - left: 50%; - bottom: 30px; - margin-left: -50px; @include opacity(.3); + bottom: 30px; + left: 50%; + margin-left: -50px; + position: absolute; } .fa { @@ -232,62 +247,64 @@ body.ios { #post-list { @include flex(1 1 auto); - position: relative; - overflow-y: hidden; height: 100%; + overflow-y: hidden; + position: relative; .inactive { display: none; } .post-list-holder-by-time { - background: #fff; + -webkit-overflow-scrolling: touch; + background: #ffffff; + height: 100%; overflow-y: scroll; - width: 100%; padding: 1em 0 0; position: absolute; - height: 100%; - -webkit-overflow-scrolling: touch; + width: 100%; + &.active { display: inline; } } .more-messages-text { - margin: 5px 0 10px; - display: block; - text-align: center; - outline: none; border: none; - font-size: 13px; - } - .beginning-messages-text { - margin-top: 2px; - margin-bottom: 5px; display: block; + font-size: 13px; + margin: 5px 0 10px; + outline: none; text-align: center; + } + + .beginning-messages-text { color: grey; + display: block; + margin-bottom: 5px; + margin-top: 2px; + text-align: center; } } .post-list__timestamp { - position: absolute; - top: 8px; - left: 50%; - z-index: 50; - width: 120px; - text-align: center; - background: $color--primary; - color: #fff; @include border-radius(3px); - font-size: 12px; - line-height: 25px; - margin-left: -60px; - -webkit-font-smoothing: initial; + @include opacity(0); @include single-transition(all, .6s, ease); @include translateY(-45px); - @include opacity(0); + @include font-smoothing(initial); + background: $primary-color; + color: $white; display: none; + font-size: 12px; + left: 50%; + line-height: 25px; + margin-left: -60px; + position: absolute; + text-align: center; + top: 8px; + width: 120px; + z-index: 50; &.scrolling { @include translateY(0); @@ -296,147 +313,162 @@ body.ios { } .post-list__arrows { - background-repeat: no-repeat; - width: 40px; - height: 40px; - text-align: center; - fill: #444; - position: absolute; - bottom: 0; - left: 9px; - z-index: 50; @include opacity(0); @include single-transition(all, .6s); + background-repeat: no-repeat; + bottom: 0; display: none; + fill: #444444; + height: 40px; + left: 9px; + position: absolute; + text-align: center; + width: 40px; + z-index: 50; svg { color: inherit; - width: 28px; height: 28px; + width: 28px; } &.scrolling { - display: block; @include opacity(1); + display: block; } } .post-create__container { form { - width: 100%; - padding: .5em 14px 0; margin: 0 auto; max-width: 1028px; + padding: .5em 14px 0; + width: 100%; } + .post-create-body { - position: relative; padding: 0 0 2px; + position: relative; + .post-body__cell { - vertical-align: top; position: relative; + vertical-align: top; + &.scroll { .btn-file { right: 15px; } + .custom-textarea { padding-right: 43px; } } } + .send-button { - display: none; - cursor: pointer; - padding-right: 4px; - width: 45px; - height: 37px; - font-size: 18px; - line-height: 37px; - vertical-align: bottom; - text-align: center; @include single-transition(all, .15s); + cursor: pointer; + display: none; + font-size: 18px; + height: 37px; + line-height: 37px; + padding-right: 4px; + text-align: center; + vertical-align: bottom; + width: 45px; + &:active { @include opacity(.75); } } + .custom-textarea { - padding-top: 8px; - padding-right: 28px; - max-height: 162px !important; line-height: 1.5; - } - .textarea-div { + max-height: 162px !important; + padding-right: 28px; padding-top: 8px; - padding-right: 30px; + } + + .textarea-div { + line-height: 1.5; max-height: 163px !important; overflow: auto; - line-height: 1.5; + padding-right: 30px; + padding-top: 8px; } + .btn-file { - right: 0; - position: absolute; - top: 1px; - color: #444; @include opacity(.5); @include single-transition(all, .15s); + color: #444444; font-size: 16px; padding: 7px 9px 6px; + position: absolute; + right: 0; + top: 1px; + &:hover, &:active { @include opacity(.9); box-shadow: none; } } + textarea { box-shadow: none; } } + .post-create-footer { @include clearfix; - padding: 3px 0 0 0; font-size: 13px; + padding: 3px 0 0 0; .control-label { font-weight: normal; margin-bottom: 0; - top: -5px; position: relative; + top: -5px; } } + .msg-typing { - display: block; @include opacity(.7); - white-space: nowrap; + display: block; + font-size: .95em; + height: 20px; margin-bottom: 5px; overflow: hidden; - font-size: .95em; text-overflow: ellipsis; - height: 20px; + white-space: nowrap; } } .post-list__table { display: table; + height: 100%; + min-height: 100%; table-layout: fixed; width: 100%; - min-height: 100%; - height: 100%; + .post-list__content { display: table-cell; vertical-align: bottom; + .dropdown-menu { &.bottom { - top: auto; bottom: 25px; + top: auto; } } } } .post { - word-wrap: break-word; + @include legacy-pie-clearfix; + max-width: 100%; padding: 8px .5em 0 1em; position: relative; - max-width: 100%; - @include legacy-pie-clearfix; + word-wrap: break-word; &:hover { .dropdown, @@ -445,6 +477,7 @@ body.ios { .post__remove { visibility: visible; } + .permalink-icon { visibility: visible; } @@ -455,9 +488,9 @@ body.ios { } p { - margin: 0; - line-height: 1.6em; font-size: .97em; + line-height: 1.6em; + margin: 0; white-space: pre-wrap; &:last-child { @@ -488,8 +521,8 @@ body.ios { } .post__header { - margin: 0; height: 0; + margin: 0; .col__name { display: none; @@ -501,20 +534,13 @@ body.ios { } .post__time { - top: 24px; - } - - .post__time { - font: normal normal normal FontAwesome; - text-rendering: auto; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - position: absolute; - top: -2px; - left: -7px; - font-size: 11px; - line-height: 37px; @include opacity(0); + font-size: 11px; + left: -7px; + line-height: 37px; + position: absolute; + text-rendering: auto; + top: -2px; } } @@ -528,11 +554,9 @@ body.ios { display: none; } } - } - &.post--comment { .post__body { - border-left: 4px solid #ddd; + border-left: 4px solid #dddddd; } } } @@ -562,12 +586,12 @@ body.ios { } .post__content { - margin: 0 auto; - position: relative; - max-width: 1000px; display: table; - width: 100%; + margin: 0 auto; + max-width: 1000px; + position: relative; table-layout: fixed; + width: 100%; > div { display: table-cell; @@ -576,9 +600,9 @@ body.ios { } .post__header { - padding: 0; list-style: none; margin-bottom: 2px; + padding: 0; li { display: inline-block; @@ -586,12 +610,12 @@ body.ios { } .col__name { - margin-right: 7px; font-weight: 600; + margin-right: 7px; .user-popover { - max-width: 200px; @include clearfix; + max-width: 200px; text-overflow: ellipsis; white-space: nowrap; } @@ -601,8 +625,8 @@ body.ios { position: absolute; right: 0; top: 30px; - width: 65px; white-space: nowrap; + width: 65px; } .permalink-popover { @@ -616,27 +640,29 @@ body.ios { .btn { font-size: 13px; height: 30px; - padding: 0 8px; line-height: 30px; + padding: 0 8px; } } } .post__img { width: 46px; + img { - width: 36px; + @include border-radius(50px); height: 36px; vertical-align: inherit; - @include border-radius(50px); + width: 36px; } } .post__embed-container { + @include single-transition(max-height, .5, ease); display: block; max-height: 1000px; - transition: max-height .5s ease; overflow: hidden; + &[hidden] { max-height: 0; } @@ -644,15 +670,15 @@ body.ios { .dropdown { display: inline-block; - visibility: hidden; margin-right: 5px; top: -1px; + visibility: hidden; .dropdown-menu { - right: 0; left: auto; min-width: 130px; padding: 2px 0; + right: 0; li { display: block; @@ -667,27 +693,27 @@ body.ios { .post__dropdown { &:after { content: '[...]'; - top: -1px; position: relative; + top: -1px; } } .post__remove { - font-family: 'Open Sans', sans-serif; - position: relative; + @include opacity(.5); + color: inherit; display: inline-block; - vertical-align: top; - right: 15px; - top: -5px; + font-family: 'Open Sans', sans-serif; font-size: 20px; - width: 20px; + font-weight: 600; height: 20px; line-height: 20px; - font-weight: 600; - visibility: hidden; - color: inherit; - @include opacity(.5); + position: relative; + right: 15px; text-decoration: none; + top: -5px; + vertical-align: top; + visibility: hidden; + width: 20px; &:hover { @include opacity(.8); @@ -695,10 +721,10 @@ body.ios { } .post__body { - word-wrap: break-word; - padding: .2em .5em; @include legacy-pie-clearfix; + padding: .2em .5em; width: calc(100% - 75px); + word-wrap: break-word; p { margin: 0 0 .4em; @@ -725,6 +751,7 @@ body.ios { p { margin-bottom: 0; } + li ul, li ol { padding: 0 0 0 20px; @@ -745,8 +772,8 @@ body.ios { } li input[type='checkbox']:disabled { - vertical-align: top; cursor: default; + vertical-align: top; } } @@ -766,21 +793,21 @@ body.ios { } .post__link { - margin: 2px 0 5px; font-size: 13px; - text-overflow: ellipsis; + margin: 2px 0 5px; overflow: hidden; + text-overflow: ellipsis; white-space: nowrap; } .post__embed-visibility { - cursor: pointer; - font: normal normal normal 14px/1 FontAwesome; - text-rendering: auto; - -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - margin: 5px 0 10px; + -webkit-font-smoothing: antialiased; + cursor: pointer; display: inline-block; + font: normal normal normal 14px/1 FontAwesome; + margin: 5px 0 10px; + text-rendering: auto; &:hover { text-decoration: none; @@ -807,8 +834,8 @@ body.ios { .post-loading-gif { height: 10px; - width: 10px; margin-top: 6px; + width: 10px; } .post-fail { @@ -816,12 +843,12 @@ body.ios { } .post-waiting { - color: #999; + color: #999999; } .permalink-icon { + color: $primary-color; display: inline-block; - color: $color--primary; visibility: hidden; } @@ -830,16 +857,16 @@ body.ios { margin-right: 6px; visibility: hidden; svg { - width: 18px; - top: 3px; fill: inherit; position: relative; + top: 3px; + width: 18px; } } .comment-icon__container { - fill: $color--primary; display: inline-block; + fill: $primary-color; visibility: hidden; &:focus { @@ -857,10 +884,10 @@ body.ios { .comment-icon { display: inline-block; - top: 2px; - position: relative; - margin-right: 3px; fill: inherit; + margin-right: 3px; + position: relative; + top: 2px; } path { @@ -869,28 +896,30 @@ body.ios { } .web-embed-data { - padding: 2px 0 0 10px; - background: #f9f9f9; - background: rgba(0, 0, 0, .05); @include border-radius(2px); + @include alpha-property(background, $black, 0.05); height: 50px; overflow: hidden; + padding: 2px 0 0 10px; text-overflow: ellipsis; + .embed-title { - margin: 3px 0 1px; - color: #555; + color: #555555; font-weight: 600; - white-space: nowrap; - text-overflow: ellipsis; + margin: 3px 0 1px; overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } + .embed-description { + color: #888888; margin: 0; - white-space: nowrap; - text-overflow: ellipsis; overflow: hidden; - color: #888; + text-overflow: ellipsis; + white-space: nowrap; } + .embed-link { display: none; } @@ -898,89 +927,104 @@ body.ios { } .bot-indicator { + border-radius: 2px; font-family: inherit; font-size: 11px; - padding: 2px 4px; - border-radius: 2px; font-weight: 600; margin: 0 0 0 -4px; + padding: 2px 4px; } .attachment { .attachment__content { - border-width: 1px; - border-style: solid; border-radius: 4px; - padding: 2px 5px; + border-style: solid; + border-width: 1px; margin: 0 0 5px 0; + padding: 2px 5px; } + .attachment__thumb-pretext { - border: 0 none; background: transparent; + border: none; + margin-left: 5px; } + .attachment__container { - border-left-width: 4px; border-left-style: solid; + border-left-width: 4px; padding: 2px 0 2px 10px; + &.attachment__container--good { border-left-color: #00c100; } + &.attachment__container--warning { border-left-color: #dede01; } + &.attachment__container--danger { border-left-color: #e40303; } } + .attachment__body { float: left; - width: 80%; - padding-right: 5px; overflow-x: auto; overflow-y: hidden; + padding-right: 5px; + width: 80%; + &.attachment__body--no_thumb { width: 100%; } } + .attachment__text p:last-of-type { display: inline-block; } - .attachment__thumb-pretext { - margin-left: 5px; - } + .attachment__title { + font-size: 16px; + height: 22px; + line-height: 16px; margin: 5px 0; padding: 0; - line-height: 16px; - height: 22px; - font-size: 16px; + a { font-size: 16px; } } + .attachment__author-icon { @include border-radius(50px); + height: 14px; margin-right: 5px; width: 14px; - height: 14px; } + .attachment__image { - max-width: 100%; margin-bottom: 1em; + max-width: 100%; } + .attachment__thumb-container { - width: 20%; float: right; + width: 20%; + img { max-height: 75px; max-width: 100%; } } + .attachment___fields { width: 100%; + .attachment___field-caption { font-weight: 700; } + .attachment___field p { margin: 0; } @@ -992,6 +1036,6 @@ body.ios { } .permalink-popover { - min-width: 320px; margin-left: 50px !important; + min-width: 320px; } diff --git a/webapp/sass/layout/_sidebar-left.scss b/webapp/sass/layout/_sidebar-left.scss index ece054a15a..4c65d0a65f 100644 --- a/webapp/sass/layout/_sidebar-left.scss +++ b/webapp/sass/layout/_sidebar-left.scss @@ -1,86 +1,97 @@ @charset 'UTF-8'; .sidebar--left { + background: #fafafa; + border-right: $border-gray; + height: 100%; + left: 0; position: absolute; width: 220px; - left: 0; - height: 100%; - border-right: $border-gray; - background: #fafafa; z-index: 5; &.sidebar--padded { padding-top: 44px; } + .dropdown-menu { max-height: 400px; + max-width: 200px; overflow-x: hidden; overflow-y: auto; - max-width: 200px; width: 200px; } + .search__form { + display: none; margin: 0; padding: 1em 1em 0; - display: none; } + .badge { - background-color: $color--primary; + background-color: $primary-color; position: absolute; right: 10px; top: 5px; } + .status { + display: inline-block; + margin-right: 6px; position: relative; top: 1px; - margin-right: 6px; width: 12px; - display: inline-block; + svg { max-height: 14px; } + i, path, ellipse { @include opacity(.5); + &.online--icon, &.away--icon { @include opacity(1); } } + .fa-lock { margin-left: 1px; } + .fa-globe { - top: -1px; position: relative; + top: -1px; } } + .nav-pills__container { - height: calc(100% - 80px); - position: relative; - overflow: auto; -webkit-overflow-scrolling: touch; + height: calc(100% - 80px); + overflow: auto; + position: relative; } .nav-pills__unread-indicator { - position: absolute; - left: 0; - right: 0; - width: 72%; - color: #fff; - background: #2389d7; @include border-radius(50px); + background: #2389d7; + color: #ffffff; + font-size: 13.5px; + left: 0; margin: 0 auto; padding: 3px 0 4px; - font-size: 13.5px; + position: absolute; + right: 0; text-align: center; + width: 72%; z-index: 1; } .nav-pills__unread-indicator-top { top: 66px; } + .nav-pills__unread-indicator-bottom { bottom: 20px; } @@ -91,71 +102,83 @@ margin: 0; } } + li { > h4 { + color: #aaaaaa; font-size: 1em; - text-transform: uppercase; - margin: 1.1em 0 .5em; font-weight: 400; - color: #aaa; letter-spacing: -.3px; + margin: 1.1em 0 .5em; padding: 0 10px 0 15px; + text-transform: uppercase; } + > a { - padding: 3px 10px 3px 25px; - line-height: 1.5; border-radius: 0; - white-space: nowrap; + line-height: 1.5; overflow: hidden; + padding: 3px 10px 3px 25px; text-overflow: ellipsis; + white-space: nowrap; + &.has-badge { padding-right: 30px; } + &.has-close { padding-right: 30px; + &:hover { .btn-close { - display: block; @include opacity(.8); + display: block; } } + .btn-close { + @include opacity(0); + display: none; font-family: 'Open Sans', sans-serif; + font-size: 20px; + font-weight: 600; position: absolute; right: 15px; top: -1px; - font-size: 20px; - font-weight: 600; - @include opacity(0); - display: none; + &:hover { @include opacity(1); } } } + &.nav-more { text-decoration: underline; } + &.unread-title { font-weight: 600; } + } + &.active { a { &:before { + background: $black; content: ''; + height: 100%; + left: 0; position: absolute; top: 0; - left: 0; width: 5px; - height: 100%; - background: #000; } } + a, a:hover, a:focus { - background-color: rgba(black, .1); + @include alpha-property(background-color, $black, .1); border-radius: 0; font-weight: 400; position: relative; @@ -163,35 +186,37 @@ } } } + .modal-title { line-height: 2em; } .add-channel-btn { + color: #aaaaaa; float: right; - outline: none; + font-size: 22px; + font-weight: 700; + line-height: 18px; margin: -2px 0 0 0; - color: #aaa; + outline: none; padding: 0 5px; text-decoration: none; - font-size: 22px; - line-height: 18px; - font-weight: 700; + &:hover { - color: #666; + color: #666666; } } } .channel-loading-gif { height: 15px; - width: 15px; margin-top: 2px; + width: 15px; } .join-channel-loading-gif { - margin-top: 5px; - margin-left: 10px; height: 25px; + margin-left: 10px; + margin-top: 5px; width: 25px; } diff --git a/webapp/sass/layout/_sidebar-menu.scss b/webapp/sass/layout/_sidebar-menu.scss index 9438491f99..d11c4edbb7 100644 --- a/webapp/sass/layout/_sidebar-menu.scss +++ b/webapp/sass/layout/_sidebar-menu.scss @@ -1,69 +1,80 @@ @charset 'UTF-8'; .sidebar--menu { - position: absolute; - width: 220px; - right: 0; - height: 100%; - border-right: $border-gray; - padding: 0 0 2em 0; background: #fafafa; + border-right: $border-gray; display: none; + height: 100%; + padding: 0 0 2em; + position: absolute; + right: 0; + width: 220px; + .nav-pills__container { padding-top: 5px; } + .team__header { + @include legacy-pie-clearfix; display: none; padding: 0 15px; - @include legacy-pie-clearfix; + a { - color: #fff; + color: $white; } + .navbar-right { font-size: .85em; margin: 16px -5px 0; + .dropdown-toggle { padding: 0 10px; } + .dropdown-menu { li a { - padding: 3 20px; color: #555; + padding: 3 20px; } } + .dropdown__icon { - width: 4px; - height: 16px; @include background-size(100% 100%); + background: url('../images/dropdown-icon.png'); display: inline-block; + height: 16px; + width: 4px; } } + .team__name { float: left; - line-height: 50px; - font-weight: 600; font-size: 1.2em; + font-weight: 600; + line-height: 50px; max-width: 80%; overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; text-decoration: none; + text-overflow: ellipsis; + white-space: nowrap; } } + .nav { > li { > a { - font-size: 15px; background: none !important; color: inherit; + font-size: 15px; line-height: 40px; padding: 0 15px; + .fa, .glyphicon { - width: 25px; - text-align: center; left: -5px; position: relative; + text-align: center; + width: 25px; } } } diff --git a/webapp/sass/layout/_sidebar-right.scss b/webapp/sass/layout/_sidebar-right.scss index e1a7d76410..a7b631047c 100644 --- a/webapp/sass/layout/_sidebar-right.scss +++ b/webapp/sass/layout/_sidebar-right.scss @@ -1,13 +1,13 @@ @charset 'UTF-8'; .sidebar--right { - position: fixed; - width: 400px; - height: 100%; - right: 0px; - padding: 0; - background: #fff; @include translateX(400px); + background: $white; + height: 100%; + padding: 0; + position: fixed; + right: 0; + width: 400px; .post-body { img { @@ -26,39 +26,39 @@ } .sidebar--right__content { - height: 100%; @include display-flex; @include flex-direction(column); + height: 100%; } .sidebar--right__back { - color: inherit; @include opacity(.8); - width: 30px; - text-align: center; - margin: 0 0 0 -14px; - font-size: 13px; + color: inherit; display: inline-block; + font-size: 13px; + margin: 0 0 0 -14px; + text-align: center; + width: 30px; } .sidebar-right__body { + @include border-radius(2px 0 0 0); + @include display-flex; @include flex(1 1 auto); + @include flex-direction(column); border-left: $border-gray; border-top: $border-gray; - @include display-flex; - @include flex-direction(column); height: calc(100% - 56px); - @include border-radius(2px 0 0 0); } .sidebar__overlay { - width: 100%; - height: 100%; - background-color: yellow; @include opacity(.1); - position: absolute; - z-index: 5; + background-color: $yellow; + height: 100%; pointer-events: none; + position: absolute; + width: 100%; + z-index: 5; } .input-group { @@ -66,17 +66,17 @@ } .sidebar--right__close { - margin: 11px 0 0 0; - width: 22px; - height: 22px; - opacity: .5; - font-size: 22px; - line-height: 0; - background: none; - float: right; - outline: none; - border: none; @include single-transition(all, .2s, ease-in); + background: none; + border: none; + float: right; + font-size: 22px; + height: 22px; + line-height: 0; + margin: 11px 0 0; + opacity: .5; + outline: none; + width: 22px; &:hover, &:active { @@ -90,14 +90,14 @@ } .sidebar--right__header { - font-size: 1em; - text-transform: uppercase; - color: inherit; - height: 44px; - padding: 0 1em; - line-height: 44px; @include flex(0 0 44px); border-bottom: $border-gray; + color: inherit; + font-size: 1em; + height: 44px; + line-height: 44px; + padding: 0 1em; + text-transform: uppercase; } .sidebar--right__subheader { diff --git a/webapp/sass/layout/_webhooks.scss b/webapp/sass/layout/_webhooks.scss index d6e3672185..ffd8dd7dc6 100644 --- a/webapp/sass/layout/_webhooks.scss +++ b/webapp/sass/layout/_webhooks.scss @@ -1,11 +1,11 @@ @charset 'UTF-8'; .webhooks__container { - background: rgba(black, .1); - border: 1px solid; @include border-radius(3px); - padding: 0 13px 15px; + @include alpha-property(background, $black, .1); + border: 1px solid; margin-top: 10px; + padding: 0 13px 15px; } .webhook__item { @@ -19,16 +19,16 @@ } .webhook__remove { - position: absolute; - right: -7px; - top: 8px; - width: 30px; - height: 30px; + color: #e05f5d; font-size: 22px; font-weight: bold; + height: 30px; + position: absolute; + right: -7px; text-align: center; text-decoration: none; - color: #e05f5d; + top: 8px; + width: 30px; } .webhook__url { diff --git a/webapp/sass/responsive/_desktop.scss b/webapp/sass/responsive/_desktop.scss index dcabb807f1..ccd6f02263 100644 --- a/webapp/sass/responsive/_desktop.scss +++ b/webapp/sass/responsive/_desktop.scss @@ -32,21 +32,23 @@ .tip-overlay { &.tip-overlay--chat { margin: -10px 0 0 -10px; + .arrow { - right: 15px; left: auto; + right: 15px; } } } + .inner-wrap { &.move--left { .file-overlay { font-size: em(18px); .overlay__circle { - width: 300px; height: 300px; margin: -150px 0 0 -150px; + width: 300px; } .overlay__files { @@ -62,4 +64,4 @@ .modal-lg { width: 700px; } -} \ No newline at end of file +} diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss index 4a1397143b..53ea6d3290 100644 --- a/webapp/sass/responsive/_mobile.scss +++ b/webapp/sass/responsive/_mobile.scss @@ -519,7 +519,7 @@ .search-bar__container { padding: 0; @include flex(0 0 44px); - background: $color--primary; + background: $primary-color; color: #fff; &.focused { @@ -756,9 +756,11 @@ .app__content { padding-top: 45px; margin: 0; + .channel__wrap & { padding-top: 45px; } + #channel-header { display: none; } @@ -775,11 +777,6 @@ .post-comments { padding: 9px 21px 10px 10px !important; } - - .post-image__column .post-image .file-playback__controls.stop, - .image-wrapper > a .file-playback__controls.stop { - @include opacity(1); - } } @media screen and (max-width: 640px) { diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss index 14641cfa5e..0a725a5588 100644 --- a/webapp/sass/responsive/_tablet.scss +++ b/webapp/sass/responsive/_tablet.scss @@ -2,9 +2,9 @@ @media screen and (max-width: 960px) { .sidebar--right { - z-index: 5; - @include translateX(100%); @include single-transition(all, .5s, ease); + @include translateX(100%); + z-index: 5; &.move--left { @include translateX(0); @@ -32,4 +32,4 @@ .second-bar { display: none; } -} \ No newline at end of file +} diff --git a/webapp/sass/routes/_access-history.scss b/webapp/sass/routes/_access-history.scss index 7ede7b0859..ea66f5f006 100644 --- a/webapp/sass/routes/_access-history.scss +++ b/webapp/sass/routes/_access-history.scss @@ -2,9 +2,9 @@ .access-history__table { display: table; - width: 100%; - padding-top: 15px; line-height: 1.6; + padding-top: 15px; + width: 100%; &:first-child { padding: 0; @@ -16,8 +16,8 @@ } .access__date { - font-weight: 600; font-size: 15px; + font-weight: 600; width: 190px; } diff --git a/webapp/sass/routes/_activity-log.scss b/webapp/sass/routes/_activity-log.scss index 6e8d0a9256..d3400e29ab 100644 --- a/webapp/sass/routes/_activity-log.scss +++ b/webapp/sass/routes/_activity-log.scss @@ -1,36 +1,27 @@ @charset 'UTF-8'; -@keyframes highlight { - from { - background: rgba(yellow, .5); - } - to { - background: none; - } -} - .animation--highlight { &:before { - content: ''; animation: highlight 1.5s ease; + content: ''; + height: 100%; + left: 0; position: absolute; top: 0; - left: 0; width: 100%; - height: 100%; } } .activity-log__table { + border-top: 1px solid $light-gray; display: table; - width: 100%; line-height: 1.8; - border-top: 1px solid #ddd; padding: 15px 0; + width: 100%; &:first-child { - padding-top: 0; border: none; + padding-top: 0; } > div { @@ -49,6 +40,7 @@ .report__platform { font-size: 15px; font-weight: 600; + .fa { margin-right: 6px; } diff --git a/webapp/sass/routes/_admin-console.scss b/webapp/sass/routes/_admin-console.scss index f83ce487e6..63cf8eb135 100644 --- a/webapp/sass/routes/_admin-console.scss +++ b/webapp/sass/routes/_admin-console.scss @@ -15,26 +15,25 @@ } h3 { - font-weight: 600; border-bottom: 1px solid #ddd; - padding-bottom: .5em; + font-weight: 600; margin: 1em 0; + padding-bottom: .5em; } .table { - background: #fff; + background: $white; } .form-control { - background-color: #fff; + background-color: $white; border: 1px solid #ccc; color: #555; &:focus { + @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)); border-color: #66afe9; outline: 0; - -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6); - box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6); } } @@ -42,7 +41,7 @@ color: #333; &.btn-primary { - background: #2389d7; + background: $primary-color; &:hover, &:focus, @@ -53,7 +52,7 @@ } .dropdown-menu { - background: #fff; + background: $white; border: 1px solid rgba(0,0,0,.15); color: inherit; } @@ -86,38 +85,38 @@ > h4 { background: #333; - padding: 10px 10px; margin: 1px 0 0; + padding: 10px; .menu-icon--right { - top: 6px; right: 12px; + top: 6px; } } } .menu-icon--right { - position: absolute; - right: 10px; - top: 3px; font-size: 18px; font-weight: 600; - width: 20px; height: 20px; line-height: 20px; + position: absolute; + right: 10px; text-align: center; + top: 3px; + width: 20px; .fa { + color: $white; font-size: 13px; - right: -2px; position: relative; - color: #fff; + right: -2px; } } &.nav__sub-menu { + @include font-smoothing(initial); background: #111; - -webkit-font-smoothing: auto; &.padded { padding: 5px 0; @@ -125,30 +124,31 @@ li { > a { - font-size: 13px; - padding: 5px 35px 5px 15px; background: transparent; color: #bbb; + font-size: 13px; + padding: 5px 35px 5px 15px; &:hover { - color: lighten($color--primary, 10); + color: lighten($primary-color, 10); } &.active { - color: #fff; + color: $white; font-weight: 600; } } .nav-more { - font-size: 13px; - padding: 5px 15px; background: transparent; color: #bbb; - display: block; cursor: pointer; + display: block; + font-size: 13px; + padding: 5px 15px; + &:hover { - color: lighten($color--primary, 10); + color: lighten($primary-color, 10); } } } @@ -166,23 +166,23 @@ } .log__panel { - overflow: scroll; - width: 100%; - height: 800px; - border: 1px solid #ddd; - margin-top: 10px; - padding: 5px; background-color: white; + border: 1px solid #ddd; + height: 800px; + margin-top: 10px; + overflow: scroll; + padding: 5px; + width: 100%; } .app__content { color: #333; &.admin { - overflow: auto; background-color: #f1f1f1; - padding: 0 20px 20px; min-height: 600px; + overflow: auto; + padding: 0 20px 20px; } .wrapper--fixed { @@ -193,9 +193,9 @@ margin-top: 40px; .control-label { - text-align: left; - padding-right: 0; font-weight: 600; + padding-right: 0; + text-align: left; } .form-group { @@ -203,22 +203,25 @@ } .file__upload { - position: relative; - margin: 0 10px 10px 0; display: inline-block; + margin: 0 10px 10px 0; + position: relative; input { - position: absolute; @include opacity(0); - width: 100%; height: 100%; - z-index: 5; - top: 0; left: 0; + position: absolute; + top: 0; + width: 100%; + z-index: 5; } } .help-text { + color: #777; + margin: 10px 0 0 15px; + &.no-margin { margin: 0; } @@ -228,9 +231,6 @@ padding-left: 23px; } - margin: 10px 0 0 15px; - color: #777; - .help-link { margin-right: 5px; } @@ -242,10 +242,10 @@ .alert { display: inline-block; - padding: 5px 7px; margin: 1em 0 0; - top: 1px; + padding: 5px 7px; position: relative; + top: 1px; .fa { margin-right: 5px; @@ -254,11 +254,11 @@ } .banner { - background: #fff; + background: $white; border: 1px solid #ddd; - padding: .7em 1.5em; font-size: .95em; margin: 2em 0; + padding: .7em 1.5em; .banner__heading { font-size: 1.5em; @@ -275,19 +275,19 @@ .popover { border-radius: 3px; - width: 100%; font-size: .95em; + width: 100%; } .panel { - border: none; background-color: transparent; + border: none; } .panel-default { > .panel-heading { - padding: 10px 0; background-color: transparent; + padding: 10px 0; } .panel-body { @@ -304,9 +304,9 @@ line-height: 1.5; a { - text-decoration: none; - display: block; @include clearfix; + display: block; + text-decoration: none; &.collapsed { .fa-minus { @@ -319,10 +319,10 @@ } .fa { - font-size: 18px; - float: right; - margin-top: 8px; color: #aaa; + float: right; + font-size: 18px; + margin-top: 8px; } .fa-plus { diff --git a/webapp/sass/routes/_docs.scss b/webapp/sass/routes/_docs.scss index 24e96772b3..9a205f8a22 100644 --- a/webapp/sass/routes/_docs.scss +++ b/webapp/sass/routes/_docs.scss @@ -5,15 +5,15 @@ padding-bottom: 20px; > div { - width: 1170px; margin: 0 auto; - padding: 0 15px; max-width: 100%; + padding: 0 15px; + width: 1170px; } h1.markdown__heading { border-bottom: 1px solid #ddd; - padding-bottom: 1rem; margin: 1em 0 1em; + padding-bottom: 1rem; } } diff --git a/webapp/sass/routes/_error-page.scss b/webapp/sass/routes/_error-page.scss index 8cd0716caa..438e605544 100644 --- a/webapp/sass/routes/_error-page.scss +++ b/webapp/sass/routes/_error-page.scss @@ -8,23 +8,23 @@ body { } .error__container { - max-width: 800px; - margin: 0 auto; + color: #555; display: table-cell; - vertical-align: top; + margin: 0 auto; + max-width: 800px; padding: 5em 0; text-align: left; - color: #555; + vertical-align: top; } .error__icon { - font-size: 4em; color: #ccc; + font-size: 4em; } h2 { - font-weight: 600; font-size: 1.5em; + font-weight: 600; margin: .8em 0 .5em; } diff --git a/webapp/sass/routes/_loading.scss b/webapp/sass/routes/_loading.scss index 8d65529570..39f37b1b3f 100644 --- a/webapp/sass/routes/_loading.scss +++ b/webapp/sass/routes/_loading.scss @@ -4,32 +4,32 @@ .loading-screen { display: table; - width: 100%; height: 100%; padding: 60px; text-align: center; + width: 100%; .loading__content { display: table-cell; - vertical-align: middle; font-size: 0; + vertical-align: middle; h3 { + display: inline-block; font-size: 16px; font-weight: 400; - margin: 0 .2em 0; - display: inline-block; + margin: 0 .2em; } .round { - background-color: #444; - width: 4px; - height: 4px; + @include animation(move .75s infinite linear); + @include border-radius(10px); + background-color: #444444; display: inline-block; + height: 4px; margin: 0 2px; opacity: .1; - @include border-radius(10px); - @include animation(move .75s infinite linear); + width: 4px; } @for $i from 1 through 3 { @@ -42,6 +42,7 @@ from { opacity: 1; } + to { opacity: .1; } diff --git a/webapp/sass/routes/_settings.scss b/webapp/sass/routes/_settings.scss index 3c735be3c3..1c3f2e3081 100644 --- a/webapp/sass/routes/_settings.scss +++ b/webapp/sass/routes/_settings.scss @@ -2,41 +2,47 @@ .user-settings { min-height: 300px; + .table-responsive { - max-width: 560px; max-height: 300px; + max-width: 560px; } } .modal { .settings-modal { width: 800px; + .modal-back { - width: 50px; - height: 40px; - top: 12px; font-size: 27px; font-weight: normal; + height: 40px; + left: 0; line-height: 32px; position: absolute; - left: 0; text-align: center; + top: 12px; + width: 50px; + .fa { + height: 100%; + left: 0; line-height: inherit; position: absolute; width: 100%; - height: 100%; - left: 0; } } + .modal-body { - padding: 0; margin: 0 auto; min-height: calc(100% - 62px); + padding: 0; } + li { list-style: none; } + label { font-weight: 600; } @@ -44,87 +50,110 @@ .no-padding--left { padding-left: 0; } + .padding-top { padding-top: 7px; + &.x2 { padding-top: 14px; } + &.x3 { padding-top: 21px; } } + .padding-bottom { padding-bottom: 7px; + &.x2 { padding-bottom: 14px; } + &.x3 { padding-bottom: 21px; } + .control-label { font-weight: 600; + &.text-left { text-align: left; } } } + .profile-img { - width: 128px; height: 128px; + width: 128px; } + .settings-table { - max-width: 1000px; - margin: 0 auto; display: table; + margin: 0 auto; + max-width: 1000px; table-layout: fixed; width: 100%; + > div { display: table-cell; vertical-align: top; } + .nav { position: fixed; width: 179px; + &.position--top { top: 57px; } } + .security-links { margin-right: 20px; + .fa { margin-right: 6px; } } + .settings-links { width: 180px; } + .settings-content { - padding: 0px 20px 30px; + padding: 0 20px 30px; + .modal-header { display: none; } + .section-min { padding: 1em 0; margin-bottom: 0; cursor: pointer; position: relative; @include clearfix; + &:hover { background: #f9f9f9; } + &:hover .fa { display: inline-block; } + &:hover .section-edit { text-decoration: underline; } } .section-max { - background: rgba(black, .05); - padding: 1em 0 1.3em; - margin-bottom: 0; @include clearfix; + @include alpha-property(background, $black, .05); + margin-bottom: 0; + padding: 1em 0 1.3em; + .section-title { margin-bottom: 10px; } @@ -136,50 +165,54 @@ padding: 4px 5px; width: 40px; } + img { border: 1px solid rgba(black, .15); width: 29px; } } + .group--code { + select { + @include appearance(none); + appearance: none; padding-right: 25px; + + &::ms-expand { + display: none; + } } - select::-ms-expand { - display: none; - } + &:before { - pointer-events: none; - position: absolute; - top: 11px; - right: 50px; - z-index: 5; + @include font-smoothing; content: '\f0d7'; display: inline-block; font: normal normal normal 14px/1 FontAwesome; - font-size: inherit; + pointer-events: none; + position: absolute; + right: 50px; text-rendering: auto; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - } - select { - -moz-appearance: none; - -webkit-appearance: none; - appearance: none; + top: 11px; + z-index: 5; } } + .premade-themes { margin-bottom: 10px; + .theme-label { font-weight: 400; margin-top: 5px; } + img { border: 3px solid transparent; } + .active { img { - border-color: $color--primary; + border-color: $primary-color; } } } @@ -197,12 +230,12 @@ } .theme-elements__header { - margin: 10px 20px 0px 0; border-bottom: 1px solid #ccc; - padding: 5px 0 10px; + cursor: pointer; font-size: em(13.5px); font-weight: 600; - cursor: pointer; + margin: 10px 20px 0 0; + padding: 5px 0 10px; .fa-minus { display: none; @@ -212,39 +245,41 @@ .fa-minus { display: inline-block; } + .fa-plus { display: none; } } .header__icon { - float: right; @include opacity(.5); + float: right; } } .theme-elements__body { - padding-top: 5px; - display: none; - @include legacy-pie-clearfix; - background: rgba(255, 255, 255, .05); - padding: 20px 0 0 20px; - margin: 0 20px 0 0; @include border-radius(0 0 3px 3px); + @include legacy-pie-clearfix; + @include alpha-property(background-color, $white, .05); + display: none; + margin: 0 20px 0 0; + padding: 20px 0 0 20px; } .custom-label { - white-space: nowrap; - font-weight: normal; font-size: 12px; - width: 100%; + font-weight: normal; + margin-bottom: 0; overflow: hidden; text-overflow: ellipsis; - margin-bottom: 0; + white-space: nowrap; + width: 100%; } + .input-group-addon { background: transparent; } + .radio { label { font-weight: 600; @@ -253,32 +288,33 @@ } .section-title { - margin-bottom: 5px; font-weight: 600; + margin-bottom: 5px; padding-right: 50px; } .section-edit { - text-align: right; margin-bottom: 5px; + text-align: right; + .fa { - margin-right: 5px; - font-size: 12px; @include opacity(.5); display: none; + font-size: 12px; + margin-right: 5px; &.fa-chevron-down { - top: -1px; margin-right: 0; position: relative; + top: -1px; } } } .section-describe { - @include opacity(.7); - white-space: pre; @include clearfix; + @include opacity(.7); text-overflow: ellipsis; + white-space: pre; } .divider-dark { @@ -290,8 +326,8 @@ } .setting-list { - padding: 0; list-style-type: none; + padding: 0; } .setting-list__hint { @@ -305,68 +341,77 @@ .setting-list-item { margin-top: 7px; } + .has-error { color: #a94442; } .file-status { + color: #555; font-size: 13px; margin-top: 8px; - color: #555; } .confirm-import { - padding: 4px 10px; margin: 10px 0; + padding: 4px 10px; } } } } + .nav-pills { > li { margin: 0; + a { - padding: 8px 5px 8px 15px; border-radius: 0; color: #777; + padding: 8px 5px 8px 15px; } + .glyphicon { - width: 25px; top: 2px; + width: 25px; } + &:hover { a { - background-color: rgba(black, .1); + @include alpha-property(background-color, $black, .1); } } + &.active { a { - color: #111; background-color: #e1e1e1; + color: #111; + &:before { + background: $black; content: ''; + height: 100%; + left: 0; position: absolute; top: 0; - left: 0; width: 5px; - height: 100%; - background: #000; } } + a, a:hover, a:focus { - background-color: rgba(black, .1); + @include alpha-property(background-color, $black, .1); border-radius: 0; font-weight: 400; - position: relative; - white-space: nowrap; overflow: hidden; + position: relative; text-overflow: ellipsis; + white-space: nowrap; } } } } + h3 { font-size: em(20px); } @@ -391,13 +436,15 @@ .member-div { border-bottom: 1px solid lightgrey; - position: relative; - padding: 2px; margin: 0; + padding: 2px; + position: relative; width: 100%; + &:first-child { border-top: 1px solid lightgrey; } + .post-profile-img { @include border-radius(50px); margin-right: 8px; @@ -407,14 +454,14 @@ .member-role, .member-drop { .fa { - margin-right: 5px; @include opacity(.5); font-size: 12px; + margin-right: 5px; } .member-menu { - top: -50%; right: 110%; + top: -50%; } } @@ -425,13 +472,13 @@ } .member-menu { - right: 0px; left: auto; + right: 0; } .member-list { - width: 100%; overflow-x: visible; + width: 100%; } .member-page { diff --git a/webapp/sass/routes/_signup.scss b/webapp/sass/routes/_signup.scss index 53c59c222e..09f8e41856 100644 --- a/webapp/sass/routes/_signup.scss +++ b/webapp/sass/routes/_signup.scss @@ -1,19 +1,19 @@ @charset 'UTF-8'; .signup-header { - width: 100%; + background: $bg--gray; line-height: 33px; padding: 0 1em .2em; - background: $bg--gray; + width: 100%; .fa { margin-right: 5px; } } .signup-team__container { - padding: 100px 0px 50px 0px; - max-width: 380px; margin: 0 auto; + max-width: 380px; + padding: 100px 0 50px; position: relative; &.padding--less { @@ -21,7 +21,7 @@ } .form-control:focus { - @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)); + @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)); } h1, @@ -39,16 +39,16 @@ } h2 { - font-weight: 600; - margin-bottom: .8em; - letter-spacing: -.5px; font-size: em(30px); + font-weight: 600; + letter-spacing: -.5px; + margin-bottom: .8em; } h3 { - font-weight: 600; - margin: 0 0 1.3em 0; font-size: 1.5em; + font-weight: 600; + margin: 0 0 1.3em; } h4 { @@ -66,7 +66,7 @@ } p { - color: #555; + color: #555555; line-height: 1.5; margin-bottom: 1em; } @@ -81,32 +81,32 @@ } .form-control { - text-align: left; display: table-cell; + text-align: left; width: 100%; } .input-group-addon { - text-align: left; - width: 50%; display: table-cell; overflow: hidden; + text-align: left; text-overflow: ellipsis; + width: 50%; } } } .inner__content { - padding: 0 1rem; margin: 30px 0 20px; + padding: 0 1rem; } .block--gray { + @include border-radius(3px); background: #f2f2f2; display: inline-block; - padding: .85em 1.2em; font-weight: 600; - @include border-radius(3px); + padding: .85em 1.2em; } form { @@ -114,32 +114,32 @@ } .signup-team-confirm__container { - padding: 100px 0px 100px 0px; + padding: 100px 0; } .signup-team-logo { display: none; + margin: 0 0 2em; width: 210px; - margin: 0 0 2em 0; } .signup-team-login { - padding-bottom: 10px; font-weight: 600; + padding-bottom: 10px; } .signup-team__name { - margin: .5em 0 0; font-size: 2.2em; font-weight: 600; + margin: .5em 0 0; padding-left: 1rem; } .signup-team__subdomain { - margin: .2em 0 1.2em; font-size: 1.5em; - padding-left: 1rem; font-weight: 300; + margin: .2em 0 1.2em; + padding-left: 1rem; text-transform: uppercase; } @@ -148,21 +148,21 @@ } .or__container { + background: #dddddd; height: 1px; - background: #ddd; - text-align: left; margin: 2em 0; + text-align: left; span { - width: 40px; - top: -10px; - position: relative; - font-size: 1.14286em; - line-height: 20px; - font-weight: 600; - background: #fff; + background: #ffffff; display: inline-block; + font-size: 1.14286em; + font-weight: 600; + line-height: 20px; + position: relative; text-align: center; + top: -10px; + width: 40px; } } @@ -177,9 +177,9 @@ .btn { font-size: 1em; - padding: em(7px) em(15px); font-weight: 600; margin-right: 5px; + padding: em(7px) em(15px); .fa { font-size: 17px; @@ -187,29 +187,29 @@ } .icon { - width: 18px; - height: 18px; - margin-right: 8px; @include background-size(100% 100%); display: inline-block; + height: 18px; + margin-right: 8px; + width: 18px; } &.btn-custom-login { + @include border-radius(2px); + color: $white; display: block; - min-width: 200px; - width: 200px; - padding: 0 1em; - margin: 1em 1rem; height: 40px; line-height: 34px; - color: #fff; - @include border-radius(2px); + margin: 1em 1rem; + min-width: 200px; + padding: 0 1em; + width: 200px; &.gitlab { - background: #548; + background: #554488; &:hover { - background: darken(#548, 10%); + background: darken(#554488, 10%); } span { @@ -250,10 +250,10 @@ } &.email { - background: #2389d7; + background: $primary-color; &:hover { - background: darken(#2389d7, 10%); + background: $primary-color--hover; } span { @@ -269,15 +269,15 @@ } &.btn-default { - color: #444; + color: #444444; } .glyphicon { &.glyphicon-ok, &.glyphicon-refresh { - margin-right: .5em; - left: -2px; font-size: .9em; + left: -2px; + margin-right: .5em; } &.glyphicon-chevron-right { @@ -296,28 +296,29 @@ .has-error { .control-label { - background: #f2f2f2; - padding: .7em 1em; @include border-radius(3px); - margin: 1em 0 0; + background: #f2f2f2; + color: #999999; font-size: 14px; font-weight: normal; - color: #999; + margin: 1em 0 0; + padding: .7em 1em; width: 100%; &:before { - @extend .fa; + @extend %font-awesome; + color: #aaaaaa; content: '\f071'; margin-right: 4px; - color: #aaa; } } } .reset-form { @include border-radius(3px); - position: relative; font-size: .95em; + position: relative; + p { color: inherit; } @@ -363,12 +364,12 @@ .black, &.black { - color: #000; + color: #000000; } } .color--light { - color: #777; + color: #777777; } .margin--extra { @@ -381,9 +382,10 @@ } .signup-team-all { - margin: 0 0 20px; - border: 1px solid #ddd; @include border-radius(2px); + border: 1px solid #dddddd; + margin: 0 0 20px; + .signup-team-dir { background: #fafafa; border-top: 1px solid #d5d5d5; @@ -395,25 +397,25 @@ a { color: inherit; display: block; - padding: 0 15px; - line-height: 3.5em; - height: 3.5em; font-size: 1.1em; + height: 3.5em; + line-height: 3.5em; + padding: 0 15px; } } .signup-team-dir__name { - white-space: nowrap; float: left; overflow: hidden; text-overflow: ellipsis; + white-space: nowrap; width: 90%; } .signup-team-dir__arrow { + color: #999999; float: right; font-size: .9em; - color: #999; line-height: 3.5em; } } diff --git a/webapp/sass/routes/_statistics.scss b/webapp/sass/routes/_statistics.scss index b48c137c38..797bc480b1 100644 --- a/webapp/sass/routes/_statistics.scss +++ b/webapp/sass/routes/_statistics.scss @@ -2,45 +2,45 @@ .team_statistics { .total-count { + @include border-radius(3px); + background: $white; + border: 1px solid $light-gray; margin: 1em 0; text-align: center; - background: #fff; - border: 1px solid #ddd; width: 100%; - @include border-radius(3px); .title { + border-bottom: 1px solid $light-gray; + font-size: 13px; font-weight: 400; padding: 7px 10px; - border-bottom: 1px solid #ddd; text-align: left; - font-size: 13px; .fa { + color: #555555; float: right; - margin: 0px 0 0; - color: #555; font-size: 16px; + margin: 0; } } .content { + color: #555555; font-size: 30px; font-weight: 600; - color: #555; - padding: .3em 0 .35em; overflow: auto; + padding: .3em 0 .35em; } } .total-count--day { - width: 760px; - height: 275px; - border: 1px solid #ddd; - padding: 5px 10px 10px 10px; - margin: 10px 10px 10px 10px; - background: #fff; + background: $white; + border: 1px solid $light-gray; clear: both; + height: 275px; + margin: 10px; + padding: 5px 10px 10px; + width: 760px; > div { font-size: 18px; @@ -50,8 +50,8 @@ .recent-active-users { table { - width: 100%; table-layout: fixed; + width: 100%; } .content { @@ -68,14 +68,15 @@ } td { - font-weight: 400; - white-space: nowrap; - text-overflow: ellipsis; - font-size: 13px; - border-left: 1px solid #ddd; - border-top: 1px solid #ddd; - padding: 5px 5px 6px; @include clearfix; + border-left: 1px solid $light-gray; + border-top: 1px solid $light-gray; + font-size: 13px; + font-weight: 400; + padding: 5px 5px 6px; + text-overflow: ellipsis; + white-space: nowrap; + &:first-child { border-left: none; } diff --git a/webapp/sass/utils/_animations.scss b/webapp/sass/utils/_animations.scss index 767e30847b..ffdbcb2195 100644 --- a/webapp/sass/utils/_animations.scss +++ b/webapp/sass/utils/_animations.scss @@ -1,19 +1,21 @@ @charset 'UTF-8'; -@-webkit-keyframes spin2 { - from { - -webkit-transform: rotate(0deg); - } - to { - -webkit-transform: rotate(360deg); - } -} - @keyframes spin { from { transform: scale(1) rotate(0deg); } + to { transform: scale(1) rotate(360deg); } } + +@keyframes highlight { + from { + @include alpha-property(background, $yellow, .5); + } + + to { + background: none; + } +} diff --git a/webapp/sass/utils/_functions.scss b/webapp/sass/utils/_functions.scss index 9013920fa5..baedd72c52 100644 --- a/webapp/sass/utils/_functions.scss +++ b/webapp/sass/utils/_functions.scss @@ -4,6 +4,20 @@ @return #{$pixels/$context}em } +@function alpha-color($color, $amount) { + @return rgba($color, $amount) +} + %popover-box-shadow { @include box-shadow(rgba(black, .175) 1px -3px 12px); +} + +%font-awesome { + display: inline-block; + font: normal normal normal 14px/1 FontAwesome; + font-size: inherit; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + transform: translate(0, 0); } \ No newline at end of file diff --git a/webapp/sass/utils/_mixins.scss b/webapp/sass/utils/_mixins.scss index 28723e1a5f..6e4488fcaf 100644 --- a/webapp/sass/utils/_mixins.scss +++ b/webapp/sass/utils/_mixins.scss @@ -1,8 +1,29 @@ @charset 'UTF-8'; @mixin file-icon($path) { - background: #fff url($path); + @include background-size(60px auto); + background-color: $white; + background-image: url($path); background-position: center; background-repeat: no-repeat; - @include background-size(60px auto); } + +@mixin alpha-property($property, $color, $opacity) { + #{$property}: rgba($color, $opacity); +} + +@mixin font-smoothing($value: antialiased) { + @if $value == antialiased { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + @else { + -webkit-font-smoothing: subpixel-antialiased; + -moz-osx-font-smoothing: auto; + } +} + +@mixin cursor($value) { + cursor: -webkit-$value; + cursor: zoom-$value; +} \ No newline at end of file diff --git a/webapp/sass/utils/_module.scss b/webapp/sass/utils/_module.scss index e7f0c0c468..5dddcaef74 100644 --- a/webapp/sass/utils/_module.scss +++ b/webapp/sass/utils/_module.scss @@ -1,5 +1,5 @@ // Only for combining all the files in this folder @import 'variables'; -@import 'animations'; @import 'functions'; @import 'mixins'; +@import 'animations'; diff --git a/webapp/sass/utils/_variables.scss b/webapp/sass/utils/_variables.scss index 065c37a171..345ab11e87 100644 --- a/webapp/sass/utils/_variables.scss +++ b/webapp/sass/utils/_variables.scss @@ -1,10 +1,16 @@ @charset 'UTF-8'; // Color Variables -$color--primary: rgb(35, 137, 215); -$color--primary--hover: darken($color--primary, 10%); +$primary-color: rgb(35, 137, 215); +$primary-color--hover: darken($primary-color, 10%); $bg--gray: rgb(245, 245, 245); -$bg--white: rgb(255, 255, 255); +$white: rgb(255, 255, 255); +$black: rgb(0, 0, 0); +$red: rgb(229, 101, 101); +$yellow: rgb(255, 255, 0); +$light-gray: rgba(0, 0, 0, .06); +$gray: rgba(0, 0, 0, .3); +$dark-gray: rgba(0, 0, 0, .5); // Page Variables $border-gray: 1px solid #ddd; diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx index 686630a9b1..fbed9a0820 100644 --- a/webapp/utils/utils.jsx +++ b/webapp/utils/utils.jsx @@ -763,7 +763,6 @@ export function applyTheme(theme) { if (theme.buttonBg) { changeCss('.btn.btn-primary, .tutorial__circles .circle.active', 'background:' + theme.buttonBg, 1); changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background:' + changeColor(theme.buttonBg, -0.25), 1); - changeCss('.file-playback__controls', 'color:' + changeColor(theme.buttonBg, -0.25), 1); } if (theme.buttonColor) {