diff --git a/maps/sierra/sierra.dm b/maps/sierra/sierra.dm index 9371cc09ac9ce..899f36aac8dfc 100644 --- a/maps/sierra/sierra.dm +++ b/maps/sierra/sierra.dm @@ -200,6 +200,7 @@ #include "../../mods/wyccbay_optimization/_wyccbay_optimization.dme" #include "../../mods/contraband_vending/_contraband_vending.dme" #include "../../mods/telecomms/_telecomms.dme" + #include "../../mods/modernUI/_modernUI.dme" // UNUSED MODS // Keep them in ascending alphabetical order too, please diff --git a/mods/modernUI/README.md b/mods/modernUI/README.md new file mode 100644 index 0000000000000..a5a0131b9be5d --- /dev/null +++ b/mods/modernUI/README.md @@ -0,0 +1,83 @@ + +#### Список PRов: + +- https://github.com/SierraBay/SierraBay12/pull/2411 + + + +## Мод-пример + +ID мода: MODPACK_MODERNUI + + +### Описание мода + +Этот мод изменяет стили NanoUI на такие, чтобы он был похож на [TGUI](https://github.com/tgstation/tgstation/tree/master/tgui). Для этого был изменён `layout_default` (теперь он называется `layout_modern`) и переписаны стили (`modern.css`) поверх основного файла со стилями NanoUI (`shared.css`), а также был убран заголовок (header) NanoUI (`layout_default_header`) + + + +### Изменения *кор кода* + +- Отсутствуют + + +### Оверрайды + +- `mods\modernUI\code\override.dm`: `/datum/nanoui/add_common_assets()`, `/datum/nanoui/layout_header_key`, `/datum/nanoui/layout_key` + + + +### Дефайны + +- Отсутствуют + + +### Используемые файлы, не содержащиеся в модпаке + +- `nano\css\modern.css` +- `nano\css\layout_modern.css` +- `nano\templates\layout_modern.tmpl` +- `nano\images\nt-logo.png` + + +### Авторы: + +FeudeyTF +[tgstation](https://github.com/tgstation/tgstation) + diff --git a/mods/modernUI/_modernUI.dm b/mods/modernUI/_modernUI.dm new file mode 100644 index 0000000000000..76ff57636282c --- /dev/null +++ b/mods/modernUI/_modernUI.dm @@ -0,0 +1,4 @@ +/singleton/modpack/example + name = "Современный NanoUI" + desc = "Изменение стилей для NanoUI" + author = "FeudeyTF" diff --git a/mods/modernUI/_modernUI.dme b/mods/modernUI/_modernUI.dme new file mode 100644 index 0000000000000..99636bbae4f87 --- /dev/null +++ b/mods/modernUI/_modernUI.dme @@ -0,0 +1,8 @@ +#ifndef MODPACK_MODERNUI +#define MODPACK_MODERNUI + +#include "_modernUI.dm" + +#include "code/override.dm" + +#endif diff --git a/mods/modernUI/code/override.dm b/mods/modernUI/code/override.dm new file mode 100644 index 0000000000000..77bce3834f017 --- /dev/null +++ b/mods/modernUI/code/override.dm @@ -0,0 +1,7 @@ +/datum/nanoui/layout_key = "modern" + +/datum/nanoui/layout_header_key = null + +/datum/nanoui/add_common_assets() + . = ..() + add_stylesheet("modern.css") diff --git a/nano/css/layout_modern.css b/nano/css/layout_modern.css new file mode 100644 index 0000000000000..229543334fd43 --- /dev/null +++ b/nano/css/layout_modern.css @@ -0,0 +1,134 @@ +body { + background: no-repeat center/75% url(nt-logo.png); + background-color: #262626; + width: 100%; + height: 100vh; +} + +#uiWrapper { + background-color: #262626; + padding-top: 30px; + width: 100%; + height: 100vh; + -ms-user-select: none; + user-select: none; +} + +#uiTitleWrapper { + position: relative; + height: 30px; + background-color: #353535; + border-bottom: 1px solid #141414; +} + +#uiTitleText { + position: absolute; + top: 6px; + left: 44px; + width: 66%; + overflow: hidden; + color: #eaeaea; + font-size: 16px; +} + +#uiTitle.icon { + padding: 6px 8px 6px 42px; + background-position: 2px 50%; + background-repeat: no-repeat; +} + +#uiStatusIcon { + position: absolute; + top: 4px; + left: 12px; + width: 24px; + height: 24px; +} + +#uiMapWrapper { + clear: both; + padding: 8px; +} + +#uiMapHeader { + position: relative; + clear: both; +} + +#uiMapContainer { + position: relative; + width: 100%; + height: 600px; + overflow: hidden; + border: 1px solid #40628a; + background: url(nanomapBackground.png); +} + +#uiMap { + position: absolute; + top: 50%; + left: 50%; + margin: -512px 0 0 -512px; + width: 256px; + height: 256px; + overflow: hidden; + zoom: 4; +} + +#uiMapImage { + position: absolute; + bottom: 1px; + left: 1px; + width: 256px; + height: 256px; +} + +#uiMapContent { + position: absolute; + bottom: 0px; + left: 0px; + width: 256px; + height: 256px; +} + +#uiMapFooter { + position: relative; + clear: both; +} + +#uiContent { + clear: both; + padding: 8px; +} + +#uiMapTooltip { + position: absolute; + right: 10px; + top: 10px; + border: 1px solid #40628a; + background-color: #272727; + padding: 8px; + display: none; + z-index: 9999; +} + +#uiLoadingNotice { + position: relative; + background: url(uiNoticeBackground.jpg) 50% 50%; + color: #000000; + font-size: 14px; + font-style: italic; + font-weight: bold; + padding: 3px 4px 3px 4px; + margin: 4px 0 4px 0; +} + +#computerButtons { + height: 30px; + float: right; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + margin-right: 5px; +} diff --git a/nano/css/modern.css b/nano/css/modern.css new file mode 100644 index 0000000000000..6b819c2f2643e --- /dev/null +++ b/nano/css/modern.css @@ -0,0 +1,68 @@ +.link, .linkOn, .linkOff, .selected, .disabled, .yellowButton, .redButton, a, .zoomLink, .linkActive { + border: none; + border-radius: 0.16em; + transition: 0.2s; + padding: 0 4px 4px 4px; +} + +a, .zoomLink, .linkActive { + float: left; + min-width: 15px; + min-height: 16px; + text-align: center; + color: #ffffff; + text-decoration: none; + margin: 0 2px 2px 0; + cursor: default; + background: #4972a1; +} + +.linkDanger, a.linkDanger:link, a.linkDanger:visited, a.linkDanger:active { + background-color: #db2828; +} + +.linkDanger:hover { + background-color: #e04747; +} + +a.linkDanger:hover { + background-color: #e04747; +} + +.redButton:hover { + background: #ff6666; +} + +.yellowButton:hover { + background: #f7d515; +} + +.itemLabelNarrow, .itemLabel, .itemLabelWide, .itemLabelWider, .itemLabelWidest { + color: #aaa; +} + +.linkOn, .linkOn:link, .linkOn:visited, .linkOn:active, .linkOn:hover, .selected, .selected:link, .selected:visited, .selected:active, .selected:hover { + background: #2f943c; +} + +.linkOff, .linkOff:link, .linkOff:visited, .linkOff:active, .linkOff:hover, .disabled, .disabled:link, .disabled:visited, .disabled:active, .disabled:hover { + background: #999999; +} + +.linkDanger, .linkDanger:link, .linkDanger:visited, .linkDanger:active { + background-color: #db2828; +} + +.redButton { + background: #db2828; +} + +.yellowButton { + background: #f7d515; +} + +.displayBar { + height: 21px; + border: none; + border-radius: 0.16em; +} diff --git a/nano/images/nt-logo.png b/nano/images/nt-logo.png new file mode 100644 index 0000000000000..01db76121cfcf Binary files /dev/null and b/nano/images/nt-logo.png differ diff --git a/nano/templates/layout_modern.tmpl b/nano/templates/layout_modern.tmpl new file mode 100644 index 0000000000000..25754cb926a28 --- /dev/null +++ b/nano/templates/layout_modern.tmpl @@ -0,0 +1,81 @@ +
+ +
+ +
+
+
{{:config.title}}
+
+ +{{if data.PC_hasheader}} +
+
+
+ + {{if data.PC_batteryicon && data.PC_showbatteryicon}} +
+ {{/if}} + {{if data.PC_batterypercent && data.PC_showbatteryicon}} + {{:data.PC_batterypercent}} + {{/if}} + {{if data.PC_ntneticon}} + + {{/if}} + {{if data.PC_apclinkicon}} + + {{/if}} + {{if data.PC_stationtime}} + {{:data.PC_stationtime}} + {{/if}} + {{for data.PC_programheaders}} + + {{/for}} +
+
+
+
+ {{if data.PC_showexitprogram}} + {{:helper.link('', 'minusthick', {'PC_minimize' : 1})}} + {{:helper.link('', 'closethick', {'PC_exit' : 1})}} + {{/if}} + {{:helper.link('', 'power', {'PC_shutdown' : 1})}} +
+
+{{/if}} + + +
+
Initiating...
+