fix: stack rotation options in grid landscape and set object-fit contain with black background
This commit is contained in:
@@ -6,7 +6,7 @@
|
||||
<title>Gerenciador de Imagens Dentais</title>
|
||||
<meta name="description" content="Sistema de gerenciamento de imagens de raio-X dental">
|
||||
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
|
||||
<link rel="stylesheet" href="/style.css?v=2.5">
|
||||
<link rel="stylesheet" href="/style.css?v=2.6">
|
||||
</head>
|
||||
<body>
|
||||
<div class="app-container">
|
||||
|
||||
@@ -712,7 +712,7 @@ body {
|
||||
|
||||
/* ---- HORIZONTAL (paisagem) ---- */
|
||||
.transform-grid.grid-landscape {
|
||||
grid-template-columns: 2fr 1.3fr 1fr 1fr;
|
||||
grid-template-columns: 2fr 1.3fr 1.3fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
}
|
||||
/* Original: col 1, 2 linhas */
|
||||
@@ -721,10 +721,10 @@ body {
|
||||
.transform-grid.grid-landscape .transform-option:nth-child(2) { grid-column: 2; grid-row: 1; }
|
||||
/* Flip V: col 2, linha 2 (empilhado sob Flip H) */
|
||||
.transform-grid.grid-landscape .transform-option:nth-child(3) { grid-column: 2; grid-row: 2; }
|
||||
/* +90°: col 3, 2 linhas (lado a lado com -90°) */
|
||||
.transform-grid.grid-landscape .transform-option:nth-child(4) { grid-column: 3; grid-row: 1 / span 2; }
|
||||
/* -90°: col 4, 2 linhas (lado a lado com +90°) */
|
||||
.transform-grid.grid-landscape .transform-option:nth-child(5) { grid-column: 4; grid-row: 1 / span 2; }
|
||||
/* +90°: col 3, linha 1 */
|
||||
.transform-grid.grid-landscape .transform-option:nth-child(4) { grid-column: 3; grid-row: 1; }
|
||||
/* -90°: col 3, linha 2 (empilhado sob +90°) */
|
||||
.transform-grid.grid-landscape .transform-option:nth-child(5) { grid-column: 3; grid-row: 2; }
|
||||
|
||||
/* ---- VERTICAL (retrato) ---- */
|
||||
.transform-grid.grid-portrait {
|
||||
@@ -813,14 +813,14 @@ body {
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
background: rgba(0,0,0,0.02);
|
||||
background: #000000;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.transform-image-wrapper img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-fit: contain;
|
||||
border-radius: 4px;
|
||||
transition: transform 0.15s ease-out; /* Transição para ajuste fino suave */
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user