@@ -973,12 +973,6 @@ body[data-animate-background=true] {
973
973
.Tile_item : focus-visible .Tile_icon {
974
974
box-shadow : var (--focus-ring );
975
975
}
976
- .Tile_item [data-dropped = true ] {
977
- animation-name : Tile_pulse;
978
- animation-duration : 500ms ;
979
- animation-fill-mode : forwards;
980
- animation-timing-function : ease-in-out;
981
- }
982
976
@keyframes Tile_pulse {
983
977
0% {
984
978
scale : 1 ;
@@ -1011,9 +1005,10 @@ body[data-animate-background=true] {
1011
1005
backdrop-filter : blur (48px );
1012
1006
background : var (--ntp-surface-background-color );
1013
1007
box-shadow : 0px 2px 4px 0px rgba (0 , 0 , 0 , 0.12 ), 0px 0px 3px 0px rgba (0 , 0 , 0 , 0.16 );
1008
+ transition : transform .2s ;
1014
1009
}
1015
1010
.Tile_draggable : hover {
1016
- background-color : var ( --color-white-at-18 );
1011
+ transform : scale ( 1.08 );
1017
1012
}
1018
1013
[data-theme = dark ] .Tile_draggable : hover {
1019
1014
background : rgba (0 , 0 , 0 , 0.24 );
@@ -1034,15 +1029,22 @@ body[data-animate-background=true] {
1034
1029
}
1035
1030
.Tile_draggable : active {
1036
1031
transform : scale (0.95 );
1032
+ opacity : .75 ;
1037
1033
}
1038
1034
.Tile_favicon {
1039
1035
display : block;
1040
- max-height : calc (32 * var (--px-in-rem ));
1041
- max-width : calc (32 * var (--px-in-rem ));
1042
1036
background-repeat : no-repeat;
1043
1037
background-size : contain;
1044
1038
pointer-events : none;
1045
1039
}
1040
+ .Tile_faviconLarge {
1041
+ max-height : calc (32 * var (--px-in-rem ));
1042
+ max-width : calc (32 * var (--px-in-rem ));
1043
+ }
1044
+ .Tile_faviconSmall {
1045
+ max-height : calc (24 * var (--px-in-rem ));
1046
+ max-width : calc (24 * var (--px-in-rem ));
1047
+ }
1046
1048
.Tile_faviconText {
1047
1049
display : flex;
1048
1050
align-items : center;
@@ -1058,6 +1060,12 @@ body[data-animate-background=true] {
1058
1060
.Tile_faviconText span : first-child {
1059
1061
text-transform : uppercase;
1060
1062
}
1063
+ .Tile_faviconText .Tile_faviconSmall {
1064
+ font-size : 0.8rem ;
1065
+ border-radius : var (--border-radius-xs );
1066
+ height : calc (24 * var (--px-in-rem ));
1067
+ width : calc (24 * var (--px-in-rem ));
1068
+ }
1061
1069
.Tile_text {
1062
1070
width : var (--icon-width );
1063
1071
text-align : center;
@@ -1066,6 +1074,7 @@ body[data-animate-background=true] {
1066
1074
font-weight : 400 ;
1067
1075
overflow : hidden;
1068
1076
text-overflow : ellipsis;
1077
+ overflow-wrap : anywhere;
1069
1078
line-clamp : 2 ;
1070
1079
-webkit-line-clamp : 2 ;
1071
1080
display : -webkit-box;
0 commit comments