diff --git a/src/skins/vector/css/_components.scss b/src/skins/vector/css/_components.scss index 67ca096608e..0dd6a1b1b79 100644 --- a/src/skins/vector/css/_components.scss +++ b/src/skins/vector/css/_components.scss @@ -11,6 +11,7 @@ @import "./matrix-react-sdk/structures/_RoomStatusBar.scss"; @import "./matrix-react-sdk/structures/_RoomView.scss"; @import "./matrix-react-sdk/structures/_SearchBox.scss"; +@import "./matrix-react-sdk/structures/_TagPanel.scss"; @import "./matrix-react-sdk/structures/_UploadBar.scss"; @import "./matrix-react-sdk/structures/_UserSettings.scss"; @import "./matrix-react-sdk/structures/login/_Login.scss"; diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss b/src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss index 64dec8260a1..6f08fd47b2d 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss @@ -21,6 +21,8 @@ limitations under the License. padding-top: 24px; padding-bottom: 22px; + border-bottom: 1px solid $panel-divider-color; + display: flex; } diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_TagPanel.scss b/src/skins/vector/css/matrix-react-sdk/structures/_TagPanel.scss new file mode 100644 index 00000000000..6c8f7197d7d --- /dev/null +++ b/src/skins/vector/css/matrix-react-sdk/structures/_TagPanel.scss @@ -0,0 +1,77 @@ +/* +Copyright 2017 New Vector Ltd. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +.mx_TagPanel { + width: 60px; + background-color: $tertiary-accent-color; + cursor: pointer; + + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; +} + +.mx_TagPanel .mx_TagPanel_tagTileContainer { + display: flex; + flex-direction: column; + align-items: center; + margin-top: 65px; +} + +.mx_TagPanel .mx_TagTile { + margin: 6px 0px; + opacity: 0.5; +} +.mx_TagPanel .mx_TagTile:focus, +.mx_TagPanel .mx_TagTile:hover, +.mx_TagPanel .mx_TagTile.mx_TagTile_selected { + opacity: 1; +} + +.mx_TagPanel .mx_TagTile.mx_TagTile_selected { + /* To offset border of mx_TagTile_avatar */ + margin: 3px 0px; +} + +.mx_TagPanel .mx_TagTile.mx_TagTile_selected .mx_TagTile_avatar { + border: 3px solid $accent-color; + border-radius: 60px; +} + +.mx_TagPanel .mx_TagTile.mx_AccessibleButton:focus { + filter: none; +} + +.mx_TagTile_tooltip { + position: relative; + top: -30px; + left: 5px; +} + +.mx_TagPanel_createGroupButton { + cursor: pointer; + opacity: 0.5; + margin-bottom: 12px; +} + +.mx_TagPanel_createGroupButton:hover { + opacity: 1; +} + +.mx_TagPanel_createGroupButton object { + pointer-events: none; +} diff --git a/src/skins/vector/css/themes/_base.scss b/src/skins/vector/css/themes/_base.scss index 62d7af06409..327f2e4a280 100644 --- a/src/skins/vector/css/themes/_base.scss +++ b/src/skins/vector/css/themes/_base.scss @@ -40,6 +40,7 @@ $preview-bar-bg-color: #f7f7f7; // left-panel style muted accent color $secondary-accent-color: #eaf5f0; +$tertiary-accent-color: #d3efe1; // used by RoomDirectory permissions $plinth-bg-color: $secondary-accent-color; diff --git a/src/skins/vector/css/vector-web/structures/_RoomSubList.scss b/src/skins/vector/css/vector-web/structures/_RoomSubList.scss index 1a78e51731d..db1fb170e54 100644 --- a/src/skins/vector/css/vector-web/structures/_RoomSubList.scss +++ b/src/skins/vector/css/vector-web/structures/_RoomSubList.scss @@ -33,14 +33,13 @@ limitations under the License. font-weight: 600; font-size: 12px; width: 203px; /* padding + width = LHS Panel width */ - height: 17px; /* padding + height = 29px, same as mx_RoomSubList_stickyContainer */ + height: 19px; /* height + padding = 31px = mx_RoomSubList_label height */ padding-left: 16px; /* gutter */ padding-right: 16px; /* gutter */ padding-top: 6px; padding-bottom: 6px; cursor: pointer; - background-color: $roomsublist-label-bg-color; - border-top: solid 2px $secondary-accent-color; + background-color: $secondary-accent-color; } .mx_RoomSubList_label.mx_RoomSubList_fixed {