ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-06-05 00:40:44 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix for styling zoom buttons & color of left menu

Browse Source
This commit is contained in:
piotrpekala7 2021-04-08 13:17:21 +02:00
parent c4df0e49f9
commit 7d9928609d
2 changed files with 28 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/components/project-map/project-map.component.html
View File

@ -150,7 +150,7 @@
<button matTooltip="Zoom in" matTooltipClass="custom-tooltip" class="zoom-button" (click)="zoomIn()"> <button matTooltip="Zoom in" matTooltipClass="custom-tooltip" class="zoom-button" (click)="zoomIn()">
<mat-icon>zoom_in</mat-icon> <mat-icon>zoom_in</mat-icon>
</button> </button>
<button matTooltip="Reset zoom" matTooltipClass="custom-tooltip" class="zoom-button" (click)="resetZoom()"> <button matTooltip="Reset zoom" matTooltipClass="custom-tooltip" class="reset-zoom-button" (click)="resetZoom()">
<mat-icon>adjust</mat-icon> <mat-icon>adjust</mat-icon>
</button> </button>
<button matTooltip="Zoom out" matTooltipClass="custom-tooltip" class="zoom-button" (click)="zoomOut()"> <button matTooltip="Zoom out" matTooltipClass="custom-tooltip" class="zoom-button" (click)="zoomOut()">

28
src/app/components/project-map/project-map.component.scss
View File

@ -101,7 +101,7 @@ g.node:hover {
left: 0px; left: 0px;
width: 50px; width: 50px;
margin: 20px; margin: 20px;
background-color: rgba(15,18,20,0.90); background-color: #20313b;
border-radius: 6px; border-radius: 6px;
box-shadow: 1px 1px 10px rgba(0,0,0,0.2); box-shadow: 1px 1px 10px rgba(0,0,0,0.2);
z-index: 2; z-index: 2;
@ -131,6 +131,27 @@ g.node:hover {
background: none; background: none;
margin: 2px 0px; margin: 2px 0px;
color: white; color: white;
mat-icon {
font-size: 24px!important;
}
}
.reset-zoom-button {
display: flex;
justify-content: center;
align-items: center;
height: 36px;
width: 36px;
border-radius: 18px;
background: none;
margin: 2px 0px;
color: white;
mat-icon {
font-size: 16px!important;
margin-top: 8px;
}
} }
.selection-button { .selection-button {
@ -162,6 +183,11 @@ g.node:hover {
color: black; color: black;
} }
.reset-zoom-button {
opacity: 0.7;
color: black;
}
.section { .section {
border-top: 1px solid rgba(0,0,0,0.1); border-top: 1px solid rgba(0,0,0,0.1);