More modern backgrounds buttons and filename (#4484)

* init

* move background styles, enlarge and clip image to get rid of antialising bug

* move styles from style.css to backgrounds.css

* Reformat backgrounds.css

* Improve selector specificity, fix type errors, increase font size on thumbnails, decrease mobile toggle size

* Fix webp chat backgrounds thumbnails

* Respect reduced motion preference

* Remove transition delay

---------

Co-authored-by: Cohee <18619528+Cohee1207@users.noreply.github.com>

public/style.css

@@ -722,71 +722,11 @@ hr {
     opacity: 0.2;
 }
 
-#bg1,
-#bg_custom {
-    background-repeat: no-repeat;
-    background-attachment: fixed;
-    background-size: cover;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    transition: background-image var(--animation-duration-3x) ease-in-out;
-}
-
-/* Background fitting options */
-#background_fitting {
-    max-width: 6em;
-}
-
-/* Fill/Cover - scales to fill width while maintaining aspect ratio */
-#bg1.cover,
-#bg_custom.cover {
-    background-size: cover;
-    background-position: center;
-}
-
-/* Fit/Contain - shows entire image maintaining aspect ratio */
-#bg1.contain,
-#bg_custom.contain {
-    background-size: contain;
-    background-position: center;
-    background-repeat: no-repeat;
-}
-
-/* Stretch - stretches to fill entire space */
-#bg1.stretch,
-#bg_custom.stretch {
-    background-size: 100% 100%;
-}
-
-/* Center - centers without scaling */
-#bg1.center,
-#bg_custom.center {
-    background-size: auto;
-    background-position: center;
-    background-repeat: no-repeat;
-}
-
-body.reduced-motion #bg1,
-body.reduced-motion #bg_custom {
-    transition: none;
-}
-
 #version_display {
     padding: 5px;
     opacity: 0.8;
 }
 
-#bg1 {
-    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=');
-    z-index: -3;
-}
-
-#bg_custom {
-    background-image: none;
-    z-index: -2;
-}
-
 /*TOPPER margin*/
 
 #top-bar {
@@ -3305,22 +3245,6 @@ input[type=search]:focus::-webkit-search-cancel-button {
     justify-content: space-evenly;
 }
 
-.bg_example {
-    width: 30%;
-    max-width: 200px;
-    background-repeat: no-repeat;
-    background-size: cover;
-    background-position: center;
-    border-radius: 10px;
-    border: 1px solid var(--SmartThemeBorderColor);
-    box-shadow: 0 0 7px var(--black50a);
-    margin: 5px;
-    cursor: pointer;
-    aspect-ratio: 16/9;
-    justify-content: flex-end;
-    position: relative;
-}
-
 .bg_example.locked {
     outline: 2px solid var(--golden);
 }
@@ -3345,27 +3269,6 @@ input[type=search]:focus::-webkit-search-cancel-button {
     display: none;
 }
 
-.BGSampleTitle {
-    display: flex;
-    width: 100%;
-    height: min-content;
-    text-align: center;
-    justify-content: center;
-    align-self: flex-end;
-    bottom: 0;
-    position: relative;
-    word-break: break-word;
-    background-color: var(--SmartThemeBlurTintColor);
-    font-size: calc(var(--fontScale) * 0.9em);
-    max-height: 50%;
-    overflow-y: clip;
-    border-radius: 0 0 7px 7px;
-}
-
-.bg_example[custom="true"] .BGSampleTitle {
-    display: none;
-}
-
 .bg_button {
     padding: 4px;
     position: absolute;