381 lines
8.8 KiB
HTML
381 lines
8.8 KiB
HTML
<html>
|
||
<head>
|
||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Ubuntu+Mono&display=swap" rel="stylesheet">
|
||
<style>
|
||
|
||
/********************************/
|
||
/* match html to how CC renders */
|
||
/********************************/
|
||
|
||
body {
|
||
font-family: 'Open Sans', sans-serif;
|
||
font-size: 10pt;
|
||
user-select: none;
|
||
background: url(background.jpg);
|
||
background-position: center;
|
||
background-size: cover;
|
||
}
|
||
table {
|
||
font-size: 10pt;
|
||
}
|
||
pre, code {
|
||
font-family: 'Ubuntu Mono', monospace;
|
||
}
|
||
img {
|
||
vertical-align: top;
|
||
}
|
||
span {
|
||
display: inline-block;
|
||
}
|
||
* {
|
||
box-sizing: border-box;
|
||
outline: 0px;
|
||
}
|
||
button {
|
||
border: 0px;
|
||
}
|
||
|
||
|
||
/********************************/
|
||
/* RF styling */
|
||
/********************************/
|
||
|
||
:root {
|
||
--button-background: hsla(200, 0%, 20%, 1.0);
|
||
--button-hover-background: hsla(200, 0%, 50%, 0.50);
|
||
--button-selected-background: rgb(10, 135, 197);
|
||
|
||
--button-text: hsl(200, 0%, 90%);
|
||
--button-selected-text: white;
|
||
--button-disabled-text: hsl(200, 0%, 50%);
|
||
|
||
--header-background: hsla(200, 0%, 5%, 1);
|
||
--panel-background: hsla(200, 0%, 15%, 0.98);
|
||
--panel-two-background: hsla(200, 0%, 5%, 0.4);
|
||
--collection: hsla(200, 0%, 5%, 0);
|
||
|
||
--text: rgb(221, 221, 221);
|
||
|
||
--alert-note: rgba(34, 34, 34, 0.99);
|
||
--alert-warning: rgba(128, 72, 8, 0.95);
|
||
}
|
||
|
||
* {
|
||
border-radius: 4px;
|
||
color: var(--button-text);
|
||
/*margin: 4px;*/
|
||
}
|
||
|
||
div {
|
||
margin: 4px;
|
||
}
|
||
|
||
body {
|
||
background-color: rgb(64,64,64);
|
||
}
|
||
|
||
dialog {
|
||
display: block;
|
||
position: fixed;
|
||
left: auto;
|
||
right: auto;
|
||
top: auto;
|
||
bottom: auto;
|
||
margin: 4px;
|
||
border-radius: 4px;
|
||
border: 1px solid black;
|
||
padding: 4px;
|
||
background: var(--panel-background);
|
||
color: var(--text);
|
||
}
|
||
dialog > h1 {
|
||
font-size: 10pt;
|
||
font-weight: normal;
|
||
width: calc(100% + 8px);
|
||
background: black;
|
||
margin: -4px -4px 4px -4px;
|
||
padding: 4px 16px;
|
||
border-radius: 4px;
|
||
}
|
||
dialog > h1::after {
|
||
display: block;
|
||
content: "";
|
||
width: 100%;
|
||
border-bottom: 1px solid black;
|
||
}
|
||
|
||
dialog.closeable > h1::before {
|
||
display: inline-block;
|
||
content: "×";
|
||
margin-left: -8px;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
details {
|
||
padding-bottom: 1px;
|
||
}
|
||
|
||
summary {
|
||
padding: 4px;
|
||
}
|
||
summary:hover {
|
||
background-color: var(--button-hover-background);
|
||
cursor: default;
|
||
}
|
||
|
||
button {
|
||
display: block;
|
||
width: 100%;
|
||
color: var(--button-text);
|
||
background: var(--button-background);
|
||
margin: 4px 0px;
|
||
padding: 4px;
|
||
}
|
||
button:hover {
|
||
background: var(--button-hover-background);
|
||
}
|
||
button:active {
|
||
color: var(--button-selected-text);
|
||
background: var(--button-selected-background);
|
||
}
|
||
button:disabled:hover {
|
||
background: var(--button-background);
|
||
}
|
||
button:disabled {
|
||
color: var(--button-disabled-text);
|
||
}
|
||
|
||
label {
|
||
display: block;
|
||
padding: 4px;
|
||
}
|
||
label:hover {
|
||
background: var(--button-hover-background);
|
||
}
|
||
|
||
div.collection {
|
||
margin: 12px 4px;
|
||
}
|
||
|
||
div.collection > h2 {
|
||
font-size: 10pt;
|
||
font-weight: normal;
|
||
margin: 2px 0px;
|
||
}
|
||
|
||
|
||
|
||
/***********************/
|
||
/* main dialog */
|
||
/***********************/
|
||
|
||
dialog#maindialog {
|
||
left: 0px;
|
||
top: 0px;
|
||
width: 200px;
|
||
}
|
||
|
||
input.tool {
|
||
visibility: hidden;
|
||
position: absolute;
|
||
width: 0;
|
||
height: 0;
|
||
}
|
||
label.tool {
|
||
margin: 0px;
|
||
padding: 4px;
|
||
width: 100%;
|
||
}
|
||
label.tool.checked:hover {
|
||
background: rgb(0, 146, 219);
|
||
}
|
||
label.tool > img {
|
||
width: 32px;
|
||
height: 32px;
|
||
}
|
||
label.tool > span {
|
||
margin: 6px;
|
||
}
|
||
label.tool.checked {
|
||
background: rgb(0, 146, 219);
|
||
}
|
||
|
||
|
||
/***********************/
|
||
/* poly count dialog */
|
||
/***********************/
|
||
|
||
dialog#geometrydialog {
|
||
left: 0px;
|
||
bottom: 0px;
|
||
width: 120px;
|
||
min-width: 120px;
|
||
max-width: 120px;
|
||
}
|
||
dialog#geometrydialog div {
|
||
margin: 0px;
|
||
}
|
||
|
||
|
||
dialog#optionsdialog {
|
||
right: 0px;
|
||
top: 0px;
|
||
width: 225px;
|
||
min-width: 225px;
|
||
max-width: 225px;
|
||
}
|
||
|
||
|
||
dialog#helpsystem {
|
||
position: relative;
|
||
width: 60%;
|
||
left: 20%;
|
||
height: 100%;
|
||
/*max-height: 100%;*/
|
||
background: hsla(200, 0%, 10%, 0.98);
|
||
}
|
||
dialog#helpsystem > div.contents {
|
||
/*position: relative;*/
|
||
left: 0px;
|
||
top: 0px;
|
||
}
|
||
div#helpsystem-buttons {
|
||
/*position: absolute;*/
|
||
margin: 4px;
|
||
/*left: 0px;*/
|
||
/*top: 0px;*/
|
||
width: 100%;
|
||
}
|
||
div#helpsystem-buttons > button {
|
||
display: inline;
|
||
width: 33%;
|
||
text-align: center;
|
||
}
|
||
|
||
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<dialog open id="maindialog">
|
||
<h1>RetopoFlow 3.1.0</h1>
|
||
<div id="tools">
|
||
<input type="radio" class="tool" name="tool" id="tool-contours" checked>
|
||
<label title="Contours. Shortcut: ..." for="tool-contours" class="tool">
|
||
<img src="../icons/contours-icon.png">
|
||
<span>Contours</span>
|
||
</label>
|
||
<input type="radio" class="tool" name="tool" id="tool-polystrips">
|
||
<label title="PolyStrips. Shortcut: ..." for="tool-polystrips" class="tool">
|
||
<img src="../icons/polystrips-icon.png">
|
||
<span>PolyStrips</span>
|
||
</label>
|
||
</div>
|
||
<details id="documentation" title='Help documentation'>
|
||
<summary>Documentation</summary>
|
||
<button title="Show the Welcome message">Welcome!</button>
|
||
<button title="Show help table of contents (Shift+F1)">Table of Contents</button>
|
||
<button title="Show how to get started with RetopoFlow">Quick Start Guide</button>
|
||
<button title="Show general help (F1)">General</button>
|
||
<button title="Show help for currently selected tool (F2)">Active Tool</button>
|
||
</details>
|
||
<details id="documentation" title='Windows'>
|
||
<summary>Windows</summary>
|
||
<button title="Minimize this window">Minimize Tools</button>
|
||
<button title="Show options window" disabled>Show Options</button>
|
||
<button title="Show poly count window" disabled>Show Poly Count</button>
|
||
</details>
|
||
<button title="Report an issue with RetopoFlow">Report Issue</button>
|
||
<button title="Quit RetopoFlow (Tab)">Exit</button>
|
||
</dialog>
|
||
|
||
<dialog id="optionsdialog" class="closeable" open>
|
||
<h1>Options</h1>
|
||
<details>
|
||
<summary>General</summary>
|
||
<div class="collection">
|
||
<h2>Quit Options</h2>
|
||
<label><input type="checkbox"> Confirm quit on Tab</label>
|
||
<label><input type="checkbox"> Escape to quite</label>
|
||
</div>
|
||
<div class="collection">
|
||
<h2>Start Up Checks</h2>
|
||
<label><input type="checkbox"> Check Auto Save</label>
|
||
<label><input type="checkbox"> Check Unsaved</label>
|
||
</div>
|
||
<details>
|
||
<summary>Advanced</summary>
|
||
</details>
|
||
</details>
|
||
<details>
|
||
<summary>Display</summary>
|
||
</details>
|
||
<details>
|
||
<summary>Target Cleaning</summary>
|
||
</details>
|
||
<details>
|
||
<summary>Symmetry: (none)</summary>
|
||
</details>
|
||
<details>
|
||
<summary>Contours</summary>
|
||
</details>
|
||
<details>
|
||
<summary>PolyStrips</summary>
|
||
</details>
|
||
</dialog>
|
||
|
||
<dialog id="geometrydialog" class="closeable" open>
|
||
<h1>Poly Count</h1>
|
||
<table>
|
||
<tr>
|
||
<td><div>Verts:</div></td>
|
||
<td><div>0</div></td>
|
||
</tr><tr>
|
||
<td><div>Edges:</div></td>
|
||
<td><div>0</div></td>
|
||
</tr><tr>
|
||
<td><div>Faces:</div></td>
|
||
<td><div>0</div></td>
|
||
</tr>
|
||
</table>
|
||
</dialog>
|
||
|
||
<dialog class='framed closeable' id='helpsystem'>
|
||
<h1>RetopoFlow Help System</h1>
|
||
<div class="contents">
|
||
<article id='helpsystem-mdown' class='mdown'>Foo Bar</article>
|
||
<div id='helpsystem-buttons'>
|
||
<button title='Click to open table of contents for help' on_mouseclick="self.helpsystem_open('table_of_contents.md')">Table of Contents</button>
|
||
<button title='Click to open online help documents. Note: this is an experimental feature.' on_mouseclick="bpy.ops.wm.url_open(url=retopoflow_urls['help docs'])">View Online Docs</button>
|
||
<button title='Click to close this help dialog' on_mouseclick="close()">Close (Esc)</button>
|
||
</div>
|
||
</div>
|
||
</dialog>
|
||
|
||
</body>
|
||
|
||
<script>
|
||
|
||
function sync() {
|
||
var labels = document.getElementsByTagName('label')
|
||
for(var i = 0; i < labels.length; i++) {
|
||
var label = labels[i]
|
||
if(!label.htmlFor) continue
|
||
var input = document.getElementById(label.htmlFor)
|
||
if(!input) continue
|
||
if(input.checked) label.classList.add('checked')
|
||
else label.classList.remove('checked')
|
||
}
|
||
}
|
||
sync()
|
||
|
||
var inputs = document.getElementsByTagName('input')
|
||
for(var i = 0; i < inputs.length; i++) {
|
||
var input = inputs[i]
|
||
if(input.type != 'radio') continue
|
||
input.addEventListener('input', sync)
|
||
}
|
||
|
||
</script>
|
||
</html> |