Improved focus styles for details

This commit is contained in:
squidfunk 2020-08-16 16:09:19 +02:00
parent 972fb76843
commit 6a69b3c7da
8 changed files with 23 additions and 19 deletions

View File

@ -5,8 +5,8 @@
"assets/javascripts/vendor.js.map": "assets/javascripts/vendor.d1f5a259.min.js.map", "assets/javascripts/vendor.js.map": "assets/javascripts/vendor.d1f5a259.min.js.map",
"assets/javascripts/worker/search.js": "assets/javascripts/worker/search.fae956e7.min.js", "assets/javascripts/worker/search.js": "assets/javascripts/worker/search.fae956e7.min.js",
"assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.fae956e7.min.js.map", "assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.fae956e7.min.js.map",
"assets/stylesheets/main.css": "assets/stylesheets/main.062add1f.min.css", "assets/stylesheets/main.css": "assets/stylesheets/main.42d6186f.min.css",
"assets/stylesheets/main.css.map": "assets/stylesheets/main.062add1f.min.css.map", "assets/stylesheets/main.css.map": "assets/stylesheets/main.42d6186f.min.css.map",
"assets/stylesheets/overrides.css": "assets/stylesheets/overrides.011ebae6.min.css", "assets/stylesheets/overrides.css": "assets/stylesheets/overrides.011ebae6.min.css",
"assets/stylesheets/overrides.css.map": "assets/stylesheets/overrides.011ebae6.min.css.map", "assets/stylesheets/overrides.css.map": "assets/stylesheets/overrides.011ebae6.min.css.map",
"assets/stylesheets/palette.css": "assets/stylesheets/palette.2c2767bb.min.css", "assets/stylesheets/palette.css": "assets/stylesheets/palette.2c2767bb.min.css",

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -41,7 +41,7 @@
{% endif %} {% endif %}
{% endblock %} {% endblock %}
{% block styles %} {% block styles %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.062add1f.min.css' | url }}"> <link rel="stylesheet" href="{{ 'assets/stylesheets/main.42d6186f.min.css' | url }}">
{% if palette.scheme or palette.primary or palette.accent %} {% if palette.scheme or palette.primary or palette.accent %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/palette.2c2767bb.min.css' | url }}"> <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.2c2767bb.min.css' | url }}">
{% endif %} {% endif %}

View File

@ -117,13 +117,14 @@ $admonitions: (
// Admonition title // Admonition title
.admonition-title { .admonition-title {
position: relative; position: relative;
margin: 0 px2rem(-12px); margin: 0 px2rem(-12px) 0 px2rem(-16px);
padding: px2rem(8px) px2rem(12px) px2rem(8px) px2rem(40px); padding: px2rem(8px) px2rem(12px) px2rem(8px) px2rem(44px);
font-weight: 700; font-weight: 700;
background-color: transparentize($clr-blue-a200, 0.9); background-color: transparentize($clr-blue-a200, 0.9);
// Adjust for right-to-left languages // Adjust for right-to-left languages
[dir="rtl"] & { [dir="rtl"] & {
margin: 0 px2rem(-16px) 0 px2rem(-12px);
padding: px2rem(8px) px2rem(40px) px2rem(8px) px2rem(12px); padding: px2rem(8px) px2rem(40px) px2rem(8px) px2rem(12px);
} }
@ -135,7 +136,7 @@ $admonitions: (
// Icon // Icon
&::before { &::before {
position: absolute; position: absolute;
left: px2rem(12px); left: px2rem(16px);
width: px2rem(20px); width: px2rem(20px);
height: px2rem(20px); height: px2rem(20px);
background-color: $clr-blue-a200; background-color: $clr-blue-a200;
@ -145,7 +146,7 @@ $admonitions: (
// Adjust for right-to-left languages // Adjust for right-to-left languages
[dir="rtl"] & { [dir="rtl"] & {
right: px2rem(12px); right: px2rem(16px);
left: initial; left: initial;
} }
} }

View File

@ -71,7 +71,7 @@
display: block; display: block;
min-height: px2rem(20px); min-height: px2rem(20px);
padding: px2rem(8px) px2rem(36px) px2rem(8px) px2rem(40px); padding: px2rem(8px) px2rem(36px) px2rem(8px) px2rem(44px);
border-top-right-radius: px2rem(2px); border-top-right-radius: px2rem(2px);
cursor: pointer; cursor: pointer;
@ -83,7 +83,7 @@
// Adjust for right-to-left languages // Adjust for right-to-left languages
[dir="rtl"] & { [dir="rtl"] & {
padding: px2rem(8px) px2rem(40px) px2rem(8px) px2rem(36px); padding: px2rem(8px) px2rem(44px) px2rem(8px) px2rem(36px);
} }
// Remove default details marker // Remove default details marker

View File

@ -70,8 +70,8 @@
// Active tab label // Active tab label
&:checked + label { &:checked + label {
color: var(--md-primary-fg-color); color: var(--md-accent-fg-color);
border-color: var(--md-primary-fg-color); border-color: var(--md-accent-fg-color);
// Show tabbed block content // Show tabbed block content
& + .tabbed-content { & + .tabbed-content {
@ -79,11 +79,9 @@
} }
} }
// Focused or hovered tab label // Focused tab label
&:focus + label, &:focus + label {
&:hover + label { outline: auto;
color: var(--md-accent-fg-color);
border-color: var(--md-accent-fg-color);
} }
} }
@ -98,6 +96,11 @@
border-bottom: px2rem(2px) solid transparent; border-bottom: px2rem(2px) solid transparent;
cursor: pointer; cursor: pointer;
transition: color 250ms; transition: color 250ms;
// Hovered label
html &:hover {
color: var(--md-accent-fg-color);
}
} }
} }
} }