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

CSS refactor.

Browse Source
This commit is contained in:
kovacsv 2021-08-15 10:00:40 +02:00
parent 9c3ccab0f5
commit 9e74a28d0b
14 changed files with 475 additions and 439 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
tools/config.json
View File

@ -90,6 +90,11 @@
"website/o3dv/js/embed.js"
],
"website_files_css" : [
"website/o3dv/css/website.css"
"website/o3dv/css/core.css",
"website/o3dv/css/controls.css",
"website/o3dv/css/dialogs.css",
"website/o3dv/css/treeview.css",
"website/o3dv/css/website.css",
"website/o3dv/css/embed.css"
]
}

5
website/embed.html
View File

@ -80,7 +80,12 @@
<!-- engine end -->
<!-- website start -->
<link rel="stylesheet" type="text/css" href="o3dv/css/core.css">
<link rel="stylesheet" type="text/css" href="o3dv/css/controls.css">
<link rel="stylesheet" type="text/css" href="o3dv/css/dialogs.css">
<link rel="stylesheet" type="text/css" href="o3dv/css/treeview.css">
<link rel="stylesheet" type="text/css" href="o3dv/css/website.css">
<link rel="stylesheet" type="text/css" href="o3dv/css/embed.css">
<script type="text/javascript" src="o3dv/js/featureset.js"></script>
<script type="text/javascript" src="o3dv/js/eventhandler.js"></script>
<script type="text/javascript" src="o3dv/js/utils.js"></script>

5
website/index.html
View File

@ -80,7 +80,12 @@
<!-- engine end -->
<!-- website start -->
<link rel="stylesheet" type="text/css" href="o3dv/css/core.css">
<link rel="stylesheet" type="text/css" href="o3dv/css/controls.css">
<link rel="stylesheet" type="text/css" href="o3dv/css/dialogs.css">
<link rel="stylesheet" type="text/css" href="o3dv/css/treeview.css">
<link rel="stylesheet" type="text/css" href="o3dv/css/website.css">
<link rel="stylesheet" type="text/css" href="o3dv/css/embed.css">
<script type="text/javascript" src="o3dv/js/featureset.js"></script>
<script type="text/javascript" src="o3dv/js/eventhandler.js"></script>
<script type="text/javascript" src="o3dv/js/utils.js"></script>

2
website/info/info.css
View File

@ -15,7 +15,7 @@ html, body
a
{
color: #3393bd;
color: var(--ov_primary_color);
text-decoration: none;
}

50
website/o3dv/css/controls.css Normal file
View File

@ -0,0 +1,50 @@
img.ov_svg_icon
{
width: 18px;
height: 18px;
}
div.ov_thin_scrollbar
{
scrollbar-color: #cccccc transparent;
scrollbar-width: thin;
}
div.ov_thin_scrollbar::-webkit-scrollbar
{
width: 3px;
height: 3px;
}
div.ov_thin_scrollbar::-webkit-scrollbar-thumb
{
background: #cccccc;
}
div.ov_button
{
color: var(--ov_primary_text_color);
background: var(--ov_primary_color);
text-align: center;
padding: 3px;
border: 1px solid var(--ov_primary_color);
border-radius: 5px;
cursor: pointer;
}
div.ov_button.outline
{
color: var(--ov_primary_color);
background: transparent;
}
div.ov_tooltip
{
color: var(--ov_foreground_color);
background: var(--ov_background_color);
border: 1px solid #dddddd;
padding: 5px 10px;
border-radius: 5px;
position: absolute;
box-shadow: 0px 0px 3px #cccccc;
}

68
website/o3dv/css/core.css Normal file
View File

@ -0,0 +1,68 @@
:root
{
--ov_foreground_color: #000000;
--ov_background_color: #ffffff;
--ov_primary_text_color: #ffffff;
--ov_primary_color: #3393bd;
}
@font-face
{
font-family: Quicksand;
src: url('Quicksand/Quicksand-Regular.ttf');
}
html, body
{
color: var(--ov_foreground_color);
background: var(--ov_background_color);
font-size: 16px;
font-family: Quicksand, Helvetica, sans-serif;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
a
{
color: var(--ov_primary_color);
text-decoration: none;
}
img
{
display: block;
}
@media (hover)
{
a:hover
{
text-decoration: underline;
}
}
@media only screen and (max-width: 700px)
{
.only_full_width
{
display: none;
}
}
@media only screen and (max-height: 700px)
{
.only_full_height
{
display: none;
}
}

253
website/o3dv/css/dialogs.css Normal file
View File

@ -0,0 +1,253 @@
div.ov_modal_overlay
{
position: absolute;
}
div.ov_dialog
{
color: var(--ov_foreground_color);
background: var(--ov_background_color);
width: 400px;
padding: 20px;
box-shadow: 0px 0px 10px #cccccc;
border-radius: 5px;
}
div.ov_dialog div.ov_dialog_title
{
font-size: 19px;
font-weight: bold;
}
div.ov_dialog div.ov_dialog_inner_title
{
font-weight: bold;
margin-bottom: 10px;
}
div.ov_dialog div.ov_dialog_content
{
padding: 20px 0px;
overflow: auto;
}
div.ov_dialog div.ov_dialog_section
{
margin: 10px 0px;
overflow: auto;
}
div.ov_dialog div.ov_dialog_buttons
{
overflow: auto;
}
div.ov_dialog div.ov_dialog_buttons_inner
{
float: right;
overflow: auto;
}
div.ov_dialog div.ov_dialog_buttons div.ov_dialog_button
{
margin-left: 10px;
width: 80px;
float: left;
}
div.ov_dialog div.ov_dialog_message
{
overflow: auto;
}
div.ov_dialog div.ov_dialog_submessage
{
margin-top: 10px;
font-size: 14px;
}
div.ov_dialog textarea.ov_dialog_textarea
{
margin: 10px 0px;
width: 100%;
height: 120px;
border: 1px solid #cccccc;
outline: none;
box-sizing: border-box;
}
div.ov_dialog div.ov_dialog_select
{
margin: 20px 0px;
overflow: auto;
}
div.ov_dialog div.ov_dialog_select div.ov_dialog_select_option
{
margin-right: 5px;
float: left;
}
div.ov_dialog div.ov_dialog_file_list
{
max-height: 105px;
overflow: auto;
}
div.ov_dialog a.ov_dialog_file_link
{
padding: 5px;
display: block;
overflow: auto;
border-radius: 5px;
}
div.ov_dialog img.ov_dialog_file_link_icon
{
margin-right: 10px;
float: left;
}
div.ov_dialog div.ov_dialog_file_link_text
{
float: left;
}
div.ov_dialog div.ov_dialog_copyable_input
{
padding: 3px;
border: 1px solid #dddddd;
border-radius: 5px;
overflow: auto;
}
div.ov_dialog div.ov_dialog_copyable_input input
{
color: #666666;
width: 70%;
margin-top: 6px;
box-sizing: border-box;
outline: none;
float: left;
border: 0px;
box-sizing: border-box;
}
div.ov_dialog div.ov_dialog_copyable_input div.ov_dialog_copyable_input_button
{
width: 28%;
margin-left: 0px;
box-sizing: border-box;
cursor: pointer;
float: right;
}
div.ov_dialog div.ov_dialog_row
{
padding: 2px 0px;
overflow: auto;
}
div.ov_dialog input.ov_dialog_checkradio
{
margin-right: 10px;
}
div.ov_popup
{
color: var(--ov_foreground_color);
background: var(--ov_background_color);
width: 200px;
padding: 10px;
box-shadow: 0px 0px 10px #cccccc;
border-radius: 5px;
}
div.ov_popup div.ov_popup_list
{
max-height: 200px;
overflow: auto;
}
div.ov_popup div.ov_popup_list_item
{
padding: 10px;
border-radius: 5px;
cursor: pointer;
overflow: auto;
}
div.ov_popup img.ov_popup_list_item_icon
{
margin-right: 10px;
margin-top: 2px;
float: left;
}
div.ov_popup div.ov_popup_list_item_icon
{
float: left;
}
div.ov_popup div.ov_popup_list_item_name
{
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
div.ov_progress
{
color: var(--ov_foreground_color);
background: var(--ov_background_color);
text-align: center;
width: 400px;
padding: 20px;
box-shadow: 0px 0px 10px #cccccc;
border-radius: 5px;
}
div.ov_progress img.ov_progress_img
{
height: 80px;
margin-bottom: 10px;
display: inline;
}
div.ov_progress div.ov_progress_text
{
font-size: 19px;
text-align: center;
}
@media (hover)
{
div.ov_dialog a.ov_dialog_file_link:hover
{
background: #e4f4ff;
}
div.ov_popup div.ov_popup_list_item:hover
{
background: #e4f4ff;
}
}
@media only screen and (max-width: 700px)
{
div.ov_dialog
{
max-width: 80%;
}
div.ov_progress
{
max-width: 80%;
}
}

12
website/o3dv/css/embed.css Normal file
View File

@ -0,0 +1,12 @@
div.embed_viewer
{
overflow: auto;
}
div.embed_viewer img.embed_logo
{
height: 40px;
position: absolute;
right: 10px;
bottom: 10px;
}

64
website/o3dv/css/treeview.css Normal file
View File

@ -0,0 +1,64 @@
div.ov_tree_view
{
user-select: none;
}
div.ov_tree_view div.ov_tree_item
{
overflow: auto;
border-radius: 5px;
padding-right: 5px;
}
div.ov_tree_view div.ov_tree_item.selected
{
background: #eeeeee;
font-weight: bold;;
}
div.ov_tree_view div.ov_tree_item.clickable
{
cursor: pointer;
border-radius: 5px;
}
div.ov_tree_view div.ov_tree_item_button_container
{
float: right;
}
div.ov_tree_view img.ov_tree_item_button
{
padding: 5px;
float: left;
cursor: pointer;
}
div.ov_tree_view img.ov_tree_item_icon
{
padding: 5px;
float: left;
}
div.ov_tree_view div.ov_tree_item_name
{
padding: 4px 5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
div.ov_tree_view div.ov_tree_view_children
{
margin-left: 28px;
}
@media (hover)
{
div.ov_tree_view div.ov_tree_item.clickable:hover
{
background: #e4f4ff;
}
}

433
website/o3dv/css/website.css
View File

@ -1,39 +1,3 @@
@font-face
{
font-family: Quicksand;
src: url('Quicksand/Quicksand-Regular.ttf');
}
html, body
{
color: #000000;
background: #ffffff;
font-size: 16px;
font-family: Quicksand, Helvetica, sans-serif;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
a
{
color: #3393bd;
text-decoration: none;
}
img
{
display: block;
}
img.ov_svg_icon
{
width: 18px;
height: 18px;
}
div.ov_color_circle
{
background: #ffffff;
@ -72,7 +36,6 @@ div.title div.logo_text
{
font-size: 16px;
font-weight: bold;
color: #000000;
padding: 10px;
float: left;
}
@ -131,7 +94,7 @@ div.intro div.intro_big_text
div.main
{
overflow: auto;
}
div.main_navigator
@ -163,30 +126,6 @@ div.main_viewer canvas
display: block;
}
div.embed_viewer
{
}
div.embed_viewer img.embed_logo
{
height: 40px;
position: absolute;
right: 10px;
bottom: 10px;
}
div.ov_tooltip
{
color: #000000;
background: #ffffff;
border: 1px solid #dddddd;
padding: 5px 10px;
border-radius: 5px;
position: absolute;
box-shadow: 0px 0px 3px #cccccc;
}
div.ov_toolbar
{
overflow: auto;
@ -317,323 +256,9 @@ div.ov_sidebar_content button.pcr-button
float: left;
}
div.ov_sidebar_content div.ov_sidebar_settings_button
{
color: #3393bd;
background: transparent;
text-align: center;
padding: 3px;
border: 1px solid #3393bd;
border-radius: 5px;
cursor: pointer;
}
div.ov_tree_view
{
user-select: none;
}
div.ov_tree_view div.ov_tree_item
{
overflow: auto;
border-radius: 5px;
padding-right: 5px;
}
div.ov_tree_view div.ov_tree_item.selected
{
background: #eeeeee;
font-weight: bold;;
}
div.ov_tree_view div.ov_tree_item.clickable
{
cursor: pointer;
border-radius: 5px;
}
div.ov_tree_view div.ov_tree_item_button_container
{
float: right;
}
div.ov_tree_view img.ov_tree_item_button
{
padding: 5px;
float: left;
cursor: pointer;
}
div.ov_tree_view img.ov_tree_item_icon
{
padding: 5px;
float: left;
}
div.ov_tree_view div.ov_tree_item_name
{
padding: 4px 5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
div.ov_tree_view div.ov_tree_view_children
{
margin-left: 28px;
}
div.ov_modal_overlay
{
}
div.ov_dialog
{
background: #ffffff;
width: 400px;
padding: 20px;
box-shadow: 0px 0px 10px #cccccc;
border-radius: 5px;
}
div.ov_dialog div.ov_dialog_title
{
font-size: 19px;
font-weight: bold;
}
div.ov_dialog div.ov_dialog_inner_title
{
font-weight: bold;
margin-bottom: 10px;
}
div.ov_dialog div.ov_dialog_content
{
padding: 20px 0px;
overflow: auto;
}
div.ov_dialog div.ov_dialog_section
{
margin: 10px 0px;
overflow: auto;
}
div.ov_dialog div.ov_dialog_buttons
{
overflow: auto;
}
div.ov_dialog div.ov_dialog_buttons_inner
{
float: right;
overflow: auto;
}
div.ov_dialog div.ov_dialog_button
{
color: #ffffff;
background: #3393bd;
text-align: center;
margin-left: 10px;
padding: 3px;
width: 80px;
border: 1px solid #3393bd;
border-radius: 5px;
cursor: pointer;
float: left;
}
div.ov_dialog div.ov_dialog_button.outline
{
color: #3393bd;
background: transparent;
}
div.ov_dialog div.ov_dialog_message
{
}
div.ov_dialog div.ov_dialog_submessage
{
margin-top: 10px;
font-size: 14px;
}
div.ov_dialog textarea.ov_dialog_textarea
{
margin: 10px 0px;
width: 100%;
height: 120px;
border: 1px solid #cccccc;
outline: none;
box-sizing: border-box;
}
div.ov_dialog div.ov_dialog_select
{
margin: 20px 0px;
overflow: auto;
}
div.ov_dialog div.ov_dialog_select_option
{
color: #3393bd;
text-align: center;
padding: 3px;
margin-right: 5px;
border: 1px solid #3393bd;
border-radius: 5px;
cursor: pointer;
float: left;
}
div.ov_dialog div.ov_dialog_select_option.selected
{
color: #ffffff;
background: #3393bd;
}
div.ov_dialog div.ov_dialog_file_list
{
max-height: 105px;
overflow: auto;
}
div.ov_dialog a.ov_dialog_file_link
{
padding: 5px;
display: block;
overflow: auto;
border-radius: 5px;
}
div.ov_dialog img.ov_dialog_file_link_icon
{
margin-right: 10px;
float: left;
}
div.ov_dialog div.ov_dialog_file_link_text
{
float: left;
}
div.ov_dialog div.ov_dialog_copyable_input
{
padding: 3px;
border: 1px solid #dddddd;
border-radius: 5px;
overflow: auto;
}
div.ov_dialog div.ov_dialog_copyable_input input
{
color: #666666;
width: 70%;
margin-top: 6px;
box-sizing: border-box;
outline: none;
float: left;
border: 0px;
box-sizing: border-box;
}
div.ov_dialog div.ov_dialog_copyable_input div.button
{
color: #3393bd;
width: 28%;
text-align: center;
padding: 3px;
border: 1px solid #3393bd;
border-radius: 5px;
box-sizing: border-box;
cursor: pointer;
float: right;
}
div.ov_dialog div.ov_dialog_row
{
padding: 2px 0px;
overflow: auto;
}
div.ov_dialog input.ov_dialog_checkradio
{
margin-right: 10px;
}
div.ov_popup
{
background: #ffffff;
width: 200px;
padding: 10px;
box-shadow: 0px 0px 10px #cccccc;
border-radius: 5px;
}
div.ov_popup div.ov_popup_list
{
max-height: 200px;
overflow: auto;
}
div.ov_popup div.ov_popup_list_item
{
padding: 10px;
border-radius: 5px;
cursor: pointer;
overflow: auto;
}
div.ov_popup img.ov_popup_list_item_icon
{
margin-right: 10px;
margin-top: 2px;
float: left;
}
div.ov_popup div.ov_popup_list_item_icon
{
float: left;
}
div.ov_popup div.ov_popup_list_item_name
{
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
div.ov_progress
{
background: #ffffff;
text-align: center;
width: 400px;
padding: 20px;
box-shadow: 0px 0px 10px #cccccc;
border-radius: 5px;
}
div.ov_progress img.ov_progress_img
{
height: 80px;
margin-bottom: 10px;
display: inline;
}
div.ov_progress div.ov_progress_text
{
font-size: 19px;
text-align: center;
}
div.ov_property_table
{
overflow: auto;
}
div.ov_property_table_custom
@ -670,11 +295,6 @@ div.ov_property_table div.ov_property_table_cell
box-sizing: border-box;
}
div.ov_property_table_custom div.ov_property_table_cell
{
}
div.ov_property_table div.ov_property_table_name
{
width: 49%;
@ -691,60 +311,23 @@ div.ov_property_table div.ov_property_table_value
div.ov_property_table div.ov_property_table_button
{
color: #3393bd;
color: var(--ov_primary_color);
cursor: pointer;
}
div.ov_thin_scrollbar
{
scrollbar-color: #cccccc transparent;
scrollbar-width: thin;
}
div.ov_thin_scrollbar::-webkit-scrollbar
{
width: 3px;
height: 3px;
}
div.ov_thin_scrollbar::-webkit-scrollbar-thumb
{
background: #cccccc;
}
@media (hover)
{
a:hover
{
text-decoration: underline;
}
div.ov_toolbar div.ov_toolbar_button:hover
{
background: #c9e5f8;
}
div.ov_tree_view div.ov_tree_item.clickable:hover
{
background: #e4f4ff;
}
div.ov_navigator_info_panel div.ov_navigator_info_panel_title:hover
{
background: #e4f4ff;
}
div.ov_dialog a.ov_dialog_file_link:hover
{
background: #e4f4ff;
}
div.ov_popup div.ov_popup_list_item:hover
{
background: #e4f4ff;
}
div.ov_navigator_info_panel div.ov_navigator_info_button:hover
{
background: #e4f4ff;
@ -755,11 +338,6 @@ div.ov_navigator_info_panel div.ov_navigator_info_button:hover
@media only screen and (max-width: 700px)
{
.only_full_width
{
display: none;
}
div.intro div.intro_section
{
font-size: 16px;
@ -793,11 +371,6 @@ div.ov_progress
@media only screen and (max-height: 700px)
{
.only_full_height
{
display: none;
}
div.intro div.intro_section
{
margin: 15px 0px;

6
website/o3dv/js/exportdialog.js
View File

@ -108,7 +108,7 @@ OV.ExportDialog = class
this.formatParameters.formatSettingsDiv = $('<div>').addClass ('ov_dialog_section').height (optionsHeight).appendTo (contentDiv);
for (let i = 0; i < this.exportFormats.length; i++) {
let exportFormat = this.exportFormats[i];
let exportFormatButton = $('<div>').addClass ('ov_dialog_select_option').html (exportFormat.name).width (buttonWidth).appendTo (exportFormatSelect);
let exportFormatButton = $('<div>').addClass ('ov_button').addClass ('outline').addClass ('ov_dialog_select_option').html (exportFormat.name).width (buttonWidth).appendTo (exportFormatSelect);
this.formatParameters.exportFormatButtonDivs.push (exportFormatButton);
exportFormatButton.click (() => {
this.OnExportFormatSelect (i);
@ -126,9 +126,9 @@ OV.ExportDialog = class
for (let i = 0; i < this.formatParameters.exportFormatButtonDivs.length; i++) {
let exportFormatButtonDiv = this.formatParameters.exportFormatButtonDivs[i];
if (i === exportFormatIndex) {
exportFormatButtonDiv.addClass ('selected');
exportFormatButtonDiv.removeClass ('outline');
} else {
exportFormatButtonDiv.removeClass ('selected');
exportFormatButtonDiv.addClass ('outline');
}
}

4
website/o3dv/js/modal.js
View File

@ -36,7 +36,7 @@ OV.Modal = class
let windowObj = $(window);
let bodyObj = $(document.body);
this.overlayDiv = $('<div>').addClass ('ov_modal_overlay').css ('position', 'absolute').appendTo (bodyObj);
this.overlayDiv = $('<div>').addClass ('ov_modal_overlay').appendTo (bodyObj);
this.modalDiv.appendTo (bodyObj);
this.resizeHandler = this.Resize.bind (this);
@ -181,7 +181,7 @@ OV.ButtonDialog = class extends OV.Dialog
{
function AddButton (button, buttonsDiv)
{
let buttonDiv = $('<div>').addClass ('ov_dialog_button').html (button.name).appendTo (buttonsDiv);
let buttonDiv = $('<div>').addClass ('ov_button').addClass ('ov_dialog_button').html (button.name).appendTo (buttonsDiv);
if (button.subClass) {
buttonDiv.addClass (button.subClass);
}

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

@ -44,6 +44,7 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel
$('<div>').addClass ('ov_sidebar_settings_description').html (description).appendTo (contentDiv);
let colorInput = $('<div>').addClass ('color-picker').addClass ('ov_sidebar_color').appendTo (titleDiv);
$('<span>').html (title).appendTo (titleDiv);
// TODO: pop up to the left
const pickr = Pickr.create ({
el : colorInput.get (0),
theme : 'monolith',
@ -81,7 +82,7 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel
AddResetToDefaultsButton (defaultSettings, callbacks)
{
let resetToDefaultsButton = $('<div>').addClass ('ov_sidebar_settings_button').html ('Reset to Default').appendTo (this.contentDiv);
let resetToDefaultsButton = $('<div>').addClass ('ov_button').addClass ('outline').html ('Reset to Default').appendTo (this.contentDiv);
resetToDefaultsButton.click (() => {
this.backgroundColorInput.setColor ('#' + OV.ColorToHexString (defaultSettings.backgroundColor));
this.defaultColorInput.setColor ('#' + OV.ColorToHexString (defaultSettings.defaultColor));

2
website/o3dv/js/sharingdialog.js
View File

@ -42,7 +42,7 @@ OV.ShowSharingDialog = function (importer, settings, camera)
let copiedText = 'copied';
let container = $('<div>').addClass ('ov_dialog_copyable_input').appendTo (parentDiv);
let input = $('<input>').prop ('readonly', true).appendTo (container);
let button = $('<div>').addClass ('button').html (copyText).appendTo (container);
let button = $('<div>').addClass ('ov_button').addClass ('outline').addClass ('ov_dialog_copyable_input_button').html (copyText).appendTo (container);
button.click (() => {
OV.CopyToClipboard (getText ());
button.fadeOut (200, () => {