From bba7bf13e26219d194aadcd26fee068d068f55c7 Mon Sep 17 00:00:00 2001 From: Zowie Beha <113861530+1zzowiebeha@users.noreply.github.com> Date: Sun, 20 Jul 2025 20:24:22 -0400 Subject: [PATCH 1/5] feat: improve sidebar and toc link accessibility The table of contents to the right of the page has a list of links that, when hovered, are given an underline. There is also a sidebar to the left of the page with titles and links to reference documentation. The color contrast on these elements can be improved by adding a greater color contrast for visual accessibility. This commit changes the hover color of these elements in a visually nice and accessible way. --- build/docs/styles/videojs.css | 140 ++++++++++++++++++++++++++++------ 1 file changed, 116 insertions(+), 24 deletions(-) diff --git a/build/docs/styles/videojs.css b/build/docs/styles/videojs.css index 1e5447d308..984e413588 100644 --- a/build/docs/styles/videojs.css +++ b/build/docs/styles/videojs.css @@ -1,66 +1,158 @@ #resizer, footer { - background-color: #ECEEF1; - color: #868688; - padding: 3px 10px; + background-color: #ECEEF1; + color: #868688; + padding: 3px 10px; } .footer-text { - padding: 3px; - display: block; + padding: 3px; + display: block; } footer .copyright { - float: left; + float: left; } footer .logo { - display: none; + display: none; } .sidebar-title { - background: center / contain no-repeat url(https://videojs.com/logo-white.png); - text-indent: -999em; + background: center / contain no-repeat url(https://videojs.com/logo-white.png); + text-indent: -999em; } .light .sidebar-title, .dark .link-vjs a:before, .dark .link-gh a:before, .dark .link-tw a:before { - -webkit-filter: invert(80%); - filter: invert(80%); + -webkit-filter: invert(80%); + filter: invert(80%); } .link-vjs a:before, .link-gh a:before, .link-tw a:before { - content: ""; - display: inline-block; - width: 1.5em; - height: 1em; - position: relative; - top: 0.1em; + content: ""; + display: inline-block; + width: 1.5em; + height: 1em; + position: relative; + top: 0.1em; } .link-vjs a:before { - background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3e%3c!--! Font Awesome Free 6.2.1 by %40fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --%3e%3cpath d='M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z'/%3e%3c/svg%3e") no-repeat; + background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3e%3c!--! Font Awesome Free 6.2.1 by %40fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --%3e%3cpath d='M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z'/%3e%3c/svg%3e") no-repeat; } .link-gh a:before { - background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 512'%3e%3c!--! Font Awesome Free 6.2.1 by %40fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --%3e%3cpath d='M186.1 328.7c0 20.9-10.9 55.1-36.7 55.1s-36.7-34.2-36.7-55.1 10.9-55.1 36.7-55.1 36.7 34.2 36.7 55.1zM480 278.2c0 31.9-3.2 65.7-17.5 95-37.9 76.6-142.1 74.8-216.7 74.8-75.8 0-186.2 2.7-225.6-74.8-14.6-29-20.2-63.1-20.2-95 0-41.9 13.9-81.5 41.5-113.6-5.2-15.8-7.7-32.4-7.7-48.8 0-21.5 4.9-32.3 14.6-51.8 45.3 0 74.3 9 108.8 36 29-6.9 58.8-10 88.7-10 27 0 54.2 2.9 80.4 9.2 34-26.7 63-35.2 107.8-35.2 9.8 19.5 14.6 30.3 14.6 51.8 0 16.4-2.6 32.7-7.7 48.2 27.5 32.4 39 72.3 39 114.2zm-64.3 50.5c0-43.9-26.7-82.6-73.5-82.6-18.9 0-37 3.4-56 6-14.9 2.3-29.8 3.2-45.1 3.2-15.2 0-30.1-.9-45.1-3.2-18.7-2.6-37-6-56-6-46.8 0-73.5 38.7-73.5 82.6 0 87.8 80.4 101.3 150.4 101.3h48.2c70.3 0 150.6-13.4 150.6-101.3zm-82.6-55.1c-25.8 0-36.7 34.2-36.7 55.1s10.9 55.1 36.7 55.1 36.7-34.2 36.7-55.1-10.9-55.1-36.7-55.1z'/%3e%3c/svg%3e") no-repeat; + background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 512'%3e%3c!--! Font Awesome Free 6.2.1 by %40fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --%3e%3cpath d='M186.1 328.7c0 20.9-10.9 55.1-36.7 55.1s-36.7-34.2-36.7-55.1 10.9-55.1 36.7-55.1 36.7 34.2 36.7 55.1zM480 278.2c0 31.9-3.2 65.7-17.5 95-37.9 76.6-142.1 74.8-216.7 74.8-75.8 0-186.2 2.7-225.6-74.8-14.6-29-20.2-63.1-20.2-95 0-41.9 13.9-81.5 41.5-113.6-5.2-15.8-7.7-32.4-7.7-48.8 0-21.5 4.9-32.3 14.6-51.8 45.3 0 74.3 9 108.8 36 29-6.9 58.8-10 88.7-10 27 0 54.2 2.9 80.4 9.2 34-26.7 63-35.2 107.8-35.2 9.8 19.5 14.6 30.3 14.6 51.8 0 16.4-2.6 32.7-7.7 48.2 27.5 32.4 39 72.3 39 114.2zm-64.3 50.5c0-43.9-26.7-82.6-73.5-82.6-18.9 0-37 3.4-56 6-14.9 2.3-29.8 3.2-45.1 3.2-15.2 0-30.1-.9-45.1-3.2-18.7-2.6-37-6-56-6-46.8 0-73.5 38.7-73.5 82.6 0 87.8 80.4 101.3 150.4 101.3h48.2c70.3 0 150.6-13.4 150.6-101.3zm-82.6-55.1c-25.8 0-36.7 34.2-36.7 55.1s10.9 55.1 36.7 55.1 36.7-34.2 36.7-55.1-10.9-55.1-36.7-55.1z'/%3e%3c/svg%3e") no-repeat; } .link-tw a:before { - background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3c!--! Font Awesome Free 6.2.1 by %40fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --%3e%3cpath d='M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z'/%3e%3c/svg%3e") no-repeat; + background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3c!--! Font Awesome Free 6.2.1 by %40fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --%3e%3cpath d='M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z'/%3e%3c/svg%3e") no-repeat; } .light .navbar { - background-color: #f7f7f7; - border-radius: 1rem; + background-color: #f7f7f7; + border-radius: 1rem; } .dark .navbar { - background-color: #222; - border-radius: 1rem; + background-color: #222; + border-radius: 1rem; +} + +/* ============== +Table of contents +================= */ + +.toc-list-item a { + transition: .2s color, .2s font-weight; +} + +.toc-link.is-active-link { + font-weight: bold; + font-family: inherit; +} + +.dark .toc-list-item a:not(.is-active-link):hover { + color: #fff; + font-weight: bold; +} + +.light .toc-list-item a:not(.is-active-link):hover { + color: #111; + font-weight: bold; +} + +/* ======== +Sidebar Dark +===========*/ + +/* Title */ + +.dark .sidebar-section-title:hover { + background: #1a1a1a; +} + +.dark .sidebar-section-title[data-isopen="true"].with-arrow svg { + background: #404040; + border-radius: 50%; +} + +/* Reference Links */ + +.dark .sidebar-section-children.active { + background: #4b4b4b; +} + +.dark .sidebar-section-children.active a:hover { + /* Don't change background for active sidebar child */ + background: #4b4b4b; + text-decoration: underline; +} + +.dark .sidebar-section-children:not(.active) a:hover { + background: #1e1e1e; + text-decoration: underline; +} + +/* ============= +Sidebar Light +================ */ + +/* Title */ + +.sidebar-section-title { + border: 1px solid transparent; +} + +.light .sidebar-section-title:hover { + background: #efefef; + border-color: #d7d7d7; +} + +.light .sidebar-section-title[data-isopen="true"].with-arrow svg { + background: #d7d7d7; + border-radius: 50%; +} + +/* Reference Links */ + +.light .sidebar-section-children.active { + background: #c2c2c2; +} + +.light .sidebar-section-children.active a:hover { + /* Don't change background for active sidebar child */ + background: #c2c2c2; + text-decoration: underline; +} + +.light .sidebar-section-children:not(.active) a:hover { + background: #dcdcdc; + text-decoration: underline; } \ No newline at end of file From 40be2d7af8f4862b050780c1175dba64efa227d6 Mon Sep 17 00:00:00 2001 From: Zowie Beha <113861530+1zzowiebeha@users.noreply.github.com> Date: Sun, 20 Jul 2025 22:19:57 -0400 Subject: [PATCH 2/5] Improve contrast to search container Adds an opening transition when the search container is displayed. Improves its parent backdrop color contrast, as well as the close button contrast on both the light and dark themes. --- build/docs/styles/videojs.css | 94 +++++++++++++++++++++++++++++++++++ 1 file changed, 94 insertions(+) diff --git a/build/docs/styles/videojs.css b/build/docs/styles/videojs.css index 984e413588..8c7909fa4b 100644 --- a/build/docs/styles/videojs.css +++ b/build/docs/styles/videojs.css @@ -65,6 +65,100 @@ footer .logo { border-radius: 1rem; } +/* ============== +Search container Light +================= */ + +/* Light Search close button */ +.light .search-container .search-close-button { + background: rgba(164, 164, 164, .26); + transition: background .4s; +} +.light .search-container .search-close-button:hover { + background: rgba(117, 117, 117, .26); +} +.light .search-container .search-close-button svg { + transition: fill .4s; +} +.light .search-container .search-close-button:hover svg { + fill: #4b2d2d; +} + +/* Light Backdrop */ +.light .search-container { + background: rgb(0 0 0 / 26%); + transition: background .4s; + @starting-style { + background: rgb(0 0 0 / 0%); + } +} + +/* Light Search controls */ +.light .search-container .wrapper { + border: 1px solid #828282; + transition: opacity .2s; + opacity: 1; + @starting-style { + opacity: 0; + } +} + +/* ============== +Search container Dark +================= */ + +/* Dark Search close button */ +.dark .search-container .search-close-button { + background: rgb(0 0 0 / 26%); + transition: background .4s; +} +.dark .search-container .search-close-button:hover { + background: rgba(151, 151, 151, .26); +} +.dark .search-container .search-close-button svg { + transition: fill .4s; +} + +.dark .search-container .search-close-button:hover svg { + fill: white; +} + +/* Dark Backdrop */ +.dark .search-container { + background: rgba(71, 71, 71, .26); + transition: background .4s; + @starting-style { + background: rgb(0 0 0 / 0%); + } +} + +/* Dark Search controls */ +.dark .search-container .wrapper { + border: 1px solid #393939; + transition: opacity .2s; + opacity: 1; + @starting-style { + opacity: 0; + } +} + +/* ============== +Search +================= */ + +.light .search-container { + /* + This progressive enhancement will work soon on a future version of Firefox. + It will work as normal in the mean-time. + */ + background: rgb(0 0 0 / 26%); + transition: background .2s; /* fallback */ + transition: background .2s, display .3s allow-discrete; + @starting-style: { + background: rgb(0 0 0 / 0%); + } +} + /* ============== Table of contents ================= */ From f5b52a960340d9b44751fe80c23a03979252d978 Mon Sep 17 00:00:00 2001 From: Zowie Beha <113861530+1zzowiebeha@users.noreply.github.com> Date: Mon, 21 Jul 2025 18:32:08 -0400 Subject: [PATCH 3/5] feat: add contrast to interactive elements This commit adds a few border and background color contrast changes, along with transitions to the interactive elements on the page. These include the navbar (top), table of contents (right), sidebar (left), and mobile sidebar elements at small screen sizes. --- build/docs/styles/videojs.css | 162 +++++++++++++++++++++++++++------- 1 file changed, 129 insertions(+), 33 deletions(-) diff --git a/build/docs/styles/videojs.css b/build/docs/styles/videojs.css index 8c7909fa4b..a227e201ae 100644 --- a/build/docs/styles/videojs.css +++ b/build/docs/styles/videojs.css @@ -65,11 +65,94 @@ footer .logo { border-radius: 1rem; } + +/* ============== +Content jump-to links +================= */ +.light .has-anchor .link-anchor { + color: #b7b7b7; + transition: .2s color; +} +.light .has-anchor .link-anchor:hover { + color: #515151; +} + +/* ============== +Navbar border +================= */ +.dark .navbar { + border: 1px solid #424141; +} +.light .navbar { + border: 1px solid #c6c6c6; +} + +/* ============== +Navbar items +================= */ +.navbar-left-items, +.mobile-nav-links { + column-gap: .5rem; +} +.mobile-nav-links { + padding-left: 2rem; +} +.navbar-left-items .navbar-item, +.mobile-nav-links .navbar-item { + transition: .4s background; +} + +.light .mobile-nav-links .navbar-item { + border: 1px solid #d5d5d5; +} +.dark .mobile-nav-links .navbar-item { + background: #2b2b2b; +} +.dark .navbar-left-items .navbar-item:hover { + background: #1c1c1c +} +.dark .mobile-nav-links .navbar-item:hover { + background: #373737; +} +.light .navbar-left-items .navbar-item:hover, +.light .mobile-nav-links .navbar-item:hover{ + background: #e0e0e0; + border-color: #e0e0e0; +} + +/* Fix mobile responsive issues with theme */ +@media screen and (max-width: 1192px) { + .navbar-left-items .navbar-item { + display: flex; + align-items: center; + } + .navbar-left-items .navbar-item a { + padding: 1rem; + text-align: center; + } +} +@media screen and (max-width: 1100px) { + .navbar-left-items .navbar-item a::before { + display: block; + left: 50%; + transform: translate(-25%, 0); + top: 0; + } +} +@media screen and (max-width: 1040px) { + .navbar-left-items .navbar-item a::before { + display: block; + left: 50%; + transform: translate(-25%, 0); + top: 0; + } +} + /* ============== Search container Light ================= */ -/* Light Search close button */ +/* Search close button */ .light .search-container .search-close-button { background: rgba(164, 164, 164, .26); transition: background .4s; @@ -84,7 +167,7 @@ Search container Light fill: #4b2d2d; } -/* Light Backdrop */ +/* Backdrop */ .light .search-container { background: rgb(0 0 0 / 26%); transition: background .4s; @@ -93,7 +176,7 @@ Search container Light } } -/* Light Search controls */ +/* Search controls */ .light .search-container .wrapper { border: 1px solid #828282; transition: opacity .2s; @@ -107,7 +190,7 @@ Search container Light Search container Dark ================= */ -/* Dark Search close button */ +/* Search close button */ .dark .search-container .search-close-button { background: rgb(0 0 0 / 26%); transition: background .4s; @@ -123,7 +206,7 @@ Search container Dark fill: white; } -/* Dark Backdrop */ +/* Backdrop */ .dark .search-container { background: rgba(71, 71, 71, .26); transition: background .4s; @@ -132,7 +215,7 @@ Search container Dark } } -/* Dark Search controls */ +/* Search controls */ .dark .search-container .wrapper { border: 1px solid #393939; transition: opacity .2s; @@ -142,23 +225,6 @@ Search container Dark } } -/* ============== -Search -================= */ - -.light .search-container { - /* - This progressive enhancement will work soon on a future version of Firefox. - It will work as normal in the mean-time. - */ - background: rgb(0 0 0 / 26%); - transition: background .2s; /* fallback */ - transition: background .2s, display .3s allow-discrete; - @starting-style: { - background: rgb(0 0 0 / 0%); - } -} - /* ============== Table of contents ================= */ @@ -188,24 +254,27 @@ Sidebar Dark /* Title */ -.dark .sidebar-section-title:hover { +.dark .sidebar-section-title:not([data-isopen="true"]):hover { background: #1a1a1a; + border-color: #3c3c3c; } +.dark .sidebar-section-title[data-isopen="true"] { + background: #333; + border-color: #6f6f6f; +} .dark .sidebar-section-title[data-isopen="true"].with-arrow svg { background: #404040; border-radius: 50%; } /* Reference Links */ - .dark .sidebar-section-children.active { background: #4b4b4b; } .dark .sidebar-section-children.active a:hover { - /* Don't change background for active sidebar child */ - background: #4b4b4b; + background: #4b4b4b; /* don't change background for active sidebar child */ text-decoration: underline; } @@ -223,30 +292,57 @@ Sidebar Light .sidebar-section-title { border: 1px solid transparent; } - .light .sidebar-section-title:hover { - background: #efefef; + background: #f0f0f0; border-color: #d7d7d7; } - +.light .sidebar-section-title[data-isopen="true"] { + background: #ececec; + border-color: #69696954; +} .light .sidebar-section-title[data-isopen="true"].with-arrow svg { background: #d7d7d7; border-radius: 50%; } /* Reference Links */ - .light .sidebar-section-children.active { background: #c2c2c2; } .light .sidebar-section-children.active a:hover { - /* Don't change background for active sidebar child */ - background: #c2c2c2; + background: #c2c2c2;; /* don't change background for active sidebar child */ text-decoration: underline; } .light .sidebar-section-children:not(.active) a:hover { background: #dcdcdc; text-decoration: underline; +} + +/* ============= +Mobile container +================ */ +/* Button */ +.mobile-menu-icon-container #mobile-menu { + border: 1px solid #6f6f6f; +} +.light .mobile-menu-icon-container #mobile-menu { + transition: .8s background, .4s border-color; + background: #ddd; +} + +.light .mobile-menu-icon-container #mobile-menu[data-isopen="true"] { + background: #ccc; + border-color: #8f8f8f; +} +/* Container */ +.mobile-sidebar-container { + transition: .2s opacity; +} +.mobile-sidebar-container.show { + opacity: 1; + @starting-style { + opacity: 0; + } } \ No newline at end of file From 1f144c04556033bf45423f938f40fc12b3bd86f9 Mon Sep 17 00:00:00 2001 From: Zowie Beha <113861530+1zzowiebeha@users.noreply.github.com> Date: Tue, 22 Jul 2025 17:35:43 -0400 Subject: [PATCH 4/5] use responsive units for media queries if the user changes their browser font size setting, px unit media queries will not adapt to these changes and may cause the query to not take effect, or to take effect at the wrong time. rem units on the other hand do adjust based on the browser's font size setting. this commit switches unit values and types to enable this behavior. --- build/docs/styles/videojs.css | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/build/docs/styles/videojs.css b/build/docs/styles/videojs.css index a227e201ae..ba56a9a5fa 100644 --- a/build/docs/styles/videojs.css +++ b/build/docs/styles/videojs.css @@ -121,7 +121,7 @@ Navbar items } /* Fix mobile responsive issues with theme */ -@media screen and (max-width: 1192px) { +@media screen and (max-width: 74.5rem) { .navbar-left-items .navbar-item { display: flex; align-items: center; @@ -131,7 +131,7 @@ Navbar items text-align: center; } } -@media screen and (max-width: 1100px) { +@media screen and (max-width: 68.75rem) { .navbar-left-items .navbar-item a::before { display: block; left: 50%; @@ -139,7 +139,7 @@ Navbar items top: 0; } } -@media screen and (max-width: 1040px) { +@media screen and (max-width: 65rem) { .navbar-left-items .navbar-item a::before { display: block; left: 50%; @@ -233,8 +233,9 @@ Table of contents transition: .2s color, .2s font-weight; } -.toc-link.is-active-link { +.toc-list .toc-link.is-active-link { font-weight: bold; + text-decoration: underline; font-family: inherit; } @@ -306,7 +307,7 @@ Sidebar Light } /* Reference Links */ -.light .sidebar-section-children.active { +.light .sidebar-section-children-container .sidebar-section-children.active { background: #c2c2c2; } From 2e70bd7f474c49fe1c1fd117dfaeaa3d1d2a1425 Mon Sep 17 00:00:00 2001 From: Zowie Beha <113861530+1zzowiebeha@users.noreply.github.com> Date: Wed, 30 Jul 2025 16:03:48 -0400 Subject: [PATCH 5/5] Final accessibility & color contrast pass Checks colors against an accessibility color constrast measurement tool, makes colors consistent across mobile and desktop, adds underlines to improve link accessibility. --- build/docs/styles/videojs.css | 105 ++++++++++++++++++++++++++-------- 1 file changed, 82 insertions(+), 23 deletions(-) diff --git a/build/docs/styles/videojs.css b/build/docs/styles/videojs.css index ba56a9a5fa..5d6215b4ad 100644 --- a/build/docs/styles/videojs.css +++ b/build/docs/styles/videojs.css @@ -69,12 +69,21 @@ footer .logo { /* ============== Content jump-to links ================= */ +.has-anchor .link-anchor { + transition: .2s color; +} .light .has-anchor .link-anchor { - color: #b7b7b7; - transition: .2s color; + color: #4a4a4a; } .light .has-anchor .link-anchor:hover { - color: #515151; + color: #171717; +} + +.dark .has-anchor .link-anchor { + color: #9f9f9f; +} +.dark .has-anchor .link-anchor:hover { + color: #d1d1d1; } /* ============== @@ -101,22 +110,36 @@ Navbar items .mobile-nav-links .navbar-item { transition: .4s background; } + +.mobile-nav-links .navbar-item:hover a, +.navbar-left-items .navbar-item:hover a { + text-decoration: underline; +} + +.light .navbar-left-items .navbar-item, .light .mobile-nav-links .navbar-item { border: 1px solid #d5d5d5; } + + +.dark .navbar-left-items .navbar-item, .dark .mobile-nav-links .navbar-item { background: #2b2b2b; } -.dark .navbar-left-items .navbar-item:hover { - background: #1c1c1c + +.dark .navbar-left-items .navbar-item a, +.dark .mobile-nav-links .navbar-item a { + color: #B8B8B8; } + +.dark .navbar-left-items .navbar-item:hover, .dark .mobile-nav-links .navbar-item:hover { background: #373737; } .light .navbar-left-items .navbar-item:hover, .light .mobile-nav-links .navbar-item:hover{ - background: #e0e0e0; + background: #ddd; border-color: #e0e0e0; } @@ -255,32 +278,41 @@ Sidebar Dark /* Title */ +.dark .sidebar-section-title { + color: #C2C2C2; +} + .dark .sidebar-section-title:not([data-isopen="true"]):hover { background: #1a1a1a; - border-color: #3c3c3c; + border-color: #A6A6A6; } .dark .sidebar-section-title[data-isopen="true"] { - background: #333; - border-color: #6f6f6f; + background: #323232; + border-color: #ADADAD; } .dark .sidebar-section-title[data-isopen="true"].with-arrow svg { background: #404040; border-radius: 50%; + fill: #C2C2C2; } /* Reference Links */ .dark .sidebar-section-children.active { - background: #4b4b4b; + background: #B5B5B5; +} + +.dark .sidebar-section-children.active a { + color: #0c0c0c; } .dark .sidebar-section-children.active a:hover { - background: #4b4b4b; /* don't change background for active sidebar child */ + background: #B5B5B5; /* don't change background for active sidebar child */ text-decoration: underline; } .dark .sidebar-section-children:not(.active) a:hover { - background: #1e1e1e; + background: #1a1a1a; text-decoration: underline; } @@ -293,32 +325,45 @@ Sidebar Light .sidebar-section-title { border: 1px solid transparent; } +.sidebar-section-title:hover { + text-decoration: underline; +} .light .sidebar-section-title:hover { - background: #f0f0f0; - border-color: #d7d7d7; + background: #ededed; + border-color: #b1b1b1; } .light .sidebar-section-title[data-isopen="true"] { - background: #ececec; - border-color: #69696954; + background: #f8f8f8; + border-color: #565656; } .light .sidebar-section-title[data-isopen="true"].with-arrow svg { - background: #d7d7d7; + transition: .3s background-color, .3s transform; + background: #cdcdcd; border-radius: 50%; } /* Reference Links */ .light .sidebar-section-children-container .sidebar-section-children.active { - background: #c2c2c2; + background: #111111; +} + +.light .sidebar-section-children-container .sidebar-section-children.active a { + color: white; } +.light .sidebar-section-children a:hover { + text-decoration-thickness: 2px !important; + text-underline-offset: 2px !important; + text-decoration: underline !important; +} + .light .sidebar-section-children.active a:hover { - background: #c2c2c2;; /* don't change background for active sidebar child */ - text-decoration: underline; + background: #111111;; /* don't change background for active sidebar child */ } .light .sidebar-section-children:not(.active) a:hover { - background: #dcdcdc; - text-decoration: underline; + background: #dbdbdb; + color: black; } /* ============= @@ -326,13 +371,27 @@ Mobile container ================ */ /* Button */ .mobile-menu-icon-container #mobile-menu { + transition: .8s background, .4s border-color, 4s box-shadow; border: 1px solid #6f6f6f; } .light .mobile-menu-icon-container #mobile-menu { - transition: .8s background, .4s border-color; background: #ddd; } +.dark .mobile-menu-icon-container #mobile-menu { + box-shadow: 0 0 2px #868686e3; +} + +.dark .mobile-menu-icon-container #mobile-menu svg { + fill: #b0b0b0; +} + +.dark .mobile-menu-icon-container #mobile-menu[data-isopen="true"] { + background: #3c3c3c; + box-shadow: 0 0 2px #ffffff3d; +} + + .light .mobile-menu-icon-container #mobile-menu[data-isopen="true"] { background: #ccc; border-color: #8f8f8f;