From 0971ef903b50224bb012facb2afa30681e794fc6 Mon Sep 17 00:00:00 2001 From: Tigercat2000 Date: Fri, 1 Jan 2016 12:27:46 -0800 Subject: [PATCH] NanoUI Improvements Part 2: SEE ESS ESS --- .../machinery/telecomms/traffic_control.dm | 6 +- code/modules/client/asset_cache.dm | 31 +- code/modules/nano/nanoui.dm | 13 +- nano/Gulpfile.coffee | 27 +- nano/README.md | 22 +- nano/assets/nanoui.css | 1258 +++++++++++++++++ .../codemirror-compressed.js | 0 nano/{css => codemirror}/codemirror.css | 0 nano/{css => codemirror}/lesser-dark.css | 0 nano/css/icons.css | 326 ----- nano/css/shared.css | 650 --------- nano/package.json | 10 +- nano/styles/_bars.less | 57 + nano/styles/_color.less | 119 ++ nano/styles/_formatting.less | 157 ++ nano/styles/_icon.less | 270 ++++ nano/styles/_link.less | 82 ++ nano/styles/_lists.less | 75 + nano/styles/_misc.less | 127 ++ nano/styles/_native.less | 41 + nano/styles/nanoui.less | 10 + 21 files changed, 2268 insertions(+), 1013 deletions(-) create mode 100644 nano/assets/nanoui.css rename nano/{js => codemirror}/codemirror-compressed.js (100%) rename nano/{css => codemirror}/codemirror.css (100%) rename nano/{css => codemirror}/lesser-dark.css (100%) delete mode 100644 nano/css/icons.css delete mode 100644 nano/css/shared.css create mode 100644 nano/styles/_bars.less create mode 100644 nano/styles/_color.less create mode 100644 nano/styles/_formatting.less create mode 100644 nano/styles/_icon.less create mode 100644 nano/styles/_link.less create mode 100644 nano/styles/_lists.less create mode 100644 nano/styles/_misc.less create mode 100644 nano/styles/_native.less create mode 100644 nano/styles/nanoui.less diff --git a/code/game/machinery/telecomms/traffic_control.dm b/code/game/machinery/telecomms/traffic_control.dm index f110d740b63..8f08ca9c92f 100644 --- a/code/game/machinery/telecomms/traffic_control.dm +++ b/code/game/machinery/telecomms/traffic_control.dm @@ -164,9 +164,9 @@ var/datum/browser/popup = new(user, "traffic_control", "Telecommunication Traffic Control", 700, 500) //codemirror - popup.add_script("codemirror-compressed", 'nano/js/codemirror-compressed.js') // A custom compressed JS file of codemirror, with CSS highlighting - popup.add_stylesheet("codemirror", 'nano/css/codemirror.css') // this CSS sheet is common to all UIs, so all UIs can use codemirror - popup.add_stylesheet("lesser-dark", 'nano/css/lesser-dark.css') //CSS styling for codemirror, dark theme + popup.add_script("codemirror-compressed", 'nano/codemirror/codemirror-compressed.js') // A custom minified JavaScript file of CodeMirror, with the following plugins: CSS Mode, NTSL Mode, CSS-hint addon, Search addon, Sublime Keymap. + popup.add_stylesheet("codemirror", 'nano/codemirror/codemirror.css') // A CSS sheet containing the basic stylings and formatting information for CodeMirror. + popup.add_stylesheet("lesser-dark", 'nano/codemirror/lesser-dark.css') // A theme for CodeMirror to use, which closely resembles the rest of the NanoUI style. popup.set_content(dat) popup.open() diff --git a/code/modules/client/asset_cache.dm b/code/modules/client/asset_cache.dm index ea7587327af..a49cfe03ccc 100644 --- a/code/modules/client/asset_cache.dm +++ b/code/modules/client/asset_cache.dm @@ -187,21 +187,21 @@ proc/getFilesSlow(var/client/client, var/list/files, var/register_asset = TRUE) //DEFINITIONS FOR ASSET DATUMS START HERE. /datum/asset/simple/paper assets = list( - "large_stamp-clown.png" = 'icons/paper_icons/large_stamp-clown.png', - "large_stamp-deny.png" = 'icons/paper_icons/large_stamp-deny.png', - "large_stamp-ok.png" = 'icons/paper_icons/large_stamp-ok.png', - "large_stamp-hop.png" = 'icons/paper_icons/large_stamp-hop.png', - "large_stamp-cmo.png" = 'icons/paper_icons/large_stamp-cmo.png', - "large_stamp-ce.png" = 'icons/paper_icons/large_stamp-ce.png', - "large_stamp-hos.png" = 'icons/paper_icons/large_stamp-hos.png', - "large_stamp-rd.png" = 'icons/paper_icons/large_stamp-rd.png', - "large_stamp-cap.png" = 'icons/paper_icons/large_stamp-cap.png', - "large_stamp-qm.png" = 'icons/paper_icons/large_stamp-qm.png', - "large_stamp-law.png" = 'icons/paper_icons/large_stamp-law.png', - "large_stamp-cent.png" = 'icons/paper_icons/large_stamp-cent.png', + "large_stamp-clown.png" = 'icons/paper_icons/large_stamp-clown.png', + "large_stamp-deny.png" = 'icons/paper_icons/large_stamp-deny.png', + "large_stamp-ok.png" = 'icons/paper_icons/large_stamp-ok.png', + "large_stamp-hop.png" = 'icons/paper_icons/large_stamp-hop.png', + "large_stamp-cmo.png" = 'icons/paper_icons/large_stamp-cmo.png', + "large_stamp-ce.png" = 'icons/paper_icons/large_stamp-ce.png', + "large_stamp-hos.png" = 'icons/paper_icons/large_stamp-hos.png', + "large_stamp-rd.png" = 'icons/paper_icons/large_stamp-rd.png', + "large_stamp-cap.png" = 'icons/paper_icons/large_stamp-cap.png', + "large_stamp-qm.png" = 'icons/paper_icons/large_stamp-qm.png', + "large_stamp-law.png" = 'icons/paper_icons/large_stamp-law.png', + "large_stamp-cent.png" = 'icons/paper_icons/large_stamp-cent.png', "large_stamp-syndicate.png" = 'icons/paper_icons/large_stamp-syndicate.png', - "talisman.png" = 'icons/paper_icons/talisman.png', - "ntlogo.png" = 'icons/paper_icons/ntlogo.png' + "talisman.png" = 'icons/paper_icons/talisman.png', + "ntlogo.png" = 'icons/paper_icons/ntlogo.png' ) /datum/asset/nanoui @@ -209,8 +209,7 @@ proc/getFilesSlow(var/client/client, var/list/files, var/register_asset = TRUE) var/list/common_dirs = list( "nano/assets/", - "nano/css/", - "nano/js/", + "nano/codemirror/", "nano/images/", "nano/layouts/" ) diff --git a/code/modules/nano/nanoui.dm b/code/modules/nano/nanoui.dm index 739077b6a43..5f59c8cf0d2 100644 --- a/code/modules/nano/nanoui.dm +++ b/code/modules/nano/nanoui.dm @@ -106,14 +106,13 @@ nanoui is used to open and update nano browser uis */ /datum/nanoui/proc/add_common_assets() add_script("libraries.min.js") // A JS file comprising of jQuery, doT.js and jQuery Timer libraries (compressed together) - add_script("nano.js") // A JS file of the NanoUI JavaScript concatenated into one file. - add_stylesheet("shared.css") // this CSS sheet is common to all UIs - add_stylesheet("icons.css") // this CSS sheet is common to all UIs + add_script("nano.js") // A JS file of the NanoUI JavaScript compressed into one file. + add_stylesheet("nanoui.css") // Concatenated CSS sheet common to all UIs, contains all of the standard NanoUI styling. - //codemirror - add_script("codemirror-compressed.js") // A custom compressed JS file of codemirror, with CSS highlighting - add_stylesheet("codemirror.css") // this CSS sheet is common to all UIs, so all UIs can use codemirror - add_stylesheet("cm_lesser-dark.css") //CSS styling for codemirror, dark theme + // CodeMirror + add_script("codemirror-compressed.js") // A custom minified JavaScript file of CodeMirror, with the following plugins: CSS Mode, NTSL Mode, CSS-hint addon, Search addon, Sublime Keymap. + add_stylesheet("codemirror.css") // A CSS sheet containing the basic stylings and formatting information for CodeMirror. + add_stylesheet("cm_lesser-dark.css") // A theme for CodeMirror to use, which closely resembles the rest of the NanoUI style. /** * Set the current status (also known as visibility) of this ui. diff --git a/nano/Gulpfile.coffee b/nano/Gulpfile.coffee index b0314455a3c..eac0b9810a4 100644 --- a/nano/Gulpfile.coffee +++ b/nano/Gulpfile.coffee @@ -8,12 +8,14 @@ input = scripts: lib: "scripts/libraries" main: "scripts/nano" + styles: "styles" output = dir: "assets" scripts: lib: "libraries.min.js" main: "nano.js" + css: "nanoui.css" ### Pacakages ### del = require "del" @@ -22,6 +24,13 @@ merge = require "merge-stream" ### Plugins ### g = require("gulp-load-plugins")({replaceString: /^gulp(-|\.)|-/g}) +p = + autoprefixer: require "autoprefixer" + gradient: require "postcss-filter-gradient" + opacity: require "postcss-opacity" + rgba: require "postcss-color-rgba-fallback" + plsfilters: require "pleeease-filters" + ### Helpers ### @@ -29,7 +38,7 @@ glob = (path) -> "#{path}/*" ### Tasks ### -gulp.task "default", ["scripts"] +gulp.task "default", ["scripts", "styles"] gulp.task "clean", -> del glob output.dir @@ -45,4 +54,18 @@ gulp.task "scripts", ["clean"], -> .pipe g.if(s.min, g.uglify().on('error', util.log)) .pipe gulp.dest output.dir - merge lib, main \ No newline at end of file + merge lib, main + +gulp.task "styles", ["clean"], -> + gulp.src glob input.styles + .pipe g.filter(["*.less", "!_*.less"]) + .pipe g.less() + .pipe g.postcss([ + p.autoprefixer({browsers: ["last 2 versions", "ie >= 8"]}), + p.gradient, + p.opacity, + p.rgba({oldie: true}), + p.plsfilters({oldIE: true}) + ]) + .pipe g.concat(output.css) + .pipe gulp.dest output.dir \ No newline at end of file diff --git a/nano/README.md b/nano/README.md index 930621e90c0..84c7bcd593a 100644 --- a/nano/README.md +++ b/nano/README.md @@ -15,18 +15,14 @@ The assets folder is used by the Gulp compiling system, and stores the minified the NanoUI JavaScript Library and prerequisites. Everything within this folder is sent to the client as-is. -### /css -This folder is used for the CSS components of NanoUI. Everything within this folder is -sent to the client as-is. +### /codemirror +This folder contains all of the JavaScript and CSS for CodeMirror. It is sent to the +client as-is. CodeMirror only has it's own folder due to the fact that it can't be +directly compiled into the NanoUI files. ### /images This folder is used to store any image files. It is sent to the client as-is. -### /js -This folder is for JavaScript which cannot be compiled and put in the assets folder. -Currently, it is only used by the pre-minifed CodeMirror JavaScript. It is sent to the -client as-is. - ### /layouts This folder is used for the central "layout" template files, which is loaded before the UI's actual template file. It is sent to the client as-is. @@ -44,6 +40,16 @@ it contains jQuery, jQuery UI, jQuery timers, and the doT template system. #### /scripts/nano This folder contains the primary JavaScript for NanoUI. +### /styles +This folder is used for NanoUI's LESS styles. These are compiled via gulp into the file +`nanoui.css`. LESS is a system that expands upon CSS in order to make it better, as well +as less complicated. + +Any LESS file that is prefixed with the `_` character will be ignored during compilation. +These files are still included, however, via `@import`, view the file +[`nanoui.less`](http://github.com/ParadiseSS13/Paradise/blob/master/nano/styles/nanoui.less) to see how this works. + + ### /templates This folder is used to store the .tmpl files which are later compiled by the NanoUtility JavaScript, using a modified version of the doT template engine. It is sent to the client diff --git a/nano/assets/nanoui.css b/nano/assets/nanoui.css new file mode 100644 index 00000000000..456fa31733b --- /dev/null +++ b/nano/assets/nanoui.css @@ -0,0 +1,1258 @@ +@charset "utf-8"; +body { + padding: 0; + margin: 0; + font-size: 12px; + color: #ffffff; + line-height: 170%; + font-family: Verdana, Geneva, sans-serif; + background: #272727; +} +hr { + background-color: #40628a; + height: 1px; +} +img, +a img { + border-style: none; +} +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 0; + padding: 12px 0 6px 0; + color: #FFFFFF; + clear: both; +} +h1 { + font-size: 18px; +} +h2 { + font-size: 16px; +} +h3 { + font-size: 14px; +} +h4 { + font-size: 12px; +} +/* Icons +----------------------------------*/ +.icon24 { + width: 24px; + height: 24px; +} +.icon24.uiStatusGood { + background: url(uiIcons24.png) 0 0 no-repeat; +} +.icon24.uiStatusAverage { + background: url(uiIcons24.png) 0 -24px no-repeat; +} +.icon24.uiStatusBad { + background: url(uiIcons24.png) 0 -48px no-repeat; +} +/* states and images */ +.uiLinkPendingIcon { + display: none; + float: left; + width: 16px; + height: 16px; + margin: 2px 2px 0 2px; + background-image: url(uiLinkPendingIcon.gif); +} +.linkPending .uiIcon16 { + display: none; +} +.linkPending .uiLinkPendingIcon { + display: block; +} +.uiIcon16 { + float: left; + width: 16px; + height: 16px; + margin: 2px 2px 0 2px; + background-image: url(uiIcons16.png); +} +/* positioning */ +.uiIcon16.icon-blank { + background-position: 16px 16px; +} +.uiIcon16.icon-carat-1-n { + background-position: 0 0; +} +.uiIcon16.icon-carat-1-ne { + background-position: -16px 0; +} +.uiIcon16.icon-carat-1-e { + background-position: -32px 0; +} +.uiIcon16.icon-carat-1-se { + background-position: -48px 0; +} +.uiIcon16.icon-carat-1-s { + background-position: -64px 0; +} +.uiIcon16.icon-carat-1-sw { + background-position: -80px 0; +} +.uiIcon16.icon-carat-1-w { + background-position: -96px 0; +} +.uiIcon16.icon-carat-1-nw { + background-position: -112px 0; +} +.uiIcon16.icon-carat-2-n-s { + background-position: -128px 0; +} +.uiIcon16.icon-carat-2-e-w { + background-position: -144px 0; +} +.uiIcon16.icon-triangle-1-n { + background-position: 0 -16px; +} +.uiIcon16.icon-triangle-1-ne { + background-position: -16px -16px; +} +.uiIcon16.icon-triangle-1-e { + background-position: -32px -16px; +} +.uiIcon16.icon-triangle-1-se { + background-position: -48px -16px; +} +.uiIcon16.icon-triangle-1-s { + background-position: -64px -16px; +} +.uiIcon16.icon-triangle-1-sw { + background-position: -80px -16px; +} +.uiIcon16.icon-triangle-1-w { + background-position: -96px -16px; +} +.uiIcon16.icon-triangle-1-nw { + background-position: -112px -16px; +} +.uiIcon16.icon-triangle-2-n-s { + background-position: -128px -16px; +} +.uiIcon16.icon-triangle-2-e-w { + background-position: -144px -16px; +} +.uiIcon16.icon-arrow-1-n { + background-position: 0 -32px; +} +.uiIcon16.icon-arrow-1-ne { + background-position: -16px -32px; +} +.uiIcon16.icon-arrow-1-e { + background-position: -32px -32px; +} +.uiIcon16.icon-arrow-1-se { + background-position: -48px -32px; +} +.uiIcon16.icon-arrow-1-s { + background-position: -64px -32px; +} +.uiIcon16.icon-arrow-1-sw { + background-position: -80px -32px; +} +.uiIcon16.icon-arrow-1-w { + background-position: -96px -32px; +} +.uiIcon16.icon-arrow-1-nw { + background-position: -112px -32px; +} +.uiIcon16.icon-arrow-2-n-s { + background-position: -128px -32px; +} +.uiIcon16.icon-arrow-2-ne-sw { + background-position: -144px -32px; +} +.uiIcon16.icon-arrow-2-e-w { + background-position: -160px -32px; +} +.uiIcon16.icon-arrow-2-se-nw { + background-position: -176px -32px; +} +.uiIcon16.icon-arrowstop-1-n { + background-position: -192px -32px; +} +.uiIcon16.icon-arrowstop-1-e { + background-position: -208px -32px; +} +.uiIcon16.icon-arrowstop-1-s { + background-position: -224px -32px; +} +.uiIcon16.icon-arrowstop-1-w { + background-position: -240px -32px; +} +.uiIcon16.icon-arrowthick-1-n { + background-position: 0 -48px; +} +.uiIcon16.icon-arrowthick-1-ne { + background-position: -16px -48px; +} +.uiIcon16.icon-arrowthick-1-e { + background-position: -32px -48px; +} +.uiIcon16.icon-arrowthick-1-se { + background-position: -48px -48px; +} +.uiIcon16.icon-arrowthick-1-s { + background-position: -64px -48px; +} +.uiIcon16.icon-arrowthick-1-sw { + background-position: -80px -48px; +} +.uiIcon16.icon-arrowthick-1-w { + background-position: -96px -48px; +} +.uiIcon16.icon-arrowthick-1-nw { + background-position: -112px -48px; +} +.uiIcon16.icon-arrowthick-2-n-s { + background-position: -128px -48px; +} +.uiIcon16.icon-arrowthick-2-ne-sw { + background-position: -144px -48px; +} +.uiIcon16.icon-arrowthick-2-e-w { + background-position: -160px -48px; +} +.uiIcon16.icon-arrowthick-2-se-nw { + background-position: -176px -48px; +} +.uiIcon16.icon-arrowthickstop-1-n { + background-position: -192px -48px; +} +.uiIcon16.icon-arrowthickstop-1-e { + background-position: -208px -48px; +} +.uiIcon16.icon-arrowthickstop-1-s { + background-position: -224px -48px; +} +.uiIcon16.icon-arrowthickstop-1-w { + background-position: -240px -48px; +} +.uiIcon16.icon-arrowreturnthick-1-w { + background-position: 0 -64px; +} +.uiIcon16.icon-arrowreturnthick-1-n { + background-position: -16px -64px; +} +.uiIcon16.icon-arrowreturnthick-1-e { + background-position: -32px -64px; +} +.uiIcon16.icon-arrowreturnthick-1-s { + background-position: -48px -64px; +} +.uiIcon16.icon-arrowreturn-1-w { + background-position: -64px -64px; +} +.uiIcon16.icon-arrowreturn-1-n { + background-position: -80px -64px; +} +.uiIcon16.icon-arrowreturn-1-e { + background-position: -96px -64px; +} +.uiIcon16.icon-arrowreturn-1-s { + background-position: -112px -64px; +} +.uiIcon16.icon-arrowrefresh-1-w { + background-position: -128px -64px; +} +.uiIcon16.icon-arrowrefresh-1-n { + background-position: -144px -64px; +} +.uiIcon16.icon-arrowrefresh-1-e { + background-position: -160px -64px; +} +.uiIcon16.icon-arrowrefresh-1-s { + background-position: -176px -64px; +} +.uiIcon16.icon-arrow-4 { + background-position: 0 -80px; +} +.uiIcon16.icon-arrow-4-diag { + background-position: -16px -80px; +} +.uiIcon16.icon-extlink { + background-position: -32px -80px; +} +.uiIcon16.icon-newwin { + background-position: -48px -80px; +} +.uiIcon16.icon-refresh { + background-position: -64px -80px; +} +.uiIcon16.icon-shuffle { + background-position: -80px -80px; +} +.uiIcon16.icon-transfer-e-w { + background-position: -96px -80px; +} +.uiIcon16.icon-transferthick-e-w { + background-position: -112px -80px; +} +.uiIcon16.icon-radiation { + background-position: -128px -80px; +} +.uiIcon16.icon-folder-collapsed { + background-position: 0 -96px; +} +.uiIcon16.icon-folder-open { + background-position: -16px -96px; +} +.uiIcon16.icon-document { + background-position: -32px -96px; +} +.uiIcon16.icon-document-b { + background-position: -48px -96px; +} +.uiIcon16.icon-note { + background-position: -64px -96px; +} +.uiIcon16.icon-mail-closed { + background-position: -80px -96px; +} +.uiIcon16.icon-mail-open { + background-position: -96px -96px; +} +.uiIcon16.icon-suitcase { + background-position: -112px -96px; +} +.uiIcon16.icon-comment { + background-position: -128px -96px; +} +.uiIcon16.icon-person { + background-position: -144px -96px; +} +.uiIcon16.icon-print { + background-position: -160px -96px; +} +.uiIcon16.icon-trash { + background-position: -176px -96px; +} +.uiIcon16.icon-locked { + background-position: -192px -96px; +} +.uiIcon16.icon-unlocked { + background-position: -208px -96px; +} +.uiIcon16.icon-bookmark { + background-position: -224px -96px; +} +.uiIcon16.icon-tag { + background-position: -240px -96px; +} +.uiIcon16.icon-home { + background-position: 0 -112px; +} +.uiIcon16.icon-flag { + background-position: -16px -112px; +} +.uiIcon16.icon-calendar { + background-position: -32px -112px; +} +.uiIcon16.icon-cart { + background-position: -48px -112px; +} +.uiIcon16.icon-pencil { + background-position: -64px -112px; +} +.uiIcon16.icon-clock { + background-position: -80px -112px; +} +.uiIcon16.icon-disk { + background-position: -96px -112px; +} +.uiIcon16.icon-calculator { + background-position: -112px -112px; +} +.uiIcon16.icon-zoomin { + background-position: -128px -112px; +} +.uiIcon16.icon-zoomout { + background-position: -144px -112px; +} +.uiIcon16.icon-search { + background-position: -160px -112px; +} +.uiIcon16.icon-wrench { + background-position: -176px -112px; +} +.uiIcon16.icon-gear { + background-position: -192px -112px; +} +.uiIcon16.icon-heart { + background-position: -208px -112px; +} +.uiIcon16.icon-star { + background-position: -224px -112px; +} +.uiIcon16.icon-link { + background-position: -240px -112px; +} +.uiIcon16.icon-cancel { + background-position: 0 -128px; +} +.uiIcon16.icon-plus { + background-position: -16px -128px; +} +.uiIcon16.icon-plusthick { + background-position: -32px -128px; +} +.uiIcon16.icon-minus { + background-position: -48px -128px; +} +.uiIcon16.icon-minusthick { + background-position: -64px -128px; +} +.uiIcon16.icon-close { + background-position: -80px -128px; +} +.uiIcon16.icon-closethick { + background-position: -96px -128px; +} +.uiIcon16.icon-key { + background-position: -112px -128px; +} +.uiIcon16.icon-lightbulb { + background-position: -128px -128px; +} +.uiIcon16.icon-scissors { + background-position: -144px -128px; +} +.uiIcon16.icon-clipboard { + background-position: -160px -128px; +} +.uiIcon16.icon-copy { + background-position: -176px -128px; +} +.uiIcon16.icon-contact { + background-position: -192px -128px; +} +.uiIcon16.icon-image { + background-position: -208px -128px; +} +.uiIcon16.icon-video { + background-position: -224px -128px; +} +.uiIcon16.icon-script { + background-position: -240px -128px; +} +.uiIcon16.icon-alert { + background-position: 0 -144px; +} +.uiIcon16.icon-info { + background-position: -16px -144px; +} +.uiIcon16.icon-notice { + background-position: -32px -144px; +} +.uiIcon16.icon-help { + background-position: -48px -144px; +} +.uiIcon16.icon-check { + background-position: -64px -144px; +} +.uiIcon16.icon-bullet { + background-position: -80px -144px; +} +.uiIcon16.icon-radio-on { + background-position: -96px -144px; +} +.uiIcon16.icon-radio-off { + background-position: -112px -144px; +} +.uiIcon16.icon-pin-w { + background-position: -128px -144px; +} +.uiIcon16.icon-pin-s { + background-position: -144px -144px; +} +.uiIcon16.icon-play { + background-position: 0 -160px; +} +.uiIcon16.icon-pause { + background-position: -16px -160px; +} +.uiIcon16.icon-seek-next { + background-position: -32px -160px; +} +.uiIcon16.icon-seek-prev { + background-position: -48px -160px; +} +.uiIcon16.icon-seek-end { + background-position: -64px -160px; +} +.uiIcon16.icon-seek-start { + background-position: -80px -160px; +} +/* uiIcon-seek-first is deprecated, use uiIcon-seek-start instead */ +.uiIcon16.icon-seek-first { + background-position: -80px -160px; +} +.uiIcon16.icon-stop { + background-position: -96px -160px; +} +.uiIcon16.icon-eject { + background-position: -112px -160px; +} +.uiIcon16.icon-volume-off { + background-position: -128px -160px; +} +.uiIcon16.icon-volume-on { + background-position: -144px -160px; +} +.uiIcon16.icon-power { + background-position: 0 -176px; +} +.uiIcon16.icon-signal-diag { + background-position: -16px -176px; +} +.uiIcon16.icon-signal { + background-position: -32px -176px; +} +.uiIcon16.icon-battery-0 { + background-position: -48px -176px; +} +.uiIcon16.icon-battery-1 { + background-position: -64px -176px; +} +.uiIcon16.icon-battery-2 { + background-position: -80px -176px; +} +.uiIcon16.icon-battery-3 { + background-position: -96px -176px; +} +.uiIcon16.icon-circle-plus { + background-position: 0 -192px; +} +.uiIcon16.icon-circle-minus { + background-position: -16px -192px; +} +.uiIcon16.icon-circle-close { + background-position: -32px -192px; +} +.uiIcon16.icon-circle-triangle-e { + background-position: -48px -192px; +} +.uiIcon16.icon-circle-triangle-s { + background-position: -64px -192px; +} +.uiIcon16.icon-circle-triangle-w { + background-position: -80px -192px; +} +.uiIcon16.icon-circle-triangle-n { + background-position: -96px -192px; +} +.uiIcon16.icon-circle-arrow-e { + background-position: -112px -192px; +} +.uiIcon16.icon-circle-arrow-s { + background-position: -128px -192px; +} +.uiIcon16.icon-circle-arrow-w { + background-position: -144px -192px; +} +.uiIcon16.icon-circle-arrow-n { + background-position: -160px -192px; +} +.uiIcon16.icon-circle-zoomin { + background-position: -176px -192px; +} +.uiIcon16.icon-circle-zoomout { + background-position: -192px -192px; +} +.uiIcon16.icon-circle-check { + background-position: -208px -192px; +} +.uiIcon16.icon-circlesmall-plus { + background-position: 0 -208px; +} +.uiIcon16.icon-circlesmall-minus { + background-position: -16px -208px; +} +.uiIcon16.icon-circlesmall-close { + background-position: -32px -208px; +} +.uiIcon16.icon-squaresmall-plus { + background-position: -48px -208px; +} +.uiIcon16.icon-squaresmall-minus { + background-position: -64px -208px; +} +.uiIcon16.icon-squaresmall-close { + background-position: -80px -208px; +} +.uiIcon16.icon-grip-dotted-vertical { + background-position: 0 -224px; +} +.uiIcon16.icon-grip-dotted-horizontal { + background-position: -16px -224px; +} +.uiIcon16.icon-grip-solid-vertical { + background-position: -32px -224px; +} +.uiIcon16.icon-grip-solid-horizontal { + background-position: -48px -224px; +} +.uiIcon16.icon-gripsmall-diagonal-se { + background-position: -64px -224px; +} +.uiIcon16.icon-grip-diagonal-se { + background-position: -80px -224px; +} +.mapIcon16 { + position: absolute; + width: 16px; + height: 16px; + background-image: url(uiIcons16Green.png); + background-position: -144px -96px; + background-repeat: no-repeat; + zoom: 0.125; + margin-left: -1px; + /*margin-bottom: -1px;*/ +} +.mapIcon16.dead { + background-image: url(uiIcons16Red.png); +} +.mapIcon16.bad { + background-image: url(uiIcons16Red.png); +} +.mapIcon16.average { + background-image: url(uiIcons16Orange.png); +} +.mapIcon16.good { + background-image: url(uiIcons16Green.png); +} +/* AirAlarm */ +.mapIcon16.icon-airalarm { + background-position: 0 -144px; +} +/* Command Positions */ +.mapIcon16.rank-captain { + background-position: -224px -112px; +} +.mapIcon16.rank-headofpersonnel { + background-position: -112px -96px; +} +.mapIcon16.rank-headofsecurity { + background-position: -112px -128px; +} +.mapIcon16.rank-chiefengineer { + background-position: -176px -112px; +} +.mapIcon16.rank-researchdirector { + background-position: -128px -128px; +} +.mapIcon16.rank-chiefmedicalofficer { + background-position: -32px -128px; +} +/* Engineering Positions */ +.mapIcon16.rank-stationengineer { + background-position: -176px -112px; +} +.mapIcon16.rank-atmospherictechnician { + background-position: -176px -112px; +} +/* Medical Positions */ +.mapIcon16.rank-medicaldoctor { + background-position: -32px -128px; +} +.mapIcon16.rank-geneticist { + background-position: -32px -128px; +} +.mapIcon16.rank-psychiatrist { + background-position: -32px -128px; +} +.mapIcon16.rank-chemist { + background-position: -32px -128px; +} +/* Science Positions */ +.mapIcon16.rank-scientist { + background-position: -128px -128px; +} +.mapIcon16.rank-geneticist { + background-position: -128px -128px; +} +.mapIcon16.rank-roboticist { + background-position: -128px -128px; +} +.mapIcon16.rank-xenobiologist { + background-position: -128px -128px; +} +/* Security Positions */ +.mapIcon16.rank-warden { + background-position: -112px -128px; +} +.mapIcon16.rank-detective { + background-position: -112px -128px; +} +.mapIcon16.rank-securityofficer { + background-position: -112px -128px; +} +ul { + padding: 4px 0 0 10px; + margin: 0; + list-style-type: none; +} +li { + padding: 0 0 2px 0; +} +table.fixed { + table-layout: fixed; +} +table.fixed td { + overflow: hidden; +} +/* Table styling for the power monitor */ +table.pmon { + border: 2px solid RoyalBlue; +} +table.pmon td, +table.pmon th { + border-bottom: 1px dotted black; + padding: 0px 5px 0px 5px; +} +/* Table styling for the crew manifest */ +th.command { + background: #3333FF; + font-weight: bold; + color: #ffffff; +} +th.sec { + background: #8e0000; + font-weight: bold; + color: #ffffff; +} +th.med { + background: #006600; + font-weight: bold; + color: #ffffff; +} +th.eng { + background: #b27300; + font-weight: bold; + color: #ffffff; +} +th.sci { + background: #a65ba6; + font-weight: bold; + color: #ffffff; +} +th.civ { + background: #a32800; + font-weight: bold; + color: #ffffff; +} +th.misc { + background: #666666; + font-weight: bold; + color: #ffffff; +} +/* Table styling for Med Scanner */ +.striped tr:nth-child(even) { + background-color: #404040; +} +.itemGroup { + border: 1px solid #e9c183; + background: #2c2c2c; + padding: 4px; + clear: both; +} +.item { + width: 100%; + margin: 4px 0 0 0; + clear: both; + overflow: auto; +} +.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%; +} +.block { + padding: 8px; + margin: 10px 4px 4px 4px; + border: 1px solid #40628a; + background-color: #202020; +} +.block h3 { + padding: 0; +} +.clearBoth { + clear: both; +} +.clearLeft { + clear: left; +} +.clearRight { + clear: right; +} +.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; +} +.floatRight { + float: right; +} +.floatLeft { + float: left; +} +.hidden { + display: none; +} +.statusDisplay { + background: #000000; + color: #ffffff; + border: 1px solid #40628a; + padding: 4px; + margin: 3px 0; + overflow: hidden; +} +.statusDisplayRecords { + background: #000000; + color: #ffffff; + border: 1px solid #40628a; + padding: 4px; + margin: 3px 0; + overflow-x: hidden; + overflow-y: auto; +} +.statusLabel { + width: 138px; + float: left; + overflow: hidden; + color: #98B0C3; +} +.statusValue { + float: left; +} +.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; +} +.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; +} +.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; +} +.inactive, +a.inactive:link, +a.inactive:visited, +a.inactive:active, +a.inactive:hover { + color: #ffffff; + background: #999999; + border-color: #666666; +} +.white { + color: white; + font-weight: bold; +} +.good { + color: #4f7529; + font-weight: bold; +} +.average { + color: #cd6500; + font-weight: bold; +} +.bad { + color: #ee0000; + font-weight: bold; +} +.idle { + color: #272727; + font-weight: bold; +} +.redButton { + background: #ea0000; +} +.yellowButton { + background: #cacc00; +} +.highlight { + color: #8BA5C4; +} +.dark { + color: #272727; +} +/* Damage colors for crew monitoring computer */ +.burn { + color: orange; +} +.brute { + color: red; +} +.toxin { + color: green; +} +.toxin_light { + color: #3ADF00; +} +.oxyloss { + color: blue; +} +.oxyloss_light { + color: #6698FF; +} +/* Wire colors for nuclear bomb defusion */ +.Red { + color: #FF0000; +} +.Blue { + color: #0000FF; +} +.Green { + color: #00FF00; +} +.Marigold { + color: #FDA505; +} +.Fuschia { + color: #FF0080; +} +.Black { + color: #000000; +} +.Pearl { + color: #C6CACB; +} +/* Status bar colors for sleeper temperatures */ +.cold1 { + color: #94B8FF; +} +.cold2 { + color: #6699FF; +} +.cold3 { + color: #293D66; +} +.hot1 { + color: #FF9966; +} +.hot2 { + color: #993D00; +} +.hot3 { + color: #FF6600; +} +.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.notgood { + color: #ffffff; + background: #ffb400; +} +.displayBarFill.average { + color: #ffffff; + background: #cd6500; +} +.displayBarFill.bad { + color: #ffffff; + background: #ee0000; +} +.displayBarFill.highlight { + color: #ffffff; + background: #8BA5C4; +} +#uiNoScript { + position: fixed; + top: 50%; + left: 50%; + margin: -60px 0 0 -150px; + width: 280px; + height: 120px; + background: #ffffff; + border: 2px solid #ff0000; + color: #000000; + font-size: 10px; + font-weight: bold; + z-index: 9999; + padding: 0px 10px; + text-align: center; +} +/********************************** + .notice | Caution Stripes +**********************************/ +.notice { + position: relative; + background: url(uiNoticeBackground.jpg) 50% 50%; + color: #000000; + font-size: 12px; + font-style: italic; + font-weight: bold; + padding: 3px 4px 3px 4px; + margin: 4px 0 4px 0; +} +.noticePlaceholder { + position: relative; + font-size: 12px; + font-style: italic; + font-weight: bold; + padding: 3px 4px 3px 4px; + margin: 4px 0 4px 0; +} +.notice.icon { + padding: 2px 4px 0 20px; +} +.notice img { + position: absolute; + top: 0; + left: 0; + width: 16px; + height: 16px; +} +div.notice { + clear: both; +} +/********************\ +\********************/ +/********************************** + PDA, DNA Modifier styles + Don't fit anywhere else. +**********************************/ +/* PDA styling */ +.wholeScreen { + position: absolute; + color: #517087; + font-size: 16px; + font-weight: bold; + text-align: center; +} +.pdalink { + float: left; + white-space: nowrap; +} +.pdanote { + color: #cd6500; + font-weight: bold; +} +/* DNA Modifier styling */ +.dnaBlock { + float: left; + width: 90px; + padding: 0 0 5px 0; +} +.dnaBlockNumber { + font-family: Fixed, monospace; + float: left; + color: #ffffff; + background: #363636; + min-width: 20px; + height: 20px; + padding: 0; + text-align: center; +} +.dnaSubBlock { + font-family: Fixed, monospace; + float: left; + padding: 0; + min-width: 16px; + height: 20px; + text-align: center; +} +.mask { + position: fixed; + left: 0; + top: 0; + width: 100%; + height: 100%; + background: url(uiMaskBackground.png); +} +.maskContent { + width: 100%; + height: 200px; + margin: 200px 0; + text-align: center; +} +/********************\ +\********************/ diff --git a/nano/js/codemirror-compressed.js b/nano/codemirror/codemirror-compressed.js similarity index 100% rename from nano/js/codemirror-compressed.js rename to nano/codemirror/codemirror-compressed.js diff --git a/nano/css/codemirror.css b/nano/codemirror/codemirror.css similarity index 100% rename from nano/css/codemirror.css rename to nano/codemirror/codemirror.css diff --git a/nano/css/lesser-dark.css b/nano/codemirror/lesser-dark.css similarity index 100% rename from nano/css/lesser-dark.css rename to nano/codemirror/lesser-dark.css diff --git a/nano/css/icons.css b/nano/css/icons.css deleted file mode 100644 index ff4d9d7498b..00000000000 --- a/nano/css/icons.css +++ /dev/null @@ -1,326 +0,0 @@ -/* Icons -----------------------------------*/ - -.icon24 -{ - width: 24px; - height: 24px; -} - -.icon24.uiStatusGood -{ - background: url(uiIcons24.png) 0 0 no-repeat; -} - -.icon24.uiStatusAverage -{ - background: url(uiIcons24.png) 0 -24px no-repeat; -} - -.icon24.uiStatusBad -{ - background: url(uiIcons24.png) 0 -48px no-repeat; -} - -/* states and images */ -.uiIcon16 { - float: left; - width: 16px; - height: 16px; - margin: 2px 2px 0 2px; - background-image: url(uiIcons16.png); -} - -.uiLinkPendingIcon { - display: none; - float: left; - width: 16px; - height: 16px; - margin: 2px 2px 0 2px; - background-image: url(uiLinkPendingIcon.gif); -} - -.linkPending .uiIcon16 { - display: none; -} - -.linkPending .uiLinkPendingIcon { - display: block; -} - -/* positioning */ -.uiIcon16.icon-blank { background-position: 16px 16px; } -.uiIcon16.icon-carat-1-n { background-position: 0 0; } -.uiIcon16.icon-carat-1-ne { background-position: -16px 0; } -.uiIcon16.icon-carat-1-e { background-position: -32px 0; } -.uiIcon16.icon-carat-1-se { background-position: -48px 0; } -.uiIcon16.icon-carat-1-s { background-position: -64px 0; } -.uiIcon16.icon-carat-1-sw { background-position: -80px 0; } -.uiIcon16.icon-carat-1-w { background-position: -96px 0; } -.uiIcon16.icon-carat-1-nw { background-position: -112px 0; } -.uiIcon16.icon-carat-2-n-s { background-position: -128px 0; } -.uiIcon16.icon-carat-2-e-w { background-position: -144px 0; } -.uiIcon16.icon-triangle-1-n { background-position: 0 -16px; } -.uiIcon16.icon-triangle-1-ne { background-position: -16px -16px; } -.uiIcon16.icon-triangle-1-e { background-position: -32px -16px; } -.uiIcon16.icon-triangle-1-se { background-position: -48px -16px; } -.uiIcon16.icon-triangle-1-s { background-position: -64px -16px; } -.uiIcon16.icon-triangle-1-sw { background-position: -80px -16px; } -.uiIcon16.icon-triangle-1-w { background-position: -96px -16px; } -.uiIcon16.icon-triangle-1-nw { background-position: -112px -16px; } -.uiIcon16.icon-triangle-2-n-s { background-position: -128px -16px; } -.uiIcon16.icon-triangle-2-e-w { background-position: -144px -16px; } -.uiIcon16.icon-arrow-1-n { background-position: 0 -32px; } -.uiIcon16.icon-arrow-1-ne { background-position: -16px -32px; } -.uiIcon16.icon-arrow-1-e { background-position: -32px -32px; } -.uiIcon16.icon-arrow-1-se { background-position: -48px -32px; } -.uiIcon16.icon-arrow-1-s { background-position: -64px -32px; } -.uiIcon16.icon-arrow-1-sw { background-position: -80px -32px; } -.uiIcon16.icon-arrow-1-w { background-position: -96px -32px; } -.uiIcon16.icon-arrow-1-nw { background-position: -112px -32px; } -.uiIcon16.icon-arrow-2-n-s { background-position: -128px -32px; } -.uiIcon16.icon-arrow-2-ne-sw { background-position: -144px -32px; } -.uiIcon16.icon-arrow-2-e-w { background-position: -160px -32px; } -.uiIcon16.icon-arrow-2-se-nw { background-position: -176px -32px; } -.uiIcon16.icon-arrowstop-1-n { background-position: -192px -32px; } -.uiIcon16.icon-arrowstop-1-e { background-position: -208px -32px; } -.uiIcon16.icon-arrowstop-1-s { background-position: -224px -32px; } -.uiIcon16.icon-arrowstop-1-w { background-position: -240px -32px; } -.uiIcon16.icon-arrowthick-1-n { background-position: 0 -48px; } -.uiIcon16.icon-arrowthick-1-ne { background-position: -16px -48px; } -.uiIcon16.icon-arrowthick-1-e { background-position: -32px -48px; } -.uiIcon16.icon-arrowthick-1-se { background-position: -48px -48px; } -.uiIcon16.icon-arrowthick-1-s { background-position: -64px -48px; } -.uiIcon16.icon-arrowthick-1-sw { background-position: -80px -48px; } -.uiIcon16.icon-arrowthick-1-w { background-position: -96px -48px; } -.uiIcon16.icon-arrowthick-1-nw { background-position: -112px -48px; } -.uiIcon16.icon-arrowthick-2-n-s { background-position: -128px -48px; } -.uiIcon16.icon-arrowthick-2-ne-sw { background-position: -144px -48px; } -.uiIcon16.icon-arrowthick-2-e-w { background-position: -160px -48px; } -.uiIcon16.icon-arrowthick-2-se-nw { background-position: -176px -48px; } -.uiIcon16.icon-arrowthickstop-1-n { background-position: -192px -48px; } -.uiIcon16.icon-arrowthickstop-1-e { background-position: -208px -48px; } -.uiIcon16.icon-arrowthickstop-1-s { background-position: -224px -48px; } -.uiIcon16.icon-arrowthickstop-1-w { background-position: -240px -48px; } -.uiIcon16.icon-arrowreturnthick-1-w { background-position: 0 -64px; } -.uiIcon16.icon-arrowreturnthick-1-n { background-position: -16px -64px; } -.uiIcon16.icon-arrowreturnthick-1-e { background-position: -32px -64px; } -.uiIcon16.icon-arrowreturnthick-1-s { background-position: -48px -64px; } -.uiIcon16.icon-arrowreturn-1-w { background-position: -64px -64px; } -.uiIcon16.icon-arrowreturn-1-n { background-position: -80px -64px; } -.uiIcon16.icon-arrowreturn-1-e { background-position: -96px -64px; } -.uiIcon16.icon-arrowreturn-1-s { background-position: -112px -64px; } -.uiIcon16.icon-arrowrefresh-1-w { background-position: -128px -64px; } -.uiIcon16.icon-arrowrefresh-1-n { background-position: -144px -64px; } -.uiIcon16.icon-arrowrefresh-1-e { background-position: -160px -64px; } -.uiIcon16.icon-arrowrefresh-1-s { background-position: -176px -64px; } -.uiIcon16.icon-arrow-4 { background-position: 0 -80px; } -.uiIcon16.icon-arrow-4-diag { background-position: -16px -80px; } -.uiIcon16.icon-extlink { background-position: -32px -80px; } -.uiIcon16.icon-newwin { background-position: -48px -80px; } -.uiIcon16.icon-refresh { background-position: -64px -80px; } -.uiIcon16.icon-shuffle { background-position: -80px -80px; } -.uiIcon16.icon-transfer-e-w { background-position: -96px -80px; } -.uiIcon16.icon-transferthick-e-w { background-position: -112px -80px; } -.uiIcon16.icon-radiation { background-position: -128px -80px; } -.uiIcon16.icon-folder-collapsed { background-position: 0 -96px; } -.uiIcon16.icon-folder-open { background-position: -16px -96px; } -.uiIcon16.icon-document { background-position: -32px -96px; } -.uiIcon16.icon-document-b { background-position: -48px -96px; } -.uiIcon16.icon-note { background-position: -64px -96px; } -.uiIcon16.icon-mail-closed { background-position: -80px -96px; } -.uiIcon16.icon-mail-open { background-position: -96px -96px; } -.uiIcon16.icon-suitcase { background-position: -112px -96px; } -.uiIcon16.icon-comment { background-position: -128px -96px; } -.uiIcon16.icon-person { background-position: -144px -96px; } -.uiIcon16.icon-print { background-position: -160px -96px; } -.uiIcon16.icon-trash { background-position: -176px -96px; } -.uiIcon16.icon-locked { background-position: -192px -96px; } -.uiIcon16.icon-unlocked { background-position: -208px -96px; } -.uiIcon16.icon-bookmark { background-position: -224px -96px; } -.uiIcon16.icon-tag { background-position: -240px -96px; } -.uiIcon16.icon-home { background-position: 0 -112px; } -.uiIcon16.icon-flag { background-position: -16px -112px; } -.uiIcon16.icon-calendar { background-position: -32px -112px; } -.uiIcon16.icon-cart { background-position: -48px -112px; } -.uiIcon16.icon-pencil { background-position: -64px -112px; } -.uiIcon16.icon-clock { background-position: -80px -112px; } -.uiIcon16.icon-disk { background-position: -96px -112px; } -.uiIcon16.icon-calculator { background-position: -112px -112px; } -.uiIcon16.icon-zoomin { background-position: -128px -112px; } -.uiIcon16.icon-zoomout { background-position: -144px -112px; } -.uiIcon16.icon-search { background-position: -160px -112px; } -.uiIcon16.icon-wrench { background-position: -176px -112px; } -.uiIcon16.icon-gear { background-position: -192px -112px; } -.uiIcon16.icon-heart { background-position: -208px -112px; } -.uiIcon16.icon-star { background-position: -224px -112px; } -.uiIcon16.icon-link { background-position: -240px -112px; } -.uiIcon16.icon-cancel { background-position: 0 -128px; } -.uiIcon16.icon-plus { background-position: -16px -128px; } -.uiIcon16.icon-plusthick { background-position: -32px -128px; } -.uiIcon16.icon-minus { background-position: -48px -128px; } -.uiIcon16.icon-minusthick { background-position: -64px -128px; } -.uiIcon16.icon-close { background-position: -80px -128px; } -.uiIcon16.icon-closethick { background-position: -96px -128px; } -.uiIcon16.icon-key { background-position: -112px -128px; } -.uiIcon16.icon-lightbulb { background-position: -128px -128px; } -.uiIcon16.icon-scissors { background-position: -144px -128px; } -.uiIcon16.icon-clipboard { background-position: -160px -128px; } -.uiIcon16.icon-copy { background-position: -176px -128px; } -.uiIcon16.icon-contact { background-position: -192px -128px; } -.uiIcon16.icon-image { background-position: -208px -128px; } -.uiIcon16.icon-video { background-position: -224px -128px; } -.uiIcon16.icon-script { background-position: -240px -128px; } -.uiIcon16.icon-alert { background-position: 0 -144px; } -.uiIcon16.icon-info { background-position: -16px -144px; } -.uiIcon16.icon-notice { background-position: -32px -144px; } -.uiIcon16.icon-help { background-position: -48px -144px; } -.uiIcon16.icon-check { background-position: -64px -144px; } -.uiIcon16.icon-bullet { background-position: -80px -144px; } -.uiIcon16.icon-radio-on { background-position: -96px -144px; } -.uiIcon16.icon-radio-off { background-position: -112px -144px; } -.uiIcon16.icon-pin-w { background-position: -128px -144px; } -.uiIcon16.icon-pin-s { background-position: -144px -144px; } -.uiIcon16.icon-play { background-position: 0 -160px; } -.uiIcon16.icon-pause { background-position: -16px -160px; } -.uiIcon16.icon-seek-next { background-position: -32px -160px; } -.uiIcon16.icon-seek-prev { background-position: -48px -160px; } -.uiIcon16.icon-seek-end { background-position: -64px -160px; } -.uiIcon16.icon-seek-start { background-position: -80px -160px; } -/* uiIcon-seek-first is deprecated, use uiIcon-seek-start instead */ -.uiIcon16.icon-seek-first { background-position: -80px -160px; } -.uiIcon16.icon-stop { background-position: -96px -160px; } -.uiIcon16.icon-eject { background-position: -112px -160px; } -.uiIcon16.icon-volume-off { background-position: -128px -160px; } -.uiIcon16.icon-volume-on { background-position: -144px -160px; } -.uiIcon16.icon-power { background-position: 0 -176px; } -.uiIcon16.icon-signal-diag { background-position: -16px -176px; } -.uiIcon16.icon-signal { background-position: -32px -176px; } -.uiIcon16.icon-battery-0 { background-position: -48px -176px; } -.uiIcon16.icon-battery-1 { background-position: -64px -176px; } -.uiIcon16.icon-battery-2 { background-position: -80px -176px; } -.uiIcon16.icon-battery-3 { background-position: -96px -176px; } -.uiIcon16.icon-circle-plus { background-position: 0 -192px; } -.uiIcon16.icon-circle-minus { background-position: -16px -192px; } -.uiIcon16.icon-circle-close { background-position: -32px -192px; } -.uiIcon16.icon-circle-triangle-e { background-position: -48px -192px; } -.uiIcon16.icon-circle-triangle-s { background-position: -64px -192px; } -.uiIcon16.icon-circle-triangle-w { background-position: -80px -192px; } -.uiIcon16.icon-circle-triangle-n { background-position: -96px -192px; } -.uiIcon16.icon-circle-arrow-e { background-position: -112px -192px; } -.uiIcon16.icon-circle-arrow-s { background-position: -128px -192px; } -.uiIcon16.icon-circle-arrow-w { background-position: -144px -192px; } -.uiIcon16.icon-circle-arrow-n { background-position: -160px -192px; } -.uiIcon16.icon-circle-zoomin { background-position: -176px -192px; } -.uiIcon16.icon-circle-zoomout { background-position: -192px -192px; } -.uiIcon16.icon-circle-check { background-position: -208px -192px; } -.uiIcon16.icon-circlesmall-plus { background-position: 0 -208px; } -.uiIcon16.icon-circlesmall-minus { background-position: -16px -208px; } -.uiIcon16.icon-circlesmall-close { background-position: -32px -208px; } -.uiIcon16.icon-squaresmall-plus { background-position: -48px -208px; } -.uiIcon16.icon-squaresmall-minus { background-position: -64px -208px; } -.uiIcon16.icon-squaresmall-close { background-position: -80px -208px; } -.uiIcon16.icon-grip-dotted-vertical { background-position: 0 -224px; } -.uiIcon16.icon-grip-dotted-horizontal { background-position: -16px -224px; } -.uiIcon16.icon-grip-solid-vertical { background-position: -32px -224px; } -.uiIcon16.icon-grip-solid-horizontal { background-position: -48px -224px; } -.uiIcon16.icon-gripsmall-diagonal-se { background-position: -64px -224px; } -.uiIcon16.icon-grip-diagonal-se { background-position: -80px -224px; } - -.mapIcon16 { - position: absolute; - width: 16px; - height: 16px; - background-image: url(uiIcons16Green.png); - background-position: -144px -96px; - background-repeat: no-repeat; - zoom: 0.125; - margin-left: -1px; - /*margin-bottom: -1px;*/ -} -.mapIcon16.dead { - background-image: url(uiIcons16Red.png); -} - -.mapIcon16.bad { - background-image: url(uiIcons16Red.png); -} - -.mapIcon16.average { - background-image: url(uiIcons16Orange.png); -} - -.mapIcon16.good { - background-image: url(uiIcons16Green.png); -} - -/* AirAlarm */ -.mapIcon16.icon-airalarm { background-position: 0 -144px; } - -/* Command Positions */ -.mapIcon16.rank-captain { - background-position: -224px -112px; -} -.mapIcon16.rank-headofpersonnel { - background-position: -112px -96px; -} -.mapIcon16.rank-headofsecurity { - background-position: -112px -128px; -} -.mapIcon16.rank-chiefengineer { - background-position: -176px -112px; -} -.mapIcon16.rank-researchdirector { - background-position: -128px -128px; -} -.mapIcon16.rank-chiefmedicalofficer { - background-position: -32px -128px; -} - -/* Engineering Positions */ -.mapIcon16.rank-stationengineer { - background-position: -176px -112px; -} -.mapIcon16.rank-atmospherictechnician { - background-position: -176px -112px; -} - -/* Medical Positions */ -.mapIcon16.rank-medicaldoctor { - background-position: -32px -128px; -} -.mapIcon16.rank-geneticist { - background-position: -32px -128px; -} -.mapIcon16.rank-psychiatrist { - background-position: -32px -128px; -} -.mapIcon16.rank-chemist { - background-position: -32px -128px; -} - -/* Science Positions */ -.mapIcon16.rank-scientist { - background-position: -128px -128px; -} -.mapIcon16.rank-geneticist { - background-position: -128px -128px; -} -.mapIcon16.rank-roboticist { - background-position: -128px -128px; -} -.mapIcon16.rank-xenobiologist { - background-position: -128px -128px; -} - -/* Security Positions */ -.mapIcon16.rank-warden { - background-position: -112px -128px; -} -.mapIcon16.rank-detective { - background-position: -112px -128px; -} -.mapIcon16.rank-securityofficer { - background-position: -112px -128px; -} - diff --git a/nano/css/shared.css b/nano/css/shared.css deleted file mode 100644 index 67d726f5ebd..00000000000 --- a/nano/css/shared.css +++ /dev/null @@ -1,650 +0,0 @@ -body { - padding: 0; - margin: 0; - font-size: 12px; - color: #ffffff; - line-height: 170%; - font-family: Verdana, Geneva, sans-serif; - background: #272727; -} - -#uiNoScript { - position: fixed; - top: 50%; - left: 50%; - margin: -60px 0 0 -150px; - width: 280px; - height: 120px; - background: #ffffff; - border: 2px solid #ff0000; - color: #000000; - font-size: 10px; - font-weight: bold; - z-index: 9999; - padding: 0px 10px; - text-align: center; -} - -hr { - background-color: #40628a; - height: 1px; -} - -.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; -} - -.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: 12px 0 6px 0; - color: #FFFFFF; - clear: both; -} - -h1 { - font-size: 18px; -} - -h2 { - font-size: 16px; -} - -h3 { - font-size: 14px; -} - -h4 { - font-size: 12px; -} - -.white { - color: white; - font-weight: bold; -} - -.good { - color: #4f7529; - font-weight: bold; -} - -.average { - color: #cd6500; - font-weight: bold; -} - -.bad { - color: #ee0000; - font-weight: bold; -} - -.idle { - color: #272727; - font-weight: bold; -} - -.redButton { - background: #ea0000; -} - -.yellowButton { - background: #cacc00; -} - -.highlight { - color: #8BA5C4; -} - -.dark { - color: #272727; -} - -.noticePlaceholder { - position: relative; - font-size: 12px; - font-style: italic; - font-weight: bold; - padding: 3px 4px 3px 4px; - margin: 4px 0 4px 0; -} - -.notice { - position: relative; - background: url(uiNoticeBackground.jpg) 50% 50%; - color: #000000; - font-size: 12px; - font-style: italic; - font-weight: bold; - padding: 3px 4px 3px 4px; - margin: 4px 0 4px 0; -} - -.notice.icon { - padding: 2px 4px 0 20px; -} - -.notice img { - position: absolute; - top: 0; - left: 0; - width: 16px; - height: 16px; -} - -div.notice { - clear: both; -} - -.itemGroup { - border: 1px solid #e9c183; - background: #2c2c2c; - padding: 4px; - clear: both; -} - - -.item { - width: 100%; - margin: 4px 0 0 0; - clear: both; - overflow: auto; -} - -.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 { - background: #000000; - color: #ffffff; - border: 1px solid #40628a; - padding: 4px; - margin: 3px 0; - overflow: hidden; -} - -.statusDisplayRecords { - background: #000000; - color: #ffffff; - border: 1px solid #40628a; - padding: 4px; - margin: 3px 0; - overflow-x: hidden; - overflow-y: auto; -} - -.statusLabel { - width: 138px; - float: left; - overflow: hidden; - color: #98B0C3; -} - -.statusValue { - float: left; -} - -.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.notgood { - color: #ffffff; - background: #ffb400; -} - -.displayBarFill.average { - color: #ffffff; - background: #cd6500; -} - -.displayBarFill.bad { - color: #ffffff; - background: #ee0000; -} - -.displayBarFill.highlight { - color: #ffffff; - background: #8BA5C4; -} - -.clearBoth { - clear: both; -} - -.clearLeft { - clear: left; -} - -.clearRight { - clear: right; -} - -.line { - width: 100%; - clear: both; -} - -.inactive, a.inactive:link, a.inactive:visited, a.inactive:active, a.inactive:hover { - color: #ffffff; - background: #999999; - border-color: #666666; -} - -.fixedLeft { - width: 110px; - float: left; -} - -.fixedLeftWide { - width: 165px; - float: left; -} - -.fixedLeftWider { - width: 220px; - float: left; -} - -.fixedLeftWidest { - width: 250px; - float: left; -} - -.floatRight { - float: right; -} - -.floatLeft { - float: left; -} - -/* PDA styling */ -.wholeScreen { - position: absolute; - color: #517087; - font-size: 16px; - font-weight: bold; - text-align: center; -} - -.pdalink { - float: left; - white-space: nowrap; -} - -.pdanote { - color: #cd6500; - font-weight: bold; -} - -/* DNA Modifier styling */ -.dnaBlock { - float: left; - width: 90px; - padding: 0 0 5px 0; -} - -.dnaBlockNumber { - font-family: Fixed, monospace; - float: left; - color: #ffffff; - background: #363636; - min-width: 20px; - height: 20px; - padding: 0; - text-align: center; -} - -.dnaSubBlock { - font-family: Fixed, monospace; - float: left; - padding: 0; - min-width: 16px; - height: 20px; - text-align: center; -} - -.mask { - position: fixed; - left: 0; - top: 0; - width: 100%; - height: 100%; - background: url(uiMaskBackground.png); -} - -.maskContent { - width: 100%; - height: 200px; - margin: 200px 0; - text-align: center; -} - -table.fixed { - table-layout:fixed; -} - -table.fixed td { - overflow: hidden; -} - -/* Table styling for the power monitor */ -table.pmon { - border: 2px solid RoyalBlue; -} - -table.pmon td, table.pmon th { - border-bottom: 1px dotted black; - padding: 0px 5px 0px 5px; -} - -/* Table styling for the crew manifest */ -th.command { - background: #3333FF; - font-weight: bold; - color: #ffffff; -} - -th.sec { - background: #8e0000; - font-weight: bold; - color: #ffffff; -} - -th.med { - background: #006600; - font-weight: bold; - color: #ffffff; -} - -th.eng { - background: #b27300; - font-weight: bold; - color: #ffffff; -} - -th.sci { - background: #a65ba6; - font-weight: bold; - color: #ffffff; -} - -th.civ { - background: #a32800; - font-weight: bold; - color: #ffffff; -} - -th.misc { - background: #666666; - font-weight: bold; - color: #ffffff; -} - -/* Table styling for Med Scanner */ -.striped tr:nth-child(even) { - background-color: #404040 -} - -/* Damage colors for crew monitoring computer */ -.burn { - color: orange; -} - -.brute { - color: red; -} - -.toxin { - color: green; -} - -.toxin_light { - color: #3ADF00; -} - -.oxyloss { - color: blue; -} - -.oxyloss_light { - color: #6698FF; -} - -/* Wire colors for nuclear bomb defusion */ -.Red { - color: #FF0000; -} - -.Blue { - color: #0000FF; -} - -.Green { - color: #00FF00; -} - -.Marigold { - color: #FDA505; -} - -.Fuschia { - color: #FF0080; -} - -.Black { - color: #000000; -} - -.Pearl { - color: #C6CACB; -} - -/* Status bar colors for sleeper temperatures */ -.cold1 { - color: #94B8FF; -} - -.cold2 { - color: #6699FF; -} - -.cold3 { - color: #293D66; -} - -.hot1 { - color: #FF9966; -} - -.hot2 { - color: #993D00; -} - -.hot3 { - color: #FF6600; -} diff --git a/nano/package.json b/nano/package.json index 0e571dacc68..195e0aab1bf 100644 --- a/nano/package.json +++ b/nano/package.json @@ -2,14 +2,22 @@ "name": "nanoui", "private": true, "dependencies": { + "autoprefixer": "^6.2.2", "del": "^2.2.0", "gulp": "^3.9.0", "gulp-concat": "^2.6.0", "gulp-coffee": "^2.3.1", + "gulp-filter": "^3.0.1", "gulp-if": "^2.0.0", + "gulp-less": "^3.0.5", "gulp-load-plugins": "^1.1.0", + "gulp-postcss": "^6.0.1", "gulp-uglify": "^1.5.1", "gulp-util": "^3.0.7", - "merge-stream": "^1.0.0" + "merge-stream": "^1.0.0", + "pleeease-filters": "^2.0.0", + "postcss-color-rgba-fallback": "git+https://github.com/postcss/postcss-color-rgba-fallback", + "postcss-filter-gradient": "^0.2.1", + "postcss-opacity": "^3.0.0" } } diff --git a/nano/styles/_bars.less b/nano/styles/_bars.less new file mode 100644 index 00000000000..f79c2d05fd6 --- /dev/null +++ b/nano/styles/_bars.less @@ -0,0 +1,57 @@ +.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.notgood { + color: #ffffff; + background: #ffb400; +} + +.displayBarFill.average { + color: #ffffff; + background: #cd6500; +} + +.displayBarFill.bad { + color: #ffffff; + background: #ee0000; +} + +.displayBarFill.highlight { + color: #ffffff; + background: #8BA5C4; +} \ No newline at end of file diff --git a/nano/styles/_color.less b/nano/styles/_color.less new file mode 100644 index 00000000000..fe10a74a5d3 --- /dev/null +++ b/nano/styles/_color.less @@ -0,0 +1,119 @@ +.white { + color: white; + font-weight: bold; +} + +.good { + color: #4f7529; + font-weight: bold; +} + +.average { + color: #cd6500; + font-weight: bold; +} + +.bad { + color: #ee0000; + font-weight: bold; +} + +.idle { + color: #272727; + font-weight: bold; +} + +.redButton { + background: #ea0000; +} + +.yellowButton { + background: #cacc00; +} + +.highlight { + color: #8BA5C4; +} + +.dark { + color: #272727; +} + +/* Damage colors for crew monitoring computer */ +.burn { + color: orange; +} + +.brute { + color: red; +} + +.toxin { + color: green; +} + +.toxin_light { + color: #3ADF00; +} + +.oxyloss { + color: blue; +} + +.oxyloss_light { + color: #6698FF; +} + +/* Wire colors for nuclear bomb defusion */ +.Red { + color: #FF0000; +} + +.Blue { + color: #0000FF; +} + +.Green { + color: #00FF00; +} + +.Marigold { + color: #FDA505; +} + +.Fuschia { + color: #FF0080; +} + +.Black { + color: #000000; +} + +.Pearl { + color: #C6CACB; +} + +/* Status bar colors for sleeper temperatures */ +.cold1 { + color: #94B8FF; +} + +.cold2 { + color: #6699FF; +} + +.cold3 { + color: #293D66; +} + +.hot1 { + color: #FF9966; +} + +.hot2 { + color: #993D00; +} + +.hot3 { + color: #FF6600; +} \ No newline at end of file diff --git a/nano/styles/_formatting.less b/nano/styles/_formatting.less new file mode 100644 index 00000000000..5120fd7508e --- /dev/null +++ b/nano/styles/_formatting.less @@ -0,0 +1,157 @@ +.itemGroup { + border: 1px solid #e9c183; + background: #2c2c2c; + padding: 4px; + clear: both; +} + + +.item { + width: 100%; + margin: 4px 0 0 0; + clear: both; + overflow: auto; +} + +.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%; +} + +.block { + padding: 8px; + margin: 10px 4px 4px 4px; + border: 1px solid #40628a; + background-color: #202020; +} + +.block h3 { + padding: 0; +} + +.clearBoth { + clear: both; +} + +.clearLeft { + clear: left; +} + +.clearRight { + clear: right; +} + +.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; +} + +.floatRight { + float: right; +} + +.floatLeft { + float: left; +} + +.hidden { + display: none; +} + + +.statusDisplay { + background: #000000; + color: #ffffff; + border: 1px solid #40628a; + padding: 4px; + margin: 3px 0; + overflow: hidden; +} + +.statusDisplayRecords { + background: #000000; + color: #ffffff; + border: 1px solid #40628a; + padding: 4px; + margin: 3px 0; + overflow-x: hidden; + overflow-y: auto; +} + +.statusLabel { + width: 138px; + float: left; + overflow: hidden; + color: #98B0C3; +} + +.statusValue { + float: left; +} \ No newline at end of file diff --git a/nano/styles/_icon.less b/nano/styles/_icon.less new file mode 100644 index 00000000000..528c8450df1 --- /dev/null +++ b/nano/styles/_icon.less @@ -0,0 +1,270 @@ +/* Icons +----------------------------------*/ + +.icon24 +{ + width: 24px; + height: 24px; +} + +.icon24.uiStatusGood +{ + background: url(uiIcons24.png) 0 0 no-repeat; +} + +.icon24.uiStatusAverage +{ + background: url(uiIcons24.png) 0 -24px no-repeat; +} + +.icon24.uiStatusBad +{ + background: url(uiIcons24.png) 0 -48px no-repeat; +} + +/* states and images */ +.uiLinkPendingIcon { + display: none; + float: left; + width: 16px; + height: 16px; + margin: 2px 2px 0 2px; + background-image: url(uiLinkPendingIcon.gif); +} + +.linkPending .uiIcon16 { + display: none; +} + +.linkPending .uiLinkPendingIcon { + display: block; +} + +.uiIcon16 { + float: left; + width: 16px; + height: 16px; + margin: 2px 2px 0 2px; + background-image: url(uiIcons16.png); +} + +/* positioning */ +.uiIcon16.icon-blank { background-position: 16px 16px; } +.uiIcon16.icon-carat-1-n { background-position: 0 0; } +.uiIcon16.icon-carat-1-ne { background-position: -16px 0; } +.uiIcon16.icon-carat-1-e { background-position: -32px 0; } +.uiIcon16.icon-carat-1-se { background-position: -48px 0; } +.uiIcon16.icon-carat-1-s { background-position: -64px 0; } +.uiIcon16.icon-carat-1-sw { background-position: -80px 0; } +.uiIcon16.icon-carat-1-w { background-position: -96px 0; } +.uiIcon16.icon-carat-1-nw { background-position: -112px 0; } +.uiIcon16.icon-carat-2-n-s { background-position: -128px 0; } +.uiIcon16.icon-carat-2-e-w { background-position: -144px 0; } +.uiIcon16.icon-triangle-1-n { background-position: 0 -16px; } +.uiIcon16.icon-triangle-1-ne { background-position: -16px -16px; } +.uiIcon16.icon-triangle-1-e { background-position: -32px -16px; } +.uiIcon16.icon-triangle-1-se { background-position: -48px -16px; } +.uiIcon16.icon-triangle-1-s { background-position: -64px -16px; } +.uiIcon16.icon-triangle-1-sw { background-position: -80px -16px; } +.uiIcon16.icon-triangle-1-w { background-position: -96px -16px; } +.uiIcon16.icon-triangle-1-nw { background-position: -112px -16px; } +.uiIcon16.icon-triangle-2-n-s { background-position: -128px -16px; } +.uiIcon16.icon-triangle-2-e-w { background-position: -144px -16px; } +.uiIcon16.icon-arrow-1-n { background-position: 0 -32px; } +.uiIcon16.icon-arrow-1-ne { background-position: -16px -32px; } +.uiIcon16.icon-arrow-1-e { background-position: -32px -32px; } +.uiIcon16.icon-arrow-1-se { background-position: -48px -32px; } +.uiIcon16.icon-arrow-1-s { background-position: -64px -32px; } +.uiIcon16.icon-arrow-1-sw { background-position: -80px -32px; } +.uiIcon16.icon-arrow-1-w { background-position: -96px -32px; } +.uiIcon16.icon-arrow-1-nw { background-position: -112px -32px; } +.uiIcon16.icon-arrow-2-n-s { background-position: -128px -32px; } +.uiIcon16.icon-arrow-2-ne-sw { background-position: -144px -32px; } +.uiIcon16.icon-arrow-2-e-w { background-position: -160px -32px; } +.uiIcon16.icon-arrow-2-se-nw { background-position: -176px -32px; } +.uiIcon16.icon-arrowstop-1-n { background-position: -192px -32px; } +.uiIcon16.icon-arrowstop-1-e { background-position: -208px -32px; } +.uiIcon16.icon-arrowstop-1-s { background-position: -224px -32px; } +.uiIcon16.icon-arrowstop-1-w { background-position: -240px -32px; } +.uiIcon16.icon-arrowthick-1-n { background-position: 0 -48px; } +.uiIcon16.icon-arrowthick-1-ne { background-position: -16px -48px; } +.uiIcon16.icon-arrowthick-1-e { background-position: -32px -48px; } +.uiIcon16.icon-arrowthick-1-se { background-position: -48px -48px; } +.uiIcon16.icon-arrowthick-1-s { background-position: -64px -48px; } +.uiIcon16.icon-arrowthick-1-sw { background-position: -80px -48px; } +.uiIcon16.icon-arrowthick-1-w { background-position: -96px -48px; } +.uiIcon16.icon-arrowthick-1-nw { background-position: -112px -48px; } +.uiIcon16.icon-arrowthick-2-n-s { background-position: -128px -48px; } +.uiIcon16.icon-arrowthick-2-ne-sw { background-position: -144px -48px; } +.uiIcon16.icon-arrowthick-2-e-w { background-position: -160px -48px; } +.uiIcon16.icon-arrowthick-2-se-nw { background-position: -176px -48px; } +.uiIcon16.icon-arrowthickstop-1-n { background-position: -192px -48px; } +.uiIcon16.icon-arrowthickstop-1-e { background-position: -208px -48px; } +.uiIcon16.icon-arrowthickstop-1-s { background-position: -224px -48px; } +.uiIcon16.icon-arrowthickstop-1-w { background-position: -240px -48px; } +.uiIcon16.icon-arrowreturnthick-1-w { background-position: 0 -64px; } +.uiIcon16.icon-arrowreturnthick-1-n { background-position: -16px -64px; } +.uiIcon16.icon-arrowreturnthick-1-e { background-position: -32px -64px; } +.uiIcon16.icon-arrowreturnthick-1-s { background-position: -48px -64px; } +.uiIcon16.icon-arrowreturn-1-w { background-position: -64px -64px; } +.uiIcon16.icon-arrowreturn-1-n { background-position: -80px -64px; } +.uiIcon16.icon-arrowreturn-1-e { background-position: -96px -64px; } +.uiIcon16.icon-arrowreturn-1-s { background-position: -112px -64px; } +.uiIcon16.icon-arrowrefresh-1-w { background-position: -128px -64px; } +.uiIcon16.icon-arrowrefresh-1-n { background-position: -144px -64px; } +.uiIcon16.icon-arrowrefresh-1-e { background-position: -160px -64px; } +.uiIcon16.icon-arrowrefresh-1-s { background-position: -176px -64px; } +.uiIcon16.icon-arrow-4 { background-position: 0 -80px; } +.uiIcon16.icon-arrow-4-diag { background-position: -16px -80px; } +.uiIcon16.icon-extlink { background-position: -32px -80px; } +.uiIcon16.icon-newwin { background-position: -48px -80px; } +.uiIcon16.icon-refresh { background-position: -64px -80px; } +.uiIcon16.icon-shuffle { background-position: -80px -80px; } +.uiIcon16.icon-transfer-e-w { background-position: -96px -80px; } +.uiIcon16.icon-transferthick-e-w { background-position: -112px -80px; } +.uiIcon16.icon-radiation { background-position: -128px -80px; } +.uiIcon16.icon-folder-collapsed { background-position: 0 -96px; } +.uiIcon16.icon-folder-open { background-position: -16px -96px; } +.uiIcon16.icon-document { background-position: -32px -96px; } +.uiIcon16.icon-document-b { background-position: -48px -96px; } +.uiIcon16.icon-note { background-position: -64px -96px; } +.uiIcon16.icon-mail-closed { background-position: -80px -96px; } +.uiIcon16.icon-mail-open { background-position: -96px -96px; } +.uiIcon16.icon-suitcase { background-position: -112px -96px; } +.uiIcon16.icon-comment { background-position: -128px -96px; } +.uiIcon16.icon-person { background-position: -144px -96px; } +.uiIcon16.icon-print { background-position: -160px -96px; } +.uiIcon16.icon-trash { background-position: -176px -96px; } +.uiIcon16.icon-locked { background-position: -192px -96px; } +.uiIcon16.icon-unlocked { background-position: -208px -96px; } +.uiIcon16.icon-bookmark { background-position: -224px -96px; } +.uiIcon16.icon-tag { background-position: -240px -96px; } +.uiIcon16.icon-home { background-position: 0 -112px; } +.uiIcon16.icon-flag { background-position: -16px -112px; } +.uiIcon16.icon-calendar { background-position: -32px -112px; } +.uiIcon16.icon-cart { background-position: -48px -112px; } +.uiIcon16.icon-pencil { background-position: -64px -112px; } +.uiIcon16.icon-clock { background-position: -80px -112px; } +.uiIcon16.icon-disk { background-position: -96px -112px; } +.uiIcon16.icon-calculator { background-position: -112px -112px; } +.uiIcon16.icon-zoomin { background-position: -128px -112px; } +.uiIcon16.icon-zoomout { background-position: -144px -112px; } +.uiIcon16.icon-search { background-position: -160px -112px; } +.uiIcon16.icon-wrench { background-position: -176px -112px; } +.uiIcon16.icon-gear { background-position: -192px -112px; } +.uiIcon16.icon-heart { background-position: -208px -112px; } +.uiIcon16.icon-star { background-position: -224px -112px; } +.uiIcon16.icon-link { background-position: -240px -112px; } +.uiIcon16.icon-cancel { background-position: 0 -128px; } +.uiIcon16.icon-plus { background-position: -16px -128px; } +.uiIcon16.icon-plusthick { background-position: -32px -128px; } +.uiIcon16.icon-minus { background-position: -48px -128px; } +.uiIcon16.icon-minusthick { background-position: -64px -128px; } +.uiIcon16.icon-close { background-position: -80px -128px; } +.uiIcon16.icon-closethick { background-position: -96px -128px; } +.uiIcon16.icon-key { background-position: -112px -128px; } +.uiIcon16.icon-lightbulb { background-position: -128px -128px; } +.uiIcon16.icon-scissors { background-position: -144px -128px; } +.uiIcon16.icon-clipboard { background-position: -160px -128px; } +.uiIcon16.icon-copy { background-position: -176px -128px; } +.uiIcon16.icon-contact { background-position: -192px -128px; } +.uiIcon16.icon-image { background-position: -208px -128px; } +.uiIcon16.icon-video { background-position: -224px -128px; } +.uiIcon16.icon-script { background-position: -240px -128px; } +.uiIcon16.icon-alert { background-position: 0 -144px; } +.uiIcon16.icon-info { background-position: -16px -144px; } +.uiIcon16.icon-notice { background-position: -32px -144px; } +.uiIcon16.icon-help { background-position: -48px -144px; } +.uiIcon16.icon-check { background-position: -64px -144px; } +.uiIcon16.icon-bullet { background-position: -80px -144px; } +.uiIcon16.icon-radio-on { background-position: -96px -144px; } +.uiIcon16.icon-radio-off { background-position: -112px -144px; } +.uiIcon16.icon-pin-w { background-position: -128px -144px; } +.uiIcon16.icon-pin-s { background-position: -144px -144px; } +.uiIcon16.icon-play { background-position: 0 -160px; } +.uiIcon16.icon-pause { background-position: -16px -160px; } +.uiIcon16.icon-seek-next { background-position: -32px -160px; } +.uiIcon16.icon-seek-prev { background-position: -48px -160px; } +.uiIcon16.icon-seek-end { background-position: -64px -160px; } +.uiIcon16.icon-seek-start { background-position: -80px -160px; } +/* uiIcon-seek-first is deprecated, use uiIcon-seek-start instead */ +.uiIcon16.icon-seek-first { background-position: -80px -160px; } +.uiIcon16.icon-stop { background-position: -96px -160px; } +.uiIcon16.icon-eject { background-position: -112px -160px; } +.uiIcon16.icon-volume-off { background-position: -128px -160px; } +.uiIcon16.icon-volume-on { background-position: -144px -160px; } +.uiIcon16.icon-power { background-position: 0 -176px; } +.uiIcon16.icon-signal-diag { background-position: -16px -176px; } +.uiIcon16.icon-signal { background-position: -32px -176px; } +.uiIcon16.icon-battery-0 { background-position: -48px -176px; } +.uiIcon16.icon-battery-1 { background-position: -64px -176px; } +.uiIcon16.icon-battery-2 { background-position: -80px -176px; } +.uiIcon16.icon-battery-3 { background-position: -96px -176px; } +.uiIcon16.icon-circle-plus { background-position: 0 -192px; } +.uiIcon16.icon-circle-minus { background-position: -16px -192px; } +.uiIcon16.icon-circle-close { background-position: -32px -192px; } +.uiIcon16.icon-circle-triangle-e { background-position: -48px -192px; } +.uiIcon16.icon-circle-triangle-s { background-position: -64px -192px; } +.uiIcon16.icon-circle-triangle-w { background-position: -80px -192px; } +.uiIcon16.icon-circle-triangle-n { background-position: -96px -192px; } +.uiIcon16.icon-circle-arrow-e { background-position: -112px -192px; } +.uiIcon16.icon-circle-arrow-s { background-position: -128px -192px; } +.uiIcon16.icon-circle-arrow-w { background-position: -144px -192px; } +.uiIcon16.icon-circle-arrow-n { background-position: -160px -192px; } +.uiIcon16.icon-circle-zoomin { background-position: -176px -192px; } +.uiIcon16.icon-circle-zoomout { background-position: -192px -192px; } +.uiIcon16.icon-circle-check { background-position: -208px -192px; } +.uiIcon16.icon-circlesmall-plus { background-position: 0 -208px; } +.uiIcon16.icon-circlesmall-minus { background-position: -16px -208px; } +.uiIcon16.icon-circlesmall-close { background-position: -32px -208px; } +.uiIcon16.icon-squaresmall-plus { background-position: -48px -208px; } +.uiIcon16.icon-squaresmall-minus { background-position: -64px -208px; } +.uiIcon16.icon-squaresmall-close { background-position: -80px -208px; } +.uiIcon16.icon-grip-dotted-vertical { background-position: 0 -224px; } +.uiIcon16.icon-grip-dotted-horizontal { background-position: -16px -224px; } +.uiIcon16.icon-grip-solid-vertical { background-position: -32px -224px; } +.uiIcon16.icon-grip-solid-horizontal { background-position: -48px -224px; } +.uiIcon16.icon-gripsmall-diagonal-se { background-position: -64px -224px; } +.uiIcon16.icon-grip-diagonal-se { background-position: -80px -224px; } + +.mapIcon16 { + position: absolute; + width: 16px; + height: 16px; + background-image: url(uiIcons16Green.png); + background-position: -144px -96px; + background-repeat: no-repeat; + zoom: 0.125; + margin-left: -1px; + /*margin-bottom: -1px;*/ +} +.mapIcon16.dead { background-image: url(uiIcons16Red.png); } +.mapIcon16.bad { background-image: url(uiIcons16Red.png); } +.mapIcon16.average { background-image: url(uiIcons16Orange.png); } +.mapIcon16.good { background-image: url(uiIcons16Green.png); } +/* AirAlarm */ +.mapIcon16.icon-airalarm { background-position: 0 -144px; } +/* Command Positions */ +.mapIcon16.rank-captain { background-position: -224px -112px; } +.mapIcon16.rank-headofpersonnel { background-position: -112px -96px; } +.mapIcon16.rank-headofsecurity { background-position: -112px -128px; } +.mapIcon16.rank-chiefengineer { background-position: -176px -112px; } +.mapIcon16.rank-researchdirector { background-position: -128px -128px; } +.mapIcon16.rank-chiefmedicalofficer { background-position: -32px -128px; } +/* Engineering Positions */ +.mapIcon16.rank-stationengineer { background-position: -176px -112px; } +.mapIcon16.rank-atmospherictechnician { background-position: -176px -112px; } +/* Medical Positions */ +.mapIcon16.rank-medicaldoctor {background-position: -32px -128px; } +.mapIcon16.rank-geneticist {background-position: -32px -128px; } +.mapIcon16.rank-psychiatrist {background-position: -32px -128px; } +.mapIcon16.rank-chemist { background-position: -32px -128px; } +/* Science Positions */ +.mapIcon16.rank-scientist { background-position: -128px -128px; } +.mapIcon16.rank-geneticist { background-position: -128px -128px; } +.mapIcon16.rank-roboticist { background-position: -128px -128px; } +.mapIcon16.rank-xenobiologist { background-position: -128px -128px; } +/* Security Positions */ +.mapIcon16.rank-warden { background-position: -112px -128px; } +.mapIcon16.rank-detective { background-position: -112px -128px; } +.mapIcon16.rank-securityofficer { background-position: -112px -128px; } \ No newline at end of file diff --git a/nano/styles/_link.less b/nano/styles/_link.less new file mode 100644 index 00000000000..ebab36892b9 --- /dev/null +++ b/nano/styles/_link.less @@ -0,0 +1,82 @@ +.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; +} + +.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; +} + +.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; +} + +.inactive, a.inactive:link, a.inactive:visited, a.inactive:active, a.inactive:hover { + color: #ffffff; + background: #999999; + border-color: #666666; +} \ No newline at end of file diff --git a/nano/styles/_lists.less b/nano/styles/_lists.less new file mode 100644 index 00000000000..42300262662 --- /dev/null +++ b/nano/styles/_lists.less @@ -0,0 +1,75 @@ +ul { + padding: 4px 0 0 10px; + margin: 0; + list-style-type: none; +} + +li { + padding: 0 0 2px 0; +} + +table.fixed { + table-layout:fixed; +} + +table.fixed td { + overflow: hidden; +} + +/* Table styling for the power monitor */ +table.pmon { + border: 2px solid RoyalBlue; +} + +table.pmon td, table.pmon th { + border-bottom: 1px dotted black; + padding: 0px 5px 0px 5px; +} + +/* Table styling for the crew manifest */ +th.command { + background: #3333FF; + font-weight: bold; + color: #ffffff; +} + +th.sec { + background: #8e0000; + font-weight: bold; + color: #ffffff; +} + +th.med { + background: #006600; + font-weight: bold; + color: #ffffff; +} + +th.eng { + background: #b27300; + font-weight: bold; + color: #ffffff; +} + +th.sci { + background: #a65ba6; + font-weight: bold; + color: #ffffff; +} + +th.civ { + background: #a32800; + font-weight: bold; + color: #ffffff; +} + +th.misc { + background: #666666; + font-weight: bold; + color: #ffffff; +} + +/* Table styling for Med Scanner */ +.striped tr:nth-child(even) { + background-color: #404040 +} \ No newline at end of file diff --git a/nano/styles/_misc.less b/nano/styles/_misc.less new file mode 100644 index 00000000000..55f8216b3b6 --- /dev/null +++ b/nano/styles/_misc.less @@ -0,0 +1,127 @@ +#uiNoScript { + position: fixed; + top: 50%; + left: 50%; + margin: -60px 0 0 -150px; + width: 280px; + height: 120px; + background: #ffffff; + border: 2px solid #ff0000; + color: #000000; + font-size: 10px; + font-weight: bold; + z-index: 9999; + padding: 0px 10px; + text-align: center; +} + +/********************************** + .notice | Caution Stripes +**********************************/ +.notice { + position: relative; + background: url(uiNoticeBackground.jpg) 50% 50%; + color: #000000; + font-size: 12px; + font-style: italic; + font-weight: bold; + padding: 3px 4px 3px 4px; + margin: 4px 0 4px 0; +} + +.noticePlaceholder { + position: relative; + font-size: 12px; + font-style: italic; + font-weight: bold; + padding: 3px 4px 3px 4px; + margin: 4px 0 4px 0; +} + +.notice.icon { + padding: 2px 4px 0 20px; +} + +.notice img { + position: absolute; + top: 0; + left: 0; + width: 16px; + height: 16px; +} + +div.notice { + clear: both; +} +/********************\ +\********************/ + + +/********************************** + PDA, DNA Modifier styles + Don't fit anywhere else. +**********************************/ + +/* PDA styling */ +.wholeScreen { + position: absolute; + color: #517087; + font-size: 16px; + font-weight: bold; + text-align: center; +} + +.pdalink { + float: left; + white-space: nowrap; +} + +.pdanote { + color: #cd6500; + font-weight: bold; +} + +/* DNA Modifier styling */ +.dnaBlock { + float: left; + width: 90px; + padding: 0 0 5px 0; +} + +.dnaBlockNumber { + font-family: Fixed, monospace; + float: left; + color: #ffffff; + background: #363636; + min-width: 20px; + height: 20px; + padding: 0; + text-align: center; +} + +.dnaSubBlock { + font-family: Fixed, monospace; + float: left; + padding: 0; + min-width: 16px; + height: 20px; + text-align: center; +} + +.mask { + position: fixed; + left: 0; + top: 0; + width: 100%; + height: 100%; + background: url(uiMaskBackground.png); +} + +.maskContent { + width: 100%; + height: 200px; + margin: 200px 0; + text-align: center; +} +/********************\ +\********************/ \ No newline at end of file diff --git a/nano/styles/_native.less b/nano/styles/_native.less new file mode 100644 index 00000000000..0949b06e98a --- /dev/null +++ b/nano/styles/_native.less @@ -0,0 +1,41 @@ +body { + padding: 0; + margin: 0; + font-size: 12px; + color: #ffffff; + line-height: 170%; + font-family: Verdana, Geneva, sans-serif; + background: #272727; +} + +hr { + background-color: #40628a; + height: 1px; +} + +img, a img { + border-style: none; +} + +h1, h2, h3, h4, h5, h6 { + margin: 0; + padding: 12px 0 6px 0; + color: #FFFFFF; + clear: both; +} + +h1 { + font-size: 18px; +} + +h2 { + font-size: 16px; +} + +h3 { + font-size: 14px; +} + +h4 { + font-size: 12px; +} \ No newline at end of file diff --git a/nano/styles/nanoui.less b/nano/styles/nanoui.less new file mode 100644 index 00000000000..b1ce6e6117f --- /dev/null +++ b/nano/styles/nanoui.less @@ -0,0 +1,10 @@ +@charset "utf-8"; + +@import "_native"; +@import "_icon"; +@import "_lists"; +@import "_formatting"; +@import "_link"; +@import "_color"; +@import "_bars"; +@import "_misc"; \ No newline at end of file