Merge pull request #1935 from joachimesque/accessibility/fixes

[Accessibility] Fixes

bookwyrm/static/css/bookwyrm.css

@@ -301,6 +301,159 @@ details.dropdown .dropdown-menu a:focus-visible {
     }
 }
 
+/** Bookwyrm Tabs
+ ******************************************************************************/
+
+.bw-tabs {
+    -webkit-overflow-scrolling:touch;
+    -webkit-touch-callout:none;
+    position: relative;
+    align-items:center;
+    display:flex;
+    font-size:1rem;
+    justify-content:flex-start;
+    overflow-x:auto;
+    overflow-y:hidden;
+    user-select:none;
+    white-space:nowrap
+}
+.bw-tabs::before {
+    border-bottom-color:#dbdbdb;
+    border-bottom-style:solid;
+    border-bottom-width:1px;
+    bottom: 0;
+    content:"";
+    position: absolute;
+    width: 100%;
+}
+.bw-tabs:not(:last-child) {
+    margin-bottom:1.5rem
+}
+.bw-tabs a {
+    align-items:center;
+    border-bottom-color:#dbdbdb;
+    border-bottom-style:solid;
+    border-bottom-width:1px;
+    color:#4a4a4a;
+    display:flex;
+    justify-content:center;
+    margin-bottom:-1px;
+    padding:.5em 1em;
+    position:  relative;
+}
+.bw-tabs a:hover {
+    border-bottom-color:transparent;
+    color:#363636
+}
+.bw-tabs a.is-active {
+    border-bottom-color:transparent;
+    color:#3273dc
+}
+.bw-tabs.is-left {
+    padding-right:.75em
+}
+.bw-tabs.is-center {
+    flex:none;
+    justify-content:center;
+    padding-left:.75em;
+    padding-right:.75em
+}
+.bw-tabs.is-right {
+    justify-content:flex-end;
+    padding-left:.75em
+}
+.bw-tabs .icon:first-child {
+    margin-right:.5em
+}
+.bw-tabs .icon:last-child {
+    margin-left:.5em
+}
+.bw-tabs.is-centered {
+    justify-content:center
+}
+.bw-tabs.is-right {
+    justify-content:flex-end
+}
+.bw-tabs.is-boxed a {
+    border:1px solid transparent;
+    border-radius:4px 4px 0 0
+}
+.bw-tabs.is-boxed a:hover {
+    background-color:#f5f5f5;
+    border-bottom-color:#dbdbdb
+}
+.bw-tabs.is-boxed a.is-active {
+    background-color:#fff;
+    border-color:#dbdbdb;
+    border-bottom-color:#fff!important
+}
+.bw-tabs.is-fullwidth a {
+    flex-grow:1;
+    flex-shrink:0
+}
+.bw-tabs.is-toggle a {
+    border-color:#dbdbdb;
+    border-style:solid;
+    border-width:1px;
+    margin-bottom:0;
+    position:relative
+}
+.bw-tabs.is-toggle a:hover {
+    background-color:#f5f5f5;
+    border-color:#b5b5b5;
+    z-index:2
+}
+.bw-tabs.is-toggle a+a {
+    margin-left:-1px
+}
+.bw-tabs.is-toggle a:first-child {
+    border-top-left-radius:4px;
+    border-bottom-left-radius:4px
+}
+.bw-tabs.is-toggle a:last-child {
+    border-top-right-radius:4px;
+    border-bottom-right-radius:4px
+}
+.bw-tabs.is-toggle a.is-active {
+    background-color:#3273dc;
+    border-color:#3273dc;
+    color:#fff;
+    z-index:1
+}
+.bw-tabs.is-toggle {
+    border-bottom:none
+}
+.bw-tabs.is-toggle.is-toggle-rounded a:first-child {
+    border-bottom-left-radius:290486px;
+    border-top-left-radius:290486px;
+    padding-left:1.25em
+}
+.bw-tabs.is-toggle.is-toggle-rounded a:last-child {
+    border-bottom-right-radius:290486px;
+    border-top-right-radius:290486px;
+    padding-right:1.25em
+}
+.bw-tabs.is-small {
+    font-size:.75rem
+}
+.bw-tabs.is-medium {
+    font-size:1.25rem
+}
+.bw-tabs.is-large {
+    font-size:1.5rem
+}
+
+.bw-tabs.has-aside-text a {
+    margin-top: 1.5rem;
+}
+
+.bw-tabs a .aside-text {
+    position: absolute;
+    top: calc(-.75rem - .75rem);
+    left: 0;
+    color: #4a4a4a;
+}
+
 /** Details panel
  ******************************************************************************/