diff --git a/client/package.json b/client/package.json index c05a7fcb5..0daac6f16 100644 --- a/client/package.json +++ b/client/package.json @@ -99,7 +99,6 @@ "eslint-plugin-jsdoc": "^48.1.0", "eslint-plugin-prefer-arrow": "latest", "expect-webdriverio": "^4.2.3", - "focus-visible": "^5.0.2", "hls.js": "~1.3", "html-loader": "^5.0.0", "html-webpack-plugin": "^5.3.1", diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.scss b/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.scss index 8b5034083..1686b8f0b 100644 --- a/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.scss +++ b/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.scss @@ -32,8 +32,8 @@ .highlighted-comment { display: inline-block; - background-color: #F5F5F5; - color: #3d3d3d; + background-color: pvar(--greySecondaryBackgroundColor); + color: pvar(--mainForegroundColor); padding: 0 5px; font-size: 13px; margin-bottom: 5px; @@ -78,7 +78,7 @@ } .comment-account-fid { - opacity: .6; + color: pvar(--greyForegroundColor); } } diff --git a/client/src/app/menu/language-chooser.component.scss b/client/src/app/menu/language-chooser.component.scss index 28d58a678..b72a5be82 100644 --- a/client/src/app/menu/language-chooser.component.scss +++ b/client/src/app/menu/language-chooser.component.scss @@ -7,7 +7,7 @@ border-radius: 0; - &.focus-visible, + &:focus-visible, &:focus { box-shadow: none; } diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss index 50e9455d4..18e69a128 100644 --- a/client/src/app/menu/menu.component.scss +++ b/client/src/app/menu/menu.component.scss @@ -44,7 +44,7 @@ ul { } &:hover, - &.focus-visible { + &:focus-visible { background-color: rgba(255, 255, 255, 0.1); } diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss index eb77f2c3d..7159a336d 100644 --- a/client/src/sass/include/_miniature.scss +++ b/client/src/sass/include/_miniature.scss @@ -69,7 +69,7 @@ } } - &.focus-visible { + &:focus-visible { box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest); outline: none; } diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index 6b973f79e..e5aade4b0 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss @@ -12,13 +12,13 @@ text-decoration: none !important; } - &:focus:not(.focus-visible) { + &:focus:not(:focus-visible) { outline: none !important; } } @mixin disable-outline { - &:focus:not(.focus-visible) { + &:focus:not(:focus-visible) { outline: none !important; } } @@ -77,7 +77,7 @@ @mixin button-focus($color) { &:focus, - &.focus-visible { + &:focus-visible { box-shadow: #{$focus-box-shadow-form} $color; } } diff --git a/client/src/sass/player/peertube-skin.scss b/client/src/sass/player/peertube-skin.scss index 88b24d643..eb43c05e2 100644 --- a/client/src/sass/player/peertube-skin.scss +++ b/client/src/sass/player/peertube-skin.scss @@ -65,7 +65,7 @@ body { background-image: url('#{$assets-path}/player/images/big-play-button.svg'); } - &.focus-visible, + &:focus-visible, &:hover { background-color: var(--mainColor, #696969); } diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss index c1fec46cc..0595ad574 100644 --- a/client/src/sass/primeng-custom.scss +++ b/client/src/sass/primeng-custom.scss @@ -525,7 +525,7 @@ p-table { } } - &.focus-visible { + &:focus-visible { border: 1px solid pvar(--mainForegroundColor) !important } } @@ -580,7 +580,7 @@ p-table { background-color: pvar(--submenuBackgroundColor) !important; } - &.p-sortable-column.focus-visible { + &.p-sortable-column:focus-visible { border: 1px solid pvar(--mainForegroundColor) !important }