Skip to content

Commit

Permalink
refactor(#5): ♻️ move styling from index file to measurements css file
Browse files Browse the repository at this point in the history
  • Loading branch information
@gautegf
gautegf committed Sep 24, 2025
1 parent 6f4ed05 commit acd5f4b
Show file tree
Hide file tree
Showing 2 changed files with 11 additions and 170 deletions.
169 changes: 0 additions & 169 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,175 +24,6 @@
href="/libs/jstree/themes/mixed/style.css"
/>

<!-- Custom styles for measurements -->
<style>
.measurement-item {
background-color: var(--bg-dark-color);
border: 1px solid #4a4a4a;
border-radius: 6px;
margin: 8px 0;
padding: 0;
color: var(--font-color);
position: relative;
}

.measurement-header {
background-color: var(--bg-color-2);
padding: 8px 12px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #4a4a4a;
border-radius: 6px 6px 0 0;
}

.measurement-name {
font-weight: bold;
font-size: 14px;
flex-grow: 1;
margin-right: 8px;
color: var(--font-color-2);
}

.measurement-toggle,
.measurement-delete {
background: transparent;
border: 1px solid #666;
border-radius: 3px;
color: #ff6b6b;
cursor: pointer;
font-size: 14px;
margin-left: 4px;
padding: 3px 6px;
transition: background-color 0.2s;
font-weight: bold;
}

.measurement-toggle {
color: var(--font-color);
}

.measurement-toggle:hover,
.measurement-delete:hover {
background-color: rgba(255, 255, 255, 0.1);
}

.measurement-content {
padding: 12px;
}

.measurement-coordinate {
background-color: var(--color-1);
border: 1px solid #666;
border-radius: 4px;
padding: 8px 12px;
margin: 4px 0;
font-family: monospace;
font-size: 13px;
text-align: center;
color: var(--font-color-2);
}

.measurement-value {
background-color: var(--color-1);
border: 1px solid #666;
border-radius: 4px;
padding: 6px 12px;
margin: 4px 0;
font-family: monospace;
font-size: 14px;
text-align: center;
color: var(--font-color-2);
font-weight: bold;
}

.measurement-details-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2px 0;
font-size: 13px;
}

.measurement-label {
color: var(--font-color);
font-weight: normal;
}

.measurement-data {
color: var(--font-color-2);
font-family: monospace;
}

.no-measurements {
text-align: center;
color: var(--font-color);
opacity: 0.6;
font-style: italic;
padding: 20px;
}

#measurements_clear_all {
background-color: var(--bg-color-2);
border: 1px solid black;
color: var(--font-color-2);
cursor: pointer;
padding: 6px 12px;
border-radius: 4px;
width: 100%;
font-size: 90%;
font-weight: bold;
text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
box-shadow: 0px 2px 2px #111;
transition: filter 0.2s;
}

#measurements_clear_all:hover {
filter: brightness(125%);
}

#measurements_clear_all:active {
box-shadow: inset 0px 2px 2px #111;
}

#measurements_list {
max-height: 400px;
overflow-y: auto;
margin: 10px 0;
}

/* Scrollbar styling for measurements list */
#measurements_list::-webkit-scrollbar {
width: 8px;
}

#measurements_list::-webkit-scrollbar-track {
background: var(--bg-dark-color);
}

#measurements_list::-webkit-scrollbar-thumb {
background: var(--bg-color-2);
border-radius: 4px;
}

#measurements_list::-webkit-scrollbar-thumb:hover {
background: var(--color-1);
}

.measurement-status-indicator {
position: absolute;
top: 8px;
left: 8px;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #4CAF50;
}

.measurement-status-indicator.hidden {
background-color: #ff6b6b;
}
</style>
</head>

<body>
Expand Down
12 changes: 11 additions & 1 deletion src/measurementsPanel.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,16 @@
#measurements_list table{width:100%;border-collapse:collapse;margin-top:4px;}
#measurements_list td{padding:2px 4px;}
#measurements_list tr:nth-child(even){background:#3a454b;}
#measurements_list .valueRow td{font-weight:bold;text-align:center;background:#4a555b;}
#measurements_list .coordRow td{background:#2f383d;font-family:monospace;font-size:11px;padding:4px 6px;border:1px solid #404a50;border-radius:4px;margin:2px 0;}
#measurements_list .segmentRow td{background:transparent;padding:0 0 2px 0;}
#measurements_list .segmentConnector{width:1px;height:12px;background:#505b61;margin:2px auto 0;}
#measurements_list .segmentPill{display:inline-block;background:#3d474d;border:1px solid #566067;padding:2px 10px;margin:2px auto 4px;border-radius:6px;font-size:11px;font-family:monospace;}
#measurements_list .totalRow td{background:#424d53;font-weight:600;font-size:12px;text-align:center;border:1px solid #59646a;border-radius:6px;margin-top:4px;}
#measurements_list .separator td{padding:0;height:2px;background:transparent;}
#measurements_list .attrRow td{font-size:11px;color:#cfd5d8;}
#measurements_list .empty{opacity:.6;padding:8px;text-align:center;}
#measurements_list{max-height:400px;overflow-y:auto;margin:10px 0;}
#measurements_list::-webkit-scrollbar{width:8px;}
#measurements_list::-webkit-scrollbar-track{background:var(--bg-dark-color);}
#measurements_list::-webkit-scrollbar-thumb{background:var(--bg-color-2);border-radius:4px;}
#measurements_list::-webkit-scrollbar-thumb:hover{background:var(--color-1);}

0 comments on commit acd5f4b

Please sign in to comment.