View transitions

static/style.css

@@ -15,7 +15,7 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            15  
                                                --3-star: #FFAC1B;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            16  
                                                --4-star: #FBC02D;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            17  
                                                --5-star: #CDDC39;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        18 -
                                            /*view-transition-name: root;*/
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        18 +
                                            view-transition-name: root;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            19  
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            20  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            21  
                                            .ripple-pad {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -42,8 +42,12 @@ button, input, .button:not(.link-button), select, .navbar a, .navrail a {

                                
                                
                                
                            
                                
                                    
                                        
                                            42  
                                                overflow: hidden;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            43  
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            44  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        45 -
                                        nav {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        46 -
                                            /*view-transition-name: nav;*/
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        45 +
                                        nav#desktop-navbar {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        46 +
                                            view-transition-name: navbar;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        47 +
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        48 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        49 +
                                        nav#mobile-navbar {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        50 +
                                            view-transition-name: navbar-mobile;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            51  
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            52  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            53  
                                            p {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -221,34 +225,42 @@ iconify-icon {

                                
                                
                                
                            
                                
                                    
                                        
                                            225  
                                                stroke-opacity: 1;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            226  
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            227  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        224 -
                                        /* Disabled for now, until there is more navigation that would benefit from transitions */
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        225 -
                                        /*
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            228  
                                            @view-transition {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            229  
                                                navigation: auto;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            230  
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            231  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            232  
                                            @keyframes move-out {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            233  
                                                from {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        232 -
                                                transform: translateX(0%);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        234 +
                                                transform: scale(1);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        235 +
                                                opacity: 1;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            236  
                                                }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            237  
                                                to {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        235 -
                                                transform: translateX(-100%);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        238 +
                                                transform: scale(0.5);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        239 +
                                                opacity: 0;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            240  
                                                }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            241  
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            242  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            243  
                                            @keyframes move-in {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            244  
                                                from {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        241 -
                                                transform: translateX(100%);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        245 +
                                                transform: scale(0.5);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        246 +
                                                opacity: 0;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            247  
                                                }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            248  
                                                to {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        244 -
                                                transform: translateX(0%);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        249 +
                                                transform: scale(1);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        250 +
                                                opacity: 1;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            251  
                                                }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            252  
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            253  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        254 +
                                        .thumbnail-list > li:is(:hover, :focus, :has(:focus)) > a > .annotation-zone,
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        255 +
                                        #annotation-zone {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        256 +
                                            view-transition-name: thumbnail;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        257 +
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        258 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            259  
                                            @media (prefers-reduced-motion: no-preference) {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            260  
                                                ::view-transition-old(root),
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            261  
                                                ::view-transition-new(root) {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        251 -
                                                animation-duration: 0.25s;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        262 +
                                                transform-origin: top;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        263 +
                                                animation-duration: 0.5s;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            264  
                                                    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            265  
                                                }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            266  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -259,8 +271,16 @@ iconify-icon {

                                
                                
                                
                            
                                
                                    
                                        
                                            271  
                                                ::view-transition-new(root) {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            272  
                                                    animation-name: move-in;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            273  
                                                }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        274 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        275 +
                                            ::view-transition-group(thumbnail) {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        276 +
                                                animation-duration: 0.5s;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        277 +
                                                animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        278 +
                                            }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        279 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        280 +
                                            #annotation-zone::view-transition-old(thumbnail) {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        281 +
                                                animation-duration: 0s;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        282 +
                                            }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            283  
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        263 -
                                        */
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            284  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            285  
                                            .multi-select, .single-select {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            286  
                                                display: flex;