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/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/stylesheets/main.css": "assets/stylesheets/main.062add1f.min.css",
"assets/stylesheets/main.css.map": "assets/stylesheets/main.062add1f.min.css.map",
"assets/stylesheets/main.css": "assets/stylesheets/main.42d6186f.min.css",
"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.map": "assets/stylesheets/overrides.011ebae6.min.css.map",
"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 %}
{% endblock %}
{% 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 %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/palette.2c2767bb.min.css' | url }}">
{% endif %}

View File

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

View File

@ -71,7 +71,7 @@
display: block;
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);
cursor: pointer;
@ -83,7 +83,7 @@
// Adjust for right-to-left languages
[dir="rtl"] & {
padding: px2rem(8px) px2rem(40px) px2rem(8px) px2rem(36px);
padding: px2rem(8px) px2rem(44px) px2rem(8px) px2rem(36px);
}
// Remove default details marker

View File

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