113 lines
2.7 KiB
CSS
113 lines
2.7 KiB
CSS
|
|
/* todo: is there a better way to handle defining these animations? despite efforts,
|
|
this implementation still has some degree of transition stacking / delays in nested
|
|
svg contexts in chrome */
|
|
|
|
/* BG Color Only */
|
|
body[data-color-transition-enabled],
|
|
body[data-color-transition-enabled] :is(
|
|
[data-bg-transition]:not([data-color-transition]):not([data-border-transition]),
|
|
button
|
|
) {
|
|
transition: background linear .5s;
|
|
}
|
|
|
|
/* Border Color Only */
|
|
body[data-color-transition-enabled] :is(
|
|
[data-border-transition]:not([data-bg-transition]):not([data-color-transition])
|
|
) {
|
|
transition: border-color linear .5s;
|
|
}
|
|
|
|
/* Color Only */
|
|
body[data-color-transition-enabled] :is(
|
|
[data-color-transition]:not([data-bg-transition]):not([data-border-transition]),
|
|
p,
|
|
a:not(h1 a),
|
|
span:not(p span),
|
|
time:not(p time),
|
|
li:not([role='doc-footnote']), dt, dd,
|
|
h1, h2, h3, h4, h5, h6,
|
|
td, th
|
|
) {
|
|
transition: color linear .5s;
|
|
}
|
|
|
|
/* BG and Color */
|
|
body[data-color-transition-enabled] :is(
|
|
[data-bg-transition][data-color-transition]:not([data-border-transition]),
|
|
pre,
|
|
code:not(pre code),
|
|
samp:not(pre samp),
|
|
mark,
|
|
[role='doc-footnote']
|
|
) {
|
|
transition:
|
|
color linear .5s,
|
|
background linear .5s;
|
|
}
|
|
|
|
/* BG and Border */
|
|
body[data-color-transition-enabled] :is(
|
|
[data-bg-transition][data-border-transition]:not([data-color-transition]),
|
|
body > footer,
|
|
p.error-box,
|
|
.popup form,
|
|
#outline
|
|
) {
|
|
transition:
|
|
background linear .5s,
|
|
border-color linear .5s;
|
|
}
|
|
|
|
/** Color and Border */
|
|
body[data-color-transition-enabled] :is(
|
|
[data-color-transition][data-border-transition]:not([data-bg-transition]),
|
|
tbody tr,
|
|
.tbody .tr
|
|
) {
|
|
transition:
|
|
color linear .5s,
|
|
border-color linear .5s;
|
|
}
|
|
|
|
/* BG, Color, and Border */
|
|
body[data-color-transition-enabled] :is(
|
|
[data-bg-transition][data-border-transition][data-color-transition],
|
|
input, textarea, select,
|
|
blockquote,
|
|
:is(section, aside):is([role='note'], .info, .highlight, .warning, .problem)
|
|
) {
|
|
transition:
|
|
color linear .5s,
|
|
background linear .5s,
|
|
border-color linear .5s;
|
|
}
|
|
|
|
/* Fill and Stroke */
|
|
body[data-color-transition-enabled] svg :is(
|
|
[fill^='var('][stroke^='var(']:not([fill^='var('][stroke^='var('] *),
|
|
[style*='fill:'][style*='stroke:']:not([style*='fill:'][style*='stroke:'] *)
|
|
) {
|
|
transition:
|
|
fill linear .5s,
|
|
stroke linear .5s;
|
|
}
|
|
|
|
/* Fill Only */
|
|
body[data-color-transition-enabled] svg :is(
|
|
[fill^='var(']:not([stroke^='var(']):not([fill^='var('] *),
|
|
[style*='fill:']:not([style*='stroke:']):not([style*='fill:'] *)
|
|
) {
|
|
transition: fill linear .5s;
|
|
}
|
|
|
|
/* Stroke Only */
|
|
body[data-color-transition-enabled] :is(
|
|
svg [stroke^='var(']:not([fill^='var(']):not([stroke^='var('] *),
|
|
svg [style*='stroke:']:not([style*='fill:']):not([style*='stroke:'] *)
|
|
svg.icon
|
|
) {
|
|
transition: stroke linear .5s;
|
|
}
|