Quick UI fix for communicators

This commit is contained in:
SinTwo
2016-05-19 23:25:33 -04:00
parent 365ea43a60
commit dc6d796e19
4 changed files with 130 additions and 49 deletions

View File

@@ -242,6 +242,7 @@
.uiIcon16.icon-person64 { background-image: url(uiIcons64.png); background-position: -320px 0; width: 64px; height: 64px; }
.uiIcon16.icon-newspaper64 { background-image: url(uiIcons64.png); background-position: 0 -64px; width: 64px; height: 64px; }
.uiIcon16.icon-note64 { background-image: url(uiIcons64.png); background-position: -64px -64px; width: 64px; height: 64px; }
.uiIcon16.icon-close64 { background-image: url(uiIcons64.png); background-position: -128px -64px; width: 64px; height: 64px; }
.mapIcon16 {
position: absolute;

View File

@@ -320,6 +320,19 @@ div.notice {
overflow-y: auto;
}
.statusDisplayComm {
width: 100%;
background: rgba(0, 0, 0, 0.5);
color: #ffffff;
padding-bottom: 4px;
border-top: 0 none;
border-left: 0 none;
border-right: 0 none;
border-bottom: 2px inset #40628a;
margin: 3px 0;
overflow: hidden;
}
.statusLabel {
width: 138px;
float: left;
@@ -611,10 +624,10 @@ div.homeContainer {
}
div.homeScreen {
width: 90%;
padding: 0 20px 0 20px;
}
.link64, .linkOn64, .linkOff64, .selected64, .disabled64, .yellowButton64, .redButton64 {
.link64 {
float: left;
min-width: 15px;
max-width: 68px;
@@ -622,22 +635,90 @@ div.homeScreen {
text-align: center;
color: #ffffff;
text-decoration: none;
background: #40628a;
background: rgba(64, 98, 138, 0.6);
border: 1px solid #161616;
padding: 0 0 4px 0;
margin: 0 0 30px 5.5%;
cursor: default;
white-space: nowrap;
border-radius: 15px;
border-radius: 10px;
}
.linkOn64, a.linkOn:link, a.linkOn:visited, a.linkOn:active, a.linkOn:hover, .selected, a.selected:link, a.selected:visited, a.selected:active, a.selected:hover {
color: #ffffff;
background: #2f943c;
.link64:hover {
font-size: 13px;
}
.linkOff64, a.linkOff:link, a.linkOff:visited, a.linkOff:active, a.linkOff:hover, .disabled, a.disabled:link, a.disabled:visited, a.disabled:active, a.disabled:hover {
/*Communicator Dialing*/
.dialPad {
clear: both;
text-align: center;
margin: auto;
}
.dialPadKeys {
float: left;
width: 47px;
height: 47px;
font-size: 32px;
text-align: center;
color: #ffffff;
background: #999999;
border-color: #666666;
text-decoration: none;
background: rgba(64, 98, 138, 0.15);
border: 1px inset rgba(100, 100, 100, 0.25);
cursor: default;
line-height: 47px;
}
.dialPadKeys:hover {
background: rgba(80, 122, 172, 0.5);
}
.dialPadButtons {
float: left;
width: 63.2px;
height: 63.2px;
text-align: center;
color: #ffffff;
text-decoration: none;
background: rgba(64, 98, 138, 0.15);
border: 1px inset rgba(100, 100, 100, 0.25);
padding: 0 0 4px 0;
cursor: default;
margin-bottom: 25px;
}
.dialPadButtons:hover {
background: rgba(80, 122, 172, 0.5);
font-size: 13px;
}
.dialPadAddress {
float: left;
width: 192px;
height: 18px;
background: rgba(64, 98, 138, 0.15);
color: #ffffff;
border-left: 1px inset #40628a;
border-top: 1px inset #40628a;
border-bottom: 1px inset #40628a;
}
.dialPadAddress:hover{
background: rgba(80, 122, 172, 0.5);
}
.dialPadClear {
float: left;
width: 19%;
height: 18px;
background: rgba(64, 98, 138, 0.15);
color: #ffffff;
border-right: 1px inset #40628a;
border-top: 1px inset #40628a;
border-bottom: 1px inset #40628a;
}
.dialPadClear:hover{
background: rgba(80, 122, 172, 0.5);
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.4 KiB

After

Width:  |  Height:  |  Size: 12 KiB

View File

@@ -3,7 +3,7 @@ Title: Communicator UI
Used In File(s): code\game\objects\items\devices\communicator\communicator.dm
-->
<div class="statusDisplay" style="overflow: auto;">
<div class="statusDisplayComm">
<div class="item">
<div class="itemContent" style="width: 100%; text-align: center;">
<span class="average">{{:data.time}} | </span>
@@ -36,50 +36,49 @@ Used In File(s): code\game\objects\items\devices\communicator\communicator.dm
<HR>
<div class="itemContent" style="width: 100%;">{{:helper.link('Home', 'home', {'switch_tab' : 1})}}</div><BR>
<div class="item">
<div class="itemLabel">
<div class="itemLabelWide">
Target EPv2 Address:
</div>
<div class="itemContent">
<div style="float: left; width: 180px;">{{:data.targetAddress}}</div>
</div>
<div class="itemContent">
<div style="float: left; width: 180px;">{{:helper.link('Write', 'pencil', {'write_target_address' : 1})}} {{:helper.link('Clear', 'close', {'clear_target_address' : 1})}}</div>
<div style="clear: both;">
{{:helper.link(data.targetAddress, 'pencil', {'write_target_address' : 1}, null, 'dialPadAddress')}}
{{:helper.link('Clear', 'close', {'clear_target_address' : 1}, null, 'dialPadClear')}}
</div>
</div>
</div>
<div class="item">
<div class="itemContent">
<div style='float: left; width: 300px;'>
<div style="clear: both; padding-top: 1px;">
{{:helper.link('0', null, {'add_hex' : '0'})}}
{{:helper.link('1', null, {'add_hex' : '1'})}}
{{:helper.link('2', null, {'add_hex' : '2'})}}
{{:helper.link('3', null, {'add_hex' : '3'})}}
</div>
<div style="clear: both; padding-top: 1px;">
{{:helper.link('4', null, {'add_hex' : '4'})}}
{{:helper.link('5', null, {'add_hex' : '5'})}}
{{:helper.link('6', null, {'add_hex' : '6'})}}
{{:helper.link('7', null, {'add_hex' : '7'})}}
</div>
<div style="clear: both; padding-top: 1px;">
{{:helper.link('8', null, {'add_hex' : '8'})}}
{{:helper.link('9', null, {'add_hex' : '9'})}}
{{:helper.link('A', null, {'add_hex' : 'a'})}}
{{:helper.link('B', null, {'add_hex' : 'b'})}}
</div>
<div style="clear: both; padding-top: 1px;">
{{:helper.link('C', null, {'add_hex' : 'c'})}}
{{:helper.link('D', null, {'add_hex' : 'd'})}}
{{:helper.link('E', null, {'add_hex' : 'e'})}}
{{:helper.link('F', null, {'add_hex' : 'f'})}}
</div>
<div style="clear: both; padding-top: 1px;">
{{:helper.link('Dial', 'signal-diag', {'dial' : data.targetAddress})}}
{{:helper.link('Message', 'comment', {'message' : data.targetAddress, 'switch_tab' : 4})}}
{{:helper.link('Hang Up', 'close', {'hang_up' : '1'})}}
</div>
<div class="dialPad">
<div style="clear: both; padding-top: 1px;">
{{:helper.link('0', null, {'add_hex' : '0'}, null, 'dialPadKeys')}}
{{:helper.link('1', null, {'add_hex' : '1'}, null, 'dialPadKeys')}}
{{:helper.link('2', null, {'add_hex' : '2'}, null, 'dialPadKeys')}}
{{:helper.link('3', null, {'add_hex' : '3'}, null, 'dialPadKeys')}}
</div>
<div style="clear: both; padding-top: 1px;">
{{:helper.link('4', null, {'add_hex' : '4'}, null, 'dialPadKeys')}}
{{:helper.link('5', null, {'add_hex' : '5'}, null, 'dialPadKeys')}}
{{:helper.link('6', null, {'add_hex' : '6'}, null, 'dialPadKeys')}}
{{:helper.link('7', null, {'add_hex' : '7'}, null, 'dialPadKeys')}}
</div>
<div style="clear: both; padding-top: 1px;">
{{:helper.link('8', null, {'add_hex' : '8'}, null, 'dialPadKeys')}}
{{:helper.link('9', null, {'add_hex' : '9'}, null, 'dialPadKeys')}}
{{:helper.link('A', null, {'add_hex' : 'a'}, null, 'dialPadKeys')}}
{{:helper.link('B', null, {'add_hex' : 'b'}, null, 'dialPadKeys')}}
</div>
<div style="clear: both; padding-top: 1px;">
{{:helper.link('C', null, {'add_hex' : 'c'}, null, 'dialPadKeys')}}
{{:helper.link('D', null, {'add_hex' : 'd'}, null, 'dialPadKeys')}}
{{:helper.link('E', null, {'add_hex' : 'e'}, null, 'dialPadKeys')}}
{{:helper.link('F', null, {'add_hex' : 'f'}, null, 'dialPadKeys')}}
</div>
<div style="clear: both; padding-top: 1px;">
{{:helper.link('Dial', 'phone64', {'dial' : data.targetAddress}, null, 'dialPadButtons')}}
{{:helper.link('Message', 'comment64', {'message' : data.targetAddress, 'switch_tab' : 4}, null, 'dialPadButtons')}}
{{:helper.link('Hang Up', 'close64', {'hang_up' : '1'}, null, 'dialPadButtons')}}
</div>
</div>
</div>
@@ -148,7 +147,7 @@ Used In File(s): code\game\objects\items\devices\communicator\communicator.dm
{{:value.name}}
</div>
<div class="itemContent">
<div style="float: left; width: 300px;">{{:value.address}}</div> {{:helper.link('Copy', 'pencil', {'copy' : value.address, 'switch_tab' : 2})}}
<div style="float: left; width: 100%;">{{:value.address}}</div> {{:helper.link('Copy', 'pencil', {'copy' : value.address, 'switch_tab' : 2})}}
</div>
</div>
{{/for}}