diff --git a/.stylelintrc b/.stylelintrc index 9aa65ea7a9a..0b2488ab89f 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -47,7 +47,6 @@ "declaration-colon-space-after": "always-single-line", "declaration-colon-space-before": "never", "font-family-no-duplicate-names": true, - "function-calc-no-unspaced-operator": true, "function-comma-newline-after": "always-multi-line", "function-comma-space-after": "always-single-line", "function-comma-space-before": "never", diff --git a/package.json b/package.json index f30d1e56f46..b60d92ed816 100644 --- a/package.json +++ b/package.json @@ -64,7 +64,7 @@ "debug": "meteor run --inspect", "debug-brk": "meteor run --inspect-brk", "lint": "eslint .", - "stylelint": "stylelint packages/**/*.css", + "stylelint": "stylelint \"packages/**/*.css\"", "test": "node .scripts/start.js", "deploy": "npm run build && pm2 startOrRestart pm2.json", "chimp-watch": "chimp --ddp=http://localhost:3000 --watch --mocha --path=tests/end-to-end", diff --git a/packages/chatpal-search/client/style.css b/packages/chatpal-search/client/style.css index 6678d30934e..049f80d7895 100644 --- a/packages/chatpal-search/client/style.css +++ b/packages/chatpal-search/client/style.css @@ -1,6 +1,8 @@ .chatpal-admin-link { - color:red !important; + text-decoration: underline !important; + + color: red !important; } .chatpalProvider .search-form { @@ -9,6 +11,7 @@ .chatpal_search-loader { position: relative; + margin-top: 50px; } @@ -20,11 +23,15 @@ .chatpal-search-result { position: relative; + overflow: auto; overflow-x: hidden; + + flex: 1; + padding: 0 24px 24px; + background-color: #f1f1f1; - flex: 1; } .chatpal-search-typefilter { @@ -32,13 +39,17 @@ } .chatpal-search-typefilter li { - cursor: pointer; + display: flex; flex: 0 0 50%; - border-bottom: 4px solid white; + height: 35px; - justify-content: center; padding-top: 10px; + + cursor: pointer; + + border-bottom: 4px solid white; + justify-content: center; } .chatpal-search-typefilter li.selected { @@ -46,54 +57,71 @@ } .chatpal-admin-header { - font-size: 18px; + margin-bottom: 20px; + + font-size: 18px; } .chatpal-search-result-header { margin: 20px 0; + font-weight: bold; } .chatpal-search-result-single { - background-color: white; + + position: relative; + + min-height: 92px; + + margin-bottom: 10px; + padding: 10px; + border: 1px solid #e6e6e6; - margin-bottom: 10px; - min-height: 92px; - position: relative; + background-color: white; } - .chatpal-search-result-user { - background-color: white; + + position: relative; + + min-height: 40px; + + margin-bottom: 10px; + padding: 10px; + border: 1px solid #e6e6e6; - margin-bottom: 10px; - min-height: 40px; - position: relative; + background-color: white; } .chatpal-search-result-user .chatpal-avatar { + + position: absolute; + width: 36px; height: 36px; - position: absolute; } .chatpal-search-result-user .chatpal-avatar .chatpal-avatar-image { - background-repeat: no-repeat; - background-size: contain; + width: 100%; height: 100%; + + background-repeat: no-repeat; + background-size: contain; } .chatpal-search-result-user h2 { - padding-left: 45px; margin-bottom: 5px; + padding-left: 45px; } .chatpal-search-result-user .direct-message { padding-left: 45px; + font-size: 14px; font-weight: bold; } @@ -107,12 +135,17 @@ } .chatpal-show-more-messages { + + margin-bottom: 20px; + + cursor: pointer; + + text-align: center; + + color: #125074; + font-size: 14px; font-weight: bold; - color: #125074; - text-align: center; - cursor: pointer; - margin-bottom: 20px; } .chatpal-show-more-messages:hover { @@ -128,58 +161,79 @@ } .chatpal-search-result-single h2 { - margin-bottom: 20px; + display: flex; + + margin-bottom: 20px; align-items: center; } .chatpal-search-result-single .chatpal-avatar { + + position: absolute; + width: 36px; height: 36px; - position: absolute; } .chatpal-search-result-single .chatpal-avatar .chatpal-avatar-image { - background-repeat: no-repeat; - background-size: contain; + width: 100%; height: 100%; + + background-repeat: no-repeat; + background-size: contain; } .chatpal-search-result-single .chatpal-name { padding: 0 0 0 46px; + + color: #444444; + font-size: 14px; - color: #444; + font-weight: bold; } .chatpal-search-result-single .chatpal-date { - font-size: 12px; + color: #a0a0a0; + + font-size: 12px; + font-weight: normal; } .chatpal-search-result-single .chatpal-time { - font-size: 12px; - color: #a0a0a0; + margin-left: 3px; + + color: #a0a0a0; + + font-size: 12px; } .chatpal-search-result-single .chatpal-message { + + overflow-x: hidden; + + margin-top: 5px; padding: 0 0 0 46px; + line-height: 20px; - margin-top: 5px; - overflow-x: hidden; } .chatpal-search-result-single .chatpal-message em { + + background-color: #faf9c8; + font-style: normal; - background-color: #FAF9C8; } .chatpal-search-result-single .chatpal-link { display: none; flex: 20; + color: #125074; } @@ -192,21 +246,29 @@ } .chatpal-paging { + + margin: 30px 0 50px; + text-align: center; - margin: 30px 0 50px 0; } .chatpal-paging-text { - display: inline-block; + position: relative; top: -2px; + + display: inline-block; } .chatpal-paging .chatpal-paging-button { - color: #125074; + + display: inline-block; + cursor: pointer; + + color: #125074; + font-size: 20px; - display: inline-block; } .chatpal-paging .chatpal-paging-prev { @@ -223,8 +285,10 @@ } .chatpal-search-welcome { - text-align: center; + padding-top: 40px; + + text-align: center; } .chatpal-search-result-room h2 { @@ -232,13 +296,17 @@ } .chatpal-search-result-list em { + + background-color: #faf9c8; + font-style: normal; - background-color: #FAF9C8; } .chatpal-search-result-room .chatpal-link { display: none; + margin-left: 3px; + color: #125074; } @@ -246,17 +314,22 @@ display: inline-block; } -.chatpal-search-result-room .chatpal-link:hover{ +.chatpal-search-result-room .chatpal-link:hover { text-decoration: underline; } .chatpal-search-pills div { - background-color: #f1f1f1; - padding: 2px 5px; + display: inline-block; + + margin-top: 5px; + margin-right: 5px; + + padding: 2px 5px; + border-radius: 3px; - margin-top: 5px; + background-color: #f1f1f1; } .apikey h2 { @@ -264,12 +337,18 @@ } .apikey .key { - background-color: #f1f1f1; + position: relative; + margin: 20px 0; - font-size: 20px; - text-align: center; + padding: 10px; + + text-align: center; + + background-color: #f1f1f1; + + font-size: 20px; } .apikey a { @@ -277,8 +356,10 @@ } .chatpal-suggestion { - padding: 10px; + display: flex; + + padding: 10px; justify-items: center; } @@ -295,16 +376,19 @@ } .chatpalProvider .rc-input__icon { - width: 26px; - left: 10px; top: 3px; + + left: 10px; + + width: 26px; } .chatpalProvider .rc-input__icon-svg { font-size: 26px !important; } -.chatpalProvider .rocket-search-suggestion-item.active, .chatpalProvider .rocket-search-suggestion-item:hover { - background-color: #125074; +.chatpalProvider .rocket-search-suggestion-item.active, +.chatpalProvider .rocket-search-suggestion-item:hover { color: white; + background-color: #125074; } diff --git a/packages/rocketchat-channel-settings/client/stylesheets/channel-settings.css b/packages/rocketchat-channel-settings/client/stylesheets/channel-settings.css index 92842a79ea8..dcf8e63bf85 100644 --- a/packages/rocketchat-channel-settings/client/stylesheets/channel-settings.css +++ b/packages/rocketchat-channel-settings/client/stylesheets/channel-settings.css @@ -1,17 +1,19 @@ html.rtl .flex-tab { - direction: rtl; + direction: rtl; - & .channel-settings { - & .editing { - padding-right: 8px; - padding-left: 80px; - } - & .buttons { - right: auto; - left: 1px; - border-radius: 4px 0 0 4px; + & .channel-settings { + & .editing { + padding-right: 8px; + padding-left: 80px; + } + + & .buttons { + right: auto; + left: 1px; + + border-radius: 4px 0 0 4px; + } } - } } .flex-tab { @@ -52,6 +54,7 @@ html.rtl .flex-tab { & .editing { padding-right: 80px; + font-size: 14px; } @@ -108,10 +111,10 @@ html.rtl .flex-tab { & .setting-block { position: relative; - font-size: 0; - display: flex; + font-size: 0; + & .loading-animation { top: 30px; } diff --git a/packages/rocketchat-integrations/client/stylesheets/integrations.css b/packages/rocketchat-integrations/client/stylesheets/integrations.css index 38d0893e447..1c9aa75b287 100644 --- a/packages/rocketchat-integrations/client/stylesheets/integrations.css +++ b/packages/rocketchat-integrations/client/stylesheets/integrations.css @@ -63,7 +63,7 @@ line-height: 1.5rem; & a { - color: #175CC4 !important; + color: #175cc4 !important; } } } diff --git a/packages/rocketchat-livestream/client/styles/liveStreamTab.css b/packages/rocketchat-livestream/client/styles/liveStreamTab.css index 862f593b425..243d0cb0c0f 100644 --- a/packages/rocketchat-livestream/client/styles/liveStreamTab.css +++ b/packages/rocketchat-livestream/client/styles/liveStreamTab.css @@ -1,54 +1,64 @@ .contextual-bar__content { - &.livestream { - justify-content: flex-start; - } - & .rc-button--stack { - width: 100%; - } + &.livestream { + justify-content: flex-start; + } + + & .rc-button--stack { + width: 100%; + } } .thumbnail-container { - position: relative; - height: 270px; - - & .popout { - &--absolute-center { - position: absolute; - top: calc(50% - 25px); - left: calc(50% - 25px); - - font-size: 50px; - } - &--play-solid { - fill: white; - } - } + position: relative; + + height: 270px; + + & .popout { + &--absolute-center { + position: absolute; + top: calc(50% - 25px); + left: calc(50% - 25px); + + font-size: 50px; + } + + &--play-solid { + fill: white; + } + } } + .liveStreamTab__form { - & .rc-switch { - padding: 15px 5px; - } - & .rc-input__label p { - padding: 10px 0; - } + & .rc-switch { + padding: 15px 5px; + } + + & .rc-input__label p { + padding: 10px 0; + } } .livestream--url { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - - margin: 10px 5px; - padding: 10px 0; - font-size: 15px; - - & .current-setting { - display: inline-block; - text-decoration: none; - color: black; - } - - & .rc-button { - width: 49% - } + overflow: hidden; + + margin: 10px 5px; + padding: 10px 0; + + white-space: nowrap; + + text-overflow: ellipsis; + + font-size: 15px; + + & .current-setting { + display: inline-block; + + text-decoration: none; + + color: black; + } + + & .rc-button { + width: 49%; + } } diff --git a/packages/rocketchat-message-action/client/stylesheets/messageAction.css b/packages/rocketchat-message-action/client/stylesheets/messageAction.css index 16e650bfe2f..5ff7235f858 100644 --- a/packages/rocketchat-message-action/client/stylesheets/messageAction.css +++ b/packages/rocketchat-message-action/client/stylesheets/messageAction.css @@ -1,43 +1,64 @@ .attachment { - & .action { - margin-top: 2px; - } - & .text-button { - color: #2c2d30; - min-width: 0; - max-width: 220px; - padding: 0 10px; - margin: 2px 2px 2px 0; - vertical-align: middle; - font-size: 13px; - height: 28px; - background: rgb(250, 250, 250); - font-weight: 500; - text-decoration: none; - user-select: none; - outline: none; - cursor: pointer; - border: 2px solid lightgray; - border-radius: 4px; - align-items: center; - position: relative; - display: inline-flex; - justify-content: center; - text-align: center; - white-space: nowrap; - -webkit-appearance: none; - -webkit-tap-highlight-color: transparent; - } - & .overflow-ellipsis { - display: block; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - } - & .image-button { - max-height: 200px; - } - & .horizontal-buttons { - display: inline; - } -} \ No newline at end of file + & .action { + margin-top: 2px; + } + + & .text-button { + + position: relative; + + display: inline-flex; + + min-width: 0; + max-width: 220px; + + height: 28px; + margin: 2px 2px 2px 0; + padding: 0 10px; + + cursor: pointer; + user-select: none; + + text-align: center; + + vertical-align: middle; + white-space: nowrap; + + text-decoration: none; + + color: #2c2d30; + + border: 2px solid lightgray; + border-radius: 4px; + + outline: none; + + background: rgb(250, 250, 250); + + font-size: 13px; + + font-weight: 500; + align-items: center; + -webkit-appearance: none; + justify-content: center; + -webkit-tap-highlight-color: transparent; + } + + & .overflow-ellipsis { + display: block; + + overflow: hidden; + + white-space: nowrap; + + text-overflow: ellipsis; + } + + & .image-button { + max-height: 200px; + } + + & .horizontal-buttons { + display: inline; + } +} diff --git a/packages/rocketchat-message-attachments/client/stylesheets/messageAttachments.css b/packages/rocketchat-message-attachments/client/stylesheets/messageAttachments.css index ddd0ebd514b..6377e7c943d 100644 --- a/packages/rocketchat-message-attachments/client/stylesheets/messageAttachments.css +++ b/packages/rocketchat-message-attachments/client/stylesheets/messageAttachments.css @@ -88,18 +88,22 @@ html.rtl .attachment { & .attachment-fields { display: flex; + margin-top: 4px; flex-wrap: wrap; & .attachment-field { flex: 1 0 100%; + padding-top: 5px; padding-bottom: 5px; &.attachment-field-short { display: inline-block; - margin-right: 12px; + flex: 1 1; + + margin-right: 12px; } & .attachment-field-title { diff --git a/packages/rocketchat-message-snippet/client/page/stylesheets/snippetPage.css b/packages/rocketchat-message-snippet/client/page/stylesheets/snippetPage.css index 9a84a1b3a65..1b3462721ef 100644 --- a/packages/rocketchat-message-snippet/client/page/stylesheets/snippetPage.css +++ b/packages/rocketchat-message-snippet/client/page/stylesheets/snippetPage.css @@ -39,7 +39,6 @@ display: block; width: 100%; - } & .snippet-filename { diff --git a/packages/rocketchat-search/client/style/style.css b/packages/rocketchat-search/client/style/style.css index be5fd2a1151..2b611bb6c24 100644 --- a/packages/rocketchat-search/client/style/style.css +++ b/packages/rocketchat-search/client/style/style.css @@ -1,7 +1,9 @@ .rocket-search { - padding: 0 !important; + display: flex; flex: 1; + + padding: 0 !important; } .defaultProvider { @@ -30,8 +32,8 @@ } .rocket-default-search-results .list .message { - padding-left: 70px !important; padding-right: 8px !important; + padding-left: 70px !important; } .rocket-search-error { @@ -44,22 +46,29 @@ #rocket-search-suggestions { position: absolute; + z-index: 1000; top: 58px; + + right: 24px; left: 24px; + padding: 10px 0; + + border-radius: 0; + background-color: white; - right: 24px; - z-index: 1000; - box-shadow: 0 1px 10px #aaa; - border-radius: 0px; + + box-shadow: 0 1px 10px #aaaaaa; } .rocket-search-suggestion-item { width: 100%; + cursor: pointer; } -.rocket-search-suggestion-item.active, .rocket-search-suggestion-item:hover { - background-color: var(--button-primary-background); +.rocket-search-suggestion-item.active, +.rocket-search-suggestion-item:hover { color: white; + background-color: var(--button-primary-background); } diff --git a/packages/rocketchat-theme/client/imports/components/contextual-bar.css b/packages/rocketchat-theme/client/imports/components/contextual-bar.css index fece268827a..fcc4fa6f13f 100644 --- a/packages/rocketchat-theme/client/imports/components/contextual-bar.css +++ b/packages/rocketchat-theme/client/imports/components/contextual-bar.css @@ -119,9 +119,11 @@ .attachments { &__item { - transition: background-color 300ms linear; + margin-bottom: 10px; + transition: background-color 300ms linear; + &:hover { cursor: pointer; @@ -129,9 +131,10 @@ } &-link { - padding: 8px 0; display: flex; flex-direction: row; + + padding: 8px 0; align-items: center; } } @@ -188,12 +191,14 @@ } &__name { - margin: 0 8px; overflow: hidden; + + min-width: 0; + margin: 0 8px; + white-space: nowrap; text-overflow: ellipsis; - min-width: 0; color: #2f343d; diff --git a/packages/rocketchat-theme/client/imports/components/header.css b/packages/rocketchat-theme/client/imports/components/header.css index 6da81fc54da..0061f653cdd 100644 --- a/packages/rocketchat-theme/client/imports/components/header.css +++ b/packages/rocketchat-theme/client/imports/components/header.css @@ -49,6 +49,7 @@ &__block { display: flex; + margin: 0 0.5rem; align-items: center; } @@ -234,24 +235,33 @@ &:hover { color: var(--rc-color-link-active); } + &.live { position: relative; } - &.live:before { - content: ''; + + &.live::before { + position: absolute; - right: -2px; - bottom: -1px; - display: block; - width: 10px; - width: var(--sidebar-account-status-bullet-size); - height: 10px; - height: var(--sidebar-account-status-bullet-size); - border-radius: 50%; - border-radius: var(--sidebar-account-status-bullet-radius); - background-color: #f5455c; + z-index: 1; + right: -2px; + bottom: -1px; + + display: block; + + width: 10px; + width: var(--sidebar-account-status-bullet-size); + height: 10px; + height: var(--sidebar-account-status-bullet-size); + + content: ''; + animation: blink 1.5s ease-in-out infinite; + + border-radius: 50%; + border-radius: var(--sidebar-account-status-bullet-radius); + background-color: #f5455c; } } @@ -293,12 +303,13 @@ font-size: 12px; font-weight: 600; } + & + & { border-left: 1px var(--color-gray) solid; .rtl & { - border-left: 0; border-right: 1px var(--color-gray) solid; + border-left: 0; } } } diff --git a/packages/rocketchat-theme/client/imports/components/main-content.css b/packages/rocketchat-theme/client/imports/components/main-content.css index 8ae6f96903c..c36f1ecfc51 100644 --- a/packages/rocketchat-theme/client/imports/components/main-content.css +++ b/packages/rocketchat-theme/client/imports/components/main-content.css @@ -1,14 +1,14 @@ .main-content { - flex: 1 1 100%; - - width: 1vw; - - height: 100%; position: relative; display: flex; flex-direction: column; + flex: 1 1 100%; + + width: 1vw; + + height: 100%; margin-bottom: 25px; } diff --git a/packages/rocketchat-theme/client/imports/components/memberlist.css b/packages/rocketchat-theme/client/imports/components/memberlist.css index 501d5b8fe65..6d78136b841 100644 --- a/packages/rocketchat-theme/client/imports/components/memberlist.css +++ b/packages/rocketchat-theme/client/imports/components/memberlist.css @@ -53,6 +53,7 @@ &__status { display: inline-block; + width: var(--sidebar-item-user-status-size); height: var(--sidebar-item-user-status-size); margin: 0 7px 0 3px; diff --git a/packages/rocketchat-theme/client/imports/components/message-box.css b/packages/rocketchat-theme/client/imports/components/message-box.css index 4221b7f2eb1..94001310b01 100644 --- a/packages/rocketchat-theme/client/imports/components/message-box.css +++ b/packages/rocketchat-theme/client/imports/components/message-box.css @@ -141,24 +141,33 @@ } &.check { - color: red; + display: none; + + color: red; + &.active { display: flex; } } &.cross { - color: red; + display: none; + + color: red; + &.active { display: flex; } } &.loading { - cursor: pointer; + display: none; + + cursor: pointer; + &.active { display: flex; } @@ -166,11 +175,11 @@ &.mic { display: none; + &.active { display: flex; } } - } &__action-menu { @@ -185,21 +194,26 @@ display: none; } - &__audio-message{ + &__audio-message { display: flex; } - &__timer-box{ + &__timer-box { display: none; + width: 50px; + &.active { display: flex; } } - &__timer-dot{ - font-size: 1.5em; + &__timer-dot { + color: #d60000; + + font-size: 1.5em; + line-height: 0.8em; } } diff --git a/packages/rocketchat-theme/client/imports/components/messages.css b/packages/rocketchat-theme/client/imports/components/messages.css index 1c76d40f336..ec138a7a9b0 100644 --- a/packages/rocketchat-theme/client/imports/components/messages.css +++ b/packages/rocketchat-theme/client/imports/components/messages.css @@ -41,7 +41,6 @@ } .message { - & .toggle-hidden { display: none; } @@ -50,9 +49,11 @@ & .body { display: none; } + & .toggle-hidden { display: block; } + & + .message--ignored.sequential { display: none; } diff --git a/packages/rocketchat-theme/client/imports/components/modal.css b/packages/rocketchat-theme/client/imports/components/modal.css index cfea0e5e591..143eec5961b 100644 --- a/packages/rocketchat-theme/client/imports/components/modal.css +++ b/packages/rocketchat-theme/client/imports/components/modal.css @@ -56,12 +56,12 @@ flex-direction: column; + min-height: 72px; + padding: 16px; animation: dropdown-show 0.1s cubic-bezier(0.45, 0.05, 0.55, 0.95); align-items: stretch; - - min-height: 72px; } &__content-icon { @@ -123,6 +123,7 @@ &--empty { padding: 0; + background: transparent; } } diff --git a/packages/rocketchat-theme/client/imports/components/modal/create-channel.css b/packages/rocketchat-theme/client/imports/components/modal/create-channel.css index 531558e1df9..4ab4bc9ef67 100644 --- a/packages/rocketchat-theme/client/imports/components/modal/create-channel.css +++ b/packages/rocketchat-theme/client/imports/components/modal/create-channel.css @@ -4,18 +4,18 @@ width: 100%; + margin: 0 -25px; + animation-name: fadeIn; animation-duration: 1s; - margin: 0 -25px; - &__wrapper { overflow-x: hidden; overflow-y: auto; - padding: 0 25px; - height: 100%; + + padding: 0 25px; } &__header, diff --git a/packages/rocketchat-theme/client/imports/components/modal/directory.css b/packages/rocketchat-theme/client/imports/components/modal/directory.css index fd6ccc5d912..19a65c3a1da 100644 --- a/packages/rocketchat-theme/client/imports/components/modal/directory.css +++ b/packages/rocketchat-theme/client/imports/components/modal/directory.css @@ -2,10 +2,10 @@ display: flex; flex-direction: column; - padding: 0 1.5rem; - height: 100vh; + padding: 0 1.5rem; + &-search { width: 100%; @@ -58,16 +58,12 @@ .rc-directory-td--users { overflow: hidden; - width: 120px; + width: 80px; white-space: nowrap; text-overflow: ellipsis; } -.rc-directory-td--users { - width: 80px; -} - @media (width <= 700px) { .rc-table-content { & th:not(:first-child), diff --git a/packages/rocketchat-theme/client/imports/components/modal/full-modal.css b/packages/rocketchat-theme/client/imports/components/modal/full-modal.css index 60eceaaa7da..aea62d01d07 100644 --- a/packages/rocketchat-theme/client/imports/components/modal/full-modal.css +++ b/packages/rocketchat-theme/client/imports/components/modal/full-modal.css @@ -64,8 +64,8 @@ .rtl .full-modal { &__back-button { - right: auto; - left: 0; + right: auto; + left: 0; } &__back-text { diff --git a/packages/rocketchat-theme/client/imports/components/popout.css b/packages/rocketchat-theme/client/imports/components/popout.css index 8b774f08bc5..3f16e990ffb 100644 --- a/packages/rocketchat-theme/client/imports/components/popout.css +++ b/packages/rocketchat-theme/client/imports/components/popout.css @@ -1,29 +1,36 @@ @keyframes loading { 0% { - opacity: 0; + transform: scale(0.7); + + opacity: 0; } + 50% { - opacity: 1; + transform: scale(1); + + opacity: 1; } + 100% { - opacity: 0; + transform: scale(0.7); + + opacity: 0; } } - - .rc-popout { min-width: 380px; max-width: 800px; - border: solid 4px var(--rc-color-primary-darkest); - background: var(--rc-color-primary-darkest); + transition: all 0.3s cubic-bezier(0.45, 0.05, 0.55, 0.95); + color: var(--rc-color-primary-lightest); - transition: all 0.3s cubic-bezier(0.45, 0.05, 0.55, 0.95); + border: solid 4px var(--rc-color-primary-darkest); + background: var(--rc-color-primary-darkest); &-wrapper { position: absolute; @@ -31,6 +38,7 @@ top: calc(var(--header-min-height) + 60px); left: calc(100% - 395px); + display: flex; animation: dropdown-show 0.3s cubic-bezier(0.45, 0.05, 0.55, 0.95); @@ -42,7 +50,6 @@ -webkit-user-drag: element; -khtml-user-drag: element; - } &__title { @@ -50,9 +57,11 @@ font-size: 16px; } + &--open { & .rc-popout__header { padding: 5px 10px 8px; + & .rc-popout__controls { display: none; } @@ -65,9 +74,11 @@ font-size: 20px; } + &__minimize { cursor: pointer; - transition: transform linear .2s; + transition: transform linear 0.2s; + font-size: 20px; } @@ -75,7 +86,7 @@ display: flex; flex-direction: row; - padding: 5px 10px 5px; + padding: 5px 10px; font-size: 21px; justify-content: flex-end; @@ -94,20 +105,22 @@ align-items: stretch; & .youtube-player { - height: inherit; width: inherit; + height: inherit; } } &__controls { display: flex; flex: 10 1 auto; + padding: 8px 10px 5px; & button { - font-size: 16px; margin: 0 5px; + font-size: 16px; + & > .rc-icon { fill: currentColor; stroke: currentColor; @@ -117,12 +130,15 @@ animation: loading 2s infinite; pointer-events: none; } + &.broadcasting { color: red; } } + & span { text-transform: capitalize; + font-size: 15px; line-height: 18px; } @@ -179,12 +195,14 @@ } &.rc-popout__content { - height: 0px; overflow: hidden; + height: 0; + & .streaming-object { visibility: 'hidden'; - height: 0px; + + height: 0; } } } @@ -192,7 +210,6 @@ & svg { fill: var(--rc-color-primary-lightest); } - } @media (width <= 400px) { diff --git a/packages/rocketchat-theme/client/imports/components/popover.css b/packages/rocketchat-theme/client/imports/components/popover.css index dc0c207624a..f31bf1485a6 100644 --- a/packages/rocketchat-theme/client/imports/components/popover.css +++ b/packages/rocketchat-theme/client/imports/components/popover.css @@ -65,11 +65,10 @@ } } - &__content-scroll { - - .rc-popover__item { - display:block; - } + &__content-scroll { + .rc-popover__item { + display: block; + } } &__title { @@ -89,20 +88,21 @@ &__item { display: flex; + width: 100%; + padding: 4px 0; cursor: pointer; user-select: none; + transition: all 0.3s; + color: var(--popover-item-color); font-size: var(--popover-item-text-size); align-items: center; - transition: all 0.3s; - width: 100%; - &--alert { color: var(--rc-color-error); @@ -165,7 +165,7 @@ visibility: hidden; &:checked + .rc-popover__item-radio-label { - color: #1D73F3; + color: #1d73f3; &::after { opacity: 1; @@ -179,40 +179,49 @@ .rc-popover__item-radio-label { position: relative; - padding-left: 20px; + margin-left: -20px; + + padding-left: 20px; + cursor: pointer; &::before { - content: ''; position: absolute; - left:0; top: 0; + left: 0; + width: 15px; height: 15px; + + content: ''; + border: 1px solid #979797; - background: transparent; border-radius: 50px; + background: transparent; } &::after { - content: ''; position: absolute; top: 3px; left: 3px; + width: 9px; height: 9px; - background: #1D73F3; - border-radius: 50px; + + content: ''; transition: all 0.2s; + + border-radius: 50px; + background: #1d73f3; } } .rtl .rc-popover__item-radio-label { - padding-right: 20px; margin-right: -20px; - padding-left: 0; margin-left: 0; + padding-right: 20px; + padding-left: 0; &::before { right: 0; diff --git a/packages/rocketchat-theme/client/imports/components/setup-wizard.css b/packages/rocketchat-theme/client/imports/components/setup-wizard.css index 63b7f0b2ef3..fd6f0496ba1 100644 --- a/packages/rocketchat-theme/client/imports/components/setup-wizard.css +++ b/packages/rocketchat-theme/client/imports/components/setup-wizard.css @@ -12,20 +12,21 @@ justify-content: center; &-info { + + overflow: hidden; flex: 0 1 350px; margin: 55px 65px 30px 80px; - overflow: hidden; - &__header{ + &__header { display: flex; margin: 0 -0.375rem 3rem; align-items: center; &-logo { - margin: 0 0.375rem; height: 1.5rem; + margin: 0 0.375rem; } &-tag { @@ -134,8 +135,8 @@ &::before { color: var(--rc-color-button-primary); - background-color: transparent; border-color: var(--rc-color-button-primary); + background-color: transparent; } } @@ -144,8 +145,8 @@ &::before { color: var(--rc-color-content); - background-color: var(--rc-color-button-primary); border-color: var(--rc-color-button-primary); + background-color: var(--rc-color-button-primary); } &::after { @@ -186,24 +187,27 @@ border-radius: 2px; background: #ffffff; - box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08); + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08); justify-content: center; } &__box { display: flex; + + visibility: hidden; flex-direction: column; width: 350px; min-height: min-content; margin: 3rem; - visibility: hidden; - opacity: 0; transition: opacity 1s linear; + opacity: 0; + &--loaded { visibility: visible; + opacity: 1; } } @@ -319,18 +323,20 @@ border-color: var(--highlight-color); &::before { - content: ""; position: absolute; width: 100%; height: 100%; - background-clip: padding-box; - border-radius: 50%; + content: ""; + border: 2px solid transparent; + border-radius: 50%; background-color: var(--highlight-color); + + background-clip: padding-box; } } } @@ -372,9 +378,10 @@ &:checked + .setup-wizard-forms__content-register-checkbox-fake { position: relative; + color: var(--rc-color-content); + border-color: var(--highlight-color); background-color: var(--highlight-color); - color: var(--rc-color-content); .setup-wizard-forms__content-register-checkbox-fake-icon { display: block; @@ -393,9 +400,11 @@ border-radius: 2px; &-icon { + + display: none; + width: 100%; height: 100%; - display: none; } } @@ -420,8 +429,8 @@ } & .setup-wizard-forms__content-register-radio-icon { - min-width: 20px; width: 20px; + min-width: 20px; height: 20px; margin: 0 0.5rem; align-self: baseline; @@ -464,7 +473,7 @@ border-radius: 2px; background: #ffffff; - box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08); + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08); &-title { margin-bottom: 3.25rem; @@ -485,11 +494,11 @@ line-height: 1.5rem; &-text { - display:block; + display: block; letter-spacing: 0.03rem; - text-transform:uppercase; + text-transform: uppercase; color: #2f343d; @@ -558,8 +567,8 @@ justify-content: initial; & .setup-wizard-forms__wrapper { - margin: 0; width: 100%; + margin: 0; } } } diff --git a/packages/rocketchat-theme/client/imports/components/sidebar/sidebar-flex.css b/packages/rocketchat-theme/client/imports/components/sidebar/sidebar-flex.css index bdfda7b811d..b124ee54bce 100644 --- a/packages/rocketchat-theme/client/imports/components/sidebar/sidebar-flex.css +++ b/packages/rocketchat-theme/client/imports/components/sidebar/sidebar-flex.css @@ -1,15 +1,17 @@ .sidebar-flex { &__header { - padding: var(--sidebar-default-padding); display: flex; + + padding: var(--sidebar-default-padding); } &__title { - font-size: 1rem; - font-weight: 400; flex: 1; + + font-size: 1rem; + font-weight: 400; } &__close-button { diff --git a/packages/rocketchat-theme/client/imports/components/sidebar/sidebar-item.css b/packages/rocketchat-theme/client/imports/components/sidebar/sidebar-item.css index 69e112b8d3a..585c8a1c85b 100644 --- a/packages/rocketchat-theme/client/imports/components/sidebar/sidebar-item.css +++ b/packages/rocketchat-theme/client/imports/components/sidebar/sidebar-item.css @@ -100,6 +100,7 @@ &--unread, &--mention { color: var(--sidebar-item-unread-color); + font-weight: var(--sidebar-item-unread-font-weight); } @@ -123,6 +124,7 @@ &__icon { display: flex; + font-size: 1rem; align-items: center; fill: currentColor; @@ -144,9 +146,9 @@ &__room-type { display: flex; - fill: currentColor; font-size: 0.6rem; + fill: currentColor; } &__user-thumb { @@ -160,7 +162,7 @@ width: var(--sidebar-item-user-status-size); height: var(--sidebar-item-user-status-size); - margin: 0 7px 0 7px; + margin: 0 7px; border-radius: var(--sidebar-item-user-status-radius); @@ -225,9 +227,10 @@ flex: 1; + margin: 0 2px; + white-space: nowrap; text-overflow: ellipsis; - margin: 0 2px; } &__name { diff --git a/packages/rocketchat-theme/client/imports/components/slider.css b/packages/rocketchat-theme/client/imports/components/slider.css index 30db1491b01..6254726885f 100644 --- a/packages/rocketchat-theme/client/imports/components/slider.css +++ b/packages/rocketchat-theme/client/imports/components/slider.css @@ -66,7 +66,7 @@ height: 0; content: ''; - + border-top: 7px solid; border-right: 7px solid; border-bottom: 7px solid; @@ -75,6 +75,7 @@ .rtl .range-slider-value::after { right: -7px; left: unset; + -ms-transform: rotate(180deg); /* IE 9 */ -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */ transform: rotate(180deg); diff --git a/packages/rocketchat-theme/client/imports/components/table.css b/packages/rocketchat-theme/client/imports/components/table.css index c383e55b62a..7912c8cc7e6 100644 --- a/packages/rocketchat-theme/client/imports/components/table.css +++ b/packages/rocketchat-theme/client/imports/components/table.css @@ -3,10 +3,10 @@ color: var(--rc-color-primary-light); - font-weight: 500; - font-size: 0.875rem; + font-weight: 500; + &--fixed { table-layout: fixed; } @@ -31,7 +31,6 @@ } & th { - font-size: 0.75rem; height: 0; padding-top: 0; @@ -41,6 +40,8 @@ color: transparent; + font-size: 0.75rem; + line-height: 0; & > .rc-icon { @@ -49,14 +50,16 @@ } & td { - padding: 0.25rem 0; - - font-size: 0.9rem; - line-height: 1rem; overflow: hidden; + + padding: 0.25rem 0; + white-space: nowrap; text-overflow: ellipsis; + + font-size: 0.9rem; + line-height: 1rem; } &-wrapper { @@ -68,9 +71,11 @@ } &-subtitle { - color: var(--rc-color-primary-light); overflow: hidden; + text-overflow: ellipsis; + + color: var(--rc-color-primary-light); } &-title { @@ -83,10 +88,10 @@ color: var(--rc-color-primary); & .rc-icon { - font-size: 1rem; margin: 0 -4px; - } + font-size: 1rem; + } } &-avatar { @@ -95,9 +100,8 @@ width: 26px; height: 26px; margin: 2px 4px; - border-radius: 2px; - flex: 0 0 auto; + border-radius: 2px; background-repeat: no-repeat; background-position: center center; @@ -114,13 +118,13 @@ width: 1%; + margin: 0 4px; + white-space: nowrap; text-overflow: ellipsis; flex-grow: 1; - margin: 0 4px; - justify-content: space-around; } @@ -128,6 +132,7 @@ &--small { width: 80px; } + &--medium { width: 200px; } @@ -156,8 +161,8 @@ flex-direction: column; min-height: 0; - flex-grow: 1; margin-bottom: 1rem; + flex-grow: 1; } .table-scroll { @@ -173,8 +178,11 @@ .table-fake-th { position: absolute; - display: block; + top: 0; + + display: block; + display: flex; padding: 0.5rem 0; @@ -198,10 +206,12 @@ .table-column-date { overflow: hidden; + width: 120px; + white-space: nowrap; - text-overflow: ellipsis; text-transform: capitalize; + text-overflow: ellipsis; } .table-no-click { diff --git a/packages/rocketchat-theme/client/imports/components/tabs.css b/packages/rocketchat-theme/client/imports/components/tabs.css index 98a31d88e5f..52b98eeb68e 100644 --- a/packages/rocketchat-theme/client/imports/components/tabs.css +++ b/packages/rocketchat-theme/client/imports/components/tabs.css @@ -25,9 +25,9 @@ border-bottom: 1px solid transparent; font-size: 1rem; - line-height: 1.25rem; font-weight: 500; + line-height: 1.25rem; &.active { color: var(--rc-color-button-primary); diff --git a/packages/rocketchat-theme/client/imports/components/userInfo.css b/packages/rocketchat-theme/client/imports/components/userInfo.css index b3bab1b952a..1ef42e3f2b0 100644 --- a/packages/rocketchat-theme/client/imports/components/userInfo.css +++ b/packages/rocketchat-theme/client/imports/components/userInfo.css @@ -73,13 +73,15 @@ } &__name { + + width: 100%; + text-align: center; word-wrap: break-word; font-size: 22px; font-weight: 500; line-height: 28px; - width: 100%; } &__username { @@ -276,9 +278,10 @@ cursor: pointer; + text-transform: capitalize; + color: #1d73f3; align-items: flex-end; - text-transform: capitalize; } } } @@ -290,7 +293,7 @@ word-break: break-word; - color: #444; + color: #444444; &__description { margin: 5px 2px; diff --git a/packages/rocketchat-theme/client/imports/forms/input.css b/packages/rocketchat-theme/client/imports/forms/input.css index 4e38aabf2ba..79ed3fa535e 100644 --- a/packages/rocketchat-theme/client/imports/forms/input.css +++ b/packages/rocketchat-theme/client/imports/forms/input.css @@ -115,6 +115,7 @@ .rc-tags { border-color: var(--input-error-color); } + & .rc-input { &__element { border-color: var(--input-error-color); @@ -123,7 +124,6 @@ } } - .rc-input-file { position: relative; @@ -137,16 +137,13 @@ font-size: var(--input-font-size); } - &__wrapper { display: flex; flex-direction: row; - align-items: center; - justify-content: flex-end; width: 100%; + margin: 0.5rem 0; padding: 0.3rem; - margin: .5rem 0; color: var(--input-text-color); @@ -156,30 +153,41 @@ background-color: transparent; font-size: var(--input-font-size); + align-items: center; + justify-content: flex-end; &::placeholder { color: var(--input-placeholder-color); } & > .rc-button { - height: 10px; flex: 0 0 auto; + + height: 10px; min-height: 31px; - border-color: #E1E5E8; - background: #F1F1F1; - border-radius: 2px; margin: 0; padding: 8px; + + border-color: #e1e5e8; + border-radius: 2px; + background: #f1f1f1; } } &__name { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - flex: 0 1 auto; - padding: 0 5px; + + overflow: hidden; + + flex: 0 1 auto; + width: 100%; + + padding: 0 5px; + + white-space: nowrap; + + text-overflow: ellipsis; + line-height: 16px; } @@ -188,17 +196,18 @@ } &__description { - font-size: 0.875rem; + color: var(--color-gray); + + font-size: 0.875rem; } } select.rc-input { - padding: 0.782rem; - margin: 0.5rem 0; - appearance: none; width: 100%; + margin: 0.5rem 0; + padding: 0.782rem; color: var(--input-text-color); @@ -208,6 +217,7 @@ select.rc-input { background-color: transparent; font-size: var(--input-font-size); + appearance: none; &--small { padding: 0.5rem 1rem; diff --git a/packages/rocketchat-theme/client/imports/forms/switch.css b/packages/rocketchat-theme/client/imports/forms/switch.css index 59cec0934ad..d34a39af7b0 100644 --- a/packages/rocketchat-theme/client/imports/forms/switch.css +++ b/packages/rocketchat-theme/client/imports/forms/switch.css @@ -13,16 +13,16 @@ &--blue { & .rc-switch__button { - border-color: #D7D7D7; + border-color: #d7d7d7; background-color: var(--color-gray-light); } & .rc-switch__input { &:checked { & + .rc-switch__button { - border-color: var(--button-primary-background); - background-color: var(--button-primary-background); - } + border-color: var(--button-primary-background); + background-color: var(--button-primary-background); + } } } } diff --git a/packages/rocketchat-theme/client/imports/forms/tags.css b/packages/rocketchat-theme/client/imports/forms/tags.css index 46d0b82e907..15705e27588 100644 --- a/packages/rocketchat-theme/client/imports/forms/tags.css +++ b/packages/rocketchat-theme/client/imports/forms/tags.css @@ -40,8 +40,9 @@ &-icon { width: 10px; height: 10px; - stroke: #9d9fa3; + pointer-events: none; + stroke: #9d9fa3; } } diff --git a/packages/rocketchat-theme/client/imports/general/apps.css b/packages/rocketchat-theme/client/imports/general/apps.css index e48f5462653..656f30a2995 100644 --- a/packages/rocketchat-theme/client/imports/general/apps.css +++ b/packages/rocketchat-theme/client/imports/general/apps.css @@ -3,21 +3,24 @@ flex-direction: column; &__item { + width: 100%; padding: 10px 0; - width: 100%; } } &-container { - padding: 25px 0; + + display: flex; + + width: 100%; max-width: 705px; margin: auto; - width: 100%; - display: flex; + padding: 25px 0; + padding-bottom: 25px; &__header { - border-bottom: 1px solid #E1E1E1; + border-bottom: 1px solid #e1e1e1; } } @@ -27,25 +30,32 @@ &-details { display: flex; + padding: 25px; &__photo { + + flex: 0 0 auto; + width: 95px; height: 95px; - flex: 0 0 auto; - background-size: contain; + + border: 1px solid #f7f7f7; background-repeat: no-repeat; background-position: center center; - border: 1px solid #f7f7f7; + + background-size: contain; } &__content { - flex: 1 1 auto; - justify-content: space-between; - padding: 0 15px; + display: flex; - flex-direction: column; overflow: hidden; + flex-direction: column; + flex: 1 1 auto; + + padding: 0 15px; + justify-content: space-between; } &__row { @@ -54,17 +64,20 @@ & button svg { margin: 0 5px 0 -5px; + font-size: 18px; } h2 { - font-size: 18px; + padding: 5px 0; + + font-size: 18px; } } &__row + &__row { - padding-top: 5px + padding-top: 5px; } &__block { @@ -85,33 +98,35 @@ } &__item { - white-space: nowrap; - flex: 1 1 1px; overflow: hidden; + + flex: 1 1 1px; + + white-space: nowrap; + text-overflow: ellipsis; } - } } @media (width <= 500px) { .rc-apps { &-container { - padding: 25px; flex-direction: column; + + padding: 25px; align-items: center; } - &-details { + &-details { &__item { text-align: center; } &__row { - justify-content: center; + justify-content: center; } } - } } diff --git a/packages/rocketchat-theme/client/imports/general/base.css b/packages/rocketchat-theme/client/imports/general/base.css index ebcdd66a47c..68afbd5e4a4 100644 --- a/packages/rocketchat-theme/client/imports/general/base.css +++ b/packages/rocketchat-theme/client/imports/general/base.css @@ -19,19 +19,19 @@ body { display: flex; - flex-direction: column; - overflow: visible; + flex-direction: column; + width: 100%; height: 100%; padding: 0; + background-color: var(--rc-color-primary); + font-size: var(--text-small-size); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - - background-color: var(--rc-color-primary) } :focus { @@ -76,16 +76,18 @@ button { } #rocket-chat { + + position: relative; + display: flex; flex: 1 1 auto; - align-items: stretch; - - position: relative; + height: 100%; max-height: 100%; - height: 100%; + + align-items: stretch; &.animated-hidden { visibility: hidden; @@ -143,6 +145,7 @@ button { .ps-scrollbar-y-rail { background: transparent !important; } + .ps-scrollbar-y { width: 4px !important; } @@ -159,9 +162,9 @@ button { content: ""; - background: var(--rc-color-error); - pointer-events: none; + + background: var(--rc-color-error); } &::after { @@ -177,14 +180,16 @@ button { text-align: right; text-transform: lowercase; + pointer-events: none; + color: var(--rc-color-error); + + border-radius: 2px; background: #ffffff; font-size: 10px; - pointer-events: none; line-height: 10px; - border-radius: 2px; } } diff --git a/packages/rocketchat-theme/client/imports/general/base_old.css b/packages/rocketchat-theme/client/imports/general/base_old.css index 3aacd3c25cf..2cefd31d2ec 100644 --- a/packages/rocketchat-theme/client/imports/general/base_old.css +++ b/packages/rocketchat-theme/client/imports/general/base_old.css @@ -54,8 +54,10 @@ .rc-old blockquote { position: relative; - clear: both; display: block; + + clear: both; + min-height: 20px; padding-left: 10px; @@ -83,7 +85,7 @@ border-radius: 0 0 2px 2px; } - &:before { + &::before { position: absolute; top: 0; bottom: 0; @@ -408,7 +410,8 @@ /* .rc-old textarea, */ -/*.rc-old select, +/* +rc-old select, .rc-old input[type='text'], .rc-old input[type='number'], .rc-old input[type='email'], @@ -427,7 +430,8 @@ line-height: normal; appearance: none; -}*/ +} +*/ .rc-old input { & .input-forward { @@ -1702,7 +1706,7 @@ .rc-old .announcement { display: flex; - flex-flow: row nowrap; + overflow: hidden; height: 40px; @@ -1715,6 +1719,7 @@ font-size: 1.2em; line-height: 40px; + flex-flow: row nowrap; & ~ .container-bars { top: 45px; @@ -1727,9 +1732,11 @@ } p { - width: 0; /* Grow via flex. */ - flex: auto; overflow: hidden; + flex: auto; + + width: 0; /* Grow via flex. */ + white-space: nowrap; text-overflow: ellipsis; } @@ -2257,8 +2264,9 @@ .rc-old .flex-tab-main-content { position: relative; z-index: 1; - flex-grow: 1; + overflow: auto; + flex-grow: 1; } .rc-old .room-container { @@ -2628,25 +2636,26 @@ .message-popup { display: flex; flex-direction: column; - align-items: stretch; + max-height: 20rem; + align-items: stretch; .message-popup-items { overflow-y: auto; .popup-slash-command { display: flex; - flex-direction: row; - flex-wrap: wrap; + flex-flow: row wrap; &-format { flex-grow: 1; } &-description { - flex-grow: 2; - font-style: italic; text-align: right; + + font-style: italic; + flex-grow: 2; } } } @@ -2660,22 +2669,30 @@ .rc-old .preview-items .popup-item { padding: 5px; + line-height: unset; } .rc-old .rc-message-box .reply-preview { - display: flex; + position: relative; - background-color:#fff; + + display: flex; + + padding-top: 0.5rem; + padding-bottom: 0.5rem; + padding-left: 15px; - padding-top: 0.5rem; - padding-bottom: 0.5rem; - align-items: center; - justify-content: space-between; + + background-color: #ffffff; + align-items: center; + justify-content: space-between; .message { - padding: 0; flex: 1; + + padding: 0; + background-color: transparent; } } @@ -2684,8 +2701,7 @@ border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 5px; - border-bottom-left-radius: 5px; - box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2), 0 1px 1px rgba(0, 0, 0, 0.16);; + box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2), 0 1px 1px rgba(0, 0, 0, 0.16); } .rc-old .reply-preview .cancel-reply { @@ -2693,18 +2709,15 @@ } .rc-old .reply-preview .mention-link.mention-link-all { - color: #fff; + color: #ffffff; } .rc-old .reply-preview .mention-link.mention-link-me { - color: #fff; + color: #ffffff; } .rc-old .message-popup.popup-with-reply-preview { - border-top-left-radius: 5px; - border-top-right-radius: 5px; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; + border-radius: 5px 5px 0 0; } .rc-old .message-popup { @@ -2840,10 +2853,11 @@ text-align: center; & .start__purge-warning { - padding: 0.5rem; - margin-bottom: 0.5rem; margin-top: -33px; - border-width: 1px 0 0 0; + margin-bottom: 0.5rem; + padding: 0.5rem; + + border-width: 1px 0 0; background: linear-gradient(to bottom, var(--rc-color-alert-message-warning-background) 0%, transparent 100%); } } @@ -2973,16 +2987,16 @@ content: attr(data-date); text-align: center; + pointer-events: none; + font-size: 12px; font-weight: 600; - - pointer-events: none; } &::after { position: absolute; - top: -20px; z-index: -1; + top: -20px; left: 0; display: block; @@ -2991,9 +3005,9 @@ content: " "; - border-width: 1px 0 0; - pointer-events: none; + + border-width: 1px 0 0; } } @@ -3115,9 +3129,11 @@ & .is-bot, & .role-tag { padding: 1px 4px; - border-radius: 4px; + border-width: 1px; - background: #FFFFFF; + + border-radius: 4px; + background: #ffffff; } } @@ -3178,7 +3194,6 @@ &:hover .edited { display: none; } - } &.system .body { @@ -3224,9 +3239,9 @@ & img { max-width: 100%; max-height: 200px; - object-fit: contain; cursor: pointer; + object-fit: contain; } } @@ -3323,7 +3338,9 @@ } &.livechat_navigation_history { - & .thumb, & .user, & .info { + & .thumb, + & .user, + & .info { display: none; } } @@ -3669,7 +3686,8 @@ body:not(.is-cordova) { } } - /*& .close-flex-tab { + /* + & .close-flex-tab { position: absolute; z-index: 20; top: 3px; @@ -3695,7 +3713,8 @@ body:not(.is-cordova) { font-size: 10px; } } - }*/ + } + */ } & .flex-tab-bar { @@ -4538,9 +4557,11 @@ body:not(.is-cordova) { & input, & select { - width: 100%; + position: relative; + width: 100%; + padding: 4px 8px; border-width: 0 0 1px; @@ -4623,13 +4644,14 @@ body:not(.is-cordova) { margin: auto; text-align: center; - align-items: center; - flex-flow: row nowrap; - background-position: center; - background-attachment: fixed; background-repeat: no-repeat; + background-attachment: fixed; + + background-position: center; background-size: cover; + align-items: center; + flex-flow: row nowrap; & .wrapper { position: relative; @@ -4671,11 +4693,12 @@ body:not(.is-cordova) { & header { position: relative; z-index: 1; - max-width: 520px; - padding: 0 20px; - margin: auto; display: block; + + max-width: 520px; + margin: auto; + padding: 0 20px; } & .text { @@ -4796,8 +4819,11 @@ body:not(.is-cordova) { } .rc-old .mention-link { - border-radius: 4px; + padding: 0 4px 2px; + + border-radius: 4px; + font-weight: bold; } @@ -5427,6 +5453,7 @@ body:not(.is-cordova) { .toggle-hidden { cursor: pointer; + font-style: italic; } @@ -5551,6 +5578,7 @@ body:not(.is-cordova) { z-index: 100; right: 40px; + height: 100%; border-width: 0 0 0 1px; diff --git a/packages/rocketchat-theme/client/imports/general/forms.css b/packages/rocketchat-theme/client/imports/general/forms.css index 81caaad452c..323905dd2e6 100644 --- a/packages/rocketchat-theme/client/imports/general/forms.css +++ b/packages/rocketchat-theme/client/imports/general/forms.css @@ -197,7 +197,7 @@ .rc-button-group { display: flex; - margin: 0 calc(-var(--default-small-padding) / 2); + margin: 0 calc(- var(--default-small-padding) / 2); & .rc-button { margin: 0 calc(var(--default-small-padding) / 2); @@ -257,12 +257,12 @@ } &__content { - overflow-y: auto; display: flex; + overflow-y: auto; + flex-direction: column; flex: 1; - flex-direction: column; width: 100%; padding: 25px 0; diff --git a/packages/rocketchat-theme/client/imports/general/variables.css b/packages/rocketchat-theme/client/imports/general/variables.css index b5488a0ac03..d43867ab5dd 100644 --- a/packages/rocketchat-theme/client/imports/general/variables.css +++ b/packages/rocketchat-theme/client/imports/general/variables.css @@ -2,7 +2,6 @@ /* * General Colors */ - --color-darkest: #1f2329; --color-dark: #2f343d; --color-dark-medium: #414852; @@ -13,24 +12,20 @@ --color-gray-lightest: #f2f3f5; --color-black: #000000; --color-white: #ffffff; - --rc-color-error: #f5455c; --rc-color-error-light: #e1364c; --rc-color-alert: #ffd21f; --rc-color-alert-light: #f6c502; --rc-color-success: #2de0a5; --rc-color-success-light: #25d198; - --rc-color-button-primary: #1d74f5; --rc-color-button-primary-light: #175cc4; - --rc-color-alert-message-primary: var(--rc-color-button-primary); --rc-color-alert-message-primary-background: #f1f6ff; --rc-color-alert-message-secondary: #7ca52b; --rc-color-alert-message-secondary-background: #fafff1; --rc-color-alert-message-warning: #d52d24; --rc-color-alert-message-warning-background: #fff3f3; - --rc-color-primary: var(--color-dark); --rc-color-primary-darkest: var(--color-darkest); --rc-color-primary-dark: var(--color-dark-medium); @@ -38,10 +33,8 @@ --rc-color-primary-light-medium: var(--color-gray-medium); --rc-color-primary-lightest: var(--color-gray-lightest); --rc-color-content: var(--color-white); - --rc-color-link-active: var(--rc-color-button-primary); - /* * General */ @@ -68,7 +61,6 @@ --account-username-weight: 700; --status-name-weight: 400; - /* * General Typography */ @@ -334,5 +326,4 @@ --alerts-background: #1d73f5; --alerts-color: var(--color-white); --alerts-font-size: var(--text-default-size); - } diff --git a/packages/rocketchat-ui-clean-history/client/views/stylesheets/cleanHistory.css b/packages/rocketchat-ui-clean-history/client/views/stylesheets/cleanHistory.css index eb8accac74e..2c40385b96b 100644 --- a/packages/rocketchat-ui-clean-history/client/views/stylesheets/cleanHistory.css +++ b/packages/rocketchat-ui-clean-history/client/views/stylesheets/cleanHistory.css @@ -1,44 +1,52 @@ .rc-datetime__left { display: inline-block; + width: 52%; } .rc-datetime__right { display: inline-block; + width: calc(48% - 0.3rem); } .rc-user-info__pruning { position: absolute; - left: 50%; top: 50%; + left: 50%; + transform: translate(-50%, calc(-50% - 2rem)); } .pruning__header { text-align: center; + font-weight: 900; } .pruning-wrapper { text-align: center; + color: var(--rc-color-link-active); &.prune__finished { - color: #12C212; + color: #12c212; } & svg { width: 16rem; height: 16rem; margin: 1rem 0; + animation: pruningSpin 2s linear infinite; } & .pruning__text { margin-top: -17rem; - line-height: 16rem; + font-size: 3.5em; + + line-height: 16rem; } & .pruning__text-sub { @@ -47,6 +55,11 @@ } @keyframes pruningSpin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } -} \ No newline at end of file + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + } +} diff --git a/packages/rocketchat-ui-vrecord/client/vrecord.css b/packages/rocketchat-ui-vrecord/client/vrecord.css index 1b25ce8d8f3..daac19ae6ae 100644 --- a/packages/rocketchat-ui-vrecord/client/vrecord.css +++ b/packages/rocketchat-ui-vrecord/client/vrecord.css @@ -1,13 +1,15 @@ @media (width <= 500px) { .vrec-dialog { - left: 0 !important; right: 0 !important; + left: 0 !important; + margin: 10px; & > .video-container > video { width: 100%; height: 100%; - background: #000; + + background: #000000; } } } @@ -16,9 +18,12 @@ position: absolute; visibility: hidden; + + padding: 5px; + opacity: 0; border-radius: 5px; - padding: 5px; + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 2px 10px 0 rgba(0, 0, 0, 0.16); @@ -38,7 +43,7 @@ background-color: desaturate(#02acec, 80%); } - & .rc-button { + & .rc-button { min-width: 40px; margin: 0; } @@ -49,12 +54,15 @@ } & .video-container { - transform: scaleX(-1); - filter: FlipH; - border-radius: 5px; overflow: hidden; - margin-bottom: 5px; + height: 240px; + margin-bottom: 5px; + + transform: scaleX(-1); + + border-radius: 5px; + filter: FlipH; } }