From 464c431ac6f2c45b5e917e052509c1ed615ddd22 Mon Sep 17 00:00:00 2001 From: kovacsv Date: Sat, 28 Aug 2021 11:48:29 +0200 Subject: [PATCH] Update dark mode styles. --- website/info/info.css | 6 +++--- website/o3dv/css/controls.css | 20 ++++++++++---------- website/o3dv/css/core.css | 17 +++++++++-------- website/o3dv/css/dialogs.css | 8 ++++---- website/o3dv/css/treeview.css | 6 +++--- website/o3dv/css/website.css | 26 +++++++++++++------------- website/o3dv/js/themehandler.js | 32 +++++++++++++++++--------------- 7 files changed, 59 insertions(+), 56 deletions(-) diff --git a/website/info/info.css b/website/info/info.css index 8f3a0ba..e788fbb 100644 --- a/website/info/info.css +++ b/website/info/info.css @@ -56,7 +56,7 @@ h1 margin-top: 30px; margin-bottom: 20px; padding: 10px 0px; - border-bottom: 1px solid var(--ov_light_border_color); + border-bottom: 1px solid var(--ov_border_color); } h1 a @@ -76,7 +76,7 @@ h2 margin-top: 30px; margin-bottom: 20px; padding: 10px 0px; - border-bottom: 1px solid var(--ov_light_border_color); + border-bottom: 1px solid var(--ov_border_color); } h3 @@ -120,7 +120,7 @@ table table td, th { padding: 10px; - border: 1px solid var(--ov_light_border_color); + border: 1px solid var(--ov_border_color); } table th diff --git a/website/o3dv/css/controls.css b/website/o3dv/css/controls.css index 60b5304..1efef78 100644 --- a/website/o3dv/css/controls.css +++ b/website/o3dv/css/controls.css @@ -26,7 +26,7 @@ div.ov_svg_icon.light div.ov_svg_icon.selected { - color: var(--ov_primary_color); + color: var(--ov_button_color); } div.ov_thin_scrollbar @@ -48,18 +48,18 @@ div.ov_thin_scrollbar::-webkit-scrollbar-thumb div.ov_button { - color: var(--ov_secondary_color); - background: var(--ov_primary_color); + color: var(--ov_button_text_color); + background: var(--ov_button_color); text-align: center; padding: 3px; - border: 1px solid var(--ov_primary_color); + border: 1px solid var(--ov_button_color); border-radius: 5px; cursor: pointer; } div.ov_button.outline { - color: var(--ov_primary_color); + color: var(--ov_button_color); background: transparent; } @@ -67,7 +67,7 @@ div.ov_tooltip { color: var(--ov_foreground_color); background: var(--ov_background_color); - border: 1px solid var(--ov_light_border_color); + border: 1px solid var(--ov_border_color); padding: 5px 10px; border-radius: 5px; position: absolute; @@ -79,14 +79,14 @@ div.ov_tooltip div.ov_button:hover { - background: var(--ov_primary_hover_color); - border: 1px solid var(--ov_primary_hover_color); + background: var(--ov_button_hover_color); + border: 1px solid var(--ov_button_hover_color); } div.ov_button.outline:hover { - background: var(--ov_secondary_hover_color); - border: 1px solid var(--ov_primary_color); + background: var(--ov_hover_color); + border: 1px solid var(--ov_button_color); } } diff --git a/website/o3dv/css/core.css b/website/o3dv/css/core.css index 9a3228f..95d1464 100644 --- a/website/o3dv/css/core.css +++ b/website/o3dv/css/core.css @@ -2,20 +2,21 @@ { --ov_foreground_color: #000000; --ov_background_color: #ffffff; - --ov_primary_color: #3393bd; - --ov_primary_hover_color: #146a8f; - --ov_secondary_color: #ffffff; - --ov_secondary_hover_color: #e4f4ff; + --ov_button_color: #3393bd; + --ov_button_hover_color: #146a8f; + --ov_button_text_color: #ffffff; --ov_icon_color: #263238; + --ov_hover_color: #c9e5f8; --ov_light_icon_color: #838383; --ov_logo_text_color: #15334a; --ov_logo_border_color: #000000; --ov_toolbar_background_color: #f5f5f5; - --ov_toolbar_selected_background_color: #e1e1e1; + --ov_toolbar_selected_color: #e1e1e1; + --ov_toolbar_separator_color: #cccccc; + --ov_treeview_selected_color: #eeeeee; --ov_dialog_foreground_color: #000000; --ov_dialog_background_color: #ffffff; - --ov_border_color: #cccccc; - --ov_light_border_color: #dddddd; + --ov_border_color: #dddddd; --ov_shadow: 0px 0px 10px #cccccc; --ov_small_shadow: 0px 0px 3px #cccccc; } @@ -41,7 +42,7 @@ html, body a { - color: var(--ov_primary_color); + color: var(--ov_button_color); text-decoration: none; } diff --git a/website/o3dv/css/dialogs.css b/website/o3dv/css/dialogs.css index 0e21e04..d665397 100644 --- a/website/o3dv/css/dialogs.css +++ b/website/o3dv/css/dialogs.css @@ -104,7 +104,7 @@ div.ov_dialog a.ov_dialog_file_link div.ov_dialog div.ov_file_link_img { - color: var(--ov_primary_color); + color: var(--ov_button_color); margin-right: 10px; float: left; } @@ -117,7 +117,7 @@ div.ov_dialog div.ov_dialog_file_link_text div.ov_dialog div.ov_dialog_copyable_input { padding: 3px; - border: 1px solid var(--ov_light_border_color); + border: 1px solid var(--ov_border_color); border-radius: 5px; overflow: auto; } @@ -221,12 +221,12 @@ div.ov_progress div.ov_progress_text div.ov_dialog a.ov_dialog_file_link:hover { - background: var(--ov_secondary_hover_color); + background: var(--ov_hover_color); } div.ov_popup div.ov_popup_list_item:hover { - background: var(--ov_secondary_hover_color); + background: var(--ov_hover_color); } } diff --git a/website/o3dv/css/treeview.css b/website/o3dv/css/treeview.css index de80148..d426e66 100644 --- a/website/o3dv/css/treeview.css +++ b/website/o3dv/css/treeview.css @@ -12,8 +12,8 @@ div.ov_tree_view div.ov_tree_item div.ov_tree_view div.ov_tree_item.selected { - background: #eeeeee; - font-weight: bold;; + background: var(--ov_treeview_selected_color); + font-weight: bold; } div.ov_tree_view div.ov_tree_item.clickable @@ -59,7 +59,7 @@ div.ov_tree_view div.ov_tree_view_children div.ov_tree_view div.ov_tree_item.clickable:hover { - background: var(--ov_secondary_hover_color); + background: var(--ov_hover_color); } } diff --git a/website/o3dv/css/website.css b/website/o3dv/css/website.css index a3fafa2..339e144 100644 --- a/website/o3dv/css/website.css +++ b/website/o3dv/css/website.css @@ -125,7 +125,7 @@ div.main_sidebar div.main_viewer canvas { margin: 10px; - border: 1px solid var(--ov_light_border_color); + border: 1px solid var(--ov_border_color); outline: none; display: block; } @@ -150,12 +150,12 @@ div.ov_toolbar div.ov_toolbar_button.right div.ov_toolbar div.ov_toolbar_button.selected { - background: var(--ov_toolbar_selected_background_color); + background: var(--ov_toolbar_selected_color); } div.ov_toolbar div.ov_toolbar_separator { - background: var(--ov_border_color); + background: var(--ov_toolbar_separator_color); width: 1px; height: 28px; margin: 5px 8px; @@ -170,7 +170,7 @@ div.ov_navigator_tree_title overflow: hidden; padding-bottom: 10px; margin-bottom: 10px; - border-bottom: 1px solid var(--ov_light_border_color); + border-bottom: 1px solid var(--ov_border_color); } div.ov_navigator_tree_panel @@ -182,14 +182,14 @@ div.ov_navigator_tree_panel div.ov_navigator_info_panel { overflow: auto; - border-top: 1px solid var(--ov_light_border_color); + border-top: 1px solid var(--ov_border_color); } div.ov_navigator_info_panel div.ov_navigator_info_button { cursor: pointer; margin-top: 10px; - border: 1px solid var(--ov_light_border_color); + border: 1px solid var(--ov_border_color); border-radius: 5px; overflow: auto; } @@ -215,7 +215,7 @@ div.ov_sidebar_title overflow: hidden; padding-bottom: 10px; margin-bottom: 10px; - border-bottom: 1px solid var(--ov_light_border_color); + border-bottom: 1px solid var(--ov_border_color); } div.ov_sidebar_title div.ov_sidebar_title_text @@ -290,7 +290,7 @@ div.ov_property_table_custom { margin-top: 8px; padding-top: 8px; - border-top: 1px solid var(--ov_light_border_color); + border-top: 1px solid var(--ov_border_color); } div.ov_property_table div.ov_property_table_row @@ -336,7 +336,7 @@ div.ov_property_table div.ov_property_table_value div.ov_property_table div.ov_property_table_button { - color: var(--ov_primary_color); + color: var(--ov_button_color); cursor: pointer; } @@ -345,22 +345,22 @@ div.ov_property_table div.ov_property_table_button div.title_right div.header_button:hover { - color: var(--ov_primary_color); + color: var(--ov_button_color); } div.ov_toolbar div.ov_toolbar_button:hover { - background: #c9e5f8; + background: var(--ov_hover_color); } div.ov_navigator_info_panel div.ov_navigator_info_panel_title:hover { - background: var(--ov_secondary_hover_color); + background: var(--ov_hover_color); } div.ov_navigator_info_panel div.ov_navigator_info_button:hover { - background: var(--ov_secondary_hover_color); + background: var(--ov_hover_color); } } diff --git a/website/o3dv/js/themehandler.js b/website/o3dv/js/themehandler.js index 327eaff..0d0eebd 100644 --- a/website/o3dv/js/themehandler.js +++ b/website/o3dv/js/themehandler.js @@ -5,20 +5,21 @@ OV.ThemeHandler = class { 'css' : { '--ov_foreground_color': '#000000', '--ov_background_color': '#ffffff', - '--ov_primary_color': '#3393bd', - '--ov_primary_hover_color': '#146a8f', - '--ov_secondary_color': '#ffffff', - '--ov_secondary_hover_color': '#e4f4ff', + '--ov_button_color': '#3393bd', + '--ov_button_hover_color': '#146a8f', + '--ov_button_text_color': '#ffffff', '--ov_icon_color': '#263238', + '--ov_hover_color': '#c9e5f8', '--ov_light_icon_color': '#838383', '--ov_logo_text_color': '#15334a', '--ov_logo_border_color': '#000000', '--ov_toolbar_background_color': '#f5f5f5', - '--ov_toolbar_selected_background_color': '#e1e1e1', + '--ov_toolbar_selected_color': '#e1e1e1', + '--ov_toolbar_separator_color': '#cccccc', + '--ov_treeview_selected_color': '#eeeeee', '--ov_dialog_foreground_color': '#000000', '--ov_dialog_background_color': '#ffffff', - '--ov_border_color': '#cccccc', - '--ov_light_border_color': '#dddddd', + '--ov_border_color': '#dddddd', '--ov_shadow': '0px 0px 10px #cccccc', '--ov_small_shadow': '0px 0px 3px #cccccc' } @@ -26,21 +27,22 @@ OV.ThemeHandler = class { 'dark' : { 'css' : { '--ov_foreground_color': '#fafafa', - '--ov_background_color': '#222222', - '--ov_primary_color': '#3393bd', - '--ov_primary_hover_color': '#146a8f', - '--ov_secondary_color': '#ffffff', - '--ov_secondary_hover_color': '#e4f4ff', + '--ov_background_color': '#2a2b2e', + '--ov_button_color': '#3393bd', + '--ov_button_hover_color': '#146a8f', + '--ov_button_text_color': '#ffffff', '--ov_icon_color': '#fafafa', + '--ov_hover_color': '#667c86', '--ov_light_icon_color': '#dadada', '--ov_logo_text_color': '#fafafa', '--ov_logo_border_color': '#fafafa', - '--ov_toolbar_background_color': '#333333', - '--ov_toolbar_selected_background_color': '#444444', + '--ov_toolbar_background_color': '#3d3e42', + '--ov_toolbar_selected_color': '#272727', + '--ov_toolbar_separator_color': '#888888', + '--ov_treeview_selected_color': '#38393d', '--ov_dialog_foreground_color': '#fafafa', '--ov_dialog_background_color': '#333333', '--ov_border_color': '#444444', - '--ov_light_border_color': '#333333', '--ov_shadow': 'none', '--ov_small_shadow': 'none' }