mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-08-05 23:59:49 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

LibWeb/CSS: Update UA styling for view-transition pseudo-elements

Browse source 
And also indent the file consistently.

Corresponds to 3d13816af7
This commit is contained in:
Sam Atkins 2025-07-21 11:01:36 +01:00 • committed by Jelle Raaijmakers
commit 938f27bbe3
Notes: github-actions[bot] 2025-07-21 13:34:40 +00:00
1 changed files with 51 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

98
Libraries/LibWeb/CSS/Default.css
View file

@ -852,36 +852,36 @@ progress {
input[type=checkbox][switch] { input[type=checkbox][switch] {
/* FIXME: Workaround until we can properly style dark switches */ /* FIXME: Workaround until we can properly style dark switches */
color-scheme: light; color-scheme: light;
appearance: none; appearance: none;
height: 1em; height: 1em;
width: 1.8em; width: 1.8em;
vertical-align: middle; vertical-align: middle;
border-radius: 1em; border-radius: 1em;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
border-color: transparent; border-color: transparent;
background-color: ButtonFace; background-color: ButtonFace;
} }
input[type=checkbox][switch]::before { input[type=checkbox][switch]::before {
content: ''; content: '';
position: absolute; position: absolute;
height: 0; height: 0;
width: 0; width: 0;
border: .46em solid Field; border: .46em solid Field;
border-radius: 100%; border-radius: 100%;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
margin: auto; margin: auto;
} }
input[type=checkbox][switch]:checked::before { input[type=checkbox][switch]:checked::before {
left: calc(100% - .87em); left: calc(100% - .87em);
} }
input[type=checkbox][switch]:checked { input[type=checkbox][switch]:checked {
background-color: AccentColor; background-color: AccentColor;
} }
/* https://drafts.csswg.org/css-ui/#propdef-user-select */ /* https://drafts.csswg.org/css-ui/#propdef-user-select */
@ -891,54 +891,58 @@ button, meter, progress, select {
/* https://drafts.csswg.org/css-view-transitions-1/#ua-styles */ /* https://drafts.csswg.org/css-view-transitions-1/#ua-styles */
:root { :root {
view-transition-name: root; view-transition-name: root;
} }
:root::view-transition { :root::view-transition {
position: fixed; position: fixed;
inset: 0; inset: 0;
} }
:root::view-transition-group(*) { :root::view-transition-group(*) {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
animation-duration: 0.25s; animation-duration: 0.25s;
animation-fill-mode: both; animation-fill-mode: both;
} }
:root::view-transition-image-pair(*) { :root::view-transition-image-pair(*) {
position: absolute; position: absolute;
inset: 0; inset: 0;
animation-duration: inherit;
animation-fill-mode: inherit;
animation-delay: inherit;
} }
:root::view-transition-old(*), :root::view-transition-old(*),
:root::view-transition-new(*) { :root::view-transition-new(*) {
position: absolute; position: absolute;
inset-block-start: 0; inset-block-start: 0;
inline-size: 100%; inline-size: 100%;
block-size: auto; block-size: auto;
}
animation-duration: inherit; :root::view-transition-image-pair(*),
animation-fill-mode: inherit; :root::view-transition-old(*),
animation-delay: inherit; :root::view-transition-new(*) {
animation-duration: inherit;
animation-fill-mode: inherit;
animation-delay: inherit;
animation-timing-function: inherit;
animation-iteration-count: inherit;
animation-direction: inherit;
animation-play-state: inherit;
} }
/* Default cross-fade transition */ /* Default cross-fade transition */
@keyframes -ua-view-transition-fade-out { @keyframes -ua-view-transition-fade-out {
to { opacity: 0; } to { opacity: 0; }
} }
@keyframes -ua-view-transition-fade-in { @keyframes -ua-view-transition-fade-in {
from { opacity: 0; } from { opacity: 0; }
} }
/* Keyframes for blending when there are 2 images */ /* Keyframes for blending when there are 2 images */
@keyframes -ua-mix-blend-mode-plus-lighter { @keyframes -ua-mix-blend-mode-plus-lighter {
from { mix-blend-mode: plus-lighter } from { mix-blend-mode: plus-lighter }
to { mix-blend-mode: plus-lighter } to { mix-blend-mode: plus-lighter }
} }