diff options
Diffstat (limited to 'webapp')
-rw-r--r-- | webapp/components/backstage/add_command.jsx | 83 | ||||
-rw-r--r-- | webapp/components/backstage/add_incoming_webhook.jsx | 12 | ||||
-rw-r--r-- | webapp/components/backstage/add_outgoing_webhook.jsx | 20 | ||||
-rw-r--r-- | webapp/components/logged_in.jsx | 2 | ||||
-rw-r--r-- | webapp/components/navbar.jsx | 16 | ||||
-rw-r--r-- | webapp/components/posts_view.jsx | 2 | ||||
-rw-r--r-- | webapp/components/sidebar_right.jsx | 24 | ||||
-rw-r--r-- | webapp/sass/components/_modal.scss | 34 | ||||
-rw-r--r-- | webapp/sass/layout/_forms.scss | 31 | ||||
-rw-r--r-- | webapp/sass/layout/_headers.scss | 46 | ||||
-rw-r--r-- | webapp/sass/routes/_admin-console.scss | 27 | ||||
-rw-r--r-- | webapp/sass/routes/_backstage.scss | 38 | ||||
-rw-r--r-- | webapp/utils/utils.jsx | 210 |
13 files changed, 271 insertions, 274 deletions
diff --git a/webapp/components/backstage/add_command.jsx b/webapp/components/backstage/add_command.jsx index 93ff66271..b6f01b4d8 100644 --- a/webapp/components/backstage/add_command.jsx +++ b/webapp/components/backstage/add_command.jsx @@ -185,7 +185,7 @@ export default class AddCommand extends React.Component { className='form-group' > <label - className='control-label col-sm-3' + className='control-label col-sm-4' htmlFor='autocompleteHint' > <FormattedMessage @@ -193,7 +193,7 @@ export default class AddCommand extends React.Component { defaultMessage='Autocomplete Hint' /> </label> - <div className='col-md-5 col-sm-9'> + <div className='col-md-5 col-sm-8'> <input id='autocompleteHint' type='text' @@ -203,7 +203,7 @@ export default class AddCommand extends React.Component { onChange={this.updateAutocompleteHint} placeholder={Utils.localizeMessage('add_command.autocompleteHint.placeholder', 'Example: [Patient Name]')} /> - <div className='add-integration__help'> + <div className='form__help'> <FormattedMessage id='add_command.autocompleteDescription.help' defaultMessage='Optional hint in the autocomplete list about command parameters' @@ -218,7 +218,7 @@ export default class AddCommand extends React.Component { className='form-group' > <label - className='control-label col-sm-3' + className='control-label col-sm-4' htmlFor='autocompleteDescription' > <FormattedMessage @@ -226,7 +226,7 @@ export default class AddCommand extends React.Component { defaultMessage='Autocomplete Description' /> </label> - <div className='col-md-5 col-sm-9'> + <div className='col-md-5 col-sm-8'> <input id='description' type='text' @@ -236,7 +236,7 @@ export default class AddCommand extends React.Component { onChange={this.updateAutocompleteDescription} placeholder={Utils.localizeMessage('add_command.autocompleteDescription.placeholder', 'Example: "Returns search results for patient records"')} /> - <div className='add-integration__help'> + <div className='form__help'> <FormattedMessage id='add_command.autocompleteDescription.help' defaultMessage='Optional short description of slash command for the autocomplete list.' @@ -263,7 +263,7 @@ export default class AddCommand extends React.Component { <form className='form-horizontal'> <div className='form-group'> <label - className='control-label col-sm-3' + className='control-label col-sm-4' htmlFor='displayName' > <FormattedMessage @@ -271,7 +271,7 @@ export default class AddCommand extends React.Component { defaultMessage='Display Name' /> </label> - <div className='col-md-5 col-sm-9'> + <div className='col-md-5 col-sm-8'> <input id='displayName' type='text' @@ -284,7 +284,7 @@ export default class AddCommand extends React.Component { </div> <div className='form-group'> <label - className='control-label col-sm-3' + className='control-label col-sm-4' htmlFor='description' > <FormattedMessage @@ -292,7 +292,7 @@ export default class AddCommand extends React.Component { defaultMessage='Description' /> </label> - <div className='col-md-5 col-sm-9'> + <div className='col-md-5 col-sm-8'> <input id='description' type='text' @@ -305,7 +305,7 @@ export default class AddCommand extends React.Component { </div> <div className='form-group'> <label - className='control-label col-sm-3' + className='control-label col-sm-4' htmlFor='trigger' > <FormattedMessage @@ -313,7 +313,7 @@ export default class AddCommand extends React.Component { defaultMessage='Command Trigger Word' /> </label> - <div className='col-md-5 col-sm-9'> + <div className='col-md-5 col-sm-8'> <input id='trigger' type='text' @@ -323,13 +323,13 @@ export default class AddCommand extends React.Component { onChange={this.updateTrigger} placeholder={Utils.localizeMessage('add_command.trigger.placeholder', 'Command trigger e.g. "hello" not including the slash')} /> - <div className='add-integration__help'> + <div className='form__help'> <FormattedMessage id='add_command.trigger.help1' defaultMessage='Examples: /patient, /client /employee' /> </div> - <div className='add-integration__help'> + <div className='form__help'> <FormattedMessage id='add_command.trigger.help2' defaultMessage='Reserved: /echo, /join, /logout, /me, /shrug' @@ -339,7 +339,7 @@ export default class AddCommand extends React.Component { </div> <div className='form-group'> <label - className='control-label col-sm-3' + className='control-label col-sm-4' htmlFor='url' > <FormattedMessage @@ -347,7 +347,7 @@ export default class AddCommand extends React.Component { defaultMessage='Request URL' /> </label> - <div className='col-md-5 col-sm-9'> + <div className='col-md-5 col-sm-8'> <input id='url' type='text' @@ -357,7 +357,7 @@ export default class AddCommand extends React.Component { onChange={this.updateUrl} placeholder={Utils.localizeMessage('add_command.url.placeholder', 'Must start with http:// or https://')} /> - <div className='add-integration__help'> + <div className='form__help'> <FormattedMessage id='add_command.url.help' defaultMessage='The callback URL to receive the HTTP POST or GET event request when the slash command is run.' @@ -367,7 +367,7 @@ export default class AddCommand extends React.Component { </div> <div className='form-group'> <label - className='control-label col-sm-3' + className='control-label col-sm-4' htmlFor='method' > <FormattedMessage @@ -375,7 +375,7 @@ export default class AddCommand extends React.Component { defaultMessage='Request Method' /> </label> - <div className='col-md-5 col-sm-9'> + <div className='col-md-5 col-sm-8'> <select id='method' className='form-control' @@ -389,7 +389,7 @@ export default class AddCommand extends React.Component { {Utils.localizeMessage('add_command.method.get', 'GET')} </option> </select> - <div className='add-integration__help'> + <div className='form__help'> <FormattedMessage id='add_command.method.help' defaultMessage='The type of command request issued to the Request URL.' @@ -399,7 +399,7 @@ export default class AddCommand extends React.Component { </div> <div className='form-group'> <label - className='control-lavel col-sm-3' + className='control-label col-sm-4' htmlFor='username' > <FormattedMessage @@ -407,7 +407,7 @@ export default class AddCommand extends React.Component { defaultMessage='Response Username' /> </label> - <div className='col-md-5 col-sm-9'> + <div className='col-md-5 col-sm-8'> <input id='username' type='text' @@ -417,7 +417,7 @@ export default class AddCommand extends React.Component { onChange={this.updateUsername} placholder={Utils.localizeMessage('add_command.username.placeholder', 'Username')} /> - <div className='add-integration__help'> + <div className='form__help'> <FormattedMessage id='add_command.username.help' defaultMessage='Choose a username override for responses for this slash command. Usernames can consist of up to 22 characters consisting of lowercase letters, numbers and the symbols "-", "_", and ".".' @@ -427,7 +427,7 @@ export default class AddCommand extends React.Component { </div> <div className='form-group'> <label - className='control-label col-sm-3' + className='control-label col-sm-4' htmlFor='iconUrl' > <FormattedMessage @@ -435,7 +435,7 @@ export default class AddCommand extends React.Component { defaultMessage='Response Icon' /> </label> - <div className='col-md-5 col-sm-9'> + <div className='col-md-5 col-sm-8'> <input id='iconUrl' type='text' @@ -445,7 +445,7 @@ export default class AddCommand extends React.Component { onChange={this.updateIconUrl} placeholder={Utils.localizeMessage('add_command.iconUrl.placeholder', 'https://www.example.com/myicon.png')} /> - <div className='add-integration__help'> + <div className='form__help'> <FormattedMessage id='add_command.iconUrl.help' defaultMessage='Choose a profile picture override for the post responses to this slash command. Enter the URL of a .png or .jpg file at least 128 pixels by 128 pixels.' @@ -453,23 +453,20 @@ export default class AddCommand extends React.Component { </div> </div> </div> - <div className='form-group'> - <label - className='control-label col-sm-3' - htmlFor='autocomplete' - > - <FormattedMessage - id='add_command.autocomplete' - defaultMessage='Autocomplete' - /> - </label> - <div className='col-md-5 col-sm-9'> - <input - type='checkbox' - checked={this.state.autocomplete} - onChange={this.updateAutocomplete} - /> - <div className='add-integration__help'> + <div className='form-group padding-bottom'> + <div className='col-sm-12'> + <div className='checkbox'> + <input + type='checkbox' + checked={this.state.autocomplete} + onChange={this.updateAutocomplete} + /> + <FormattedMessage + id='add_command.autocomplete' + defaultMessage='Autocomplete' + /> + </div> + <div className='form__help'> <FormattedMessage id='add_command.autocomplete.help' defaultMessage='Show this command in the autocomplete list' diff --git a/webapp/components/backstage/add_incoming_webhook.jsx b/webapp/components/backstage/add_incoming_webhook.jsx index f3601cb07..b0c16b9ff 100644 --- a/webapp/components/backstage/add_incoming_webhook.jsx +++ b/webapp/components/backstage/add_incoming_webhook.jsx @@ -114,7 +114,7 @@ export default class AddIncomingWebhook extends React.Component { <form className='form-horizontal'> <div className='form-group'> <label - className='control-label col-sm-3' + className='control-label col-sm-4' htmlFor='displayName' > <FormattedMessage @@ -122,7 +122,7 @@ export default class AddIncomingWebhook extends React.Component { defaultMessage='Display Name' /> </label> - <div className='col-md-5 col-sm-9'> + <div className='col-md-5 col-sm-8'> <input id='displayName' type='text' @@ -135,7 +135,7 @@ export default class AddIncomingWebhook extends React.Component { </div> <div className='form-group'> <label - className='control-label col-sm-3' + className='control-label col-sm-4' htmlFor='description' > <FormattedMessage @@ -143,7 +143,7 @@ export default class AddIncomingWebhook extends React.Component { defaultMessage='Description' /> </label> - <div className='col-md-5 col-sm-9'> + <div className='col-md-5 col-sm-8'> <input id='description' type='text' @@ -156,7 +156,7 @@ export default class AddIncomingWebhook extends React.Component { </div> <div className='form-group'> <label - className='control-label col-sm-3' + className='control-label col-sm-4' htmlFor='channelId' > <FormattedMessage @@ -164,7 +164,7 @@ export default class AddIncomingWebhook extends React.Component { defaultMessage='Channel' /> </label> - <div className='col-md-5 col-sm-9'> + <div className='col-md-5 col-sm-8'> <ChannelSelect id='channelId' value={this.state.channelId} diff --git a/webapp/components/backstage/add_outgoing_webhook.jsx b/webapp/components/backstage/add_outgoing_webhook.jsx index ef57c6d05..9d1f79e5d 100644 --- a/webapp/components/backstage/add_outgoing_webhook.jsx +++ b/webapp/components/backstage/add_outgoing_webhook.jsx @@ -146,7 +146,7 @@ export default class AddOutgoingWebhook extends React.Component { <form className='form-horizontal'> <div className='form-group'> <label - className='control-label col-sm-3' + className='control-label col-sm-4' htmlFor='displayName' > <FormattedMessage @@ -154,7 +154,7 @@ export default class AddOutgoingWebhook extends React.Component { defaultMessage='Display Name' /> </label> - <div className='col-md-5 col-sm-9'> + <div className='col-md-5 col-sm-8'> <input id='displayName' type='text' @@ -167,7 +167,7 @@ export default class AddOutgoingWebhook extends React.Component { </div> <div className='form-group'> <label - className='control-label col-sm-3' + className='control-label col-sm-4' htmlFor='description' > <FormattedMessage @@ -175,7 +175,7 @@ export default class AddOutgoingWebhook extends React.Component { defaultMessage='Description' /> </label> - <div className='col-md-5 col-sm-9'> + <div className='col-md-5 col-sm-8'> <input id='description' type='text' @@ -188,7 +188,7 @@ export default class AddOutgoingWebhook extends React.Component { </div> <div className='form-group'> <label - className='control-label col-sm-3' + className='control-label col-sm-4' htmlFor='channelId' > <FormattedMessage @@ -196,7 +196,7 @@ export default class AddOutgoingWebhook extends React.Component { defaultMessage='Channel' /> </label> - <div className='col-md-5 col-sm-9'> + <div className='col-md-5 col-sm-8'> <ChannelSelect id='channelId' value={this.state.channelId} @@ -206,7 +206,7 @@ export default class AddOutgoingWebhook extends React.Component { </div> <div className='form-group'> <label - className='control-label col-sm-3' + className='control-label col-sm-4' htmlFor='triggerWords' > <FormattedMessage @@ -214,7 +214,7 @@ export default class AddOutgoingWebhook extends React.Component { defaultMessage='Trigger Words (One Per Line)' /> </label> - <div className='col-md-5 col-sm-9'> + <div className='col-md-5 col-sm-8'> <textarea id='triggerWords' rows='3' @@ -227,7 +227,7 @@ export default class AddOutgoingWebhook extends React.Component { </div> <div className='form-group'> <label - className='control-label col-sm-3' + className='control-label col-sm-4' htmlFor='callbackUrls' > <FormattedMessage @@ -235,7 +235,7 @@ export default class AddOutgoingWebhook extends React.Component { defaultMessage='Callback URLs (One Per Line)' /> </label> - <div className='col-md-5 col-sm-9'> + <div className='col-md-5 col-sm-8'> <textarea id='callbackUrls' rows='3' diff --git a/webapp/components/logged_in.jsx b/webapp/components/logged_in.jsx index 0c4571083..1dcb6b0aa 100644 --- a/webapp/components/logged_in.jsx +++ b/webapp/components/logged_in.jsx @@ -203,8 +203,6 @@ export default class LoggedIn extends React.Component { Websockets.close(); UserStore.removeChangeListener(this.onUserChanged); - Utils.resetTheme(); - $('body').off('click.userpopover'); $('body').off('mouseenter mouseleave', '.post'); $('body').off('mouseenter mouseleave', '.post.post--comment.same--root'); diff --git a/webapp/components/navbar.jsx b/webapp/components/navbar.jsx index 5afd7e683..e4e64c12e 100644 --- a/webapp/components/navbar.jsx +++ b/webapp/components/navbar.jsx @@ -105,20 +105,20 @@ export default class Navbar extends React.Component { }); if (e.target.className !== 'navbar-toggle' && e.target.className !== 'icon-bar') { - $('.inner-wrap').removeClass('move--right move--left move--left-small'); - $('.sidebar--left').removeClass('move--right'); - $('.sidebar--right').removeClass('move--left'); - $('.sidebar--menu').removeClass('move--left'); + $('.app__body .inner-wrap').removeClass('move--right move--left move--left-small'); + $('.app__body .sidebar--left').removeClass('move--right'); + $('.app__body .sidebar--right').removeClass('move--left'); + $('.app__body .sidebar--menu').removeClass('move--left'); } } } toggleLeftSidebar() { - $('.inner-wrap').toggleClass('move--right'); - $('.sidebar--left').toggleClass('move--right'); + $('.app__body .inner-wrap').toggleClass('move--right'); + $('.app__body .sidebar--left').toggleClass('move--right'); } toggleRightSidebar() { - $('.inner-wrap').toggleClass('move--left-small'); - $('.sidebar--menu').toggleClass('move--left'); + $('.app__body .inner-wrap').toggleClass('move--left-small'); + $('.app__body .sidebar--menu').toggleClass('move--left'); } showSearch() { AppDispatcher.handleServerAction({ diff --git a/webapp/components/posts_view.jsx b/webapp/components/posts_view.jsx index aa7f445ce..cac08aa34 100644 --- a/webapp/components/posts_view.jsx +++ b/webapp/components/posts_view.jsx @@ -372,11 +372,13 @@ export default class PostsView extends React.Component { this.updateScrolling(); } window.addEventListener('resize', this.handleResize); + $('body').addClass('app__body'); } componentWillUnmount() { window.removeEventListener('resize', this.handleResize); this.scrollStopAction.cancel(); PreferenceStore.removeChangeListener(this.updateState); + $('body').removeClass('app__body'); } componentDidUpdate() { if (this.props.postList != null) { diff --git a/webapp/components/sidebar_right.jsx b/webapp/components/sidebar_right.jsx index 594674929..43b4a34bb 100644 --- a/webapp/components/sidebar_right.jsx +++ b/webapp/components/sidebar_right.jsx @@ -66,28 +66,28 @@ export default class SidebarRight extends React.Component { var windowWidth = $(window).outerWidth(); var sidebarRightWidth = $('.sidebar--right').outerWidth(); - $('.inner-wrap').removeClass('.move--right'); - $('.inner-wrap').addClass('move--left'); - $('.sidebar--left').removeClass('move--right'); - $('.sidebar--right').addClass('move--left'); + $('.app__body .inner-wrap').removeClass('.move--right'); + $('.app__body .inner-wrap').addClass('move--left'); + $('.app__body .sidebar--left').removeClass('move--right'); + $('.app__body .sidebar--right').addClass('move--left'); //$('.sidebar--right').prepend('<div class="sidebar__overlay"></div>'); if (this.state.searchVisible || this.state.postRightVisible) { if (windowWidth > 960) { - velocity($('.inner-wrap'), {marginRight: sidebarRightWidth}, {duration: 500, easing: 'easeOutSine'}); - velocity($('.sidebar--right'), {translateX: 0}, {duration: 500, easing: 'easeOutSine'}); + velocity($('.app__body .inner-wrap'), {marginRight: sidebarRightWidth}, {duration: 500, easing: 'easeOutSine'}); + velocity($('.app__body .sidebar--right'), {translateX: 0}, {duration: 500, easing: 'easeOutSine'}); } else { - $('.inner-wrap, .sidebar--right').attr('style', ''); + $('.app__body .inner-wrap, .sidebar--right').attr('style', ''); } } else { if (windowWidth > 960) { - velocity($('.inner-wrap'), {marginRight: 0}, {duration: 500, easing: 'easeOutSine'}); - velocity($('.sidebar--right'), {translateX: sidebarRightWidth}, {duration: 500, easing: 'easeOutSine'}); + velocity($('.app__body .inner-wrap'), {marginRight: 0}, {duration: 500, easing: 'easeOutSine'}); + velocity($('.app__body .sidebar--right'), {translateX: sidebarRightWidth}, {duration: 500, easing: 'easeOutSine'}); } else { - $('.inner-wrap, .sidebar--right').attr('style', ''); + $('.app__body .inner-wrap, .sidebar--right').attr('style', ''); } - $('.inner-wrap').removeClass('move--left').removeClass('move--right'); - $('.sidebar--right').removeClass('move--left'); + $('.app__body .inner-wrap').removeClass('move--left').removeClass('move--right'); + $('.app__body .sidebar--right').removeClass('move--left'); return ( <div></div> ); diff --git a/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss index 2348788f4..8796f2c60 100644 --- a/webapp/sass/components/_modal.scss +++ b/webapp/sass/components/_modal.scss @@ -39,38 +39,6 @@ } } - .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; - } - } - } - .custom-textarea { border-color: $light-gray; color: inherit; @@ -520,7 +488,7 @@ } .more-modal__row { - border-bottom: 1px solid; + border-bottom: 1px solid $light-gray; display: flex; padding: 8px 15px; } diff --git a/webapp/sass/layout/_forms.scss b/webapp/sass/layout/_forms.scss index 1dd2bb827..7b4e03ad9 100644 --- a/webapp/sass/layout/_forms.scss +++ b/webapp/sass/layout/_forms.scss @@ -60,3 +60,34 @@ } } +.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; + } + } +} diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss index e75d2556b..ae114a805 100644 --- a/webapp/sass/layout/_headers.scss +++ b/webapp/sass/layout/_headers.scss @@ -344,32 +344,36 @@ } } -.channel-header__links { - font-family: 'Open Sans', sans-serif; - font-size: 22px; - height: 30px; - line-height: 26px; - margin-right: 9px; - width: 24px; - - .channel__wrap.move--left & { - position: absolute; - right: -400px; - top: 14px; - } +.app__body { - > a { - @include opacity(.6); - @include single-transition(all, .1s, ease-in); - color: inherit; - text-decoration: none; + .channel-header__links { + font-family: 'Open Sans', sans-serif; + font-size: 22px; + height: 30px; + line-height: 26px; + margin-right: 9px; + width: 24px; - &:hover { - @include opacity(1); + .channel__wrap.move--left & { + position: absolute; + right: -400px; + top: 14px; } - &:focus { + > a { + @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/routes/_admin-console.scss b/webapp/sass/routes/_admin-console.scss index 73e8f816c..faa66e08b 100644 --- a/webapp/sass/routes/_admin-console.scss +++ b/webapp/sass/routes/_admin-console.scss @@ -17,14 +17,9 @@ padding-bottom: .5em; } - .table { - background: $white; - } - .form-control { background-color: $white; - border: 1px solid #ccc; - color: #555; + border: 1px solid $light-gray; &:focus { @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)); @@ -33,26 +28,6 @@ } } - .btn { - color: #333; - - &.btn-primary { - background: $primary-color; - - &:hover, - &:focus, - &:active { - background: #1c6dab; - } - } - } - - .dropdown-menu { - background: $white; - border: 1px solid rgba(0,0,0,.15); - color: inherit; - } - .sidebar--left { &.sidebar--collapsable { background: #333; diff --git a/webapp/sass/routes/_backstage.scss b/webapp/sass/routes/_backstage.scss index 9b115a132..4b0c07b7e 100644 --- a/webapp/sass/routes/_backstage.scss +++ b/webapp/sass/routes/_backstage.scss @@ -3,19 +3,20 @@ body { height: auto; overflow: auto; - .sidebar--right { - display: none; - } - - .navbar { - display: none; - } - .inner-wrap { + @include translateX(0); + margin-right: 0 !important; + &:before { display: none; } } + + .sidebar--right, + .sidebar--menu, + .navbar { + display: none; + } } } @@ -240,6 +241,17 @@ body { font-weight: normal; } + .radio, + .checkbox { + input { + height: 16px; + margin: 0 5px 0 0; + position: relative; + top: 2px; + width: 16px; + } + } + .form-control { background: $white; @@ -247,6 +259,16 @@ body { border-color: $primary-color; } } + + .form__help { + color: $dark-gray; + font-size: .95em; + margin-top: 1em; + + & + .form__help { + margin-top: .4em; + } + } } .backstage-form__footer { diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx index 399dd0985..024d52107 100644 --- a/webapp/utils/utils.jsx +++ b/webapp/utils/utils.jsx @@ -591,175 +591,175 @@ export function toTitleCase(str) { export function applyTheme(theme) { if (theme.sidebarBg) { - changeCss('.sidebar--left, .modal .settings-modal .settings-table .settings-links, .sidebar--menu', 'background:' + theme.sidebarBg, 1); - changeCss('body', 'scrollbar-face-color:' + theme.sidebarBg, 3); + changeCss('.app__body .sidebar--left, .app__body .modal .settings-modal .settings-table .settings-links, .app__body .sidebar--menu', 'background:' + theme.sidebarBg, 1); + changeCss('body.app__body', 'scrollbar-face-color:' + theme.sidebarBg, 3); } if (theme.sidebarText) { - changeCss('.sidebar--left .nav-pills__container li>a, .sidebar--right, .modal .settings-modal .nav-pills>li a, .sidebar--menu', 'color:' + changeOpacity(theme.sidebarText, 0.6), 1); - changeCss('@media(max-width: 768px){.modal .settings-modal .settings-table .nav>li>a', 'color:' + theme.sidebarText, 1); - changeCss('.sidebar--left .nav-pills__container li>h4, .sidebar--left .add-channel-btn', 'color:' + changeOpacity(theme.sidebarText, 0.6), 1); - changeCss('.sidebar--left .add-channel-btn:hover, .sidebar--left .add-channel-btn:focus', 'color:' + theme.sidebarText, 1); - changeCss('.sidebar--left .status .offline--icon, .sidebar--left .status .offline--icon', 'fill:' + theme.sidebarText, 1); - changeCss('@media(max-width: 768px){.modal .settings-modal .settings-table .nav>li>a', 'border-color:' + changeOpacity(theme.sidebarText, 0.2), 2); + changeCss('.app__body .sidebar--left .nav-pills__container li>a, .app__body .sidebar--right, .app__body .modal .settings-modal .nav-pills>li a, .app__body .sidebar--menu', 'color:' + changeOpacity(theme.sidebarText, 0.6), 1); + changeCss('@media(max-width: 768px){.app__body .modal .settings-modal .settings-table .nav>li>a', 'color:' + theme.sidebarText, 1); + changeCss('.app__body .sidebar--left .nav-pills__container li>h4, .app__body .sidebar--left .add-channel-btn', 'color:' + changeOpacity(theme.sidebarText, 0.6), 1); + changeCss('.app__body .sidebar--left .add-channel-btn:hover, .app__body .sidebar--left .add-channel-btn:focus', 'color:' + theme.sidebarText, 1); + changeCss('.app__body .sidebar--left .status .offline--icon, .app__body .sidebar--left .status .offline--icon', 'fill:' + theme.sidebarText, 1); + changeCss('@media(max-width: 768px){.app__body .modal .settings-modal .settings-table .nav>li>a', 'border-color:' + changeOpacity(theme.sidebarText, 0.2), 2); } if (theme.sidebarUnreadText) { - changeCss('.sidebar--left .nav-pills__container li>a.unread-title', 'color:' + theme.sidebarUnreadText + '!important;', 2); + changeCss('.app__body .sidebar--left .nav-pills__container li>a.unread-title', 'color:' + theme.sidebarUnreadText + '!important;', 2); } if (theme.sidebarTextHoverBg) { - changeCss('.sidebar--left .nav-pills__container li>a:hover, .sidebar--left .nav-pills__container li>a:focus, .modal .settings-modal .nav-pills>li:hover a, .modal .settings-modal .nav-pills>li:focus a', 'background:' + theme.sidebarTextHoverBg, 1); - changeCss('@media(max-width: 768px){.modal .settings-modal .settings-table .nav>li:hover a', 'background:' + theme.sidebarTextHoverBg, 1); + changeCss('.app__body .sidebar--left .nav-pills__container li>a:hover, .app__body .sidebar--left .nav-pills__container li>a:focus, .app__body .modal .settings-modal .nav-pills>li:hover a, .app__body .modal .settings-modal .nav-pills>li:focus a', 'background:' + theme.sidebarTextHoverBg, 1); + changeCss('@media(max-width: 768px){.app__body .modal .settings-modal .settings-table .nav>li:hover a', 'background:' + theme.sidebarTextHoverBg, 1); } if (theme.sidebarTextActiveBorder) { - changeCss('.sidebar--left .nav li.active a:before, .modal .settings-modal .nav-pills>li.active a:before', 'background:' + theme.sidebarTextActiveBorder, 1); + changeCss('.app__body .sidebar--left .nav li.active a:before, .app__body .modal .settings-modal .nav-pills>li.active a:before', 'background:' + theme.sidebarTextActiveBorder, 1); } if (theme.sidebarTextActiveColor) { - changeCss('.sidebar--left .nav-pills__container li.active a, .sidebar--left .nav-pills__container li.active a:hover, .sidebar--left .nav-pills__container li.active a:focus, .modal .settings-modal .nav-pills>li.active a, .modal .settings-modal .nav-pills>li.active a:hover, .modal .settings-modal .nav-pills>li.active a:active', 'color:' + theme.sidebarTextActiveColor, 2); - changeCss('.sidebar--left .nav li.active a, .sidebar--left .nav li.active a:hover, .sidebar--left .nav li.active a:focus', 'background:' + changeOpacity(theme.sidebarTextActiveColor, 0.1), 1); + changeCss('.app__body .sidebar--left .nav-pills__container li.active a, .app__body .sidebar--left .nav-pills__container li.active a:hover, .app__body .sidebar--left .nav-pills__container li.active a:focus, .app__body .modal .settings-modal .nav-pills>li.active a, .app__body .modal .settings-modal .nav-pills>li.active a:hover, .app__body .modal .settings-modal .nav-pills>li.active a:active', 'color:' + theme.sidebarTextActiveColor, 2); + changeCss('.app__body .sidebar--left .nav li.active a, .app__body .sidebar--left .nav li.active a:hover, .app__body .sidebar--left .nav li.active a:focus', 'background:' + changeOpacity(theme.sidebarTextActiveColor, 0.1), 1); } if (theme.sidebarHeaderBg) { - changeCss('.sidebar--left .team__header, .sidebar--menu .team__header, .post-list__timestamp > div', 'background:' + theme.sidebarHeaderBg, 1); - changeCss('.modal .modal-header', 'background:' + theme.sidebarHeaderBg, 1); - changeCss('#navbar .navbar-default', 'background:' + theme.sidebarHeaderBg, 1); - changeCss('@media(max-width: 768px){.search-bar__container', 'background:' + theme.sidebarHeaderBg, 1); - changeCss('.attachment .attachment__container', 'border-left-color:' + theme.sidebarHeaderBg, 1); + changeCss('.app__body .sidebar--left .team__header, .app__body .sidebar--menu .team__header, .app__body .post-list__timestamp > div', 'background:' + theme.sidebarHeaderBg, 1); + changeCss('.app__body .modal .modal-header', 'background:' + theme.sidebarHeaderBg, 1); + changeCss('.app__body #navbar .navbar-default', 'background:' + theme.sidebarHeaderBg, 1); + changeCss('@media(max-width: 768px){.app__body .search-bar__container', 'background:' + theme.sidebarHeaderBg, 1); + changeCss('.app__body .attachment .attachment__container', 'border-left-color:' + theme.sidebarHeaderBg, 1); } if (theme.sidebarHeaderTextColor) { - changeCss('.sidebar--left .team__header .header__info, .sidebar--menu .team__header .header__info, .post-list__timestamp > div', 'color:' + theme.sidebarHeaderTextColor, 1); - changeCss('.sidebar--left .team__header .navbar-right .dropdown__icon, .sidebar--menu .team__header .navbar-right .dropdown__icon', 'fill:' + theme.sidebarHeaderTextColor, 1); - changeCss('.sidebar--left .team__header .user__name, .sidebar--menu .team__header .user__name', 'color:' + changeOpacity(theme.sidebarHeaderTextColor, 0.8), 1); - changeCss('.sidebar--left .team__header:hover .user__name, .sidebar--menu .team__header:hover .user__name', 'color:' + theme.sidebarHeaderTextColor, 1); - changeCss('.modal .modal-header .modal-title, .modal .modal-header .modal-title .name, .modal .modal-header button.close', 'color:' + theme.sidebarHeaderTextColor, 1); - changeCss('#navbar .navbar-default .navbar-brand .heading', 'color:' + theme.sidebarHeaderTextColor, 1); - changeCss('#navbar .navbar-default .navbar-toggle .icon-bar, ', 'background:' + theme.sidebarHeaderTextColor, 1); - changeCss('@media(max-width: 768px){.search-bar__container', 'color:' + theme.sidebarHeaderTextColor, 2); + changeCss('.app__body .sidebar--left .team__header .header__info, .app__body .sidebar--menu .team__header .header__info, .app__body .post-list__timestamp > div', 'color:' + theme.sidebarHeaderTextColor, 1); + changeCss('.app__body .sidebar--left .team__header .navbar-right .dropdown__icon, .app__body .sidebar--menu .team__header .navbar-right .dropdown__icon', 'fill:' + theme.sidebarHeaderTextColor, 1); + changeCss('.app__body .sidebar--left .team__header .user__name, .app__body .sidebar--menu .team__header .user__name', 'color:' + changeOpacity(theme.sidebarHeaderTextColor, 0.8), 1); + changeCss('.app__body .sidebar--left .team__header:hover .user__name, .app__body .sidebar--menu .team__header:hover .user__name', 'color:' + theme.sidebarHeaderTextColor, 1); + changeCss('.app__body .modal .modal-header .modal-title, .app__body .modal .modal-header .modal-title .name, .app__body .modal .modal-header button.close', 'color:' + theme.sidebarHeaderTextColor, 1); + changeCss('.app__body #navbar .navbar-default .navbar-brand .heading', 'color:' + theme.sidebarHeaderTextColor, 1); + changeCss('.app__body #navbar .navbar-default .navbar-toggle .icon-bar, ', 'background:' + theme.sidebarHeaderTextColor, 1); + changeCss('@media(max-width: 768px){.app__body .search-bar__container', 'color:' + theme.sidebarHeaderTextColor, 2); } if (theme.onlineIndicator) { - changeCss('.sidebar--left .status .online--icon', 'fill:' + theme.onlineIndicator, 1); + changeCss('.app__body .sidebar--left .status .online--icon', 'fill:' + theme.onlineIndicator, 1); } if (theme.awayIndicator) { - changeCss('.sidebar--left .status .away--icon', 'fill:' + theme.awayIndicator, 1); + changeCss('.app__body .sidebar--left .status .away--icon', 'fill:' + theme.awayIndicator, 1); } if (theme.mentionBj) { - changeCss('.sidebar--left .nav-pills__unread-indicator', 'background:' + theme.mentionBj, 1); - changeCss('.sidebar--left .badge', 'background:' + theme.mentionBj + '!important;', 1); + changeCss('.app__body .sidebar--left .nav-pills__unread-indicator', 'background:' + theme.mentionBj, 1); + changeCss('.app__body .sidebar--left .badge', 'background:' + theme.mentionBj + '!important;', 1); } if (theme.mentionColor) { - changeCss('.sidebar--left .nav-pills__unread-indicator', 'color:' + theme.mentionColor, 2); - changeCss('.sidebar--left .badge', 'color:' + theme.mentionColor + '!important;', 2); + changeCss('.app__body .sidebar--left .nav-pills__unread-indicator', 'color:' + theme.mentionColor, 2); + changeCss('.app__body .sidebar--left .badge', 'color:' + theme.mentionColor + '!important;', 2); } if (theme.centerChannelBg) { - changeCss('.app__content, .markdown__table, .markdown__table tbody tr, .suggestion-list__content, .modal .modal-content', 'background:' + theme.centerChannelBg, 1); + changeCss('.app__body .app__content, .app__body .markdown__table, .app__body .markdown__table tbody tr, .app__body .suggestion-list__content, .app__body .modal .modal-content', 'background:' + theme.centerChannelBg, 1); changeCss('#post-list .post-list-holder-by-time', 'background:' + theme.centerChannelBg, 1); changeCss('#post-create', 'background:' + theme.centerChannelBg, 1); - changeCss('.date-separator .separator__text, .new-separator .separator__text', 'background:' + theme.centerChannelBg, 1); - changeCss('.post-image__details, .search-help-popover .search-autocomplete__divider span', 'background:' + theme.centerChannelBg, 1); - changeCss('.sidebar--right, .dropdown-menu, .popover, .tip-overlay', 'background:' + theme.centerChannelBg, 1); - changeCss('.popover.bottom>.arrow:after', 'border-bottom-color:' + theme.centerChannelBg, 1); - changeCss('.popover.right>.arrow:after, .tip-overlay.tip-overlay--sidebar .arrow, .tip-overlay.tip-overlay--header .arrow', 'border-right-color:' + theme.centerChannelBg, 1); - changeCss('.popover.left>.arrow:after', 'border-left-color:' + theme.centerChannelBg, 1); - changeCss('.popover.top>.arrow:after, .tip-overlay.tip-overlay--chat .arrow', 'border-top-color:' + theme.centerChannelBg, 1); - changeCss('@media(min-width: 768px){.search-bar__container .search__form .search-bar, .form-control', 'background:' + theme.centerChannelBg, 1); - changeCss('.attachment__content', 'background:' + theme.centerChannelBg, 1); - changeCss('body', 'scrollbar-face-color:' + theme.centerChannelBg, 2); - changeCss('body', 'scrollbar-track-color:' + theme.centerChannelBg, 2); + changeCss('.app__body .date-separator .separator__text, .app__body .new-separator .separator__text', 'background:' + theme.centerChannelBg, 1); + changeCss('.app__body .post-image__details, .app__body .search-help-popover .search-autocomplete__divider span', 'background:' + theme.centerChannelBg, 1); + changeCss('.app__body .sidebar--right, .app__body .dropdown-menu, .app__body .popover, .app__body .tip-overlay', 'background:' + theme.centerChannelBg, 1); + changeCss('.app__body .popover.bottom>.arrow:after', 'border-bottom-color:' + theme.centerChannelBg, 1); + changeCss('.app__body .popover.right>.arrow:after, .app__body .tip-overlay.tip-overlay--sidebar .arrow, .app__body .tip-overlay.tip-overlay--header .arrow', 'border-right-color:' + theme.centerChannelBg, 1); + changeCss('.app__body .popover.left>.arrow:after', 'border-left-color:' + theme.centerChannelBg, 1); + changeCss('.app__body .popover.top>.arrow:after, .app__body .tip-overlay.tip-overlay--chat .arrow', 'border-top-color:' + theme.centerChannelBg, 1); + changeCss('@media(min-width: 768px){.app__body .search-bar__container .search__form .search-bar, .app__body .form-control', 'background:' + theme.centerChannelBg, 1); + changeCss('.app__body .attachment__content', 'background:' + theme.centerChannelBg, 1); + changeCss('body.app__body', 'scrollbar-face-color:' + theme.centerChannelBg, 2); + changeCss('body.app__body', 'scrollbar-track-color:' + theme.centerChannelBg, 2); } if (theme.centerChannelColor) { - changeCss('.post-list__arrows', 'fill:' + changeOpacity(theme.centerChannelColor, 0.3), 1); - changeCss('.sidebar--left, .sidebar--right .sidebar--right__header, .suggestion-list__content .command', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); - changeCss('.app__content, .post-create__container .post-create-body .btn-file, .post-create__container .post-create-footer .msg-typing, .suggestion-list__content .command, .modal .modal-content, .dropdown-menu, .popover, .mentions__name, .tip-overlay', 'color:' + theme.centerChannelColor, 1); - changeCss('#archive-link-home', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1); - changeCss('#post-create', 'color:' + theme.centerChannelColor, 2); - changeCss('.mentions--top, .suggestion-list', 'box-shadow:' + changeOpacity(theme.centerChannelColor, 0.2) + ' 1px -3px 12px', 3); - changeCss('.mentions--top, .suggestion-list', '-webkit-box-shadow:' + changeOpacity(theme.centerChannelColor, 0.2) + ' 1px -3px 12px', 2); - changeCss('.mentions--top, .suggestion-list', '-moz-box-shadow:' + changeOpacity(theme.centerChannelColor, 0.2) + ' 1px -3px 12px', 1); - changeCss('.dropdown-menu, .popover ', 'box-shadow:' + changeOpacity(theme.centerChannelColor, 0.1) + ' 0px 6px 12px', 3); - changeCss('.dropdown-menu, .popover ', '-webkit-box-shadow:' + changeOpacity(theme.centerChannelColor, 0.1) + ' 0px 6px 12px', 2); - changeCss('.dropdown-menu, .popover ', '-moz-box-shadow:' + changeOpacity(theme.centerChannelColor, 0.1) + ' 0px 6px 12px', 1); - changeCss('.post__body hr, .loading-screen .loading__content .round, .tutorial__circles .circle', 'background:' + theme.centerChannelColor, 1); - changeCss('.channel-header .heading', 'color:' + theme.centerChannelColor, 1); - changeCss('.markdown__table tbody tr:nth-child(2n)', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1); - changeCss('.channel-header__info>div.dropdown .header-dropdown__icon', 'color:' + changeOpacity(theme.centerChannelColor, 0.8), 1); - changeCss('.channel-header #member_popover', 'color:' + changeOpacity(theme.centerChannelColor, 0.8), 1); - changeCss('.custom-textarea, .custom-textarea:focus, .file-preview, .post-image__details, .sidebar--right .sidebar-right__body, .markdown__table th, .markdown__table td, .suggestion-list__content, .modal .modal-content, .modal .settings-modal .settings-table .settings-content .divider-light, .webhooks__container, .dropdown-menu, .modal .modal-header, .popover', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); - changeCss('.popover.bottom>.arrow', 'border-bottom-color:' + changeOpacity(theme.centerChannelColor, 0.25), 1); - changeCss('.search-help-popover .search-autocomplete__divider span', 'color:' + changeOpacity(theme.centerChannelColor, 0.7), 1); - changeCss('.popover.right>.arrow', 'border-right-color:' + changeOpacity(theme.centerChannelColor, 0.25), 1); - changeCss('.popover.left>.arrow', 'border-left-color:' + changeOpacity(theme.centerChannelColor, 0.25), 1); - changeCss('.popover.top>.arrow', 'border-top-color:' + changeOpacity(theme.centerChannelColor, 0.25), 1); - changeCss('.suggestion-list__content .command, .popover .popover-title', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); - changeCss('.dropdown-menu .divider, .search-help-popover .search-autocomplete__divider:before', 'background:' + theme.centerChannelColor, 1); - changeCss('.custom-textarea', 'color:' + theme.centerChannelColor, 1); - changeCss('.post-image__column', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 2); - changeCss('.post-image__details', 'color:' + theme.centerChannelColor, 2); - changeCss('.post-image__column a, .post-image__column a:hover, .post-image__column a:focus', 'color:' + theme.centerChannelColor, 1); - changeCss('@media(min-width: 768px){.search-bar__container .search__form .search-bar, .form-control', 'color:' + theme.centerChannelColor, 2); - changeCss('.input-group-addon, .search-bar__container .search__form, .form-control', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); - changeCss('.form-control:focus', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.3), 1); - changeCss('.attachment .attachment__content', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.3), 1); - changeCss('.channel-intro .channel-intro__content, .webhooks__container', 'background:' + changeOpacity(theme.centerChannelColor, 0.05), 1); - changeCss('.date-separator .separator__text', 'color:' + theme.centerChannelColor, 2); - changeCss('.date-separator .separator__hr, .modal-footer, .modal .custom-textarea', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); - changeCss('.search-item-container, .post-right__container .post.post--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.1), 1); - changeCss('.modal .custom-textarea:focus', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.3), 1); - changeCss('.channel-intro, .modal .settings-modal .settings-table .settings-content .divider-dark, hr, .modal .settings-modal .settings-table .settings-links, .modal .settings-modal .settings-table .settings-content .appearance-section .theme-elements__header', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); - changeCss('.post.current--user .post__body, .post.post--comment.other--root.current--user .post-comment, pre, .post-right__container .post.post--root', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1); - changeCss('.post.current--user .post__body, .post.post--comment.other--root.current--user .post-comment, .post.same--root.post--comment .post__body, .more-modal__list .more-modal__row, .member-div:first-child, .member-div, .access-history__table .access__report, .activity-log__table', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.1), 2); - changeCss('@media(max-width: 1800px){.inner-wrap.move--left .post.post--comment.same--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.07), 2); - changeCss('.post:hover, .more-modal__list .more-modal__row:hover, .modal .settings-modal .settings-table .settings-content .section-min:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1); - changeCss('.date-separator.hovered--before:after, .date-separator.hovered--after:before, .new-separator.hovered--after:before, .new-separator.hovered--before:after', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1); - changeCss('.suggestion-list__content .command:hover, .mentions__name:hover, .suggestion--selected, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .bot-indicator', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1); - changeCss('code, .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control', 'background:' + changeOpacity(theme.centerChannelColor, 0.1), 1); - changeCss('@media(min-width: 960px){.post.current--user:hover .post__body ', 'background: none;', 1); - changeCss('.sidebar--right', 'color:' + theme.centerChannelColor, 2); - changeCss('.search-help-popover .search-autocomplete__item:hover, .modal .settings-modal .settings-table .settings-content .appearance-section .theme-elements__body', 'background:' + changeOpacity(theme.centerChannelColor, 0.05), 1); - changeCss('.search-help-popover .search-autocomplete__item.selected', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1); + changeCss('.app__body .post-list__arrows', 'fill:' + changeOpacity(theme.centerChannelColor, 0.3), 1); + changeCss('.app__body .sidebar--left, .app__body .sidebar--right .sidebar--right__header, .app__body .suggestion-list__content .command', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); + changeCss('.app__body .app__content, .app__body .post-create__container .post-create-body .btn-file, .app__body .post-create__container .post-create-footer .msg-typing, .app__body .suggestion-list__content .command, .app__body .modal .modal-content, .app__body .dropdown-menu, .app__body .popover, .app__body .mentions__name, .app__body .tip-overlay', 'color:' + theme.centerChannelColor, 1); + changeCss('.app__body #archive-link-home', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1); + changeCss('.app__body #post-create', 'color:' + theme.centerChannelColor, 2); + changeCss('.app__body .mentions--top, .app__body .suggestion-list', 'box-shadow:' + changeOpacity(theme.centerChannelColor, 0.2) + ' 1px -3px 12px', 3); + changeCss('.app__body .mentions--top, .app__body .suggestion-list', '-webkit-box-shadow:' + changeOpacity(theme.centerChannelColor, 0.2) + ' 1px -3px 12px', 2); + changeCss('.app__body .mentions--top, .app__body .suggestion-list', '-moz-box-shadow:' + changeOpacity(theme.centerChannelColor, 0.2) + ' 1px -3px 12px', 1); + changeCss('.app__body .dropdown-menu, .app__body .popover ', 'box-shadow:' + changeOpacity(theme.centerChannelColor, 0.1) + ' 0px 6px 12px', 3); + changeCss('.app__body .dropdown-menu, .app__body .popover ', '-webkit-box-shadow:' + changeOpacity(theme.centerChannelColor, 0.1) + ' 0px 6px 12px', 2); + changeCss('.app__body .dropdown-menu, .app__body .popover ', '-moz-box-shadow:' + changeOpacity(theme.centerChannelColor, 0.1) + ' 0px 6px 12px', 1); + changeCss('.app__body .post__body hr, .app__body .loading-screen .loading__content .round, .app__body .tutorial__circles .circle', 'background:' + theme.centerChannelColor, 1); + changeCss('.app__body .channel-header .heading', 'color:' + theme.centerChannelColor, 1); + changeCss('.app__body .markdown__table tbody tr:nth-child(2n)', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1); + changeCss('.app__body .channel-header__info>div.dropdown .header-dropdown__icon', 'color:' + changeOpacity(theme.centerChannelColor, 0.8), 1); + changeCss('.app__body .channel-header #member_popover', 'color:' + changeOpacity(theme.centerChannelColor, 0.8), 1); + changeCss('.app__body .custom-textarea, .app__body .custom-textarea:focus, .app__body .file-preview, .app__body .post-image__details, .app__body .sidebar--right .sidebar-right__body, .app__body .markdown__table th, .app__body .markdown__table td, .app__body .suggestion-list__content, .app__body .modal .modal-content, .app__body .modal .settings-modal .settings-table .settings-content .divider-light, .app__body .webhooks__container, .app__body .dropdown-menu, .app__body .modal .modal-header, .app__body .popover', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); + changeCss('.app__body .popover.bottom>.arrow', 'border-bottom-color:' + changeOpacity(theme.centerChannelColor, 0.25), 1); + changeCss('.app__body .search-help-popover .search-autocomplete__divider span', 'color:' + changeOpacity(theme.centerChannelColor, 0.7), 1); + changeCss('.app__body .popover.right>.arrow', 'border-right-color:' + changeOpacity(theme.centerChannelColor, 0.25), 1); + changeCss('.app__body .popover.left>.arrow', 'border-left-color:' + changeOpacity(theme.centerChannelColor, 0.25), 1); + changeCss('.app__body .popover.top>.arrow', 'border-top-color:' + changeOpacity(theme.centerChannelColor, 0.25), 1); + changeCss('.app__body .suggestion-list__content .command, .app__body .popover .popover-title', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); + changeCss('.app__body .dropdown-menu .divider, .app__body .search-help-popover .search-autocomplete__divider:before', 'background:' + theme.centerChannelColor, 1); + changeCss('.app__body .custom-textarea', 'color:' + theme.centerChannelColor, 1); + changeCss('.app__body .post-image__column', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 2); + changeCss('.app__body .post-image__details', 'color:' + theme.centerChannelColor, 2); + changeCss('.app__body .post-image__column a, .app__body .post-image__column a:hover, .app__body .post-image__column a:focus', 'color:' + theme.centerChannelColor, 1); + changeCss('@media(min-width: 768px){.app__body .search-bar__container .search__form .search-bar, .app__body .form-control', 'color:' + theme.centerChannelColor, 2); + changeCss('.app__body .input-group-addon, .app__body .search-bar__container .search__form, .app__body .form-control', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); + changeCss('.app__body .form-control:focus', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.3), 1); + changeCss('.app__body .attachment .attachment__content', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.3), 1); + changeCss('.app__body .channel-intro .channel-intro__content, .app__body .webhooks__container', 'background:' + changeOpacity(theme.centerChannelColor, 0.05), 1); + changeCss('.app__body .date-separator .separator__text', 'color:' + theme.centerChannelColor, 2); + changeCss('.app__body .date-separator .separator__hr, .app__body .modal-footer, .app__body .modal .custom-textarea', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); + changeCss('.app__body .search-item-container, .app__body .post-right__container .post.post--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.1), 1); + changeCss('.app__body .modal .custom-textarea:focus', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.3), 1); + changeCss('.app__body .channel-intro, .app__body .modal .settings-modal .settings-table .settings-content .divider-dark, .app__body hr, .app__body .modal .settings-modal .settings-table .settings-links, .app__body .modal .settings-modal .settings-table .settings-content .appearance-section .theme-elements__header', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); + changeCss('.app__body .post.current--user .post__body, .app__body .post.post--comment.other--root.current--user .post-comment, .app__body pre, .app__body .post-right__container .post.post--root', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1); + changeCss('.app__body .post.current--user .post__body, .app__body .post.post--comment.other--root.current--user .post-comment, .app__body .post.same--root.post--comment .post__body, .app__body .more-modal__list .more-modal__row, .app__body .member-div:first-child, .app__body .member-div, .app__body .access-history__table .access__report, .app__body .activity-log__table', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.1), 2); + changeCss('@media(max-width: 1800px){.app__body .inner-wrap.move--left .post.post--comment.same--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.07), 2); + changeCss('.app__body .post:hover, .app__body .more-modal__list .more-modal__row:hover, .app__body .modal .settings-modal .settings-table .settings-content .section-min:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1); + changeCss('.app__body .date-separator.hovered--before:after, .app__body .date-separator.hovered--after:before, .app__body .new-separator.hovered--after:before, .app__body .new-separator.hovered--before:after', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1); + changeCss('.app__body .suggestion-list__content .command:hover, .app__body .mentions__name:hover, .app__body .suggestion--selected, .app__body .dropdown-menu>li>a:focus, .app__body .dropdown-menu>li>a:hover, .app__body .bot-indicator', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1); + changeCss('.app__body code, .app__body .form-control[disabled], .app__body .form-control[readonly], .app__body fieldset[disabled] .form-control', 'background:' + changeOpacity(theme.centerChannelColor, 0.1), 1); + changeCss('@media(min-width: 960px){.app__body .post.current--user:hover .post__body ', 'background: none;', 1); + changeCss('.app__body .sidebar--right', 'color:' + theme.centerChannelColor, 2); + changeCss('.app__body .search-help-popover .search-autocomplete__item:hover, .app__body .modal .settings-modal .settings-table .settings-content .appearance-section .theme-elements__body', 'background:' + changeOpacity(theme.centerChannelColor, 0.05), 1); + changeCss('.app__body .search-help-popover .search-autocomplete__item.selected', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1); changeCss('::-webkit-scrollbar-thumb', 'background:' + changeOpacity(theme.centerChannelColor, 0.4), 1); changeCss('body', 'scrollbar-arrow-color:' + theme.centerChannelColor, 4); - changeCss('.modal .about-modal .about-modal__logo svg, .post .post__img svg', 'fill:' + theme.centerChannelColor, 1); + changeCss('.app__body .modal .about-modal .about-modal__logo svg, .app__body .post .post__img svg', 'fill:' + theme.centerChannelColor, 1); } if (theme.newMessageSeparator) { - changeCss('.new-separator .separator__text', 'color:' + theme.newMessageSeparator, 1); - changeCss('.new-separator .separator__hr', 'border-color:' + changeOpacity(theme.newMessageSeparator, 0.5), 1); + changeCss('.app__body .new-separator .separator__text', 'color:' + theme.newMessageSeparator, 1); + changeCss('.app__body .new-separator .separator__hr', 'border-color:' + changeOpacity(theme.newMessageSeparator, 0.5), 1); } if (theme.linkColor) { - changeCss('a, a:focus, a:hover, .btn, .btn:focus, .btn:hover', 'color:' + theme.linkColor, 1); - changeCss('.post .comment-icon__container, .post .post__reply', 'fill:' + theme.linkColor, 1); + changeCss('.app__body a, .app__body a:focus, .app__body a:hover, .app__body .btn, .app__body .btn:focus, .app__body .btn:hover', 'color:' + theme.linkColor, 1); + changeCss('.app__body .post .comment-icon__container, .app__body .post .post__reply', 'fill:' + theme.linkColor, 1); } 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('.app__body .btn.btn-primary, .app__body .tutorial__circles .circle.active', 'background:' + theme.buttonBg, 1); + changeCss('.app__body .btn.btn-primary:hover, .app__body .btn.btn-primary:active, .app__body .btn.btn-primary:focus', 'background:' + changeColor(theme.buttonBg, -0.25), 1); } if (theme.buttonColor) { - changeCss('.btn.btn-primary', 'color:' + theme.buttonColor, 2); + changeCss('.app__body .btn.btn-primary', 'color:' + theme.buttonColor, 2); } if (theme.mentionHighlightBg) { - changeCss('.mention--highlight, .search-highlight', 'background:' + theme.mentionHighlightBg, 1); + changeCss('.app__body .mention--highlight, .app__body .search-highlight', 'background:' + theme.mentionHighlightBg, 1); } if (theme.mentionHighlightBg) { - changeCss('.post.post--highlight', 'background:' + changeOpacity(theme.mentionHighlightBg, 0.5), 1); + changeCss('.app__body .post.post--highlight', 'background:' + changeOpacity(theme.mentionHighlightBg, 0.5), 1); } if (theme.mentionHighlightLink) { - changeCss('.mention--highlight .mention-link', 'color:' + theme.mentionHighlightLink, 1); + changeCss('.app__body .mention--highlight .mention-link', 'color:' + theme.mentionHighlightLink, 1); } if (!theme.codeTheme) { |