Commit 80bd9870 authored by r03ert0's avatar r03ert0
Browse files

improve html style

parent 3c007d60
<div id='tools-side' style='display:block'>
<div id='tools-minimized'>
<div id="tools-side" style="display:block">
<div id="tools-minimized">
<div>
<img alt="menu" style='width:28px;position:absolute;top:10px;left:10px' src='./img/bars.svg' />
<img alt="menu" style="width:28px;position:absolute;top:10px;left:10px" src="./img/bars.svg" />
</div>
</div>
<div id='tools-maximized' style='display:flex;flex-direction:column;height:100%'>
<div id="tools-maximized" style="display:flex;flex-direction:column;height:100%">
<!-- tools hide/show, display left/right -->
<div id='headerBlock' style='flex:0 1 28px;background:#333'>
<div style='display:flex'>
<div style='flex:0 0 28px'><div id='display-minimize' title='Minimize toolbar' class='a push noBorder'><img class='icon' alt="close" src='./img/times-circle.svg' /></div></div>
<div style='flex:1 1 auto'></div>
<div style='flex:0 0 28px'><div id='display-left' title='Display to the left' class='a push noBorder'><img class='icon' alt="left" src='./img/caret-square-o-left.svg' /></div></div>
<div style='flex:0 0 28px'><div id='display-right' title='Display to the right' class='a push noBorder'><img class='icon' alt="right" src='./img/caret-square-o-right.svg' /></div></div>
<div id="headerBlock" style="flex:0 1 28px;background:#333">
<div style="display:flex">
<div style="flex:0 0 28px"><div id="display-minimize" title="Minimize toolbar" class="a push noBorder"><img class="icon" alt="close" src="./img/times-circle.svg" /></div></div>
<div style="flex:1 1 auto"></div>
<div style="flex:0 0 28px"><div id="display-left" title="Display to the left" class="a push noBorder"><img class="icon" alt="left" src="./img/caret-square-o-left.svg" /></div></div>
<div style="flex:0 0 28px"><div id="display-right" title="Display to the right" class="a push noBorder"><img class="icon" alt="right" src="./img/caret-square-o-right.svg" /></div></div>
</div>
</div>
<!-- slider -->
<div id='sliderBlock' style='flex:0 0 28px'>
<div style='display:flex'>
<div style='flex:0 0 28px'>
<div id='prev' class='a push'>-</div>
<div id="sliderBlock" style="flex:0 0 28px">
<div style="display:flex">
<div style="flex:0 0 28px">
<div id="prev" class="a push">-</div>
</div>
<div style='flex:1 0 28px;display:flex'>
<div style='flex:1;position:relative'>
<div id='slice' class='slider' data-max=100 data-val=0 style='position:absolute;height:100%;margin-left:10px;width:calc(100% - 20px)'>
<div class='track' style='position:absolute;left:0;top:50%;width:100%;border-top:1px solid #fff;padding:0;display:inline-block'></div>
<div class='thumb' style='position:absolute;left:0;top:50%;transform:translate(-10px,-10px);border-radius:10px;padding:0;width:20px;height:20px;background:#fff;display:inline-block'></div>
<div style="flex:1 0 28px;display:flex">
<div style="flex:1;position:relative">
<div id="slice" class="slider" data-max="100" data-val="0" style="position:absolute;height:100%;margin-left:10px;width:calc(100% - 20px)">
<div class="track" style="position:absolute;left:0;top:50%;width:100%;border-top:1px solid #fff;padding:0;display:inline-block"></div>
<div class="thumb" style="position:absolute;left:0;top:50%;transform:translate(-10px,-10px);border-radius:10px;padding:0;width:20px;height:20px;background:#fff;display:inline-block"></div>
</div>
</div>
</div>
<div style='flex:0 0 28px'>
<div id='next' class='a push'>+</div>
<div style="flex:0 0 28px">
<div id="next" class="a push">+</div>
</div>
</div>
</div>
<!-- buttons -->
<div id='buttonsBlock' style='flex:0 0 auto'>
<div style='display:flex;flex-wrap:wrap'>
<div id="buttonsBlock" style="flex:0 0 auto">
<div style="display:flex;flex-wrap:wrap">
<div style='flex:1 0 250px;width:50px'>
<div id='plane' style='display:flex' class='chose'>
<div style='flex:1'><div title='sag' class='a pressed'>Sag</div></div>
<div style='flex:1'><div title='cor' class='a'>Cor</div></div>
<div style='flex:1'><div title='axi' class='a'>Axi</div></div>
<div style="flex:1 0 250px;width:50px">
<div id="plane" style="display:flex" class="chose">
<div style="flex:1"><div title="sag" class="a pressed">Sag</div></div>
<div style="flex:1"><div title="cor" class="a">Cor</div></div>
<div style="flex:1"><div title="axi" class="a">Axi</div></div>
</div>
<div style='display:flex'>
<div style='flex:1'><div id='fullscreen' title='Full screen' class='a toggle'><img class='icon' alt="fullscreen" src='./img/fullscreen.svg' /></div></div>
<div style='flex:1'><div id='3drender' title='3D render' class='a push'><img class='icon' alt="3d render" src='./img/3drender.svg' /></div></div>
<div style='flex:1'><div id='link' title='Link' class='a push'><img class='icon' alt="link" src='./img/link.svg' /></div></div>
<div style='flex:1'><div id='bubble' title='Chat' class='a toggle pressed'><img class='icon' alt="chat" src='./img/chat.svg' /></div></div>
<div style='flex:1'><div id='upload' title='Upload' class='a push'><img class='icon' alt="upload" src='./img/upload.svg' /></div></div>
<div style='flex:1'><div id='download' title='Download' class='a push'><img class='icon' alt="download" src='./img/download.svg' /></div></div>
<div style='flex:1'><div id='precise' title='Precise cursor' class='a toggle'><img class='icon' alt="precise cursor" src='./img/preciseCursor.svg' /></div></div>
<div style="display:flex">
<div style="flex:1"><div id="fullscreen" title="Full screen" class="a toggle"><img class="icon" alt="fullscreen" src="./img/fullscreen.svg" /></div></div>
<div style="flex:1"><div id="3drender" title="3D render" class="a push"><img class="icon" alt="3d render" src="./img/3drender.svg" /></div></div>
<div style="flex:1"><div id="link" title="Link" class="a push"><img class="icon" alt="link" src="./img/link.svg" /></div></div>
<div style="flex:1"><div id="bubble" title="Chat" class="a toggle pressed"><img class="icon" alt="chat" src="./img/chat.svg" /></div></div>
<div style="flex:1"><div id="upload" title="Upload" class="a push"><img class="icon" alt="upload" src="./img/upload.svg" /></div></div>
<div style="flex:1"><div id="download" title="Download" class="a push"><img class="icon" alt="download" src="./img/download.svg" /></div></div>
<div style="flex:1"><div id="precise" title="Precise cursor" class="a toggle"><img class="icon" alt="precise cursor" src="./img/preciseCursor.svg" /></div></div>
</div>
</div>
<div style='flex:1 0 250px;width:50px'>
<div id='paintTool' style='display:flex' class='chose'>
<div style='flex:1'><div title='Show' class='a pressed'><img class='icon' alt="show" src='./img/show.svg' /></div></div>
<div style='flex:1'><div title='Paint' class='a'><img class='icon' alt="paint" src='./img/paint.svg' /></div></div>
<div style='flex:1'><div title='Erase' class='a'><img class='icon' alt="erase" src='./img/erase.svg' /></div></div>
<div style='flex:1'><div title='Measure' class='a'><img class='icon' alt="ruler" src='./img/ruler.svg' /></div></div>
<div style='flex:1'><div title='Adjust' class='a'><img class='icon' alt="adjust" src='./img/adjust.svg' /></div></div>
<div style='flex:1'><div title='Eyedrop' class='a'><img class='icon' alt="eyedropper" src='./img/eyedropper.svg' /></div></div>
<div style="flex:1 0 250px;width:50px">
<div id="paintTool" style="display:flex" class="chose">
<div style="flex:1"><div title="Show" class="a pressed"><img class="icon" alt="show" src="./img/show.svg" /></div></div>
<div style="flex:1"><div title="Paint" class="a"><img class="icon" alt="paint" src="./img/paint.svg" /></div></div>
<div style="flex:1"><div title="Erase" class="a"><img class="icon" alt="erase" src="./img/erase.svg" /></div></div>
<div style="flex:1"><div title="Measure" class="a"><img class="icon" alt="ruler" src="./img/ruler.svg" /></div></div>
<div style="flex:1"><div title="Adjust" class="a"><img class="icon" alt="adjust" src="./img/adjust.svg" /></div></div>
<div style="flex:1"><div title="Eyedrop" class="a"><img class="icon" alt="eyedropper" src="./img/eyedropper.svg" /></div></div>
</div>
<div style='display:flex'>
<div style='flex:1'><div id='color' title='Color' style='height:24px;background:#f00' class='a push'></div></div>
<div style='flex:1'><div id='fill' class='a toggle'><img class='icon' alt="fill" src='./img/fill.svg' /></div></div>
<div style='flex:1'><div id='undo' title='Undo' class='a push'><img class='icon' alt="undo" src='./img/undo.svg' /></div></div>
<div style='flex:1'><div id='save' title='Save' class='a push'><img class='icon' alt="save" src='./img/floppy.svg' /></div></div>
<div style="display:flex">
<div style="flex:1"><div id="color" title="Color" style="height:24px;background:#f00" class="a push"></div></div>
<div style="flex:1"><div id="fill" class="a toggle"><img class="icon" alt="fill" src="./img/fill.svg" /></div></div>
<div style="flex:1"><div id="undo" title="Undo" class="a push"><img class="icon" alt="undo" src="./img/undo.svg" /></div></div>
<div style="flex:1"><div id="save" title="Save" class="a push"><img class="icon" alt="save" src="./img/floppy.svg" /></div></div>
</div>
</div>
......@@ -79,23 +79,23 @@
</div>
<!-- pen size -->
<div id='penSizeBlock' style='flex:0 0 28px'>
<div style='display:flex' class='chose' id='penSize'>
<div style='flex:1'><div title='1' class='a pressed'>1</div></div>
<div style='flex:1'><div title='2' class='a'>2</div></div>
<div style='flex:1'><div title='3' class='a'>3</div></div>
<div style='flex:1'><div title='5' class='a'>5</div></div>
<div style='flex:1'><div title='10' class='a'>10</div></div>
<div style='flex:1'><div title='15' class='a'>15</div></div>
<div id="penSizeBlock" style="flex:0 0 28px">
<div style="display:flex" class="chose" id="penSize">
<div style="flex:1"><div title="1" class="a pressed">1</div></div>
<div style="flex:1"><div title="2" class="a">2</div></div>
<div style="flex:1"><div title="3" class="a">3</div></div>
<div style="flex:1"><div title="5" class="a">5</div></div>
<div style="flex:1"><div title="10" class="a">10</div></div>
<div style="flex:1"><div title="15" class="a">15</div></div>
</div>
</div>
<!-- chat -->
<div id='chatBlock' style='flex:1 1 auto;position:relative;display:flex'>
<div id='chatBlockContent' style='flex:1;display:flex;flex-direction:column'>
<div style='flex:0 0 28px'><div id='chat' class='label'>Chat (disconnected)</div></div>
<div style='flex:1 1 58px;display:flex'><div id='log' class='a' style='flex:1;height:auto'></div></div>
<div style='flex:0 0 28px'><input id='msg' type='text' style='width:100%'></div>
<div id="chatBlock" style="flex:1 1 auto;position:relative;display:flex">
<div id="chatBlockContent" style="flex:1;display:flex;flex-direction:column">
<div style="flex:0 0 28px"><div id="chat" class="label">Chat (disconnected)</div></div>
<div style="flex:1 1 58px;display:flex"><div id="log" class="a" style="flex:1;height:auto"></div></div>
<div style="flex:0 0 28px"><input id="msg" type="text" style="width:100%"></div>
</div>
</div>
</div>
......@@ -103,30 +103,30 @@
</div>
<!-- Loading indicator -->
<div id='loadingIndicator'>
<div id="loadingIndicator">
<p>Loading...</p>
<div class='disc'></div>
<div class="disc"></div>
</div>
<!-- End Loading indicator -->
<!-- Labels -->
<div id='labelset'>
<div style='z-index:23;text-align:right'>
<img id='labels-close' class='button' alt="close" src='./img/times-circle.svg'/>
<div id="labelset">
<div style="z-index:23;text-align:right">
<img id="labels-close" class="button" alt="close" src="./img/times-circle.svg"/>
</div>
<ul style='padding-left:1rem'>
<ul style="padding-left:1rem">
<li>
<b>Label Set</b><br/>
<span id='labels-name'></span>
<span id="labels-name"></span>
</li>
<li>
<b>Labels</b><br/>
<div id='label-list'>
<div id="label-list">
</div>
<div id='label-template'>
<div class='label-color'></div>
<span class='label-name'>Label Name</name>
<div id="label-template">
<div class="label-color"></div>
<span class="label-name">Label Name</span>
</div>
</li>
</ul>
......
<div id='tools-side' style='display:block'>
<div id='tools-minimized'>
<div id="tools-side" style="display:block">
<div id="tools-minimized">
<div>
<img style='width:28px;position:absolute;top:10px;left:10px' src='./img/bars.svg' />
<img style="width:28px;position:absolute;top:10px;left:10px" src="./img/bars.svg" />
</div>
</div>
<div id='tools-maximized' style='display:flex;flex-direction:column;height:100%'>
<div id="tools-maximized" style="display:flex;flex-direction:column;height:100%">
<!-- tools hide/show, display left/right -->
<div id='headerBlock' style='flex:0 1 28px;background:#333'>
<div id="headerBlock" style="flex:0 1 28px;background:#333">
<div style='display:flex'>
<div style='flex:0 0 28px'><div id='display-minimize' title='Minimize toolbar' class='a push noBorder'><img class='icon' src='./img/times-circle.svg' /></div></div>
<div style='flex:1 1 auto'></div>
<div style='flex:0 0 28px'><div id='display-left' title='Display to the left' class='a push noBorder'><img class='icon' src='./img/caret-square-o-left.svg' /></div></div>
<div style='flex:0 0 28px'><div id='display-right' title='Display to the right' class='a push noBorder'><img class='icon' src='./img/caret-square-o-right.svg' /></div></div>
<div style="display:flex">
<div style="flex:0 0 28px"><div id="display-minimize" title="Minimize toolbar" class="a push noBorder"><img class="icon" src="./img/times-circle.svg" /></div></div>
<div style="flex:1 1 auto"></div>
<div style="flex:0 0 28px"><div id="display-left" title="Display to the left" class="a push noBorder"><img class="icon" src="./img/caret-square-o-left.svg" /></div></div>
<div style="flex:0 0 28px"><div id="display-right" title="Display to the right" class="a push noBorder"><img class="icon" src="./img/caret-square-o-right.svg" /></div></div>
</div>
</div>
<!-- slider -->
<div id='sliderBlock' style='flex:0 0 28px'>
<div style='display:flex'>
<div style='flex:0 0 28px'>
<div id='prev' class='a push'>-</div>
<div id="sliderBlock" style="flex:0 0 28px">
<div style="display:flex">
<div style="flex:0 0 28px">
<div id="prev" class="a push">-</div>
</div>
<div style='flex:1 0 28px;display:flex'>
<div style='flex:1;position:relative'>
<div id='slice' class='slider' data-max=100 data-val=0 style='position:absolute;height:100%;margin-left:10px;width:calc(100% - 20px)'>
<div class='track' style='position:absolute;left:0;top:50%;width:100%;border-top:1px solid #fff;padding:0;display:inline-block'></div>
<div class='thumb' style='position:absolute;left:0;top:50%;transform:translate(-10px,-10px);border-radius:10px;padding:0;width:20px;height:20px;background:#fff;display:inline-block'></div>
<div style="flex:1 0 28px;display:flex">
<div style="flex:1;position:relative">
<div id="slice" class="slider" data-max="100" data-val="0" style="position:absolute;height:100%;margin-left:10px;width:calc(100% - 20px)">
<div class="track" style="position:absolute;left:0;top:50%;width:100%;border-top:1px solid #fff;padding:0;display:inline-block"></div>
<div class="thumb" style="position:absolute;left:0;top:50%;transform:translate(-10px,-10px);border-radius:10px;padding:0;width:20px;height:20px;background:#fff;display:inline-block"></div>
</div>
</div>
</div>
<div style='flex:0 0 28px'>
<div id='next' class='a push'>+</div>
<div style="flex:0 0 28px">
<div id="next" class="a push">+</div>
</div>
</div>
</div>
<!-- buttons -->
<div id='buttonsBlock' style='flex:0 0 auto'>
<div style='display:flex;flex-wrap:wrap'>
<div id="buttonsBlock" style="flex:0 0 auto">
<div style="display:flex;flex-wrap:wrap">
<div style='flex:1 0 150px;width:50px'>
<div id='plane' style='display:flex' class='chose'>
<div style='flex:1'><div title='sag' class='a pressed'>Sag</div></div>
<div style='flex:1'><div title='cor' class='a'>Cor</div></div>
<div style='flex:1'><div title='axi' class='a'>Axi</div></div>
<div style="flex:1 0 150px;width:50px">
<div id="plane" style="display:flex" class="chose">
<div style="flex:1"><div title="sag" class="a pressed">Sag</div></div>
<div style="flex:1"><div title="cor" class="a">Cor</div></div>
<div style="flex:1"><div title="axi" class="a">Axi</div></div>
</div>
</div>
<div style='flex:1 0 150px;width:50px'>
<div style='display:flex'>
<div style='flex:1'><div id='fullscreen' title='Full screen' class='a toggle'><img class='icon' src='./img/fullscreen.svg' /></div></div>
<div style='flex:1'><div id='3drender' title='3D render' class='a push'><img class='icon' src='./img/3drender.svg' /></div></div>
<div style='flex:1'><div id='link' title='Link' class='a push'><img class='icon' src='./img/link.svg' /></div></div>
<div style="flex:1 0 150px;width:50px">
<div style="display:flex">
<div style="flex:1"><div id="fullscreen" title="Full screen" class="a toggle"><img class="icon" src="./img/fullscreen.svg" /></div></div>
<div style="flex:1"><div id="3drender" title="3D render" class="a push"><img class="icon" src="./img/3drender.svg" /></div></div>
<div style="flex:1"><div id="link" title="Link" class="a push"><img class="icon" src="./img/link.svg" /></div></div>
</div>
</div>
<div style='flex:1 0 150px;width:50px'>
<div id='paintTool' style='display:flex' class='chose'>
<div style='flex:1'><div title='Show' class='a pressed'><img class='icon' src='./img/show.svg' /></div></div>
<div style='flex:1'><div title='Adjust' class='a'><img class='icon' src='./img/adjust.svg' /></div></div>
<div style='flex:1'><div title='Eyedrop' class='a'><img class='icon' src='./img/eyedropper.svg' /></div></div>
<div style="flex:1 0 150px;width:50px">
<div id="paintTool" style="display:flex" class="chose">
<div style="flex:1"><div title="Show" class="a pressed"><img class="icon" src="./img/show.svg" /></div></div>
<div style="flex:1"><div title="Adjust" class="a"><img class="icon" src="./img/adjust.svg" /></div></div>
<div style="flex:1"><div title="Eyedrop" class="a"><img class="icon" src="./img/eyedropper.svg" /></div></div>
</div>
</div>
......@@ -73,8 +73,8 @@
</div>
<!-- Loading indicator -->
<div id='loadingIndicator'>
<div id="loadingIndicator">
<p>Loading...</p>
<div class='disc'></div>
<div class="disc"></div>
</div>
<!-- End Loading indicator -->
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment