mirror of
https://github.com/Bubberstation/Bubberstation.git
synced 2026-08-30 08:37:43 +01:00
Port NanoUI styles to LESS
This commit is contained in:
Bjorn Neergaard
@@ -100,7 +100,7 @@ Passive gate is similar to the regular pump except:
|
||||
/obj/machinery/atmospherics/components/binary/passive_gate/ui_interact(mob/user, ui_key = "main", datum/nanoui/ui = null, force_open = 0)
|
||||
ui = SSnano.try_update_ui(user, src, ui_key, ui, force_open = force_open)
|
||||
if (!ui)
|
||||
ui = new(user, src, ui_key, "atmos_pump.dot", name, 400, 100)
|
||||
ui = new(user, src, ui_key, "atmos_pump", name, 400, 100)
|
||||
ui.open()
|
||||
|
||||
/obj/machinery/atmospherics/components/binary/passive_gate/get_ui_data()
|
||||
|
||||
@@ -108,7 +108,7 @@ Thus, the two variables affect pump operation are set in New():
|
||||
/obj/machinery/atmospherics/components/binary/pump/ui_interact(mob/user, ui_key = "main", datum/nanoui/ui = null, force_open = 0)
|
||||
ui = SSnano.try_update_ui(user, src, ui_key, ui, force_open = force_open)
|
||||
if (!ui)
|
||||
ui = new(user, src, ui_key, "atmos_pump.dot", name, 400, 100)
|
||||
ui = new(user, src, ui_key, "atmos_pump", name, 400, 100)
|
||||
ui.open()
|
||||
|
||||
/obj/machinery/atmospherics/components/binary/pump/get_ui_data()
|
||||
|
||||
@@ -105,7 +105,7 @@ Thus, the two variables affect pump operation are set in New():
|
||||
/obj/machinery/atmospherics/components/binary/volume_pump/ui_interact(mob/user, ui_key = "main", datum/nanoui/ui = null, force_open = 0)
|
||||
ui = SSnano.try_update_ui(user, src, ui_key, ui, force_open = force_open)
|
||||
if (!ui)
|
||||
ui = new(user, src, ui_key, "atmos_pump.dot", name, 400, 100)
|
||||
ui = new(user, src, ui_key, "atmos_pump", name, 400, 100)
|
||||
ui.open()
|
||||
|
||||
/obj/machinery/atmospherics/components/binary/volume_pump/get_ui_data()
|
||||
|
||||
@@ -172,7 +172,7 @@ Filter types:
|
||||
/obj/machinery/atmospherics/components/trinary/filter/ui_interact(mob/user, ui_key = "main", datum/nanoui/ui = null, force_open = 0)
|
||||
ui = SSnano.try_update_ui(user, src, ui_key, ui, force_open = force_open)
|
||||
if (!ui)
|
||||
ui = new(user, src, ui_key, "atmos_filter.dot", name, 400, 120)
|
||||
ui = new(user, src, ui_key, "atmos_filter", name, 400, 120)
|
||||
ui.open()
|
||||
|
||||
/obj/machinery/atmospherics/components/trinary/filter/get_ui_data()
|
||||
|
||||
@@ -135,7 +135,7 @@
|
||||
/obj/machinery/atmospherics/components/trinary/mixer/ui_interact(mob/user, ui_key = "main", datum/nanoui/ui = null, force_open = 0)
|
||||
ui = SSnano.try_update_ui(user, src, ui_key, ui, force_open = force_open)
|
||||
if (!ui)
|
||||
ui = new(user, src, ui_key, "atmos_mixer.dot", name, 400, 145)
|
||||
ui = new(user, src, ui_key, "atmos_mixer", name, 400, 145)
|
||||
ui.open()
|
||||
|
||||
/obj/machinery/atmospherics/components/trinary/mixer/get_ui_data()
|
||||
|
||||
@@ -113,7 +113,7 @@
|
||||
/obj/machinery/atmospherics/components/unary/cryo_cell/ui_interact(mob/user, ui_key = "main", datum/nanoui/ui = null, force_open = 0)
|
||||
ui = SSnano.try_update_ui(user, src, ui_key, ui, force_open = force_open)
|
||||
if (!ui)
|
||||
ui = new(user, src, ui_key, "cryo.dot", name, 520, 560, state = notcontained_state)
|
||||
ui = new(user, src, ui_key, "cryo", name, 520, 560, state = notcontained_state)
|
||||
ui.open()
|
||||
|
||||
/obj/machinery/atmospherics/components/unary/cryo_cell/get_ui_data()
|
||||
|
||||
@@ -170,7 +170,7 @@ var/datum/subsystem/minimap/SSminimap
|
||||
text2file(hash, hash_path)
|
||||
|
||||
/datum/subsystem/minimap/proc/getMinimapFile(zlevel)
|
||||
return "data/minimaps/map_[zlevel]"
|
||||
return "data/minimaps/[MAP_NAME]_[zlevel]"
|
||||
|
||||
/datum/subsystem/minimap/proc/sendMinimaps(client/client)
|
||||
for (var/z = 1 to world.maxz)
|
||||
|
||||
@@ -187,7 +187,7 @@
|
||||
/obj/machinery/alarm/ui_interact(mob/user, ui_key = "main", datum/nanoui/ui = null, force_open = 0)
|
||||
ui = SSnano.try_update_ui(user, src, ui_key, ui, force_open = force_open)
|
||||
if (!ui)
|
||||
ui = new(user, src, ui_key, "air_alarm.dot", name, 480, 625)
|
||||
ui = new(user, src, ui_key, "air_alarm", name, 480, 625)
|
||||
ui.open()
|
||||
|
||||
/obj/machinery/alarm/get_ui_data(mob/user)
|
||||
@@ -311,7 +311,8 @@
|
||||
"excheck" = info["checks"]&1,
|
||||
"incheck" = info["checks"]&2,
|
||||
"direction" = info["direction"],
|
||||
"external" = info["external"]
|
||||
"external" = info["external"],
|
||||
"default" = (info["external"] == ONE_ATMOSPHERE)
|
||||
))
|
||||
if(AALARM_SCREEN_SCRUB)
|
||||
data["scrubbers"] = list()
|
||||
|
||||
@@ -277,7 +277,7 @@ update_flag
|
||||
/obj/machinery/portable_atmospherics/canister/ui_interact(mob/user, ui_key = "main", datum/nanoui/ui = null, force_open = 0)
|
||||
ui = SSnano.try_update_ui(user, src, ui_key, ui, force_open = force_open)
|
||||
if (!ui)
|
||||
ui = new(user, src, ui_key, "canister.dot", name, 470, 400, state = physical_state)
|
||||
ui = new(user, src, ui_key, "canister", name, 470, 400, state = physical_state)
|
||||
ui.open()
|
||||
|
||||
/obj/machinery/portable_atmospherics/canister/get_ui_data()
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
/obj/item/weapon/electronics/airlock/ui_interact(mob/user, ui_key = "main", var/datum/nanoui/ui = null, force_open = 0)
|
||||
SSnano.try_update_ui(user, src, ui_key, ui, force_open = force_open)
|
||||
if (!ui)
|
||||
ui = new(user, src, ui_key, "airlock_electronics.dot", name, 975, 415, state = hands_state)
|
||||
ui = new(user, src, ui_key, "airlock_electronics", name, 975, 415, state = hands_state)
|
||||
ui.open()
|
||||
|
||||
/obj/item/weapon/electronics/airlock/get_ui_data()
|
||||
|
||||
@@ -159,7 +159,7 @@
|
||||
/obj/machinery/space_heater/ui_interact(mob/user, ui_key = "main", datum/nanoui/ui = null, force_open = 0)
|
||||
ui = SSnano.try_update_ui(user, src, ui_key, ui, force_open = force_open)
|
||||
if (!ui)
|
||||
ui = new(user, src, ui_key, "space_heater.dot", name, 490, 350, state = physical_state)
|
||||
ui = new(user, src, ui_key, "space_heater", name, 490, 350, state = physical_state)
|
||||
ui.open()
|
||||
|
||||
/obj/machinery/space_heater/Topic(href, href_list)
|
||||
|
||||
@@ -122,7 +122,7 @@
|
||||
/obj/item/weapon/tank/ui_interact(mob/user, ui_key = "main", var/datum/nanoui/ui = null, force_open = 0)
|
||||
ui = SSnano.try_update_ui(user, src, ui_key, ui, force_open = force_open)
|
||||
if (!ui)
|
||||
ui = new(user, src, ui_key, "tanks.dot", name, 525, 175, state = inventory_state)
|
||||
ui = new(user, src, ui_key, "tanks", name, 525, 175, state = inventory_state)
|
||||
ui.open()
|
||||
|
||||
/obj/item/weapon/tank/get_ui_data()
|
||||
|
||||
@@ -791,3 +791,6 @@ var/global/list/g_fancy_list_of_types = null
|
||||
|
||||
// Clear the user's cache so they get resent.
|
||||
usr.client.cache = list()
|
||||
|
||||
// Send the assets.
|
||||
assets.send(usr.client)
|
||||
|
||||
@@ -227,6 +227,7 @@ You can set verify to TRUE if you want send() to sleep until the client has the
|
||||
|
||||
/datum/asset/nanoui
|
||||
var/list/common = list()
|
||||
var/list/uncommon = list()
|
||||
|
||||
var/list/common_dirs = list(
|
||||
"nano/styles/",
|
||||
@@ -252,9 +253,12 @@ You can set verify to TRUE if you want send() to sleep until the client has the
|
||||
for(var/filename in filenames)
|
||||
if(copytext(filename, length(filename)) != "/") // Ignore directories.
|
||||
if(fexists(path + filename))
|
||||
register_asset(filename, fcopy_rsc(path + filename))
|
||||
uncommon[filename] = fcopy_rsc(path + filename)
|
||||
register_asset(filename, uncommon[filename])
|
||||
|
||||
/datum/asset/nanoui/send(client, uncommon)
|
||||
if(isnull(uncommon))
|
||||
uncommon = src.uncommon
|
||||
if(!islist(uncommon))
|
||||
uncommon = list(uncommon)
|
||||
|
||||
|
||||
+46
-28
@@ -9,6 +9,10 @@
|
||||
* modified by neersighted
|
||||
**/
|
||||
|
||||
// Debug Things
|
||||
#define USE_MIN 0
|
||||
#define USE_LESS 0
|
||||
|
||||
/**
|
||||
* NanoUI datum:
|
||||
*
|
||||
@@ -93,13 +97,13 @@
|
||||
* Add the assets required by all NanoUIs.
|
||||
**/
|
||||
/datum/nanoui/proc/add_common_assets()
|
||||
add_script("nanoui.js")
|
||||
add_script("nanoui.util.js")
|
||||
add_script("nanoui.template.js")
|
||||
add_script("nanoui.helpers.js")
|
||||
add_script("nanoui.handlers.js")
|
||||
add_script("nanoui")
|
||||
add_script("nanoui.util")
|
||||
add_script("nanoui.template")
|
||||
add_script("nanoui.helpers")
|
||||
add_script("nanoui.handlers")
|
||||
|
||||
add_stylesheet("nanoui.css")
|
||||
add_stylesheet("nanoui")
|
||||
|
||||
/**
|
||||
* private
|
||||
@@ -209,13 +213,14 @@
|
||||
/**
|
||||
* public
|
||||
*
|
||||
* Add a stylesheet to the NanoUI.
|
||||
* Add a template to the NanoUI.
|
||||
* This must be called before the NanoUI is opened.
|
||||
*
|
||||
* required file string The path of the stylesheet file to add.
|
||||
* required key string The key used to reference this file in the frontend.
|
||||
* required file string The path of the template file to add.
|
||||
**/
|
||||
/datum/nanoui/proc/add_stylesheet(file)
|
||||
stylesheets.Add(file)
|
||||
/datum/nanoui/proc/add_template(key, file)
|
||||
templates[key] = "[file].dot"
|
||||
|
||||
/**
|
||||
* public
|
||||
@@ -226,25 +231,27 @@
|
||||
* required file string The path of the script file to add.
|
||||
**/
|
||||
/datum/nanoui/proc/add_script(file)
|
||||
scripts.Add(file)
|
||||
scripts.Add("[file].js")
|
||||
|
||||
/**
|
||||
* public
|
||||
*
|
||||
* Add a template to the NanoUI.
|
||||
* Add a stylesheet to the NanoUI.
|
||||
* This must be called before the NanoUI is opened.
|
||||
*
|
||||
* required key string The key used to reference this file in the frontend.
|
||||
* required file string The path of the template file to add.
|
||||
* required file string The path of the stylesheet file to add.
|
||||
**/
|
||||
/datum/nanoui/proc/add_template(key, filename)
|
||||
templates[key] = filename
|
||||
/datum/nanoui/proc/add_stylesheet(file)
|
||||
if(USE_LESS)
|
||||
stylesheets.Add("[file].less")
|
||||
else
|
||||
stylesheets.Add("[file].css")
|
||||
|
||||
/**
|
||||
* public
|
||||
*
|
||||
* Set the layout for this NanoUI.
|
||||
* This loads two files during get_html(): 'layout_[layout].dot' and 'layout_[layout].css'.
|
||||
* This loads custom layout styles and templates for this NanoUI.
|
||||
*
|
||||
* required layout_key string The new layout key.
|
||||
**/
|
||||
@@ -290,8 +297,18 @@
|
||||
**/
|
||||
/datum/nanoui/proc/get_html()
|
||||
// Add files based on the layout key.
|
||||
add_template("layout", "layout_[layout].dot")
|
||||
add_stylesheet("layout_[layout].css")
|
||||
add_template("layout", "layout_[layout]")
|
||||
add_stylesheet("layout_[layout]")
|
||||
|
||||
// Some string hacks for .less/.min.js.
|
||||
var/less = ""
|
||||
var/less_html = ""
|
||||
var/min = ""
|
||||
if(USE_LESS)
|
||||
less = "/less"
|
||||
less_html = "<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.[min]js'></script>"
|
||||
if(USE_MIN)
|
||||
min = "min."
|
||||
|
||||
// Generate <script> and <link> tags.
|
||||
var/script_html = ""
|
||||
@@ -299,7 +316,7 @@
|
||||
script_html += "<script type='text/javascript' src='[script]'></script>"
|
||||
var/stylesheet_html = ""
|
||||
for (var/stylesheet in stylesheets)
|
||||
stylesheet_html += "<link rel='stylesheet' type='text/css' href='[stylesheet]' />"
|
||||
stylesheet_html += "<link rel='stylesheet[less]' type='text/css' href='[stylesheet]' />"
|
||||
|
||||
// Generate template JSON.
|
||||
var/template_data_json = "{}"
|
||||
@@ -326,20 +343,21 @@
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<link rel='stylesheet' type='text/css' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.[min]css' />
|
||||
<link rel='stylesheet' type='text/css' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.[min]css' />
|
||||
[stylesheet_html]
|
||||
<!--\[if IE 8]>
|
||||
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.[min]js'></script>
|
||||
<script type='text/javascript' src='https//cdnjs.cloudflare.com/ajax/libs/ie8/0.2.6/ie8.js'></script>
|
||||
<!\[endif]-->
|
||||
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/dom4/1.5.2/dom4.js'></script>
|
||||
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.3.1/es5-shim.min.js'></script>
|
||||
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js'></script>
|
||||
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js'></script>
|
||||
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.3.1/es5-shim.[min]js'></script>
|
||||
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.[min]js'></script>
|
||||
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/eddy/0.7.0/eddy.dom.js'></script>
|
||||
<script type='text/javascript' src='https://cdn.rawgit.com/Mikhus/jsurl/master/url.min.js'></script>
|
||||
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/dot/1.0.3/doT.min.js'></script>
|
||||
<script type='text/javascript' src='https://cdn.rawgit.com/Mikhus/jsurl/master/url.[min]js'></script>
|
||||
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/dot/1.0.3/doT.[min]js'></script>
|
||||
[less_html]
|
||||
[script_html]
|
||||
<link rel='stylesheet' type='text/css' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css' />
|
||||
<link rel='stylesheet' type='text/css' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css' />
|
||||
[stylesheet_html]
|
||||
</head>
|
||||
<body id='body' data-template-data='[template_data_json]' data-initial-data='[initial_data_json]' data-url-parameters='[url_parameters_json]'>
|
||||
<div id='layout'></div>
|
||||
|
||||
@@ -631,7 +631,7 @@
|
||||
/obj/machinery/power/apc/ui_interact(mob/user, ui_key = "main", var/datum/nanoui/ui = null, force_open = 0)
|
||||
ui = SSnano.try_update_ui(user, src, ui_key, ui, force_open = force_open)
|
||||
if (!ui)
|
||||
ui = new(user, src, ui_key, "apc.dot", name, 550, 550)
|
||||
ui = new(user, src, ui_key, "apc", name, 550, 550)
|
||||
ui.open()
|
||||
|
||||
/obj/machinery/power/apc/get_ui_data(mob/user)
|
||||
|
||||
@@ -327,7 +327,7 @@
|
||||
/obj/machinery/power/smes/ui_interact(mob/user, ui_key = "main", datum/nanoui/ui = null, force_open = 0)
|
||||
ui = SSnano.try_update_ui(user, src, ui_key, ui, force_open = force_open)
|
||||
if (!ui)
|
||||
ui = new(user, src, ui_key, "smes.dot", name, 500, 400)
|
||||
ui = new(user, src, ui_key, "smes", name, 500, 400)
|
||||
ui.open()
|
||||
|
||||
/obj/machinery/power/smes/get_ui_data()
|
||||
|
||||
@@ -372,7 +372,7 @@
|
||||
/obj/machinery/power/solar_control/ui_interact(mob/user, ui_key = "main", datum/nanoui/ui = null, force_open = 0)
|
||||
ui = SSnano.try_update_ui(user, src, ui_key, ui, force_open = force_open)
|
||||
if (!ui)
|
||||
ui = new(user, src, ui_key, "solar_control.dot", name, 490, 395)
|
||||
ui = new(user, src, ui_key, "solar_control", name, 490, 395)
|
||||
ui.open()
|
||||
|
||||
/obj/machinery/power/solar_control/get_ui_data()
|
||||
|
||||
@@ -87,7 +87,7 @@
|
||||
/obj/machinery/chem_dispenser/ui_interact(mob/user, ui_key = "main", datum/nanoui/ui = null, force_open = 0)
|
||||
ui = SSnano.try_update_ui(user, src, ui_key, ui, force_open = force_open)
|
||||
if (!ui)
|
||||
ui = new(user, src, ui_key, "chem_dispenser.dot", name, 500, 650)
|
||||
ui = new(user, src, ui_key, "chem_dispenser", name, 500, 650)
|
||||
ui.open()
|
||||
|
||||
/obj/machinery/chem_dispenser/get_ui_data()
|
||||
|
||||
@@ -106,7 +106,7 @@
|
||||
/obj/machinery/chem_heater/ui_interact(mob/user, ui_key = "main", datum/nanoui/ui = null, force_open = 0)
|
||||
ui = SSnano.try_update_ui(user, src, ui_key, ui, force_open = force_open)
|
||||
if (!ui)
|
||||
ui = new(user, src, ui_key, "chem_heater.dot", name, 350, 400)
|
||||
ui = new(user, src, ui_key, "chem_heater", name, 350, 400)
|
||||
ui.open()
|
||||
|
||||
/obj/machinery/chem_heater/get_ui_data()
|
||||
|
||||
+248
-248
@@ -1,248 +1,248 @@
|
||||
<div class="notice">
|
||||
{{? data.siliconUser}}
|
||||
<div class="itemContentSmall">
|
||||
Interface Lock:
|
||||
</div>
|
||||
<div class="itemContentFull">
|
||||
{{:helper.link('Engaged', 'locked', {'toggleaccess': 1}, data.locked ? 'selected' : null)}}
|
||||
{{:helper.link('Disengaged', 'unlocked', {'toggleaccess': 1}, data.locked ? null : 'selected')}}
|
||||
</div>
|
||||
<div class="clearBoth"></div>
|
||||
{{??}}
|
||||
{{? data.locked}}
|
||||
Swipe an ID card to unlock this interface.
|
||||
{{??}}
|
||||
Swipe an ID card to lock this interface.
|
||||
{{?}}
|
||||
{{?}}
|
||||
</div>
|
||||
<h2>Air Status</h2>
|
||||
<div class="statusDisplay">
|
||||
{{? data.environment_data}}
|
||||
{{~ data.environment_data :info:i}}
|
||||
<div class="item">
|
||||
<div class="itemLabel">
|
||||
{{:info.name}}:
|
||||
</div>
|
||||
<div class="itemContent">
|
||||
{{? info.danger_level == 2}}
|
||||
<span class='bad'>
|
||||
{{?? info.danger_level == 1}}
|
||||
<span class='average'>
|
||||
{{??}}
|
||||
<span class='good'>
|
||||
{{?}}
|
||||
{{:helper.round(info.value*100)/100}}</span>{{:info.unit}}
|
||||
</div>
|
||||
</div>
|
||||
{{~}}
|
||||
<div class="item">
|
||||
<div class="itemLabel">
|
||||
Local Status:
|
||||
</div>
|
||||
<div class="itemContent">
|
||||
{{? data.danger_level == 2}}
|
||||
<span class='bad'>Danger (Internals Required)</span>
|
||||
{{?? data.danger_level == 1}}
|
||||
<span class='average'>Caution</span>
|
||||
{{??}}
|
||||
<span class='good'>Optimal</span>
|
||||
{{?}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="itemLabel">
|
||||
Area Status:
|
||||
</div>
|
||||
<div class="itemContent">
|
||||
{{? data.atmos_alarm}}
|
||||
<span class='bad'>Atmosphere Alarm</span>
|
||||
{{?? data.fire_alarm}}
|
||||
<span class='average'>Fire Alarm</span>
|
||||
{{??}}
|
||||
<span class='good'>Nominal</span>
|
||||
{{?}}
|
||||
</div>
|
||||
</div>
|
||||
{{??}}
|
||||
<div class="item"><span class='bad'>Warning: Cannot obtain air sample for analysis.</span></div>
|
||||
{{?}}
|
||||
{{? data.dangerous}}
|
||||
<hr />
|
||||
<div class="item"><span class='bad'>Warning: Safety measures offline. Device may exhibit abnormal behavior.</span></div>
|
||||
{{?}}
|
||||
</div>
|
||||
{{? (!data.locked || data.siliconUser)}}
|
||||
{{? data.screen != 1}}
|
||||
<div class="item">{{:helper.link('Back', 'triangle-1-w', {'screen': 1})}}</div>
|
||||
{{?}}
|
||||
{{? data.screen == 1}}
|
||||
<h2>Air Controls</h2>
|
||||
<div class="statusDisplay">
|
||||
<div class="item">
|
||||
{{? !data.atmos_alarm}}
|
||||
{{:helper.link('Area Atmospheric Alarm', 'power', {'atmos_alarm': 1}, null, null)}}
|
||||
{{??}}
|
||||
{{:helper.link('Area Atmospheric Alarm', 'close', {'atmos_reset': 1}, null, 'yellowButton')}}
|
||||
{{?}}
|
||||
</div>
|
||||
<div class="item">
|
||||
{{? data.mode == 3}}
|
||||
{{:helper.link('Panic Siphon', 'close', {'mode': 1}, null, 'redButton')}}
|
||||
{{??}}
|
||||
{{:helper.link('Panic Siphon', 'power', {'mode': 3}, null, null)}}
|
||||
{{?}}
|
||||
</div>
|
||||
<br />
|
||||
<div class="item">
|
||||
{{:helper.link('Vent Controls', 'wrench', {'screen': 2})}}
|
||||
</div>
|
||||
<div class="item">
|
||||
{{:helper.link('Scrubber Controls', 'wrench', {'screen': 3})}}
|
||||
</div>
|
||||
<br />
|
||||
<div class="item">
|
||||
{{:helper.link('Set Environmental Mode', 'pencil', {'screen': 4})}}
|
||||
</div>
|
||||
<div class="item">
|
||||
{{:helper.link('Set Alarm Threshold', 'pencil', {'screen': 5})}}
|
||||
</div>
|
||||
</div>
|
||||
{{?? data.screen == 2}}
|
||||
<h2>Vent Controls</h2>
|
||||
{{~ data.vents :vent:i}}
|
||||
<h3>{{:vent.long_name}}</h3>
|
||||
<div class="statusDisplay">
|
||||
<div class="item">
|
||||
<div class="itemLabel">
|
||||
Power:
|
||||
</div>
|
||||
<div class="itemContent">
|
||||
{{? vent.power}}
|
||||
{{:helper.link('On', 'power', {'id_tag': vent.id_tag, 'command': 'power', 'val': 0}, null, null)}}
|
||||
{{??}}
|
||||
{{:helper.link('Off', 'close', {'id_tag': vent.id_tag, 'command': 'power', 'val': 1}, null, 'redButton')}}
|
||||
{{?}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="itemLabel">
|
||||
Mode:
|
||||
</div>
|
||||
<div class="itemContent">
|
||||
{{? vent.direction == "sipho"}}
|
||||
<span class="bad">Siphoning</span>
|
||||
{{??}}
|
||||
<span class="good">Pressurizing</span>
|
||||
{{?}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="itemLabel">
|
||||
Pressure Checks:
|
||||
</div>
|
||||
<div class="itemContent">
|
||||
{{:helper.link('External', 'arrow-1-n', {'id_tag': vent.id_tag, 'command': 'excheck', 'val': vent.checks}, null, vent.excheck ? 'selected' : null)}}
|
||||
{{:helper.link('Internal', 'arrow-1-s', {'id_tag': vent.id_tag, 'command': 'incheck', 'val': vent.checks}, null, vent.incheck ? 'selected' : null)}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="itemLabel">
|
||||
Set Pressure:
|
||||
</div>
|
||||
<div class="itemContent">
|
||||
{{:helper.link(helper.round(vent.external*100)/100, 'pencil', {'id_tag': vent.id_tag, 'command': 'set_external_pressure'})}}
|
||||
{{:helper.link('Reset', 'refresh', { 'id_tag': vent.id_tag, 'command': 'reset_external_pressure'})}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{~}}
|
||||
{{? !data.vents.length}}
|
||||
No vents connected.
|
||||
{{?}}
|
||||
{{?? data.screen == 3}}
|
||||
<h2>Scrubber Controls</h2>
|
||||
{{~ data.scrubbers :scrubber:i}}
|
||||
<h3>{{:scrubber.long_name}}</h3>
|
||||
<div class="statusDisplay">
|
||||
<div class="item">
|
||||
<div class="itemLabel">
|
||||
Power:
|
||||
</div>
|
||||
<div class="itemContent">
|
||||
{{? scrubber.power}}
|
||||
{{:helper.link('On', 'power', {'id_tag': scrubber.id_tag, 'command': 'power', 'val': 0}, null, null)}}
|
||||
{{??}}
|
||||
{{:helper.link('Off', 'close', {'id_tag': scrubber.id_tag, 'command': 'power', 'val': 1}, null, 'redButton')}}
|
||||
{{?}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="itemLabel">
|
||||
Mode:
|
||||
</div>
|
||||
<div class="itemContent">
|
||||
{{? scrubber.scrubbing}}
|
||||
{{:helper.link('Scrubbing', 'refresh', {'id_tag': scrubber.id_tag, 'command': 'scrubbing', 'val': 0}, null, null)}}
|
||||
{{??}}
|
||||
{{:helper.link('Siphoning', 'circle-close', {'id_tag': scrubber.id_tag, 'command': 'scrubbing', 'val': 1}, null, 'redButton')}}
|
||||
{{?}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="itemLabel">
|
||||
Range:
|
||||
</div>
|
||||
<div class="itemContent">
|
||||
{{? scrubber.widenet}}
|
||||
{{:helper.link('Extended', 'zoomout', {'id_tag': scrubber.id_tag, 'command': 'widenet', 'val': 0}, null, 'yellowButton')}}
|
||||
{{??}}
|
||||
{{:helper.link('Normal', 'zoomin', {'id_tag': scrubber.id_tag, 'command': 'widenet', 'val': 1}, null, null)}}
|
||||
{{?}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="itemLabel">
|
||||
Filters:
|
||||
</div>
|
||||
<div class="itemContent">
|
||||
{{:helper.link("CO2", scrubber.filter_co2 ? 'check' : 'close', {'id_tag': scrubber.id_tag, 'command': "co2_scrub", 'val': scrubber.filter_co2 ? 0 : 1}, null, scrubber.filter_co2 ? 'selected' : null)}}
|
||||
{{:helper.link("N2O", scrubber.filter_n2o ? 'check' : 'close', {'id_tag': scrubber.id_tag, 'command': "n2o_scrub", 'val': scrubber.filter_n2o ? 0 : 1}, null, scrubber.filter_n2o ? 'selected' : null)}}
|
||||
{{:helper.link("Plasma", scrubber.filter_toxins ? 'check' : 'close', {'id_tag': scrubber.id_tag, 'command': "tox_scrub", 'val': scrubber.filter_toxins ? 0 : 1}, null, scrubber.filter_toxins ? 'selected' : null)}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{~}}
|
||||
{{? !data.scrubbers.length}}
|
||||
No scrubbers connected.
|
||||
{{?}}
|
||||
{{?? data.screen == 4}}
|
||||
<h2>Environmental Modes</h2>
|
||||
<div class="statusDisplay">
|
||||
{{~ data.modes :mode:i}}
|
||||
<div class="item">
|
||||
{{:helper.link(mode.name, mode.selected? 'check' : 'close', {'mode': mode.mode}, null, mode.selected ? (mode.danger ? 'redButton' : 'selected') : (mode.danger ? 'yellowButton' : null))}}
|
||||
</div>
|
||||
{{~}}
|
||||
</div>
|
||||
{{?? data.screen == 5}}
|
||||
<h2>Alarm Thresholds</h2>
|
||||
<div class="statusDisplay">
|
||||
<table class="fixed">
|
||||
<tr>
|
||||
<td></td><td><span class='bad'>min2</span></td><td><span class='average'>min1</span></td><td><span class='average'>max1</span></td><td><span class='bad'>max2</span></td>
|
||||
</tr>
|
||||
{{~ data.thresholds :threshold:i}}
|
||||
<tr>
|
||||
<td>{{:threshold.name}}</td>
|
||||
{{~ threshold.settings :setting:j}}
|
||||
<td>
|
||||
{{:helper.link(setting.selected >= 0 ? helper.round(setting.selected*100)/100 : "Off", null, {'command': 'set_threshold', 'env': setting.env, 'var': setting.val})}}
|
||||
</td>
|
||||
{{~}}
|
||||
</tr>
|
||||
{{~}}
|
||||
<table>
|
||||
</div>
|
||||
{{?}}
|
||||
{{?}}
|
||||
<div class="notice">
|
||||
{{? data.siliconUser}}
|
||||
<div class="itemContentSmall">
|
||||
Interface Lock:
|
||||
</div>
|
||||
<div class="itemContentFull">
|
||||
{{:helper.link('Engaged', 'locked', {'toggleaccess': 1}, data.locked ? 'selected' : null)}}
|
||||
{{:helper.link('Disengaged', 'unlocked', {'toggleaccess': 1}, data.locked ? null : 'selected')}}
|
||||
</div>
|
||||
<div class="clearBoth"></div>
|
||||
{{??}}
|
||||
{{? data.locked}}
|
||||
Swipe an ID card to unlock this interface.
|
||||
{{??}}
|
||||
Swipe an ID card to lock this interface.
|
||||
{{?}}
|
||||
{{?}}
|
||||
</div>
|
||||
<h2>Air Status</h2>
|
||||
<div class="statusDisplay">
|
||||
{{? data.environment_data}}
|
||||
{{~ data.environment_data:info:i}}
|
||||
<div class="item">
|
||||
<div class="itemLabel">
|
||||
{{:info.name}}:
|
||||
</div>
|
||||
<div class="itemContent">
|
||||
{{? info.danger_level == 2}}
|
||||
<span class='bad'>
|
||||
{{?? info.danger_level == 1}}
|
||||
<span class='average'>
|
||||
{{??}}
|
||||
<span class='good'>
|
||||
{{?}}
|
||||
{{:helper.fixed(info.value, 2)}}</span>{{:info.unit}}
|
||||
</div>
|
||||
</div>
|
||||
{{~}}
|
||||
<div class="item">
|
||||
<div class="itemLabel">
|
||||
Local Status:
|
||||
</div>
|
||||
<div class="itemContent">
|
||||
{{? data.danger_level == 2}}
|
||||
<span class='bad bold'>Danger (Internals Required)</span>
|
||||
{{?? data.danger_level == 1}}
|
||||
<span class='average bold'>Caution</span>
|
||||
{{??}}
|
||||
<span class='good'>Optimal</span>
|
||||
{{?}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="itemLabel">
|
||||
Area Status:
|
||||
</div>
|
||||
<div class="itemContent">
|
||||
{{? data.atmos_alarm}}
|
||||
<span class='bad bold'>Atmosphere Alarm</span>
|
||||
{{?? data.fire_alarm}}
|
||||
<span class='bad bold'>Fire Alarm</span>
|
||||
{{??}}
|
||||
<span class='good'>Nominal</span>
|
||||
{{?}}
|
||||
</div>
|
||||
</div>
|
||||
{{??}}
|
||||
<div class="item"><span class='bad bold'>Warning: Cannot obtain air sample for analysis.</span></div>
|
||||
{{?}}
|
||||
{{? data.dangerous}}
|
||||
<hr />
|
||||
<div class="item"><span class='bad bold'>Warning: Safety measures offline. Device may exhibit abnormal behavior.</span></div>
|
||||
{{?}}
|
||||
</div>
|
||||
{{? (!data.locked || data.siliconUser)}}
|
||||
{{? data.screen != 1}}
|
||||
<div class="item">{{:helper.link('Back', 'arrow-left', {'screen': 1})}}</div>
|
||||
{{?}}
|
||||
{{? data.screen == 1}}
|
||||
<h2>Air Controls</h2>
|
||||
<div class="statusDisplay">
|
||||
<div class="item">
|
||||
{{? !data.atmos_alarm}}
|
||||
{{:helper.link('Area Atmospheric Alarm', 'hand-stop-o', {'atmos_alarm': 1})}}
|
||||
{{??}}
|
||||
{{:helper.link('Area Atmospheric Alarm', 'close', {'atmos_reset': 1}, null, 'caution')}}
|
||||
{{?}}
|
||||
</div>
|
||||
<div class="item">
|
||||
{{? data.mode != 3}}
|
||||
{{:helper.link('Panic Siphon', 'exclamation', {'mode': 3})}}
|
||||
{{??}}
|
||||
{{:helper.link('Panic Siphon', 'close', {'mode': 1}, null, 'danger')}}
|
||||
{{?}}
|
||||
</div>
|
||||
<br />
|
||||
<div class="item">
|
||||
{{:helper.link('Vent Controls', 'sign-out', {'screen': 2})}}
|
||||
</div>
|
||||
<div class="item">
|
||||
{{:helper.link('Scrubber Controls', 'filter', {'screen': 3})}}
|
||||
</div>
|
||||
<br />
|
||||
<div class="item">
|
||||
{{:helper.link('Set Environmental Mode', 'cog', {'screen': 4})}}
|
||||
</div>
|
||||
<div class="item">
|
||||
{{:helper.link('Set Alarm Threshold', 'bar-chart', {'screen': 5})}}
|
||||
</div>
|
||||
</div>
|
||||
{{?? data.screen == 2}}
|
||||
<h2>Vent Controls</h2>
|
||||
{{~ data.vents:vent:i}}
|
||||
<h3>{{:vent.long_name}}</h3>
|
||||
<div class="statusDisplay">
|
||||
<div class="item">
|
||||
<div class="itemLabel">
|
||||
Power:
|
||||
</div>
|
||||
<div class="itemContent">
|
||||
{{? vent.power}}
|
||||
{{:helper.link('On', 'power-off', {'id_tag': vent.id_tag, 'command': 'power', 'val': 0}, null, null)}}
|
||||
{{??}}
|
||||
{{:helper.link('Off', 'close', {'id_tag': vent.id_tag, 'command': 'power', 'val': 1}, null, 'danger')}}
|
||||
{{?}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="itemLabel">
|
||||
Mode:
|
||||
</div>
|
||||
<div class="itemContent">
|
||||
{{? vent.direction == "sipho"}}
|
||||
<span class="bad">Siphoning</span>
|
||||
{{??}}
|
||||
<span class="good">Pressurizing</span>
|
||||
{{?}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="itemLabel">
|
||||
Pressure Checks:
|
||||
</div>
|
||||
<div class="itemContent">
|
||||
{{:helper.link('Internal', 'sign-in', {'id_tag': vent.id_tag, 'command': 'incheck', 'val': vent.checks}, null, vent.incheck ? 'selected' : null)}}
|
||||
{{:helper.link('External', 'sign-out', {'id_tag': vent.id_tag, 'command': 'excheck', 'val': vent.checks}, null, vent.excheck ? 'selected' : null)}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="itemLabel">
|
||||
Set Pressure:
|
||||
</div>
|
||||
<div class="itemContent">
|
||||
{{:helper.link(helper.fixed(vent.external), 'pencil', {'id_tag': vent.id_tag, 'command': 'set_external_pressure'})}}
|
||||
{{:helper.link('Reset', 'refresh', { 'id_tag': vent.id_tag, 'command': 'reset_external_pressure'}, vent.default ? 'disabled' : null)}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{~}}
|
||||
{{? !data.vents.length}}
|
||||
No vents connected.
|
||||
{{?}}
|
||||
{{?? data.screen == 3}}
|
||||
<h2>Scrubber Controls</h2>
|
||||
{{~ data.scrubbers:scrubber:i}}
|
||||
<h3>{{:scrubber.long_name}}</h3>
|
||||
<div class="statusDisplay">
|
||||
<div class="item">
|
||||
<div class="itemLabel">
|
||||
Power:
|
||||
</div>
|
||||
<div class="itemContent">
|
||||
{{? scrubber.power}}
|
||||
{{:helper.link('On', 'power-off', {'id_tag': scrubber.id_tag, 'command': 'power', 'val': 0}, null, null)}}
|
||||
{{??}}
|
||||
{{:helper.link('Off', 'close', {'id_tag': scrubber.id_tag, 'command': 'power', 'val': 1}, null, 'danger')}}
|
||||
{{?}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="itemLabel">
|
||||
Mode:
|
||||
</div>
|
||||
<div class="itemContent">
|
||||
{{? scrubber.scrubbing}}
|
||||
{{:helper.link('Scrubbing', 'filter', {'id_tag': scrubber.id_tag, 'command': 'scrubbing', 'val': 0}, null, null)}}
|
||||
{{??}}
|
||||
{{:helper.link('Siphoning', 'sign-in', {'id_tag': scrubber.id_tag, 'command': 'scrubbing', 'val': 1}, null, 'danger')}}
|
||||
{{?}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="itemLabel">
|
||||
Range:
|
||||
</div>
|
||||
<div class="itemContent">
|
||||
{{? scrubber.widenet}}
|
||||
{{:helper.link('Extended', 'expand', {'id_tag': scrubber.id_tag, 'command': 'widenet', 'val': 0}, null, 'caution')}}
|
||||
{{??}}
|
||||
{{:helper.link('Normal', 'compress', {'id_tag': scrubber.id_tag, 'command': 'widenet', 'val': 1}, null, null)}}
|
||||
{{?}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="itemLabel">
|
||||
Filters:
|
||||
</div>
|
||||
<div class="itemContent">
|
||||
{{:helper.link("CO2", scrubber.filter_co2 ? 'check-square-o' : 'square-o', {'id_tag': scrubber.id_tag, 'command': "co2_scrub", 'val': scrubber.filter_co2 ? 0 : 1}, null, scrubber.filter_co2 ? 'selected' : null)}}
|
||||
{{:helper.link("N2O", scrubber.filter_n2o ? 'check-square-o' : 'square-o', {'id_tag': scrubber.id_tag, 'command': "n2o_scrub", 'val': scrubber.filter_n2o ? 0 : 1}, null, scrubber.filter_n2o ? 'selected' : null)}}
|
||||
{{:helper.link("Plasma", scrubber.filter_toxins ? 'check-square-o' : 'square-o', {'id_tag': scrubber.id_tag, 'command': "tox_scrub", 'val': scrubber.filter_toxins ? 0 : 1}, null, scrubber.filter_toxins ? 'selected' : null)}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{~}}
|
||||
{{? !data.scrubbers.length}}
|
||||
No scrubbers connected.
|
||||
{{?}}
|
||||
{{?? data.screen == 4}}
|
||||
<h2>Environmental Modes</h2>
|
||||
<div class="statusDisplay">
|
||||
{{~ data.modes:mode:i}}
|
||||
<div class="item">
|
||||
{{:helper.link(mode.name, mode.selected ? 'check-square-o' : 'square-o', {'mode': mode.mode}, null, mode.selected ? (mode.danger ? 'danger' : 'selected') : null)}}
|
||||
</div>
|
||||
{{~}}
|
||||
</div>
|
||||
{{?? data.screen == 5}}
|
||||
<h2>Alarm Thresholds</h2>
|
||||
<div class="statusDisplay">
|
||||
<table class="fixed">
|
||||
<tr>
|
||||
<td></td><td><span class='bad'>min2</span></td><td><span class='average'>min1</span></td><td><span class='average'>max1</span></td><td><span class='bad'>max2</span></td>
|
||||
</tr>
|
||||
{{~ data.thresholds:threshold:i}}
|
||||
<tr>
|
||||
<td>{{:threshold.name}}</td>
|
||||
{{~ threshold.settings:setting:j}}
|
||||
<td>
|
||||
{{:helper.link(setting.selected >= 0 ? helper.round(setting.selected*100)/100 : "Off", null, {'command': 'set_threshold', 'env': setting.env, 'var': setting.val})}}
|
||||
</td>
|
||||
{{~}}
|
||||
</tr>
|
||||
{{~}}
|
||||
<table>
|
||||
</div>
|
||||
{{?}}
|
||||
{{?}}
|
||||
|
||||
+12
-12
@@ -54,10 +54,10 @@
|
||||
Power Cell:
|
||||
</div>
|
||||
{{? data.powerCellStatus != null}}
|
||||
<div class="itemContent" style="width: 60px">
|
||||
{{:helper.bar(data.powerCellStatus, 0, 100, data.powerCellStatus >= 50 ? 'good' : data.powerCellStatus >= 25 ? 'average' : 'bad')}}
|
||||
<div class="itemContent" style="width: 60px">
|
||||
{{:helper.round(data.powerCellStatus*10)/10}}%
|
||||
</div>
|
||||
{{:helper.displayBar(data.powerCellStatus, 0, 100, data.powerCellStatus >= 50 ? 'good' : data.powerCellStatus >= 25 ? 'average' : 'bad')}}
|
||||
</div>
|
||||
{{??}}
|
||||
<div class="itemContent">
|
||||
<span class='bad'>Power cell removed.</span>
|
||||
@@ -72,21 +72,21 @@
|
||||
<div class="itemContent">
|
||||
{{? data.locked && !data.siliconUser}}
|
||||
{{? data.chargeMode}}
|
||||
<span class='good'>Auto</span>
|
||||
<span class='bold good'>Auto</span>
|
||||
{{??}}
|
||||
<span class='bad'>Off</span>
|
||||
{{?}}
|
||||
<span class='bold bad'>Off</span>
|
||||
{{?}}
|
||||
{{??}}
|
||||
{{:helper.link('Auto', 'refresh', {'cmode' : 1}, data.chargeMode ? 'selected' : null)}}
|
||||
{{:helper.link('Off', 'close', {'cmode' : 1}, data.chargeMode ? null : 'selected')}}
|
||||
{{?}}
|
||||
|
||||
{{? data.chargingStatus > 1}}
|
||||
[<span class='good'>Fully Charged</span>]
|
||||
[<span class='bold good'>Fully Charged</span>]
|
||||
{{?? data.chargingStatus == 1}}
|
||||
[<span class='average'>Charging</span>]
|
||||
[<span class='bold average'>Charging</span>]
|
||||
{{??}}
|
||||
[<span class='bad'>Not Charging</span>]
|
||||
[<span class='bold bad'>Not Charging</span>]
|
||||
{{?}}
|
||||
</div>
|
||||
</div>
|
||||
@@ -104,9 +104,9 @@
|
||||
</div>
|
||||
<div class="itemContent" style="width: 105px">
|
||||
{{? channel.status <= 1}}
|
||||
<span class='bad'>Off</span>
|
||||
<span class='bold bad'>Off</span>
|
||||
{{?? channel.status >= 2}}
|
||||
<span class='good'>On</span>
|
||||
<span class='bold good'>On</span>
|
||||
{{?}}
|
||||
|
||||
{{? channel.status == 1 || channel.status == 3}}
|
||||
@@ -171,4 +171,4 @@
|
||||
{{?}}
|
||||
</div>
|
||||
<div class="clearBoth"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="noticePlaceholder">The regulator is connected to a tank.</div>
|
||||
{{??}}
|
||||
<div class="notice">The regulator is not connected to a tank.</div>
|
||||
{{?}}
|
||||
{{?}}
|
||||
<h2>Canister</h2>
|
||||
<div class="item">
|
||||
{{:helper.link('Relabel', 'pencil', {'relabel' : 1}, data.canLabel ? null : 'disabled')}}
|
||||
@@ -33,7 +33,7 @@
|
||||
Release Pressure:
|
||||
</div>
|
||||
<div class="itemContent">
|
||||
{{:helper.displayBar(data.releasePressure, data.minReleasePressure, data.maxReleasePressure)}}
|
||||
{{:helper.bar(data.releasePressure, data.minReleasePressure, data.maxReleasePressure)}}
|
||||
{{:data.releasePressure}} kPa
|
||||
</div>
|
||||
</div>
|
||||
@@ -47,8 +47,8 @@
|
||||
{{:helper.link('Set', 'pencil', {'release_p': 'custom'}, null)}}
|
||||
{{:helper.link('Max', 'plus', {'release_p': 'max'}, (data.releasePressure < data.maxReleasePressure) ? null : 'disabled')}}
|
||||
<br class="clearBoth" />
|
||||
{{:helper.link('Open', 'unlocked', {'toggle' : 1}, data.valveOpen ? 'selected' : null)}}
|
||||
{{:helper.link('Close', 'locked', {'toggle' : 1}, data.valveOpen ? null : 'selected')}}
|
||||
{{:helper.link('Open', 'unlock', {'toggle' : 1}, data.valveOpen ? 'selected' : null)}}
|
||||
{{:helper.link('Close', 'lock', {'toggle' : 1}, data.valveOpen ? null : 'selected')}}
|
||||
</div>
|
||||
</div>
|
||||
<h2>Holding Tank</h2>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
Energy:
|
||||
</div>
|
||||
<div class="itemContent">
|
||||
{{:helper.displayBar(data.energy, 0, data.maxEnergy, 'good')}}
|
||||
{{:helper.bar(data.energy, 0, data.maxEnergy, 'good')}}
|
||||
{{:data.energy}} Units
|
||||
</div>
|
||||
</div>
|
||||
@@ -61,4 +61,4 @@
|
||||
{{?}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -43,9 +43,9 @@
|
||||
</div>
|
||||
<div class="itemContent">
|
||||
{{? data.occupant.health >= 0}}
|
||||
{{:helper.displayBar(data.occupant.health, 0, data.occupant.maxHealth, 'good')}}
|
||||
{{:helper.bar(data.occupant.health, 0, data.occupant.maxHealth, 'good')}}
|
||||
{{??}}
|
||||
{{:helper.displayBar(data.occupant.health, 0, data.occupant.minHealth, 'average')}}
|
||||
{{:helper.bar(data.occupant.health, 0, data.occupant.minHealth, 'average')}}
|
||||
{{?}}
|
||||
{{:helper.round(data.occupant.health)}}
|
||||
</div>
|
||||
@@ -55,7 +55,7 @@
|
||||
Brute:
|
||||
</div>
|
||||
<div class="itemContent">
|
||||
{{:helper.displayBar(data.occupant.bruteLoss, 0, data.occupant.maxHealth, 'bad')}}
|
||||
{{:helper.bar(data.occupant.bruteLoss, 0, data.occupant.maxHealth, 'bad')}}
|
||||
{{:helper.round(data.occupant.bruteLoss)}}
|
||||
</div>
|
||||
</div>
|
||||
@@ -64,7 +64,7 @@
|
||||
Respiratory:
|
||||
</div>
|
||||
<div class="itemContent">
|
||||
{{:helper.displayBar(data.occupant.oxyLoss, 0, data.occupant.maxHealth, 'bad')}}
|
||||
{{:helper.bar(data.occupant.oxyLoss, 0, data.occupant.maxHealth, 'bad')}}
|
||||
{{:helper.round(data.occupant.oxyLoss)}}
|
||||
</div>
|
||||
</div>
|
||||
@@ -73,7 +73,7 @@
|
||||
Toxin:
|
||||
</div>
|
||||
<div class="itemContent">
|
||||
{{:helper.displayBar(data.occupant.toxLoss, 0, data.occupant.maxHealth, 'bad')}}
|
||||
{{:helper.bar(data.occupant.toxLoss, 0, data.occupant.maxHealth, 'bad')}}
|
||||
{{:helper.round(data.occupant.toxLoss)}}
|
||||
</div>
|
||||
</div>
|
||||
@@ -82,7 +82,7 @@
|
||||
Burn:
|
||||
</div>
|
||||
<div class="itemContent">
|
||||
{{:helper.displayBar(data.occupant.fireLoss, 0, data.occupant.maxHealth, 'bad')}}
|
||||
{{:helper.bar(data.occupant.fireLoss, 0, data.occupant.maxHealth, 'bad')}}
|
||||
{{:helper.round(data.occupant.fireLoss)}}
|
||||
</div>
|
||||
</div>
|
||||
@@ -138,7 +138,7 @@
|
||||
Contents:
|
||||
</div>
|
||||
<div class="itemContent">
|
||||
{{? data.isBeakerLoaded}}
|
||||
{{? data.isBeakerLoaded}}
|
||||
{{? data.beakerContents.length}}
|
||||
{{~ data.beakerContents :reagent:i}}
|
||||
<span class="highlight">{{:reagent.volume}} units of {{:reagent.name}}</span><br />
|
||||
@@ -151,4 +151,4 @@
|
||||
{{?}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+13
-13
@@ -5,7 +5,7 @@
|
||||
Stored Energy:
|
||||
</div>
|
||||
<div class="itemContent">
|
||||
{{:helper.displayBar(data.capacityPercent, 0, 100, data.capacityPercent >= 50 ? 'good' : data.capacityPercent >= 15 ? 'average' : 'bad')}}
|
||||
{{:helper.bar(data.capacityPercent, 0, 100, data.capacityPercent >= 50 ? 'good' : data.capacityPercent >= 15 ? 'average' : 'bad')}}
|
||||
<div class="statusValue">
|
||||
{{:helper.round(data.capacityPercent)}}%
|
||||
</div>
|
||||
@@ -36,14 +36,14 @@
|
||||
Input Setting:
|
||||
</div>
|
||||
<div class="itemContent">
|
||||
{{:helper.displayBar(data.inputLevel, 0, data.inputLevelMax)}}
|
||||
{{:helper.bar(data.inputLevel, 0, data.inputLevelMax)}}
|
||||
{{:data.inputLevel}} W
|
||||
<br class="clearBoth" />
|
||||
{{:helper.link('', 'seek-start', {'set_input_level': '0'}, data.inputLevel ? null : 'selected')}}
|
||||
{{:helper.link('', 'triangle-1-w', {'set_input_level': 'minus'}, data.inputLevel ? null : 'disabled')}}
|
||||
{{:helper.link('', 'fast-backward', {'set_input_level': '0'}, data.inputLevel ? null : 'selected')}}
|
||||
{{:helper.link('', 'backward', {'set_input_level': 'minus'}, data.inputLevel ? null : 'disabled')}}
|
||||
{{:helper.link('Set', 'pencil', {'set_input_level': 'custom'}, null)}}
|
||||
{{:helper.link('', 'triangle-1-e', {'set_input_level': 'plus'}, data.inputLevel == data.inputLevelMax ? 'disabled' : null)}}
|
||||
{{:helper.link('', 'seek-end', {'set_input_level': 'max'}, data.inputLevel == data.inputLevelMax ? 'selected' : null)}}
|
||||
{{:helper.link('', 'forward', {'set_input_level': 'plus'}, data.inputLevel == data.inputLevelMax ? 'disabled' : null)}}
|
||||
{{:helper.link('', 'fast-forward', {'set_input_level': 'max'}, data.inputLevel == data.inputLevelMax ? 'selected' : null)}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
@@ -62,7 +62,7 @@
|
||||
Charge Mode:
|
||||
</div>
|
||||
<div class="itemContent">
|
||||
{{:helper.link('On', 'power', {'output_attempt': 1}, data.outputAttempt ? 'selected' : null)}}
|
||||
{{:helper.link('On', 'power-off', {'output_attempt': 1}, data.outputAttempt ? 'selected' : null)}}
|
||||
{{:helper.link('Off', 'close', {'output_attempt': 0}, data.outputAttempt ? null : 'selected')}}
|
||||
|
||||
{{? data.outputting}}
|
||||
@@ -79,14 +79,14 @@
|
||||
Output Setting:
|
||||
</div>
|
||||
<div class="itemContent">
|
||||
{{:helper.displayBar(data.outputLevel, 0, data.outputLevelMax)}}
|
||||
{{:helper.bar(data.outputLevel, 0, data.outputLevelMax)}}
|
||||
{{:data.outputLevel}} W
|
||||
<br class="clearBoth" />
|
||||
{{:helper.link('', 'seek-start', {'set_output_level': '0'}, data.outputLevel ? null : 'selected')}}
|
||||
{{:helper.link('', 'triangle-1-w', {'set_output_level': 'minus'}, data.outputLevel ? null : 'disabled')}}
|
||||
{{:helper.link('', 'fast-backward', {'set_output_level': '0'}, data.outputLevel ? null : 'selected')}}
|
||||
{{:helper.link('', 'backward', {'set_output_level': 'minus'}, data.outputLevel ? null : 'disabled')}}
|
||||
{{:helper.link('Set', 'pencil', {'set_output_level': 'custom'}, null)}}
|
||||
{{:helper.link('', 'triangle-1-e', {'set_output_level': 'plus'}, data.outputLevel == data.outputLevelMax ? 'disabled' : null)}}
|
||||
{{:helper.link('', 'seek-end', {'set_output_level': 'max'}, data.outputLevel == data.outputLevelMax ? 'selected' : null)}}
|
||||
{{:helper.link('', 'forward', {'set_output_level': 'plus'}, data.outputLevel == data.outputLevelMax ? 'disabled' : null)}}
|
||||
{{:helper.link('', 'fast-forward', {'set_output_level': 'max'}, data.outputLevel == data.outputLevelMax ? 'selected' : null)}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
@@ -97,4 +97,4 @@
|
||||
{{:data.outputUsed}} W
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
</div>
|
||||
<div class="itemContent">
|
||||
{{? data.hasPowercell}}
|
||||
{{:helper.displayBar(data.powerLevel, 0, 100, 'good')}} {{:data.powerLevel}}%
|
||||
{{:helper.bar(data.powerLevel, 0, 100, 'good')}} {{:data.powerLevel}}%
|
||||
{{? data.open}}
|
||||
<br />
|
||||
{{:helper.link('Eject', 'eject', {'cellremove' : 1}, null)}}
|
||||
@@ -73,4 +73,4 @@
|
||||
{{?}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2,13 +2,13 @@
|
||||
<div class="noticePlaceholder">The regulator is connected to a mask.</div>
|
||||
{{??}}
|
||||
<div class="notice">The regulator is not connected to a mask.</div>
|
||||
{{?}}
|
||||
{{?}}
|
||||
<div class="item">
|
||||
<div class="itemLabel">
|
||||
Tank Pressure:
|
||||
</div>
|
||||
<div class="itemContent">
|
||||
{{:helper.displayBar(data.tankPressure, 0, 1013, (data.tankPressure > 200) ? 'good' : ((data.tankPressure > 100) ? 'average' : 'bad'))}}
|
||||
{{:helper.bar(data.tankPressure, 0, 1013, (data.tankPressure > 200) ? 'good' : ((data.tankPressure > 100) ? 'average' : 'bad'))}}
|
||||
{{:data.tankPressure}} kPa
|
||||
</div>
|
||||
</div>
|
||||
@@ -17,7 +17,7 @@
|
||||
Release Pressure:
|
||||
</div>
|
||||
<div class="itemContent">
|
||||
{{:helper.displayBar(data.releasePressure, data.minReleasePressure, data.maxReleasePressure)}}
|
||||
{{:helper.bar(data.releasePressure, data.minReleasePressure, data.maxReleasePressure)}}
|
||||
{{:data.releasePressure}} kPa
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,21 +0,0 @@
|
||||
body {
|
||||
background: #272727 url(background.png) 50% 0 repeat-x;
|
||||
}
|
||||
|
||||
#content {
|
||||
clear: both;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
#loading {
|
||||
position: relative;
|
||||
background: url(background_notice.jpg) 50% 50%;
|
||||
color: #000000;
|
||||
font-size: 14px;
|
||||
font-style: italic;
|
||||
font-weight: bold;
|
||||
padding: 3px 4px 3px 4px;
|
||||
margin: 4px 0 4px 0;
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
<div id='title' unselectable='on'>
|
||||
<div id='statusicon' class='good' unselectable="on"></div>
|
||||
<div id='titletext' unselectable='on'>{{:config.title}}</div>
|
||||
<div id='titlelogo' unselectable='on'></div>
|
||||
</div>
|
||||
|
||||
<div id='content' unselectable='on'>
|
||||
<div id='loading'>Initiating...</div>
|
||||
</div>
|
||||
@@ -1,9 +0,0 @@
|
||||
<div id='title' unselectable="on">
|
||||
<div id='statusicon' class='good' unselectable="on"></div>
|
||||
<div id='titletext' unselectable="on">{{:config.title}}</div>
|
||||
<div id='titlelogo' unselectable="on"></div>
|
||||
</div>
|
||||
|
||||
<div id='content' unselectable="on">
|
||||
<div id='loading'>Initiating...</div>
|
||||
</div>
|
||||
@@ -1,6 +1,3 @@
|
||||
/*jslint browser devel this*/
|
||||
/*global nanoui*/
|
||||
|
||||
nanoui.handlers = (function (nanoui) {
|
||||
"use strict";
|
||||
|
||||
@@ -24,26 +21,19 @@ nanoui.handlers = (function (nanoui) {
|
||||
};
|
||||
|
||||
var updateLinks = function (data) {
|
||||
var activeLinks = document.queryAll('.linkActive');
|
||||
var pendingLinks = document.queryAll('.linkPending');
|
||||
var links = document.queryAll('.link');
|
||||
var pendingLinks = document.queryAll('.link.pending');
|
||||
|
||||
switch (data.config.status) {
|
||||
case 2:
|
||||
activeLinks.forEach(function (element) {
|
||||
element.classList.remove('inactive');
|
||||
if (data.config.status === 2) {
|
||||
links.forEach(function (element) {
|
||||
element.removeAttribute('disabled');
|
||||
});
|
||||
pendingLinks.forEach(function (element) {
|
||||
element.classList.remove('linkPending');
|
||||
element.classList.remove('pending');
|
||||
});
|
||||
break;
|
||||
case 1:
|
||||
activeLinks.forEach(function (element) {
|
||||
element.classList.add('inactive');
|
||||
});
|
||||
break;
|
||||
default:
|
||||
activeLinks.forEach(function (element) {
|
||||
element.classList.add('inactive');
|
||||
} else {
|
||||
links.forEach(function (element) {
|
||||
element.setAttribute('disabled', 'true');
|
||||
});
|
||||
}
|
||||
};
|
||||
@@ -55,14 +45,15 @@ nanoui.handlers = (function (nanoui) {
|
||||
var href = this.data('href');
|
||||
if (href !== null) {
|
||||
if (data.config.status === 2) {
|
||||
this.classList.add('linkPending');
|
||||
this.classList.remove('active');
|
||||
this.classList.add('pending');
|
||||
}
|
||||
|
||||
location.href = href;
|
||||
}
|
||||
};
|
||||
|
||||
document.queryAll('.linkActive').forEach(function (element) {
|
||||
document.queryAll('.link.active').forEach(function (element) {
|
||||
element.on('click', onClick);
|
||||
});
|
||||
};
|
||||
@@ -81,4 +72,4 @@ nanoui.handlers = (function (nanoui) {
|
||||
nanoui.on('error', error);
|
||||
|
||||
return {};
|
||||
}(nanoui));
|
||||
}(nanoui));
|
||||
|
||||
@@ -1,32 +1,32 @@
|
||||
/*jslint browser devel this*/
|
||||
/*global nanoui*/
|
||||
|
||||
nanoui.helpers = (function (nanoui) {
|
||||
"use strict";
|
||||
var helpers = {};
|
||||
|
||||
|
||||
helpers.link = function (text, icon, parameters, status, elementClass, elementId) {
|
||||
var iconHtml = "";
|
||||
var iconClass = "noIcon";
|
||||
if (icon !== "undefined" && icon) {
|
||||
iconHtml = '<i class="pendingIcon fa fa-fw fa-spinner fa-pulse"></i><i class="fa fa-fw fa-' + icon + '"></i>';
|
||||
iconClass = "hasIcon";
|
||||
var context = {};
|
||||
|
||||
context.text = text || "";
|
||||
context.icon = "";
|
||||
context.parameters = nanoui.util.href(parameters);
|
||||
context.status = status || "";
|
||||
context.elementClass = elementClass || "normal";
|
||||
context.elementId = elementId || "";
|
||||
|
||||
if (nanoui.util.yes(icon)) {
|
||||
context.icon = nanoui.util.format("<i class='pending fa fa-fw fa-spinner fa-pulse'></i><i class='main fa fa-fw fa-#{icon}'></i>", {icon: icon});
|
||||
context.elementClass += ' iconed';
|
||||
}
|
||||
if (elementClass === "undefined" || !elementClass) {
|
||||
elementClass = "link";
|
||||
|
||||
if (nanoui.util.yes(status)) {
|
||||
return nanoui.util.format("<div unselectable='on' id='#{elementId}' class='link inactive #{status} #{elementClass}'>#{icon}#{text}</div>", context);
|
||||
}
|
||||
var elementIdHtml = "";
|
||||
if (elementId !== "undefined" && elementId) {
|
||||
elementIdHtml = 'id="' + elementId + '"';
|
||||
}
|
||||
if (status !== "undefined" && status) {
|
||||
return '<div unselectable="on" class="link ' + iconClass + ' ' + elementClass + ' ' + status + '" ' + elementIdHtml + '>' + iconHtml + text + '</div>';
|
||||
}
|
||||
return '<div unselectable="on" class="linkActive ' + iconClass + ' ' + elementClass + '" data-href="' + nanoui.util.href(parameters) + '" ' + elementIdHtml + '>' + iconHtml + text + '</div>';
|
||||
return nanoui.util.format("<div unselectable='on' id='#{elementId}' class='link active #{elementClass}' data-href='#{parameters}'>#{icon}#{text}</div>", context);
|
||||
};
|
||||
|
||||
helpers.displayBar = function (value, rangeMin, rangeMax, styleClass, showText) {
|
||||
helpers.bar = function (value, rangeMin, rangeMax, styleClass, barText) {
|
||||
var context = {};
|
||||
|
||||
if (rangeMin < rangeMax) {
|
||||
if (value < rangeMin) {
|
||||
value = rangeMin;
|
||||
@@ -40,22 +40,21 @@ nanoui.helpers = (function (nanoui) {
|
||||
value = rangeMax;
|
||||
}
|
||||
}
|
||||
if (styleClass === "undefined" || !styleClass) {
|
||||
styleClass = "";
|
||||
}
|
||||
if (showText === "undefined" || !showText) {
|
||||
showText = "";
|
||||
}
|
||||
var percentage = Math.round((value - rangeMin) / (rangeMax - rangeMin) * 100);
|
||||
return '<div class="displayBar ' + styleClass + '"><div class="displayBarFill ' + styleClass + '" style="width: ' + percentage + '%;"></div><div class="displayBarText ' + styleClass + '">' + showText + '</div></div>';
|
||||
|
||||
context.styleClass = styleClass || "";
|
||||
context.barText = barText || "";
|
||||
context.percentage = Math.round((value - rangeMin) / (rangeMax - rangeMin) * 100);
|
||||
|
||||
return nanoui.util.format("<div class='bar'><div class='barFill #{styleClass}' style='width: #{percentage}%;'></div><div class='barText #{styleClass}'>#{barText}</div></div>", context);
|
||||
};
|
||||
|
||||
helpers.round = function (number) {
|
||||
return Math.round(number);
|
||||
};
|
||||
|
||||
helpers.fixed = function (number) {
|
||||
return Math.round(number * 10) / 10;
|
||||
helpers.fixed = function (number, decimals) {
|
||||
if (nanoui.util.no(decimals)) { decimals = 1; }
|
||||
return Number(Math.round(number + 'e'+decimals) + 'e-'+decimals);
|
||||
};
|
||||
|
||||
helpers.floor = function (number) {
|
||||
@@ -68,4 +67,4 @@ nanoui.helpers = (function (nanoui) {
|
||||
|
||||
|
||||
return helpers;
|
||||
}(nanoui));
|
||||
}(nanoui));
|
||||
|
||||
@@ -1,6 +1,3 @@
|
||||
/*jslint browser devel this*/
|
||||
/*global nanoui*/
|
||||
|
||||
var nanoui = (function () {
|
||||
"use strict";
|
||||
var nanoui = {};
|
||||
@@ -18,7 +15,7 @@ var nanoui = (function () {
|
||||
if (!_initialized) {
|
||||
data = _initialData;
|
||||
}
|
||||
|
||||
|
||||
nanoui.emit('beforeRender', data);
|
||||
try {
|
||||
if (!_layoutRendered || data.config.autoUpdateLayout) {
|
||||
@@ -56,7 +53,7 @@ var nanoui = (function () {
|
||||
if (_initialized) {
|
||||
nanoui.emit('render', _data);
|
||||
}
|
||||
|
||||
|
||||
nanoui.emit('updateReceived');
|
||||
};
|
||||
|
||||
@@ -94,4 +91,4 @@ var nanoui = (function () {
|
||||
nanoui.on('update', update);
|
||||
|
||||
return nanoui;
|
||||
}());
|
||||
}());
|
||||
|
||||
@@ -1,6 +1,3 @@
|
||||
/*jslint browser devel this*/
|
||||
/*global nanoui*/
|
||||
|
||||
nanoui.template = (function (nanoui, doT) {
|
||||
"use strict";
|
||||
var template = {};
|
||||
@@ -105,4 +102,4 @@ nanoui.template = (function (nanoui, doT) {
|
||||
nanoui.on('loaded', compile);
|
||||
|
||||
return template;
|
||||
}(nanoui, doT));
|
||||
}(nanoui, doT));
|
||||
|
||||
+39
-12
@@ -1,6 +1,3 @@
|
||||
/*jslint browser devel this*/
|
||||
/*global nanoui*/
|
||||
|
||||
nanoui.util = (function (nanoui) {
|
||||
"use strict";
|
||||
var util = {};
|
||||
@@ -13,7 +10,7 @@ nanoui.util = (function (nanoui) {
|
||||
_urlParameters = JSON.parse(document.query('body').data('url-parameters'));
|
||||
if (_urlParameters === null) {
|
||||
nanoui.emit('error', "URL parameters did not load correctly.");
|
||||
return;
|
||||
return;
|
||||
}
|
||||
};
|
||||
|
||||
@@ -31,15 +28,29 @@ nanoui.util = (function (nanoui) {
|
||||
return first;
|
||||
};
|
||||
|
||||
util.isFunction = function (func) {
|
||||
return !!(func && func.call && func.apply);
|
||||
util.format = function (str, obj) {
|
||||
if (!obj) {
|
||||
return str;
|
||||
}
|
||||
function getValue(str, context) {
|
||||
var ix = str.lastIndexOf('()');
|
||||
if (ix > 0 && ix + '()'.length === str.length) {
|
||||
return context[str.substring(0, ix)]();
|
||||
}
|
||||
return context[str];
|
||||
}
|
||||
return str.replace(/#\{(.+?)\}/g, function (ignore, $1) {
|
||||
var split = $1.split('.'),
|
||||
tmp = getValue(split[0], obj),
|
||||
i,
|
||||
l;
|
||||
for (i = 1, l = split.length; i < l; i++) {
|
||||
tmp = getValue(split[i], tmp);
|
||||
}
|
||||
return tmp;
|
||||
});
|
||||
};
|
||||
|
||||
util.hasKey = function (obj, key) {
|
||||
return obj.hasOwnProperty(key);
|
||||
}
|
||||
|
||||
|
||||
util.href = function (parameters) {
|
||||
var url = new Url("byond://");
|
||||
|
||||
@@ -48,8 +59,24 @@ nanoui.util = (function (nanoui) {
|
||||
return url;
|
||||
};
|
||||
|
||||
util.isFunction = function (func) {
|
||||
return !!(func && func.call && func.apply);
|
||||
};
|
||||
|
||||
util.hasKey = function (obj, key) {
|
||||
return obj.hasOwnProperty(key);
|
||||
};
|
||||
|
||||
util.yes = function (arg) {
|
||||
return !(arg === 'undefined' || !arg);
|
||||
};
|
||||
|
||||
util.no = function (arg) {
|
||||
return arg === 'undefined' || !arg;
|
||||
};
|
||||
|
||||
|
||||
nanoui.on('earlyInit', init);
|
||||
|
||||
return util;
|
||||
}(nanoui));
|
||||
}(nanoui));
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
body {
|
||||
background: #272727 url(background.png) 50% 0 repeat-x;
|
||||
}
|
||||
#content {
|
||||
clear: both;
|
||||
padding: 8px;
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
// out: layout_basic.css
|
||||
|
||||
@import "nanoui.config.less";
|
||||
|
||||
body {
|
||||
background: @background url(background.png) 50% 0 repeat-x;
|
||||
}
|
||||
|
||||
#content {
|
||||
clear: both;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
#loading {
|
||||
&:extend(.notice);
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
body {
|
||||
background: #272727 url(background_nanotrasen.png) 50% 0 repeat-x;
|
||||
}
|
||||
#title {
|
||||
position: relative;
|
||||
height: 30px;
|
||||
}
|
||||
#statusicon {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 12px;
|
||||
}
|
||||
#titletext {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 44px;
|
||||
width: 66%;
|
||||
overflow: hidden;
|
||||
color: #E9C183;
|
||||
font-size: 16px;
|
||||
}
|
||||
#titlelogo {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 12px;
|
||||
width: 42px;
|
||||
height: 24px;
|
||||
background: url(logo_nanotrasen.png) 50% 50% no-repeat;
|
||||
}
|
||||
#content {
|
||||
padding: 8px;
|
||||
}
|
||||
@@ -1,5 +1,9 @@
|
||||
// out: layout_default.css
|
||||
|
||||
@import "nanoui.config.less";
|
||||
|
||||
body {
|
||||
background: #272727 url(background_nanotrasen.png) 50% 0 repeat-x;
|
||||
background: @background url(background_nanotrasen.png) 50% 0 repeat-x;
|
||||
}
|
||||
|
||||
#title {
|
||||
@@ -7,6 +11,12 @@ body {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
#statusicon {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
#titletext {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
@@ -17,43 +27,21 @@ body {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#title.icon {
|
||||
padding: 6px 8px 6px 42px;
|
||||
background-position: 2px 50%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
#titleicon {
|
||||
#titlelogo {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 12px;
|
||||
|
||||
width: 42px;
|
||||
height: 24px;
|
||||
background: url(logo_nanotrasen.png) 50% 50% no-repeat;
|
||||
}
|
||||
|
||||
#statusicon {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 12px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
#content {
|
||||
clear: both;
|
||||
padding: 8px;
|
||||
&:extend(.clearBoth);
|
||||
}
|
||||
|
||||
#loading {
|
||||
position: relative;
|
||||
background: url(background_notice.jpg) 50% 50%;
|
||||
color: #000000;
|
||||
font-size: 14px;
|
||||
font-style: italic;
|
||||
font-weight: bold;
|
||||
padding: 3px 4px 3px 4px;
|
||||
margin: 4px 0 4px 0;
|
||||
&:extend(.notice);
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,42 @@
|
||||
// main: nanoui.less
|
||||
|
||||
@import "nanoui.config.less";
|
||||
|
||||
.bar {
|
||||
position: relative;
|
||||
width: 236px;
|
||||
height: 16px;
|
||||
border: 1px solid #666666;
|
||||
float: left;
|
||||
margin: 0 5px 0 0;
|
||||
overflow: hidden;
|
||||
background: black;
|
||||
.barText {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
left: 5px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: white;
|
||||
font-weight: normal;
|
||||
}
|
||||
.barFill {
|
||||
width: 0%;
|
||||
height: 100%;
|
||||
background: #40628a;
|
||||
overflow: hidden;
|
||||
float: left;
|
||||
&.good {
|
||||
background: #4f7529;
|
||||
}
|
||||
&.average {
|
||||
background: #cd6500;
|
||||
}
|
||||
&.bad {
|
||||
background: #ea0000;
|
||||
}
|
||||
&.highlight {
|
||||
background: #8BA5C4;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
// main: nanoui.less
|
||||
|
||||
@import "nanoui.config.less";
|
||||
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
font-family: @font;
|
||||
font-size: @font-size;
|
||||
line-height: 170%;
|
||||
color: @text;
|
||||
|
||||
background: @background;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
margin: 0;
|
||||
padding: 6px 0 6px 0;
|
||||
clear: both;
|
||||
}
|
||||
h1 { font-size: @font-size + 6px; }
|
||||
h2 { font-size: @font-size + 4px; }
|
||||
h3 { font-size: @font-size + 2px; }
|
||||
|
||||
hr {
|
||||
background-color: @normal;
|
||||
height: 1px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 4px 0 0 10px;
|
||||
margin: 0;
|
||||
list-style-type: none;
|
||||
|
||||
li {
|
||||
padding: 0 0 2px 0;
|
||||
}
|
||||
}
|
||||
|
||||
noscript {
|
||||
margin: 33% auto;
|
||||
width: 50%;
|
||||
height: 33%;
|
||||
|
||||
background: #ffffff;
|
||||
border: 2px solid #ff0000;
|
||||
z-index: 9999;
|
||||
padding: 0px 10px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
// main: nanoui.less
|
||||
|
||||
@import "nanoui.config.less";
|
||||
|
||||
.notice {
|
||||
padding: 2px 4px;
|
||||
margin: 4px 0;
|
||||
|
||||
color: @text-inverse;
|
||||
background: url(background_notice.jpg) 50% 50%;
|
||||
|
||||
&:extend(.bold);
|
||||
&:extend(.italic);
|
||||
}
|
||||
|
||||
.noticePlaceholder {
|
||||
&:extend(.notice);
|
||||
color: @text;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.notice.icon {
|
||||
padding: 2px 4px 0 20px;
|
||||
}
|
||||
|
||||
.notice img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
div.notice {
|
||||
clear: both;
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
// main: nanoui.less
|
||||
|
||||
// Fonts
|
||||
@font: Verdana, Geneva, sans-serif;
|
||||
@font-size: 12px;
|
||||
|
||||
// Global Colors
|
||||
@normal: #40628a;
|
||||
@good: #4f7529;
|
||||
@average: #cd6500;
|
||||
@bad: #ee0000;
|
||||
@label: #e9C183;
|
||||
@highlight: #8ba5c4;
|
||||
@dark: #272727;
|
||||
|
||||
// Body Colors
|
||||
@title: @label;
|
||||
@text: white;
|
||||
@text-inverse: black;
|
||||
@background: @dark;
|
||||
|
||||
// Component Colors
|
||||
@border: @normal;
|
||||
|
||||
// Link Colors
|
||||
@selected: #2f943c;
|
||||
@caution: #adaf00;
|
||||
@danger: #ea0000;
|
||||
@disabled: #999999;
|
||||
|
||||
@link-border: #111010;
|
||||
@link-border-dark: darken(@link-border, 10%);
|
||||
|
||||
@hover: 10%;
|
||||
@pending: 10%;
|
||||
+364
-459
@@ -1,492 +1,397 @@
|
||||
.fa {
|
||||
float: left;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 4px 2px 0 2px;
|
||||
}
|
||||
|
||||
.pendingIcon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.linkPending .fa {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.linkPending .pendingIcon {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
#statusicon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-image: url(statusicon.png);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
#statusicon.good
|
||||
{
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
#statusicon.average
|
||||
{
|
||||
background-position: 0 -24px;
|
||||
}
|
||||
|
||||
#statusicon.bad
|
||||
{
|
||||
background-position: 0 -48px;
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
color: #ffffff;
|
||||
line-height: 170%;
|
||||
font-family: Verdana, Geneva, sans-serif;
|
||||
background: #272727;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: Verdana, Geneva, sans-serif;
|
||||
font-size: 12px;
|
||||
line-height: 170%;
|
||||
color: white;
|
||||
background: #272727;
|
||||
}
|
||||
|
||||
#noscript {
|
||||
margin: 33% auto;
|
||||
width: 50%;
|
||||
height: 33%;
|
||||
background: #ffffff;
|
||||
border: 2px solid #ff0000;
|
||||
color: #000000;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
z-index: 9999;
|
||||
padding: 0px 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#noscript h1 {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
hr {
|
||||
background-color: #40628a;
|
||||
height: 1px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.link, .linkOn, .linkOff, .selected, .disabled, .yellowButton, .redButton {
|
||||
float: left;
|
||||
min-width: 15px;
|
||||
height: 16px;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
background: #40628a;
|
||||
border: 1px solid #161616;
|
||||
padding: 0px 4px 4px 4px;
|
||||
margin: 0 2px 2px 0;
|
||||
cursor: default;
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.hasIcon {
|
||||
padding: 0px 4px 4px 0px;
|
||||
}
|
||||
|
||||
a:hover, .zoomLink:hover, .linkActive:hover {
|
||||
background: #507aac;
|
||||
}
|
||||
|
||||
.linkPending, .linkPending:hover {
|
||||
color: #ffffff;
|
||||
background: #507aac;
|
||||
}
|
||||
|
||||
a.white, a.white:link, a.white:visited, a.white:active {
|
||||
color: #40628a;
|
||||
text-decoration: none;
|
||||
background: #ffffff;
|
||||
border: 1px solid #161616;
|
||||
padding: 1px 4px 1px 4px;
|
||||
margin: 0 2px 0 0;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
a.white:hover {
|
||||
color: #ffffff;
|
||||
background: #40628a;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.linkOn, 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;
|
||||
}
|
||||
|
||||
.linkOff, 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 {
|
||||
color: #ffffff;
|
||||
background: #999999;
|
||||
border-color: #666666;
|
||||
}
|
||||
|
||||
a.icon, .linkOn.icon, .linkOff.icon, .selected.icon, .disabled.icon {
|
||||
position: relative;
|
||||
padding: 1px 4px 2px 20px;
|
||||
}
|
||||
|
||||
a.icon img, .linkOn.icon img, .linkOff.icon img, .selected.icon img, .disabled.icon img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.linkDanger, a.linkDanger:link, a.linkDanger:visited, a.linkDanger:active {
|
||||
color: #ffffff;
|
||||
background-color: #ff0000;
|
||||
border-color: #aa0000;
|
||||
}
|
||||
|
||||
.linkDanger:hover {
|
||||
background-color: #ff6666;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 4px 0 0 10px;
|
||||
margin: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
li {
|
||||
padding: 0 0 2px 0;
|
||||
}
|
||||
|
||||
img, a img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: 0;
|
||||
padding: 6px 0 6px 0;
|
||||
color: #FFFFFF;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
padding: 6px 0 6px 0;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 12px;
|
||||
h1 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.white {
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
h2 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.good {
|
||||
color: #4f7529;
|
||||
font-weight: bold;
|
||||
h3 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.average {
|
||||
color: #cd6500;
|
||||
font-weight: bold;
|
||||
hr {
|
||||
background-color: #40628a;
|
||||
height: 1px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.bad {
|
||||
color: #ee0000;
|
||||
font-weight: bold;
|
||||
ul {
|
||||
padding: 4px 0 0 10px;
|
||||
margin: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.idle {
|
||||
color: #272727;
|
||||
font-weight: bold;
|
||||
ul li {
|
||||
padding: 0 0 2px 0;
|
||||
}
|
||||
|
||||
.redButton {
|
||||
background: #ea0000;
|
||||
noscript {
|
||||
margin: 33% auto;
|
||||
width: 50%;
|
||||
height: 33%;
|
||||
background: #ffffff;
|
||||
border: 2px solid #ff0000;
|
||||
z-index: 9999;
|
||||
padding: 0px 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellowButton {
|
||||
background: #cacc00;
|
||||
span.normal {
|
||||
color: #40628a;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
color: #8BA5C4;
|
||||
span.good {
|
||||
color: #4f7529;
|
||||
}
|
||||
|
||||
.dark {
|
||||
color: #272727;
|
||||
span.average {
|
||||
color: #cd6500;
|
||||
}
|
||||
|
||||
.caption {
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
padding: 5px;
|
||||
span.bad {
|
||||
color: #ee0000;
|
||||
}
|
||||
|
||||
.footer {
|
||||
font-size: 10px;
|
||||
span.label {
|
||||
color: #e9C183;
|
||||
}
|
||||
|
||||
span.highlight {
|
||||
color: #8ba5c4;
|
||||
}
|
||||
span.dark {
|
||||
color: #272727;
|
||||
}
|
||||
.bold,
|
||||
.notice,
|
||||
.noticePlaceholder {
|
||||
position: relative;
|
||||
font-size: 12px;
|
||||
font-style: italic;
|
||||
font-weight: bold;
|
||||
padding: 3px 4px 3px 4px;
|
||||
margin: 4px 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.notice {
|
||||
position: relative;
|
||||
background: url(background_notice.jpg) 50% 50%;
|
||||
color: #000000;
|
||||
font-size: 12px;
|
||||
font-style: italic;
|
||||
font-weight: bold;
|
||||
padding: 3px 4px 3px 4px;
|
||||
margin: 4px 0;
|
||||
.italic,
|
||||
.notice,
|
||||
.noticePlaceholder {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.notice.icon {
|
||||
padding: 2px 4px 0 20px;
|
||||
.fontReset,
|
||||
.link {
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.notice img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
div.notice {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.itemGroup {
|
||||
border: 1px solid #e9c183;
|
||||
background: #2c2c2c;
|
||||
padding: 4px;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.itemContentNarrow, .itemContent {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.itemContentNarrow {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.itemContent {
|
||||
width: 69%;
|
||||
}
|
||||
|
||||
.itemLabelNarrow, .itemLabel, .itemLabelWide, .itemLabelWider, .itemLabelWidest {
|
||||
float: left;
|
||||
color: #e9c183;
|
||||
}
|
||||
|
||||
.itemLabelNarrow {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.itemLabel {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.itemLabelWide {
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
.itemLabelWider {
|
||||
width: 69%;
|
||||
}
|
||||
|
||||
.itemLabelWidest {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.itemContentWide {
|
||||
float: left;
|
||||
width: 79%;
|
||||
}
|
||||
|
||||
.itemContentSmall {
|
||||
float: left;
|
||||
width: 33%;
|
||||
}
|
||||
|
||||
.itemContentMedium {
|
||||
float: left;
|
||||
width: 55%;
|
||||
}
|
||||
|
||||
.statusDisplay {
|
||||
display: block;
|
||||
position: relative;
|
||||
background: #000000;
|
||||
color: #ffffff;
|
||||
border: 1px solid #40628a;
|
||||
padding: 4px;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.statusDisplay .itemLabelNarrow, .statusDisplay .itemLabel, .statusDisplay .itemLabelWide, .statusDisplay .itemLabelWider, .statusDisplay .itemLabelWidest {
|
||||
color: #98B0C3;
|
||||
}
|
||||
|
||||
.statusDisplayRecords {
|
||||
background: #000000;
|
||||
color: #ffffff;
|
||||
border: 1px solid #40628a;
|
||||
padding: 4px;
|
||||
margin: 3px 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.block {
|
||||
padding: 8px;
|
||||
margin: 10px 4px 4px 4px;
|
||||
border: 1px solid #40628a;
|
||||
background-color: #202020;
|
||||
}
|
||||
|
||||
.block h3 {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.displayBar {
|
||||
position: relative;
|
||||
width: 236px;
|
||||
height: 16px;
|
||||
border: 1px solid #666666;
|
||||
float: left;
|
||||
margin: 0 5px 0 0;
|
||||
overflow: hidden;
|
||||
background: #000000;
|
||||
}
|
||||
|
||||
.displayBarText {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
left: 5px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #ffffff;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.displayBarFill {
|
||||
width: 0%;
|
||||
height: 100%;
|
||||
background: #40628a;
|
||||
overflow: hidden;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.displayBarFill.alignRight {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.displayBarFill.good {
|
||||
color: #ffffff;
|
||||
background: #4f7529;
|
||||
}
|
||||
|
||||
.displayBarFill.average {
|
||||
color: #ffffff;
|
||||
background: #cd6500;
|
||||
}
|
||||
|
||||
.displayBarFill.bad {
|
||||
color: #ffffff;
|
||||
background: #ee0000;
|
||||
}
|
||||
|
||||
.displayBarFill.highlight {
|
||||
color: #ffffff;
|
||||
background: #8BA5C4;
|
||||
}
|
||||
|
||||
.clearBoth {
|
||||
clear: both;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.clearLeft {
|
||||
clear: left;
|
||||
clear: left;
|
||||
}
|
||||
|
||||
.clearRight {
|
||||
clear: right;
|
||||
clear: right;
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 100%;
|
||||
clear: both;
|
||||
.floatNone {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.inactive, a.inactive:link, a.inactive:visited, a.inactive:active, a.inactive:hover {
|
||||
color: #ffffff;
|
||||
background: #999999;
|
||||
border-color: #666666;
|
||||
.floatLeft {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.fixedLeft {
|
||||
width: 110px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.fixedLeftWide {
|
||||
width: 165px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.fixedLeftWider {
|
||||
width: 220px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.fixedLeftWidest {
|
||||
width: 250px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.fixedLeftWiderRed {
|
||||
width: 220px;
|
||||
float: left;
|
||||
background: #ee0000;
|
||||
}
|
||||
|
||||
.floatRight {
|
||||
float: right;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.alignTop {
|
||||
vertical-align: top;
|
||||
vertical-align: top;
|
||||
}
|
||||
.alignBottom {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
.alignLeft {
|
||||
text-align: left;
|
||||
}
|
||||
.alignCenter {
|
||||
text-align: center;
|
||||
}
|
||||
.alignRight {
|
||||
text-align: right;
|
||||
}
|
||||
.notice,
|
||||
.noticePlaceholder {
|
||||
padding: 2px 4px;
|
||||
margin: 4px 0;
|
||||
color: black;
|
||||
background: url(background_notice.jpg) 50% 50%;
|
||||
}
|
||||
.noticePlaceholder {
|
||||
color: white;
|
||||
background: none;
|
||||
}
|
||||
.notice.icon {
|
||||
padding: 2px 4px 0 20px;
|
||||
}
|
||||
.notice img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
div.notice {
|
||||
clear: both;
|
||||
}
|
||||
.link {
|
||||
height: 16px;
|
||||
min-width: 16px;
|
||||
display: inline-block;
|
||||
margin: 2px;
|
||||
padding: 0 4px;
|
||||
border: 1px solid #111010;
|
||||
cursor: default;
|
||||
}
|
||||
.link.iconed {
|
||||
padding: 0px 4px 4px 0px;
|
||||
}
|
||||
.link i {
|
||||
margin: 4px 2px 0 2px;
|
||||
}
|
||||
.link i.main {
|
||||
display: inline-block;
|
||||
}
|
||||
.link i.pending {
|
||||
display: none;
|
||||
}
|
||||
.link.pending i.main {
|
||||
display: none;
|
||||
}
|
||||
.link.pending i.pending {
|
||||
display: inline-block;
|
||||
}
|
||||
.link.normal.active {
|
||||
background: #40628a;
|
||||
}
|
||||
.link.normal.active:hover {
|
||||
background: #507bad;
|
||||
}
|
||||
.link.normal.inactive {
|
||||
background: #40628a;
|
||||
}
|
||||
.link.normal.pending {
|
||||
background: #304967;
|
||||
}
|
||||
.link.selected.active {
|
||||
background: #2f943c;
|
||||
}
|
||||
.link.selected.active:hover {
|
||||
background: #3bbb4c;
|
||||
}
|
||||
.link.selected.inactive {
|
||||
background: #2f943c;
|
||||
}
|
||||
.link.selected.pending {
|
||||
background: #236d2c;
|
||||
}
|
||||
.link.caution.active {
|
||||
background: #adaf00;
|
||||
}
|
||||
.link.caution.active:hover {
|
||||
background: #dfe200;
|
||||
}
|
||||
.link.caution.inactive {
|
||||
background: #adaf00;
|
||||
}
|
||||
.link.caution.pending {
|
||||
background: #7b7c00;
|
||||
}
|
||||
.link.danger.active {
|
||||
background: #ea0000;
|
||||
}
|
||||
.link.danger.active:hover {
|
||||
background: #ff1e1e;
|
||||
}
|
||||
.link.danger.inactive {
|
||||
background: #ea0000;
|
||||
}
|
||||
.link.danger.pending {
|
||||
background: #b70000;
|
||||
}
|
||||
.link.disabled.active {
|
||||
background: #999999;
|
||||
}
|
||||
.link.disabled.active:hover {
|
||||
background: #b3b3b3;
|
||||
}
|
||||
.link.disabled.inactive {
|
||||
background: #999999;
|
||||
}
|
||||
.link.disabled.pending {
|
||||
background: #808080;
|
||||
}
|
||||
.link[disabled] {
|
||||
pointer-events: none;
|
||||
background-color: #999999 !important;
|
||||
border-color: #000000 !important;
|
||||
}
|
||||
.bar {
|
||||
position: relative;
|
||||
width: 236px;
|
||||
height: 16px;
|
||||
border: 1px solid #666666;
|
||||
float: left;
|
||||
margin: 0 5px 0 0;
|
||||
overflow: hidden;
|
||||
background: black;
|
||||
}
|
||||
.bar .barText {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
left: 5px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: white;
|
||||
font-weight: normal;
|
||||
}
|
||||
.bar .barFill {
|
||||
width: 0%;
|
||||
height: 100%;
|
||||
background: #40628a;
|
||||
overflow: hidden;
|
||||
float: left;
|
||||
}
|
||||
.bar .barFill.good {
|
||||
background: #4f7529;
|
||||
}
|
||||
.bar .barFill.average {
|
||||
background: #cd6500;
|
||||
}
|
||||
.bar .barFill.bad {
|
||||
background: #ea0000;
|
||||
}
|
||||
.bar .barFill.highlight {
|
||||
background: #8BA5C4;
|
||||
}
|
||||
#statusicon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: url(statusicon.png) no-repeat;
|
||||
}
|
||||
#statusicon.good {
|
||||
background-position: 0 0;
|
||||
}
|
||||
#statusicon.average {
|
||||
background-position: 0 -24px;
|
||||
}
|
||||
#statusicon.bad {
|
||||
background-position: 0 -48px;
|
||||
}
|
||||
.itemGroup {
|
||||
border: 1px solid #e9c183;
|
||||
background: #2c2c2c;
|
||||
padding: 4px;
|
||||
clear: both;
|
||||
}
|
||||
.item {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
clear: both;
|
||||
}
|
||||
.itemContentNarrow,
|
||||
.itemContent {
|
||||
float: left;
|
||||
}
|
||||
.itemContentNarrow {
|
||||
width: 30%;
|
||||
}
|
||||
.itemContent {
|
||||
width: 69%;
|
||||
}
|
||||
.itemLabelNarrow,
|
||||
.itemLabel,
|
||||
.itemLabelWide,
|
||||
.itemLabelWider,
|
||||
.itemLabelWidest {
|
||||
float: left;
|
||||
color: #e9c183;
|
||||
}
|
||||
.itemLabelNarrow {
|
||||
width: 20%;
|
||||
}
|
||||
.itemLabel {
|
||||
width: 30%;
|
||||
}
|
||||
.itemLabelWide {
|
||||
width: 45%;
|
||||
}
|
||||
.itemLabelWider {
|
||||
width: 69%;
|
||||
}
|
||||
.itemLabelWidest {
|
||||
width: 100%;
|
||||
}
|
||||
.itemContentWide {
|
||||
float: left;
|
||||
width: 79%;
|
||||
}
|
||||
.itemContentSmall {
|
||||
float: left;
|
||||
width: 33%;
|
||||
}
|
||||
.itemContentMedium {
|
||||
float: left;
|
||||
width: 55%;
|
||||
}
|
||||
.statusDisplay {
|
||||
display: block;
|
||||
position: relative;
|
||||
background: #000000;
|
||||
color: #ffffff;
|
||||
border: 1px solid #40628a;
|
||||
padding: 4px;
|
||||
margin: 4px 0;
|
||||
}
|
||||
.statusDisplay .itemLabelNarrow,
|
||||
.statusDisplay .itemLabel,
|
||||
.statusDisplay .itemLabelWide,
|
||||
.statusDisplay .itemLabelWider,
|
||||
.statusDisplay .itemLabelWidest {
|
||||
color: #98B0C3;
|
||||
}
|
||||
.block {
|
||||
padding: 8px;
|
||||
margin: 10px 4px 4px 4px;
|
||||
border: 1px solid #40628a;
|
||||
background-color: #202020;
|
||||
}
|
||||
.block h3 {
|
||||
padding: 0;
|
||||
}
|
||||
.line {
|
||||
width: 100%;
|
||||
clear: both;
|
||||
}
|
||||
.fixedLeft {
|
||||
width: 110px;
|
||||
float: left;
|
||||
}
|
||||
.fixedLeftWide {
|
||||
width: 165px;
|
||||
float: left;
|
||||
}
|
||||
.fixedLeftWider {
|
||||
width: 220px;
|
||||
float: left;
|
||||
}
|
||||
.fixedLeftWidest {
|
||||
width: 250px;
|
||||
float: left;
|
||||
}
|
||||
.fixedLeftWiderRed {
|
||||
width: 220px;
|
||||
float: left;
|
||||
background: #ee0000;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
// main: nanoui.less
|
||||
|
||||
#statusicon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: url(statusicon.png) no-repeat;
|
||||
&.good { background-position: 0 0; }
|
||||
&.average { background-position: 0 -24px; }
|
||||
&.bad { background-position: 0 -48px; }
|
||||
}
|
||||
@@ -0,0 +1,134 @@
|
||||
// out: nanoui.css
|
||||
|
||||
@import "nanoui.base.less";
|
||||
@import "nanoui.util.less";
|
||||
@import "nanoui.components.less";
|
||||
@import "nanoui.links.less";
|
||||
@import "nanoui.bar.less";
|
||||
@import "nanoui.icons.less";
|
||||
|
||||
|
||||
.itemGroup {
|
||||
border: 1px solid #e9c183;
|
||||
background: #2c2c2c;
|
||||
padding: 4px;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.itemContentNarrow, .itemContent {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.itemContentNarrow {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.itemContent {
|
||||
width: 69%;
|
||||
}
|
||||
|
||||
.itemLabelNarrow, .itemLabel, .itemLabelWide, .itemLabelWider, .itemLabelWidest {
|
||||
float: left;
|
||||
color: #e9c183;
|
||||
}
|
||||
|
||||
.itemLabelNarrow {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.itemLabel {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.itemLabelWide {
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
.itemLabelWider {
|
||||
width: 69%;
|
||||
}
|
||||
|
||||
.itemLabelWidest {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.itemContentWide {
|
||||
float: left;
|
||||
width: 79%;
|
||||
}
|
||||
|
||||
.itemContentSmall {
|
||||
float: left;
|
||||
width: 33%;
|
||||
}
|
||||
|
||||
.itemContentMedium {
|
||||
float: left;
|
||||
width: 55%;
|
||||
}
|
||||
|
||||
.statusDisplay {
|
||||
display: block;
|
||||
position: relative;
|
||||
background: #000000;
|
||||
color: #ffffff;
|
||||
border: 1px solid #40628a;
|
||||
padding: 4px;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.statusDisplay .itemLabelNarrow, .statusDisplay .itemLabel, .statusDisplay .itemLabelWide, .statusDisplay .itemLabelWider, .statusDisplay .itemLabelWidest {
|
||||
color: #98B0C3;
|
||||
}
|
||||
|
||||
.block {
|
||||
padding: 8px;
|
||||
margin: 10px 4px 4px 4px;
|
||||
border: 1px solid #40628a;
|
||||
background-color: #202020;
|
||||
}
|
||||
|
||||
.block h3 {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.line {
|
||||
width: 100%;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.fixedLeft {
|
||||
width: 110px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.fixedLeftWide {
|
||||
width: 165px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.fixedLeftWider {
|
||||
width: 220px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.fixedLeftWidest {
|
||||
width: 250px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.fixedLeftWiderRed {
|
||||
width: 220px;
|
||||
float: left;
|
||||
background: #ee0000;
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
// main: nanoui.less
|
||||
|
||||
@import "nanoui.config.less";
|
||||
@import "nanoui.util.less";
|
||||
|
||||
|
||||
// Basic Link (Button) Element
|
||||
.link {
|
||||
height: 16px;
|
||||
min-width: 16px; // So buttons are square at the smallest size.
|
||||
display: inline-block;
|
||||
|
||||
// Reset font settings.
|
||||
&:extend(.fontReset);
|
||||
|
||||
margin: 2px;
|
||||
padding: 0 4px;
|
||||
border: 1px solid @link-border;
|
||||
|
||||
cursor: default;
|
||||
|
||||
&.iconed { padding: 0px 4px 4px 0px; }
|
||||
i { margin: 4px 2px 0 2px; }
|
||||
i.main { display: inline-block; }
|
||||
i.pending { display: none; }
|
||||
&.pending {
|
||||
i.main { display: none; }
|
||||
i.pending { display: inline-block; }
|
||||
}
|
||||
|
||||
// Genearte link states.
|
||||
&.normal { .link(@normal); }
|
||||
&.selected { .link(@selected); }
|
||||
&.caution { .link(@caution); }
|
||||
&.danger { .link(@danger); }
|
||||
&.disabled { .link(@disabled); }
|
||||
|
||||
&[disabled] {
|
||||
pointer-events: none;
|
||||
background-color: @disabled !important;
|
||||
border-color: @link-border-dark !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
// main: nanoui.less
|
||||
|
||||
@import "nanoui.config.less";
|
||||
|
||||
// Links (and their various states.)
|
||||
.link(@color) {
|
||||
&.active { .linkState(@color, @h: true); } // Links that are active have a hover highlight.
|
||||
&.inactive { .linkState(@color); } // Links that are not clickable do not have a hover highlight.
|
||||
&.pending { .linkState(@color, @p: true) } // Links that are pending darken.
|
||||
}
|
||||
.linkState(@color, @h: false, @p: false) {
|
||||
&:hover when (@h = true) {
|
||||
background: lighten(@color, @hover);
|
||||
}
|
||||
}
|
||||
.linkState(@color, @h: false, @p: false) when (@p = true) {
|
||||
background: darken(@color, @pending);
|
||||
}
|
||||
.linkState(@color, @h: false, @p: false) when (@p = false) {
|
||||
background: @color;
|
||||
}
|
||||
|
||||
// Colored Elements
|
||||
.color(@color) { // Explort a given color as a class.
|
||||
&.@{color} {
|
||||
color: @@color;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
.color(normal);
|
||||
.color(good);
|
||||
.color(average);
|
||||
.color(bad);
|
||||
.color(label);
|
||||
.color(highlight);
|
||||
.color(dark);
|
||||
}
|
||||
|
||||
|
||||
// Styled Elements
|
||||
.bold { font-weight: bold; }
|
||||
.italic { font-style: italic; }
|
||||
.fontReset {
|
||||
color: @text;
|
||||
font-size: @font-size;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// General Helpers
|
||||
.hidden { display: none; }
|
||||
|
||||
.clearBoth { clear: both; }
|
||||
.clearLeft { clear: left; }
|
||||
.clearRight { clear: right; }
|
||||
|
||||
.floatNone { float: none; }
|
||||
.floatLeft { float: left; }
|
||||
.floatRight { float: right; }
|
||||
|
||||
.alignTop { vertical-align: top; }
|
||||
.alignBottom { vertical-align: bottom; }
|
||||
.alignLeft { text-align: left; }
|
||||
.alignCenter { text-align: center; }
|
||||
.alignRight { text-align: right; }
|
||||
Reference in New Issue
Block a user