Doni/ModelHandle
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add theme handler.

Browse Source
This commit is contained in:
kovacsv 2021-08-19 07:46:37 +02:00
parent d1c2b30adc
commit 9864ac8cdb
9 changed files with 72 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
tools/config.json
View File

@ -86,6 +86,7 @@
"website/o3dv/js/sidebar.js",
"website/o3dv/js/hashhandler.js",
"website/o3dv/js/loader.js",
"website/o3dv/js/themehandler.js",
"website/o3dv/js/website.js",
"website/o3dv/js/embed.js"
],

1
website/embed.html
View File

@ -107,6 +107,7 @@
<script type="text/javascript" src="o3dv/js/sidebar.js"></script>
<script type="text/javascript" src="o3dv/js/hashhandler.js"></script>
<script type="text/javascript" src="o3dv/js/loader.js"></script>
<script type="text/javascript" src="o3dv/js/themehandler.js"></script>
<script type="text/javascript" src="o3dv/js/website.js"></script>
<script type="text/javascript" src="o3dv/js/embed.js"></script>
<!-- website end -->

1
website/index.html
View File

@ -107,6 +107,7 @@
<script type="text/javascript" src="o3dv/js/sidebar.js"></script>
<script type="text/javascript" src="o3dv/js/hashhandler.js"></script>
<script type="text/javascript" src="o3dv/js/loader.js"></script>
<script type="text/javascript" src="o3dv/js/themehandler.js"></script>
<script type="text/javascript" src="o3dv/js/website.js"></script>
<script type="text/javascript" src="o3dv/js/embed.js"></script>
<!-- website end -->

2
website/o3dv/css/controls.css
View File

@ -71,7 +71,7 @@ div.ov_tooltip
padding: 5px 10px;
border-radius: 5px;
position: absolute;
box-shadow: 0px 0px 3px #cccccc;
box-shadow: var(--ov_small_shadow);
}
@media (hover)

2
website/o3dv/css/core.css
View File

@ -12,6 +12,8 @@
--ov_toolbar_selected_background_color: #e1e1e1;
--ov_border_color: #cccccc;
--ov_light_border_color: #dddddd;
--ov_shadow: 0px 0px 10px #cccccc;
--ov_small_shadow: 0px 0px 3px #cccccc;
}
@font-face

9
website/o3dv/css/dialogs.css
View File

@ -9,7 +9,7 @@ div.ov_dialog
background: var(--ov_background_color);
width: 400px;
padding: 20px;
box-shadow: 0px 0px 10px #cccccc;
box-shadow: var(--ov_shadow);
border-radius: 5px;
}
@ -124,7 +124,8 @@ div.ov_dialog div.ov_dialog_copyable_input
div.ov_dialog div.ov_dialog_copyable_input input
{
color: #666666;
color: var(--ov_foreground_color);
background: var(--ov_background_color);
width: 70%;
margin-top: 6px;
box-sizing: border-box;
@ -160,7 +161,7 @@ div.ov_popup
background: var(--ov_background_color);
width: 200px;
padding: 10px;
box-shadow: 0px 0px 10px #cccccc;
box-shadow: var(--ov_shadow);
border-radius: 5px;
}
@ -197,7 +198,7 @@ div.ov_progress
text-align: center;
width: 400px;
padding: 20px;
box-shadow: 0px 0px 10px #cccccc;
box-shadow: var(--ov_shadow);
border-radius: 5px;
}

2
website/o3dv/css/website.css
View File

@ -146,7 +146,7 @@ div.ov_toolbar div.ov_toolbar_button.selected
div.ov_toolbar div.ov_toolbar_separator
{
background: #cccccc;
background: var(--ov_border_color);
width: 1px;
height: 28px;
margin: 5px 8px;

57
website/o3dv/js/themehandler.js Normal file
View File

@ -0,0 +1,57 @@
OV.ThemeHandler = class {
constructor () {
this.themes = {
'light' : {
'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_icon_color': '#263238',
'--ov_light_icon_color': '#838383',
'--ov_toolbar_background_color': '#f5f5f5',
'--ov_toolbar_selected_background_color': '#e1e1e1',
'--ov_border_color': '#cccccc',
'--ov_light_border_color': '#dddddd',
'--ov_shadow': '0px 0px 10px #cccccc',
'--ov_small_shadow': '0px 0px 3px #cccccc'
}
},
'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_icon_color': '#fafafa',
'--ov_light_icon_color': '#dadada',
'--ov_toolbar_background_color': '#333333',
'--ov_toolbar_selected_background_color': '#444444',
'--ov_border_color': '#444444',
'--ov_light_border_color': '#333333',
'--ov_shadow': 'none',
'--ov_small_shadow': 'none'
}
}
};
}
SwitchTheme (name)
{
let theme = this.themes[name];
if (theme === undefined) {
return;
}
let root = document.querySelector (':root');
for (let property in theme.css) {
if (Object.prototype.hasOwnProperty.call (theme.css, property)) {
root.style.setProperty (property, theme.css[property]);
}
}
}
};

3
website/o3dv/js/website.js
View File

@ -65,6 +65,9 @@ OV.Website = class
$(window).on ('resize', () => {
this.Resize ();
});
let themeHandler = new OV.ThemeHandler ();
themeHandler.SwitchTheme ('dark');
}
Resize ()