style(editor): modernize zoom controls
This commit is contained in:
parent
5216116a14
commit
55f838193a
|
|
@ -170,25 +170,28 @@
|
|||
font-weight: 800;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
.rete-editor-toolbar-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border: 1px solid rgba(203, 213, 225, 0.95);
|
||||
border-radius: 12px;
|
||||
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
|
||||
color: #0f172a;
|
||||
font-size: 16px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border: 1px solid #d8e0ea;
|
||||
border-radius: 10px;
|
||||
background: #ffffff;
|
||||
color: #334155;
|
||||
font-size: 14px;
|
||||
transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
|
||||
}
|
||||
|
||||
.rete-editor-toolbar-btn:hover {
|
||||
border-color: #94a3b8;
|
||||
box-shadow: 0 10px 18px rgba(15, 23, 42, 0.12);
|
||||
border-color: #60a5fa;
|
||||
background: #eff6ff;
|
||||
box-shadow: 0 6px 14px rgba(15, 23, 42, 0.1);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -59,14 +59,14 @@
|
|||
class="rete-editor-toolbar-btn"
|
||||
(click)="zoomIn($event)"
|
||||
aria-label="Zoom in">
|
||||
<i class="bi bi-zoom-in" aria-hidden="true"></i>
|
||||
<i class="bi bi-plus-lg" aria-hidden="true"></i>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="rete-editor-toolbar-btn"
|
||||
(click)="zoomOut($event)"
|
||||
aria-label="Zoom out">
|
||||
<i class="bi bi-zoom-out" aria-hidden="true"></i>
|
||||
<i class="bi bi-dash-lg" aria-hidden="true"></i>
|
||||
</button>
|
||||
</section>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue