snapshot of https://github.com/zulip/zulip.git @ 48c69911c7dd4e03b20552eb3bd77ad8151c1357 (2026-09-15)

web/styles/image_upload_widget.css

@@ -0,0 +1,228 @@
+/* common CSS for all image upload widget's */
+.image_upload_widget {
+    position: relative;
+    border-radius: 5px;
+    box-shadow: 0 0 10px hsl(0deg 0% 0% / 10%);
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .image-block {
+        max-height: 100%;
+    }
+
+    .image-hover-background {
+        content: "";
+        background-color: hsl(0deg 0% 0% / 60%);
+        height: 100%;
+        width: 100%;
+        z-index: 99;
+        position: absolute;
+        display: none;
+        cursor: pointer;
+        top: 0;
+    }
+
+    .image_upload_button {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        text-align: center;
+        justify-content: center;
+        box-shadow: 0 0 10px hsl(0deg 0% 0% / 10%);
+        z-index: 99;
+    }
+
+    .image-delete-button {
+        background: none;
+        border: none;
+        cursor: pointer;
+        color: hsl(0deg 0% 75%);
+        opacity: 0;
+        padding: 0;
+        position: absolute;
+        font-size: 2rem;
+        top: 10px;
+        right: 10px;
+        z-index: 99;
+        line-height: 20px;
+        font-family: inherit;
+
+        &:focus:not(:focus-visible) {
+            outline: none;
+        }
+    }
+
+    .image-disabled-text {
+        color: hsl(0deg 0% 100%);
+        cursor: not-allowed;
+        position: absolute;
+        text-align: center;
+        visibility: hidden;
+        z-index: 99;
+        top: 0;
+    }
+
+    .image-delete-text,
+    .image-upload-text,
+    .image-disabled-text {
+        box-sizing: border-box;
+        width: 100%;
+        padding: 0 10px;
+    }
+
+    .image-delete-button:focus,
+    .image-delete-button:hover {
+        color: hsl(0deg 0% 100%);
+    }
+
+    .image-delete-button:hover ~ .image-upload-text {
+        visibility: hidden;
+    }
+
+    .image-delete-button:hover ~ .image-delete-text {
+        visibility: visible;
+    }
+
+    .image-delete-text {
+        color: hsl(0deg 0% 100%);
+        font-size: 0.85rem;
+        position: absolute;
+        visibility: hidden;
+        z-index: 99;
+    }
+
+    .image-upload-text {
+        cursor: pointer;
+        font-size: 0.85rem;
+        color: hsl(0deg 0% 85%);
+        position: absolute;
+        z-index: 99;
+        visibility: hidden;
+
+        &:focus:not(:focus-visible) {
+            outline: none;
+        }
+    }
+
+    .image-upload-text:hover {
+        color: hsl(0deg 0% 100%);
+    }
+
+    .upload-spinner-background {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-color: hsl(0deg 0% 10%);
+        font-size: 0.8rem;
+        width: 100%;
+        opacity: 0.8;
+        height: 100%;
+        position: absolute;
+        visibility: hidden;
+        z-index: 99;
+        cursor: pointer;
+        border-radius: 5px;
+    }
+
+    .hide {
+        display: none;
+    }
+
+    &:hover {
+        .image-upload-text {
+            visibility: visible;
+        }
+
+        .image-delete-button {
+            opacity: 1;
+        }
+
+        .image-disabled-text {
+            visibility: visible;
+        }
+
+        .image-hover-background {
+            display: block;
+        }
+    }
+}
+
+.user-avatar-section,
+.realm-icon-section {
+    margin: 20px 0;
+}
+
+.realm-logo-section {
+    margin: 0 0 20px;
+}
+
+/* CSS related to settings page user avatar upload widget only */
+#user-avatar-upload-widget {
+    .image-block {
+        width: 200px;
+        height: 200px;
+    }
+}
+
+#user-avatar-source {
+    font-size: 1em;
+    z-index: 99;
+    margin-top: 10px;
+}
+
+/* CSS related to settings page realm icon upload widget only */
+#realm-icon-upload-widget {
+    width: 100px;
+    height: 100px;
+    box-shadow: 0 0 10px hsl(0deg 0% 0% / 10%);
+
+    .image-delete-button {
+        top: 5px;
+        right: 5px;
+    }
+}
+
+/* CSS related to settings page realm day/night logo upload widget only */
+#realm-day-logo-upload-widget,
+#realm-night-logo-upload-widget {
+    width: 220px;
+    height: 55px;
+    text-align: center;
+
+    .image-delete-button {
+        top: 5px;
+        right: 5px;
+    }
+}
+
+#realm-day-logo-upload-widget {
+    /* Match to light-theme --color-background-navbar. */
+    background-color: hsl(0deg 0% 97%);
+    padding: 5px;
+}
+
+#realm-night-logo-upload-widget {
+    /* Match to dark-theme --color-background-navbar. */
+    background-color: hsl(0deg 0% 13%);
+    padding: 5px;
+}
+
+.realm-logo-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+
+    .image_upload_button {
+        top: 0;
+        left: 0;
+    }
+}
+
+/* CSS  related to upload widget's preview image */
+.upload_widget_image_preview {
+    object-fit: cover;
+}