(1) Remove obsolete code,

(2) let the sass-files compile at the end to one large file to avoid loading the mixins and variables in each single file,
(3) Some minor style improvements in the sidebar

modules/ifc_models/app/assets/stylesheets/ifc_viewer/generic.sass

@@ -1,6 +1,10 @@
 // -------------------------- GENERIC --------------------------
 @import "openproject/variables"
 @import "openproject/mixins"
+@import "fonts/openproject_icon_definitions"
+
+@import "tabs"
+@import "toolbar"
 
 // The IFC viewer shall fill the viewport to the bottom.
 // This is different to how we style #content else where.

modules/ifc_models/app/assets/stylesheets/ifc_viewer/tabs.sass

@@ -1,31 +1,13 @@
 // -------------------------- GENERIC --------------------------
 .ifc-model-viewer--tree-panel
-  color: white
-  min-width: 320px
-
-  ul.components
-    padding: 20px 0
-    border-bottom: 1px solid #47748b
+  padding: 0 15px
+  @include varprop(color, main-menu-font-color)
 
   label
-    color: white
+    @include varprop(color, main-menu-font-color)
 
 // -------------------------- XEOKIT specific --------------------------
 .xeokit-tabs
-  line-height: 1.5
-  margin-bottom: 1.5em
-  padding: 0
-
-  &::before
-    display: table
-    content: ''
-    clear: both
-
-  &::after
-    display: table
-    content: ''
-    clear: both
-
   .xeokit-tab
     display: inline
 
@@ -36,58 +18,34 @@
       .xeokit-tab-content
         display: block
 
+  .xeokit-tab-content
+    display: none
+    padding: 1.5em 10px
+    width: 100%
+    height: 100%
+    float: left
+
   .xeokit-tab-button
     background-color: transparent
     color: #ffffff
     display: inline-block
     font-weight: bold
-    padding: 0.75em 5px
+    padding: 0.75em 5px !important
     text-decoration: none
+
     &:hover
-      color: #477dca
       border-bottom: 2px solid white
 
     &:focus
       outline: none
 
-  .xeokit-tab-content
-    display: none
-    padding: 1.5em 10px
-    width: 100%
-    height: 100%
-    float: left
-
   .xeokit-btn-group
-    flex-wrap: wrap
-    justify-content: flex-start
     margin-bottom: 10px
 
-  .xeokit-btn
-    position: relative
-    flex: 1 1 auto
-    color: #ffffff
-    background-color: transparent
-    text-align: center
-    vertical-align: middle
-    border: 1px solid #ffffff
-    padding: .375rem .75rem
-    border-radius: .25rem
-    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
-    -webkit-appearance: button
-    overflow: visible
-    margin: 0
-    box-sizing: border-box
-    align-items: flex-start
-
-    &.disabled
-      opacity: .55
-
-  &.active
-    .xeokit-tab-button
+    .xeokit-btn
+      color: #ffffff
       background-color: transparent
-      border: 1px solid #dcdcdc
-      border-bottom-color: #7386D5
-      margin-bottom: -1px
+      border: 1px solid #ffffff
 
 .xeokit-objectsTab
   ul

modules/ifc_models/app/assets/stylesheets/ifc_viewer/toolbar.sass

@@ -1,5 +1,3 @@
-@import "fonts/openproject_icon_definitions"
-
 // -------------------------- GENERIC --------------------------
 .ifc-model-viewer--toolbar-container
   position: absolute

modules/ifc_models/app/views/ifc_models/ifc_models/show.html.erb

@@ -34,8 +34,6 @@ See doc/COPYRIGHT.rdoc for more details.
 
 <% content_for :header_tags do %>
   <%= stylesheet_link_tag "ifc_viewer/generic", media: 'all' %>
-  <%= stylesheet_link_tag "ifc_viewer/tabs", media: 'all' %>
-  <%= stylesheet_link_tag "ifc_viewer/toolbar", media: 'all' %>
   <%= include_gon(nonce: content_security_policy_script_nonce) %>
 <% end %>
 

modules/ifc_models/lib/open_project/ifc_models/engine.rb

@@ -54,8 +54,6 @@ module OpenProject::IFCModels
 
     assets %w(
       ifc_viewer/generic.css
-      ifc_viewer/tabs.css
-      ifc_viewer/toolbar.css
     )
 
     initializer 'ifc_models.menu' do