diff --git a/res/css/_common.pcss b/res/css/_common.pcss index edc3042332..77ffe8116b 100644 --- a/res/css/_common.pcss +++ b/res/css/_common.pcss @@ -535,6 +535,27 @@ legend { } } +@define-mixin mx_DialogButton { + /* align images in buttons (eg spinners) */ + vertical-align: middle; + border: 0px; + border-radius: 8px; + font-family: $font-family; + font-size: $font-14px; + color: $button-fg-color; + background-color: $accent; + width: auto; + padding: 7px; + padding-left: 1.5em; + padding-right: 1.5em; + cursor: pointer; + display: inline-block; + + &:not(.focus-visible) { + outline: none; + } +} + /* XXX: Our button style are a mess: buttons that happen to appear in dialogs get special styles applied * to them that no button anywhere else in the app gets by default. In practice, buttons in other places * in the app look the same by being AccessibleButtons, or possibly by having explict button classes. @@ -565,13 +586,6 @@ legend { margin-right: 0px; } -.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):hover, -.mx_Dialog input[type="submit"]:hover, -.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):hover, -.mx_Dialog_buttons input[type="submit"]:hover { - @mixin mx_DialogButton_hover; -} - .mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):focus, .mx_Dialog input[type="submit"]:focus, .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):focus, @@ -643,10 +657,6 @@ legend { margin: auto; } -.mx_GeneralButton:hover { - @mixin mx_DialogButton_hover; -} - .mx_linkButton { cursor: pointer; color: $accent; @@ -666,12 +676,14 @@ legend { background-color: $background; } -.mx_textButton { - @mixin mx_DialogButton_small; +@define-mixin mx_DialogButton_small { + @mixin mx_DialogButton; + font-size: $font-15px; + padding: 0px 1.5em 0px 1.5em; } -.mx_textButton:hover { - @mixin mx_DialogButton_hover; +.mx_textButton { + @mixin mx_DialogButton_small; } .mx_button_row { @@ -874,3 +886,8 @@ legend { } } } + +@define-mixin mx_Dialog_link { + color: $accent; + text-decoration: none; +} diff --git a/res/css/structures/auth/_Login.pcss b/res/css/structures/auth/_Login.pcss index 329c2710cb..f57346a707 100644 --- a/res/css/structures/auth/_Login.pcss +++ b/res/css/structures/auth/_Login.pcss @@ -26,10 +26,6 @@ limitations under the License. text-align: center; } -.mx_Login_submit:hover { - @mixin mx_DialogButton_hover; -} - .mx_Login_submit:disabled { opacity: 0.3; cursor: default; diff --git a/res/css/views/dialogs/_CreateRoomDialog.pcss b/res/css/views/dialogs/_CreateRoomDialog.pcss index d433e6de59..cca4c4f3cf 100644 --- a/res/css/views/dialogs/_CreateRoomDialog.pcss +++ b/res/css/views/dialogs/_CreateRoomDialog.pcss @@ -18,9 +18,8 @@ limitations under the License. margin-top: 15px; .mx_CreateRoomDialog_details_summary { - outline: none; list-style: none; - font-weight: 600; + font-weight: $font-semi-bold; cursor: pointer; color: $accent; @@ -28,6 +27,10 @@ limitations under the License. &::-webkit-details-marker { display: none; } + + &:not(.focus-visible) { + outline: none; + } } > div { diff --git a/res/css/views/rooms/_RoomHeader.pcss b/res/css/views/rooms/_RoomHeader.pcss index 75f2ee31d0..38e8124b9f 100644 --- a/res/css/views/rooms/_RoomHeader.pcss +++ b/res/css/views/rooms/_RoomHeader.pcss @@ -74,10 +74,6 @@ limitations under the License. margin-top: -5px; } -.mx_RoomHeader_textButton:hover { - @mixin mx_DialogButton_hover; -} - .mx_RoomHeader_textButton_danger { background-color: $alert; } diff --git a/res/themes/dark/css/_dark.pcss b/res/themes/dark/css/_dark.pcss index 882ef1f005..2b10d70739 100644 --- a/res/themes/dark/css/_dark.pcss +++ b/res/themes/dark/css/_dark.pcss @@ -238,44 +238,6 @@ $selected-color: $room-highlight-color; } /* ******************** */ -/* Mixins */ -/* ******************** */ -@define-mixin mx_DialogButton { - /* align images in buttons (eg spinners) */ - vertical-align: middle; - border: 0px; - border-radius: 8px; - font-family: $font-family; - font-size: $font-14px; - color: $button-fg-color; - background-color: $accent; - width: auto; - padding: 7px; - padding-left: 1.5em; - padding-right: 1.5em; - cursor: pointer; - display: inline-block; - outline: none; -} - -@define-mixin mx_DialogButton_danger { - background-color: $accent; -} - -@define-mixin mx_DialogButton_secondary { - /* flip colours for the secondary ones */ - font-weight: 600; - border: 1px solid $accent !important; - color: $accent; - background-color: $button-secondary-bg-color; -} - -@define-mixin mx_Dialog_link { - color: $accent; - text-decoration: none; -} -/* ******************** */ - body { color-scheme: dark; } diff --git a/res/themes/legacy-dark/css/_legacy-dark.pcss b/res/themes/legacy-dark/css/_legacy-dark.pcss index d26d3e20d3..8955ca888d 100644 --- a/res/themes/legacy-dark/css/_legacy-dark.pcss +++ b/res/themes/legacy-dark/css/_legacy-dark.pcss @@ -212,43 +212,6 @@ $location-live-secondary-color: #deddfd; $live-badge-color: #ffffff; /* ******************** */ -/* ***** Mixins! ***** */ - -@define-mixin mx_DialogButton { - /* align images in buttons (eg spinners) */ - vertical-align: middle; - border: 0px; - border-radius: 8px; - font-family: $font-family; - font-size: $font-14px; - color: $button-fg-color; - background-color: $accent; - width: auto; - padding: 7px; - padding-left: 1.5em; - padding-right: 1.5em; - cursor: pointer; - display: inline-block; - outline: none; -} - -@define-mixin mx_DialogButton_danger { - background-color: $accent; -} - -@define-mixin mx_DialogButton_secondary { - /* flip colours for the secondary ones */ - font-weight: 600; - border: 1px solid $accent !important; - color: $accent; - background-color: $button-secondary-bg-color; -} - -@define-mixin mx_Dialog_link { - color: $accent; - text-decoration: none; -} - body { color-scheme: dark; } diff --git a/res/themes/legacy-light/css/_legacy-light.pcss b/res/themes/legacy-light/css/_legacy-light.pcss index 26efa76517..310ef4e59e 100644 --- a/res/themes/legacy-light/css/_legacy-light.pcss +++ b/res/themes/legacy-light/css/_legacy-light.pcss @@ -317,52 +317,6 @@ $location-live-secondary-color: #deddfd; $live-badge-color: #ffffff; /* ******************** */ -/* ***** Mixins! ***** */ - -@define-mixin mx_DialogButton { - /* align images in buttons (eg spinners) */ - vertical-align: middle; - border: 0px; - border-radius: 8px; - font-family: $font-family; - font-size: $font-14px; - color: $button-fg-color; - background-color: $accent; - width: auto; - padding: 7px; - padding-left: 1.5em; - padding-right: 1.5em; - cursor: pointer; - display: inline-block; - outline: none; -} - -@define-mixin mx_DialogButton_hover { -} - -@define-mixin mx_DialogButton_danger { - background-color: $accent; -} - -@define-mixin mx_DialogButton_small { - @mixin mx_DialogButton; - font-size: $font-15px; - padding: 0px 1.5em 0px 1.5em; -} - -@define-mixin mx_DialogButton_secondary { - /* flip colours for the secondary ones */ - font-weight: 600; - border: 1px solid $accent !important; - color: $accent; - background-color: $button-secondary-bg-color; -} - -@define-mixin mx_Dialog_link { - color: $accent; - text-decoration: none; -} - body { color-scheme: light; } diff --git a/res/themes/light-high-contrast/css/_light-high-contrast.pcss b/res/themes/light-high-contrast/css/_light-high-contrast.pcss index cb2e6a1e85..aec8489af3 100644 --- a/res/themes/light-high-contrast/css/_light-high-contrast.pcss +++ b/res/themes/light-high-contrast/css/_light-high-contrast.pcss @@ -34,23 +34,6 @@ $appearance-tab-border-color: $input-darker-bg-color; $eventbubble-reply-color: $quaternary-content; $roomtopic-color: $secondary-content; -@define-mixin mx_DialogButton_danger { - background-color: $accent; -} - -@define-mixin mx_DialogButton_secondary { - /* flip colours for the secondary ones */ - font-weight: 600; - border: 1px solid $accent !important; - color: $accent; - background-color: $button-secondary-bg-color; -} - -@define-mixin mx_Dialog_link { - color: $accent; - text-decoration: none; -} - /* Draw an outline on buttons with focus */ .mx_AccessibleButton:focus { outline: 2px solid $accent; diff --git a/res/themes/light/css/_light.pcss b/res/themes/light/css/_light.pcss index d7bfbcefab..60fd0196d1 100644 --- a/res/themes/light/css/_light.pcss +++ b/res/themes/light/css/_light.pcss @@ -336,52 +336,6 @@ $location-live-secondary-color: #deddfd; $live-badge-color: #ffffff; /* ******************** */ -/* Mixins */ -/* ******************** */ -@define-mixin mx_DialogButton { - /* align images in buttons (eg spinners) */ - vertical-align: middle; - border: 0px; - border-radius: 8px; - font-family: $font-family; - font-size: $font-14px; - color: $button-fg-color; - background-color: $accent; - width: auto; - padding: 7px; - padding-left: 1.5em; - padding-right: 1.5em; - cursor: pointer; - display: inline-block; - outline: none; -} - -@define-mixin mx_DialogButton_hover { -} - -@define-mixin mx_DialogButton_danger { - background-color: $accent; -} - -@define-mixin mx_DialogButton_small { - @mixin mx_DialogButton; - font-size: $font-15px; - padding: 0px 1.5em 0px 1.5em; -} - -@define-mixin mx_DialogButton_secondary { - /* flip colours for the secondary ones */ - font-weight: 600; - border: 1px solid $accent !important; - color: $accent; - background-color: $button-secondary-bg-color; -} - -@define-mixin mx_Dialog_link { - color: $accent; - text-decoration: none; -} - body { color-scheme: light; }