Merge pull request #5056 from matrix-org/joriks/style-fighting

Quick win session 24/07/2020

res/css/_common.scss

@@ -605,3 +605,15 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
         border-radius: $radius;
     }
 }
+
+@define-mixin unreal-focus {
+    outline-width: 2px;
+    outline-style: solid;
+    outline-color: Highlight;
+
+    /* WebKit gets its native focus styles. */
+    @media (-webkit-min-device-pixel-ratio: 0) {
+        outline-color: -webkit-focus-ring-color;
+        outline-style: auto;
+    }
+}

res/css/structures/_FilePanel.scss

@@ -41,13 +41,19 @@ limitations under the License.
 
 .mx_FilePanel .mx_EventTile {
     word-break: break-word;
+    margin-top: 32px;
 }
 
 .mx_FilePanel .mx_EventTile .mx_MImageBody {
     margin-right: 0px;
 }
 
+.mx_FilePanel .mx_EventTile .mx_MFileBody {
+    line-height: 2.4rem;
+}
+
 .mx_FilePanel .mx_EventTile .mx_MFileBody_download {
+    padding-top: 8px;
     display: flex;
     font-size: $font-14px;
     color: $event-timestamp-color;
@@ -60,7 +66,7 @@ limitations under the License.
 
 .mx_FilePanel .mx_EventTile .mx_MImageBody_size {
     flex: 1 0 0;
-    font-size: $font-11px;
+    font-size: $font-14px;
     text-align: right;
     white-space: nowrap;
 }
@@ -80,7 +86,7 @@ limitations under the License.
     flex: 1 1 auto;
     line-height: initial;
     padding: 0px;
-    font-size: $font-11px;
+    font-size: $font-14px;
     opacity: 1.0;
     color: $event-timestamp-color;
 }
@@ -90,7 +96,7 @@ limitations under the License.
     text-align: right;
     visibility: visible;
     position: initial;
-    font-size: $font-11px;
+    font-size: $font-14px;
     opacity: 1.0;
     color: $event-timestamp-color;
 }

res/css/structures/_RightPanel.scss

@@ -64,7 +64,7 @@ limitations under the License.
         left: 4px; // center with parent of 32px
         height: 24px;
         width: 24px;
-        background-color: $rightpanel-button-color;
+        background-color: $icon-button-color;
         mask-repeat: no-repeat;
         mask-size: contain;
     }
@@ -99,7 +99,7 @@ limitations under the License.
     background: rgba($accent-color, 0.25);
     // make the icon the accent color too
     &::before {
-        background-color: $accent-color;
+        background-color: $accent-color !important;
     }
 }
 

res/css/views/dialogs/_ShareDialog.scss

@@ -51,7 +51,8 @@ limitations under the License.
     display: inherit;
 }
 .mx_ShareDialog_matrixto_copy > div {
-    background-image: url($copy-button-url);
+    mask-image: url($copy-button-url);
+    background-color: $message-action-bar-fg-color;
     margin-left: 5px;
     width: 20px;
     height: 20px;

res/css/views/elements/_StyledCheckbox.scss

@@ -80,5 +80,11 @@ limitations under the License.
             background-color: $accent-color;
             border-color: $accent-color;
         }
+
+        &.focus-visible {
+            & + label .mx_Checkbox_background {
+                @mixin unreal-focus;
+            }
+        }
     }
 }

res/css/views/elements/_StyledRadioButton.scss

@@ -63,6 +63,7 @@ limitations under the License.
             box-sizing: border-box;
             height: $font-16px;
             width: $font-16px;
+            margin-left: 2px; // For the highlight on focus
 
             border: $font-1-5px solid $radio-circle-color;
             border-radius: $font-16px;
@@ -77,6 +78,12 @@ limitations under the License.
             }
         }
 
+        &.focus-visible {
+            & + div {
+                @mixin unreal-focus;
+            }
+        }
+
         &:checked {
             & + div {
                 border-color: $active-radio-circle-color;

res/css/views/messages/_MImageBody.scss

@@ -34,6 +34,8 @@ limitations under the License.
 
     // Make sure the _thumbnail is positioned relative to the _container
     position: relative;
+
+    border-radius: 4px;
 }
 
 .mx_MImageBody_thumbnail_spinner {

res/css/views/messages/_MessageActionBar.scss

@@ -24,7 +24,7 @@ limitations under the License.
     line-height: $font-24px;
     border-radius: 4px;
     background: $message-action-bar-bg-color;
-    top: -18px;
+    top: -26px;
     right: 8px;
     user-select: none;
     // Ensure the action bar appears above over things, like the read marker.

res/css/views/rooms/_EventTile.scss

@@ -536,11 +536,12 @@ $left-gutter: 64px;
     display: inline-block;
     visibility: hidden;
     cursor: pointer;
-    top: 8px;
+    top: 6px;
     right: 6px;
     width: 19px;
     height: 19px;
-    background-image: url($copy-button-url);
+    mask-image: url($copy-button-url);
+    background-color: $message-action-bar-fg-color;
 }
 
 .mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_copyButton,

res/css/views/rooms/_IRCLayout.scss

@@ -54,7 +54,7 @@ $irc-line-height: $font-18px;
             flex-shrink: 0;
             width: var(--name-width);
             text-overflow: ellipsis;
-            text-align: right;
+            text-align: left;
             display: flex;
             align-items: center;
             overflow: visible;

res/css/views/rooms/_MessageComposer.scss

@@ -21,6 +21,7 @@ limitations under the License.
     border-top: 1px solid $primary-hairline-color;
     position: relative;
     padding-left: 82px;
+    padding-right: 6px;
 }
 
 .mx_MessageComposer_replaced_wrapper {
@@ -178,25 +179,44 @@ limitations under the License.
     color: $accent-color;
 }
 
+.mx_MessageComposer_button_highlight {
+    background: rgba($accent-color, 0.25);
+    // make the icon the accent color too
+    &::before {
+        background-color: $accent-color !important;
+    }
+}
+
 .mx_MessageComposer_button {
     position: relative;
-    margin-right: 12px;
+    margin-right: 6px;
     cursor: pointer;
-    height: 20px;
-    width: 20px;
+    height: 26px;
+    width: 26px;
+    border-radius: 100%;
 
     &::before {
         content: '';
         position: absolute;
 
+        top: 3px;
+        left: 3px;
         height: 20px;
         width: 20px;
-        background-color: $composer-button-color;
+        background-color: $icon-button-color;
         mask-repeat: no-repeat;
         mask-size: contain;
         mask-position: center;
     }
 
+    &:hover {
+        background: rgba($accent-color, 0.1);
+
+        &::before {
+            background-color: $accent-color;
+        }
+    }
+
     &.mx_MessageComposer_hangup::before {
         background-color: $warning-color;
     }
@@ -288,7 +308,7 @@ limitations under the License.
     mask-size: contain;
     mask-position: center;
     mask-repeat: no-repeat;
-    background-color: $composer-button-color;
+    background-color: $icon-button-color;
 
     &.mx_MessageComposer_markdownDisabled {
         opacity: 0.2;

res/css/views/rooms/_RoomHeader.scss

@@ -222,7 +222,7 @@ limitations under the License.
         left: 4px; // center with parent of 32px
         height: 24px;
         width: 24px;
-        background-color: $roomheader-button-color;
+        background-color: $icon-button-color;
         mask-repeat: no-repeat;
         mask-size: contain;
     }

res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.scss

@@ -14,10 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_SecurityRoomSettingsTab label {
-    display: block;
-}
-
 .mx_SecurityRoomSettingsTab_warning {
     display: block;