three-cad-viewer 1.8.6 → 2.1.1

package/dist/three-cad-viewer.css

@@ -1,8 +1,12 @@
 [data-theme="light"] {
+  --tcv-theme-blue: rgb(83, 160, 227);
+  --tcv-theme-led: rgb(255, 150, 0);
   --tcv-font-color: #333;
   --tcv-bg-color: #fff;
   --tcv-bg-overlay-color: rgba(255, 255, 255, 0.7);
-  --tcv-bg-highlight-color: #eee;
+  --tcv-bg-highlight-color: #ddd;
+  --tcv-bg-pressed-color: #eee;
+  --tcv-bg-pressed-border-color: #bbb;
   --tcv-bg-tooltip-color: rgb(226, 238, 248);
   --tcv-x-color: red;
   --tcv-y-color: green;
@@ -12,13 +16,18 @@
   --tcv-scrollbar-hover: rgba(0, 0, 0, 0.3);
   --tcv-scrollbar-active: rgba(0, 0, 0, 0.5);
   --tcv-scrollbar-thumb: rgba(0, 0, 0, 0.1);
+  --tcv-dropdown-bg: #eee;
 }
 
 [data-theme="dark"] {
+  --tcv-theme-blue: rgb(48, 142, 225);
+  --tcv-theme-led: rgb(255, 230, 0);
   --tcv-font-color: #ddd;
   --tcv-bg-color: #444;
   --tcv-bg-overlay-color: rgba(68, 68, 68, 0.7);
-  --tcv-bg-highlight-color: rgb(102, 102, 102);
+  --tcv-bg-highlight-color: rgb(104, 104, 104);
+  --tcv-bg-pressed-color: rgb(94, 94, 94);
+  --tcv-bg-pressed-border-color: #999;
   --tcv-bg-tooltip-color: rgb(77, 109, 138);
   --tcv-x-color: rgb(255, 69, 0);
   --tcv-y-color: rgb(50, 205, 50);
@@ -28,6 +37,7 @@
   --tcv-scrollbar-hover: rgba(255, 255, 255, 0.4);
   --tcv-scrollbar-active: rgba(255, 255, 255, 0.6);
   --tcv-scrollbar-thumb: rgba(255, 255, 255, 0.2);
+  --tcv-dropdown-bg: #333;
 }
 
 .tcv_none {
@@ -148,11 +158,13 @@ canvas {
   margin: 1px 0px 6px 8px;
   font-weight: bold;
 }
+
 .tcv_small_table {
   line-height: 14px;
 }
 
-.tcv_small_table_row > td, th {
+.tcv_small_table_row>td,
+th {
   padding-left: 6px;
 }
 
@@ -212,6 +224,11 @@ canvas {
   margin-left: 5px;
 }
 
+.tcv_tools_label {
+  vertical-align: middle;
+  margin-left: 5px;
+}
+
 .tcv_animation_slider {
   width: 120px !important;
 }
@@ -228,6 +245,22 @@ canvas {
   z-index: 100;
 }
 
+.tcv_cad_tools {
+  height: 38px;
+  background-color: var(--tcv-bg-overlay-color);
+  border: none;
+  margin: 0;
+  padding: 0px;
+  position: absolute;
+  right: 0px;
+  bottom: 0px;
+  z-index: 100;
+}
+
+.tcv_help {
+  outline: none;
+}
+
 .tcv_cad_help {
   /* height: 36px; */
   background-color: var(--tcv-bg-color);
@@ -282,8 +315,41 @@ canvas {
   padding: 0px;
 }
 
+.tcv_button_frame {
+  width: fit-content;
+  height: fit-content;
+  display: inline-block;
+  border: 1px solid transparent;
+  margin-left: 1px;
+  margin-right: 1px;
+}
+
 .tcv_btn_highlight {
-  outline: 1px solid var(--tcv-shadow);
+  border-bottom: 2px solid var(--tcv-theme-blue);
+  border-radius: 6px;
+}
+
+.tcv_btn_click {
+  width: 8px;
+  height: 29px;
+  margin-left: 12px;
+  position: absolute;
+  border-bottom: 3px inset var(--tcv-theme-led);
+}
+
+.tcv_btn_click2 {
+  border: 1px solid var(--tcv-theme-blue);
+  border-radius: 6px;
+  background-color: var(--tcv-bg-pressed-color);
+}
+
+.tcv_separator {
+  width: 14px;
+  border-left: 1px solid lightgray;
+  margin-left: 5px;
+  padding-right: 5px;
+  padding-bottom: 6px;
+  padding-top: 3px;
 }
 
 .tcv_small_btn {
@@ -299,8 +365,9 @@ canvas {
 }
 
 .tcv_btn:hover {
-  box-shadow: 1px 1px 1px 0 var(--tcv-shadow);
+  box-shadow: 1px px 1px 0 var(--tcv-shadow);
   background-color: var(--tcv-bg-highlight-color);
+  border-radius: 6px;
 }
 
 .tcv_btn:active {
@@ -320,6 +387,7 @@ input[type="button"] {
   -moz-appearance: none;
   appearance: none;
   border-radius: 0;
+  outline: none;
 }
 
 .tcv_tab {
@@ -399,7 +467,7 @@ input[type="button"] {
   box-shadow: 0px 4px 8px 0px var(--tcv-menu-shadow);
   z-index: 200;
   background-color: var(--tcv-bg-color);
-  padding-top: 8px;
+  padding-top: 2px;
   padding-bottom: 2px;
 }
 
@@ -577,10 +645,65 @@ input[type="button"] {
   opacity: 1;
 }
 
-
 .tcv_material_info {
   font-size: 12px;
 }
+
+.tcv_filter_menu {
+  position: relative;
+}
+
+.tcv_filter_dropdown {
+  display: none;
+}
+
+.tcv_filter_icon {
+  font-size: 12px;
+  margin-left: 4px;
+}
+
+.tcv_shape_filter {
+  color: var(--tcv-font-color);
+  font-size: 13px;
+  border: none;
+  float: right;
+  position: absolute;
+  right: 0px;
+  width: auto;
+}
+
+.tcv_shape_filter:hover {
+  cursor: pointer;
+}
+
+.tcv_filter_dropdown_value {
+  margin-left: 2px;
+  margin-right: 2px;
+  margin-top: 1px;
+}
+
+.tcv_filter_value {
+  width: 3em;
+  padding-left: 3px;
+  display: inline-block;
+}
+
+.tcv_filter_dropdown_active {
+  display: block;
+}
+
+.tcv_filter_dropdown_value:hover {
+  cursor: pointer;
+  background-color: var(--tcv-bg-pressed-color);
+}
+
+.tcv_filter_dropdown_inactive {
+  display: none;
+}
+
+.tcv_filter_content {
+  background-color: var(--tcv-bg-overlay-color);
+}
 .tcv_node_entry_wrap {
   white-space: pre;
 }
@@ -663,4 +786,115 @@ input[type="button"] {
 
 .tcv_node_selected {
   color: #308ee1;
+}
+/* MEASURE PANEL */
+
+
+.tcv_panel {
+    display: inline-block;
+    text-align: center;
+    position: absolute;
+    background-color: var(--tcv-bg-overlay-color);
+    user-select: none;
+    font-family: sans-serif;
+    color: var(--tcv-font-color);
+    padding-left: 3px;
+    padding-right: 3px;
+}
+
+.tcv_properties_table {
+    border-collapse: collapse;
+}
+
+.tcv_measure_header {
+    text-align: center;
+    font-weight: bold;
+    font-size: 16px;
+    border-bottom: 1px solid lightgray;
+    padding-top: 3px;
+    padding-bottom: 3px;
+}
+
+.tcv_measure_subheader {
+    text-align: center;
+    font-style: italic;
+    font-size: 14px;
+    border-bottom: 1px solid lightgray;
+    padding-top: 2px;
+    padding-bottom: 2px;
+}
+
+.tcv_measure_cell_header {
+    border-right: 1px solid lightgray;
+}
+
+.tcv_measure_row_line {
+    border-bottom: 1px solid lightgray;
+}
+
+.tcv_measure_cell {
+    padding: 3px 5px 31px 5px;
+}
+
+.tcv_vertex_cell {
+    text-align: center;
+    border-right: 1px solid lightgray;
+    padding: 3px 5px 31px 5px;
+}
+
+.tcv_vertex_cell:last-child {
+    border-right: none;
+}
+
+.tcv_props_cell {
+    vertical-align: middle;
+    font-size: 14px;
+    font-family: sans-serif;
+    border-bottom: 1px solid lightgray;
+}
+
+.tcv_props_header {
+    text-align: left;
+    padding: 3px 5px 3px 5px;
+    border-right: 1px solid lightgray;
+}
+
+.tcv_measure_cell {
+    text-align: left;
+    padding: 3px 5px 3px 5px;
+    font-size: 14px;
+}
+
+.tcv_measure_val {
+    text-align: right;
+    padding: 3px 5px 3px 5px;
+    font-size: 14px;
+}
+
+.tcv_vertex_cell {
+    text-align: center;
+    border-right: 1px solid lightgray;
+    padding: 3px 5px 3px 5px;
+    font-size: 14px;
+}
+
+.tcv_xtitle {
+    color: var(--tcv-x-color);
+}
+
+.tcv_ytitle {
+    color: var(--tcv-y-color);
+}
+
+.tcv_ztitle {
+    color: var(--tcv-z-color);
+}
+
+.tcv_angle {
+    font-size: 14px;
+    font-family: sans-serif;
+}
+
+.tcv_angle_val {
+    text-align: right;
 }