+25 -1

src/app.css

reviewed

··· 1097 1097 button.carousel-dot { 1098 1098 pointer-events: auto; 1099 1099 font-weight: bold; 1100 1100 + color: var(--text-color); 1101 1101 + background-color: var(--bg-faded-blur-color); 1102 1102 + border: var(--hairline-width) solid var(--outline-color); 1103 1103 + box-shadow: 0 4px 32px var(--drop-shadow-color); 1104 1104 + transition: all 0.2s ease-out; 1105 1105 + } 1106 1106 + button.carousel-dot { 1107 1107 + background-color: transparent; 1108 1108 + } 1109 1109 + .carousel-controls :is(.button, button).carousel-button { 1110 1110 + background-color: var(--bg-blur-color); 1111 1111 + } 1112 1112 + .carousel-controls 1113 1113 + :is(.button, button).carousel-button:is(:hover, :focus):not(:active) { 1114 1114 + background-color: var(--bg-color); 1115 1115 + transform: scale(1.2); 1116 1116 + } 1117 1117 + .carousel-controls :is(.button, button).carousel-button:active { 1118 1118 + transition-duration: 0s; 1100 1119 } 1101 1120 .carousel-top-controls .szh-menu-container { 1102 1121 pointer-events: auto; ··· 1108 1127 } 1109 1128 .carousel-dots { 1110 1129 border-radius: 999px; 1111 1111 - backdrop-filter: blur(12px) invert(0.25); 1130 1130 + background-color: var(--bg-faded-blur-color); 1131 1131 + border: 1px solid var(--outline-color); 1132 1132 + box-shadow: 0 4px 32px var(--drop-shadow-color); 1133 1133 + /* backdrop-filter: blur(12px) invert(0.25); */ 1112 1134 } 1113 1135 button.carousel-dot { 1114 1136 backdrop-filter: none !important; 1137 1137 + border: none; 1138 1138 + box-shadow: none; 1115 1139 } 1116 1140 button.carousel-dot[disabled] { 1117 1141 pointer-events: none;

+8 -10

src/components/media-modal.jsx

reviewed

··· 135 135 {!!media.description && ( 136 136 <button 137 137 type="button" 138 138 - class="plain2 media-alt" 138 138 + class="media-alt" 139 139 hidden={!showControls} 140 140 onClick={() => { 141 141 setShowMediaAlt(media.description); ··· 154 154 <span> 155 155 <button 156 156 type="button" 157 157 - class="carousel-button plain3" 157 157 + class="carousel-button" 158 158 onClick={() => onClose()} 159 159 > 160 160 <Icon icon="x" /> ··· 167 167 key={media.id} 168 168 type="button" 169 169 disabled={i === currentIndex} 170 170 - class={`plain3 carousel-dot ${ 171 171 - i === currentIndex ? 'active' : '' 172 172 - }`} 170 170 + class={`carousel-dot ${i === currentIndex ? 'active' : ''}`} 173 171 onClick={(e) => { 174 172 e.preventDefault(); 175 173 e.stopPropagation(); ··· 196 194 gap={4} 197 195 menuClassName="glass-menu" 198 196 menuButton={ 199 199 - <button type="button" class="carousel-button plain3"> 197 197 + <button type="button" class="carousel-button"> 200 198 <Icon icon="more" alt="More" /> 201 199 </button> 202 200 } ··· 206 204 mediaAttachments[currentIndex]?.remoteUrl || 207 205 mediaAttachments[currentIndex]?.url 208 206 } 209 209 - class="carousel-button plain3" 207 207 + class="carousel-button" 210 208 target="_blank" 211 209 title="Open original media in new window" 212 210 > ··· 220 218 ? `?media=${currentIndex + 1}` 221 219 : '' 222 220 }`} 223 223 - class="button carousel-button media-post-link plain3" 221 221 + class="button carousel-button media-post-link" 224 222 // onClick={() => { 225 223 // // if small screen (not media query min-width 40em + 350px), run onClose 226 224 // if ( ··· 238 236 <div class="carousel-controls" hidden={!showControls}> 239 237 <button 240 238 type="button" 241 241 - class="carousel-button plain3" 239 239 + class="carousel-button" 242 240 hidden={currentIndex === 0} 243 241 onClick={(e) => { 244 242 e.preventDefault(); ··· 254 252 </button> 255 253 <button 256 254 type="button" 257 257 - class="carousel-button plain3" 255 255 + class="carousel-button" 258 256 hidden={currentIndex === mediaAttachments.length - 1} 259 257 onClick={(e) => { 260 258 e.preventDefault();

+2 -2

src/components/status.css

reviewed

··· 874 874 border-radius: 8px; 875 875 color: var(--text-color); 876 876 padding: 4px 8px; 877 877 - background-color: var(--bg-blur-color); 878 878 - border: var(--hairline-width) solid var(--bg-blur-color); 877 877 + background-color: var(--bg-faded-color); 878 878 + border: 1px solid var(--outline-color); 879 879 box-shadow: 0 4px 16px var(--drop-shadow-color); 880 880 max-width: min(var(--main-width), calc(100% - 32px)); 881 881 display: flex;