[turbolizer] Style improvements.

- Remove duplicated CSS.
- Expand landing area of upload button.
- Give the toolbox a transparent white background.
- Make the phase-select box look nicer before file load.
- Remove the margin at the top of the screen.

The height of the margin was exactly the height of span#graph-toolbox,
and due to the semantics of position:relative, space was reserved for it
at the top of div#middle.

BUG=
R=danno

Review-Url: https://codereview.chromium.org/2164373002
Cr-Commit-Position: refs/heads/master@{#38003}
This commit is contained in:
bgeron 2016-07-25 02:48:34 -07:00 committed by Commit bot
parent a474e84181
commit 7ef24ad99c
2 changed files with 32 additions and 37 deletions

View File

@ -10,6 +10,7 @@
</div>
</div>
<div id="middle">
<div id="graph-toolbox-anchor">
<span id="graph-toolbox">
<input id="layout" type="image" title="layout graph" src="layout-icon.png"
alt="layout graph" class="button-input">
@ -26,8 +27,12 @@
<input id="search-input" type="text" title="search nodes for regex"
alt="search node for regex" class="search-input"
placeholder="find with regexp&hellip;">
<select id="display-selector"></select>
<select id="display-selector">
<option disabled selected>(please open a file)</option>
</select>
</span>
</div>
<div id="load-file">
<input type="file" id="hidden-file-upload">
<input id="upload" type="image" title="load graph" class="button-input"

View File

@ -280,22 +280,8 @@ span.linkable-text:hover {
left: 0;
}
#graph-toolbox {
position: relative;
top: 1em;
left: 0.7em;
border: 2px solid #eee8d5;
border-radius: 5px;
padding: 0.7em;
z-index: 5;
}
#disassembly-collapse {
right: 0;
}
#source-collapse {
left: 0;
#graph-toolbox-anchor {
height: 0px;
}
#graph-toolbox {
@ -306,21 +292,25 @@ span.linkable-text:hover {
border-radius: 5px;
padding: 0.7em;
z-index: 5;
background: rgba(100%, 100%, 100%, 0.7);
}
#load-file {
background: #A0A0A0;
position: absolute;
top: 0;
right: 0;
margin-top: 0.5em;
margin-right: 0.5em;
border-radius: 5px;
padding: 0.5em;
z-index: 5;
opacity: 0.7;
}
#load-file input {
background: #A0A0A0;
border-radius: 5px;
padding: 0.5em;
}
#hidden-file-upload{
display: none;
}