Lightemerald/hydra
1
0
Fork 0
mirror of https://github.com/hydralauncher/hydra.git synced 2026-01-11 13:56:16 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Merge pull request #1901 from hydralauncher/fix/fullscreen-modal
Some checks failed
Build / build (ubuntu-latest) (push) Has been cancelled
Details
Build / build (windows-2022) (push) Has been cancelled
Details

Browse Source 
style: enhance overlay styling and adjust close button positioning
This commit is contained in:
Chubby Granny Chaser
2025-12-19 02:02:46 +00:00
committed by GitHub
parent 34681b3bc2 24d65b50b4
commit 4c09f915c6
2 changed files with 26 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/renderer/src/components/fullscreen-media-modal/fullscreen-media-modal.scss
View File

@@ -1,5 +1,21 @@
@use "../../scss/globals.scss";
.fullscreen-media-modal__overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(2px);
z-index: globals.$backdrop-z-index;
display: flex;
justify-content: center;
align-items: center;
padding: 0;
margin: 0;
}
.fullscreen-media-modal {
display: flex;
justify-content: center;
@@ -7,12 +23,17 @@
width: 100%;
height: 100%;
position: relative;
background-color: rgba(0, 0, 0, 0.5);
margin: 0;
padding: 0;
border: none;
background: transparent;
max-width: none;
max-height: none;
&__close-button {
position: absolute;
top: calc(globals.$spacing-unit * 4);
right: calc(globals.$spacing-unit * 3);
top: calc(globals.$spacing-unit * 5);
right: calc(globals.$spacing-unit * 4);
cursor: pointer;
color: globals.$body-color;
background-color: rgba(0, 0, 0, 0.5);

5
src/renderer/src/components/fullscreen-media-modal/fullscreen-media-modal.tsx
View File

@@ -3,7 +3,6 @@ import { createPortal } from "react-dom";
import { XIcon } from "@primer/octicons-react";
import { useTranslation } from "react-i18next";
import { Backdrop } from "../backdrop/backdrop";
import "./fullscreen-media-modal.scss";
export interface FullscreenMediaModalProps {
@@ -64,7 +63,7 @@ export function FullscreenMediaModal({
if (!visible || !src) return null;
return createPortal(
<Backdrop>
<div className="fullscreen-media-modal__overlay">
<dialog className="fullscreen-media-modal" open aria-label={alt}>
<button
type="button"
@@ -82,7 +81,7 @@ export function FullscreenMediaModal({
<img src={src} alt={alt} className="fullscreen-media-modal__image" />
</div>
</dialog>
</Backdrop>,
</div>,
document.body
);
}