Implement more new styling stuff.

Content.Client/UserInterface/NanoHeading.cs

@@ -0,0 +1,41 @@
+using Robust.Client.UserInterface.Controls;
+using Robust.Shared.Maths;
+
+namespace Content.Client.UserInterface
+{
+    public class NanoHeading : Container
+    {
+        private readonly Label _label;
+        private readonly PanelContainer _panel;
+
+        public NanoHeading()
+        {
+            _panel = new PanelContainer
+            {
+                Children = {(_label = new Label
+                {
+                    StyleClasses = {NanoStyle.StyleClassLabelHeading}
+                })}
+            };
+            AddChild(_panel);
+
+            SizeFlagsHorizontal = SizeFlags.None;
+        }
+
+        public string Text
+        {
+            get => _label.Text;
+            set => _label.Text = value;
+        }
+
+        protected override Vector2 CalculateMinimumSize()
+        {
+            return _panel.CombinedMinimumSize;
+        }
+
+        protected override void SortChildren()
+        {
+            FitChildInBox(_panel, SizeBox);
+        }
+    }
+}

Content.Client/UserInterface/NanoStyle.cs

@@ -13,10 +13,12 @@ namespace Content.Client.UserInterface
     public sealed class NanoStyle
     {
         public const string StyleClassLabelHeading = "LabelHeading";
+        public const string StyleClassLabelHeadingBigger = "LabelHeadingBigger";
         public const string StyleClassLabelSubText = "LabelSubText";
         public const string StyleClassLabelSecondaryColor = "LabelSecondaryColor";
+        public const string StyleClassLabelBig = "LabelBig";
         public const string StyleClassButtonBig = "ButtonBig";
-        private static readonly Color NanoGold = Color.FromHex("#A88B5E");
+        public static readonly Color NanoGold = Color.FromHex("#A88B5E");
 
         //Used by the APC and SMES menus
         public const string StyleClassPowerStateNone = "PowerStateNone";
@@ -33,6 +35,7 @@ namespace Content.Client.UserInterface
             var notoSansDisplayBold14 = resCache.GetFont("/Fonts/NotoSansDisplay/NotoSansDisplay-Bold.ttf", 14);
             var notoSans16 = resCache.GetFont("/Nano/NotoSans/NotoSans-Regular.ttf", 16);
             var notoSansBold16 = resCache.GetFont("/Nano/NotoSans/NotoSans-Bold.ttf", 16);
+            var notoSansBold20 = resCache.GetFont("/Nano/NotoSans/NotoSans-Bold.ttf", 20);
             var textureCloseButton = resCache.GetTexture("/Nano/cross.svg.png");
             var windowHeaderTex = resCache.GetTexture("/Nano/window_header.png");
             var windowHeader = new StyleBoxTexture
@@ -56,10 +59,10 @@ namespace Content.Client.UserInterface
                 Texture = buttonTex,
                 Modulate = Color.FromHex("#464966")
             };
-            buttonNormal.SetPatchMargin(StyleBox.Margin.All, 8);
+            buttonNormal.SetPatchMargin(StyleBox.Margin.All, 10);
             buttonNormal.SetPadding(StyleBox.Margin.All, 1);
             buttonNormal.SetContentMarginOverride(StyleBox.Margin.Vertical, 2);
-            buttonNormal.SetContentMarginOverride(StyleBox.Margin.Horizontal, 12);
+            buttonNormal.SetContentMarginOverride(StyleBox.Margin.Horizontal, 14);
 
             var buttonHover = new StyleBoxTexture(buttonNormal)
             {
@@ -150,8 +153,9 @@ namespace Content.Client.UserInterface
             // Placeholder
             var placeholderTexture = resCache.GetTexture("/Nano/placeholder.png");
             var placeholder = new StyleBoxTexture {Texture = placeholderTexture};
-            placeholder.SetPatchMargin(StyleBox.Margin.All, 24);
+            placeholder.SetPatchMargin(StyleBox.Margin.All, 19);
             placeholder.SetExpandMargin(StyleBox.Margin.All, -5);
+            placeholder.Mode = StyleBoxTexture.StretchMode.Tile;
 
             var itemListBackgroundSelected = new StyleBoxFlat {BackgroundColor = new Color(75, 75, 86)};
             itemListBackgroundSelected.SetContentMarginOverride(StyleBox.Margin.Vertical, 2);
@@ -163,6 +167,28 @@ namespace Content.Client.UserInterface
             itemListItemBackground.SetContentMarginOverride(StyleBox.Margin.Vertical, 2);
             itemListItemBackground.SetContentMarginOverride(StyleBox.Margin.Horizontal, 4);
 
+            // NanoHeading
+            var nanoHeadingTex = resCache.GetTexture("/Nano/nanoheading.svg.96dpi.png");
+            var nanoHeadingBox = new StyleBoxTexture
+            {
+                Texture = nanoHeadingTex,
+                PatchMarginRight = 10,
+                PatchMarginTop = 10,
+                ContentMarginTopOverride = 2,
+                ContentMarginLeftOverride = 10,
+                PaddingTop = 4
+            };
+
+            nanoHeadingBox.SetPatchMargin(StyleBox.Margin.Left | StyleBox.Margin.Bottom, 2);
+
+            // Stripe background
+            var stripeBackTex = resCache.GetTexture("/Nano/stripeback.svg.96dpi.png");
+            var stripeBack = new StyleBoxTexture
+            {
+                Texture = stripeBackTex,
+                Mode = StyleBoxTexture.StretchMode.Tile
+            };
+
             Stylesheet = new Stylesheet(new[]
             {
                 // Default font.
@@ -431,6 +457,13 @@ namespace Content.Client.UserInterface
                     new StyleProperty(Label.StylePropertyFontColor, NanoGold),
                 }),
 
+                // Bigger Label
+                new StyleRule(new SelectorElement(typeof(Label), new[] {StyleClassLabelHeadingBigger}, null, null), new[]
+                {
+                    new StyleProperty(Label.StylePropertyFont, notoSansBold20),
+                    new StyleProperty(Label.StylePropertyFontColor, NanoGold),
+                }),
+
                 // Small Label
                 new StyleRule(new SelectorElement(typeof(Label), new[] {StyleClassLabelSubText}, null, null), new[]
                 {
@@ -518,6 +551,33 @@ namespace Content.Client.UserInterface
                     {
                         new StyleProperty(Control.StylePropertyModulateSelf, Color.FromHex("#00F")),
                     }),
+
+                // NanoHeading
+
+                new StyleRule(
+                    new SelectorChild(
+                        SelectorElement.Type(typeof(NanoHeading)),
+                        SelectorElement.Type(typeof(PanelContainer))),
+                    new[]
+                    {
+                        new StyleProperty(PanelContainer.StylePropertyPanel, nanoHeadingBox),
+                    }),
+
+                // StripeBack
+                new StyleRule(
+                    SelectorElement.Type(typeof(StripeBack)),
+                    new []
+                    {
+                        new StyleProperty(StripeBack.StylePropertyBackground, stripeBack),
+                    }),
+
+                // StyleClassLabelBig
+                new StyleRule(
+                    SelectorElement.Class(StyleClassLabelBig),
+                    new []
+                    {
+                        new StyleProperty("font", notoSans16),
+                    }),
             });
         }
     }

Content.Client/UserInterface/StripeBack.cs

@@ -0,0 +1,104 @@
+using Robust.Client.Graphics.Drawing;
+using Robust.Client.UserInterface.Controls;
+using Robust.Shared.Maths;
+
+namespace Content.Client.UserInterface
+{
+    public class StripeBack : Container
+    {
+        private const float PadSize = 4;
+        private const float EdgeSize = 2;
+        private static readonly Color EdgeColor = Color.FromHex("#525252ff");
+
+        private bool _hasTopEdge = true;
+        private bool _hasBottomEdge = true;
+
+        public const string StylePropertyBackground = "background";
+
+        public bool HasTopEdge
+        {
+            get => _hasTopEdge;
+            set
+            {
+                MinimumSizeChanged();
+                _hasTopEdge = value;
+            }
+        }
+
+        public bool HasBottomEdge
+        {
+            get => _hasBottomEdge;
+            set
+            {
+                _hasBottomEdge = value;
+                MinimumSizeChanged();
+            }
+        }
+
+        protected override Vector2 CalculateMinimumSize()
+        {
+            var size = Vector2.Zero;
+
+            foreach (var child in Children)
+            {
+                size = Vector2.ComponentMax(size, child.CombinedMinimumSize);
+            }
+
+            if (HasBottomEdge)
+            {
+                size += (0, PadSize + EdgeSize);
+            }
+
+            if (HasTopEdge)
+            {
+                size += (0, PadSize + EdgeSize);
+            }
+
+            return size;
+        }
+
+        protected override void SortChildren()
+        {
+            var box = SizeBox;
+
+            if (HasTopEdge)
+            {
+                box += (0, PadSize + EdgeSize, 0, 0);
+            }
+
+            if (HasBottomEdge)
+            {
+                box += (0, 0, 0, -(PadSize + EdgeSize));
+            }
+
+            foreach (var child in Children)
+            {
+                FitChildInBox(child, box);
+            }
+        }
+
+        protected override void Draw(DrawingHandleScreen handle)
+        {
+            UIBox2 centerBox = PixelSizeBox;
+
+            if (HasTopEdge)
+            {
+                centerBox += (0, (PadSize + EdgeSize) * UIScale, 0, 0);
+                handle.DrawRect(new UIBox2(0, PadSize * UIScale, PixelWidth, centerBox.Top), EdgeColor);
+            }
+
+            if (HasBottomEdge)
+            {
+                centerBox += (0, 0, 0, -((PadSize + EdgeSize) * UIScale));
+                handle.DrawRect(new UIBox2(0, centerBox.Bottom, PixelWidth, PixelHeight - PadSize * UIScale), EdgeColor);
+            }
+
+            GetActualStyleBox()?.Draw(handle, centerBox);
+        }
+
+        private StyleBox GetActualStyleBox()
+        {
+            return TryGetStyleProperty(StylePropertyBackground, out StyleBox box) ? box : null;
+        }
+    }
+}

Resources/Nano/button.svg

@@ -9,9 +9,9 @@
    xmlns="http://www.w3.org/2000/svg"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="20"
+   width="24"
-   height="20"
+   height="24"
-   viewBox="0 0 5.2916665 5.2916667"
+   viewBox="0 0 6.3499998 6.35"
    version="1.1"
    id="svg1055"
    inkscape:version="0.92.4 5da689c313, 2019-01-14"
@@ -25,9 +25,9 @@
      borderopacity="1.0"
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
-     inkscape:zoom="32"
+     inkscape:zoom="22.627417"
-     inkscape:cx="9.1503339"
+     inkscape:cx="12.337282"
-     inkscape:cy="9.9668302"
+     inkscape:cy="12.571025"
      inkscape:document-units="mm"
      inkscape:current-layer="layer1"
      showgrid="false"
@@ -55,10 +55,10 @@
      inkscape:label="Layer 1"
      inkscape:groupmode="layer"
      id="layer1"
-     transform="translate(-79.848503,-134.99711)">
+     transform="translate(-79.848503,-133.93878)">
     <path
        style="opacity:1;vector-effect:none;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.6723063;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
-       d="m 79.848503,134.99711 v 3.175 l 2.116667,2.11667 h 3.175 v -3.175 l -2.116667,-2.11667 z"
+       d="m 79.848503,133.93878 v 3.70416 l 2.645833,2.64584 h 3.704167 v -3.70417 l -2.645833,-2.64583 z"
        id="rect1684"
        inkscape:connector-curvature="0"
        sodipodi:nodetypes="ccccccc"

Resources/Nano/nanoheading.svg

@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="16"
+   height="16"
+   viewBox="0 0 4.2333334 4.233333"
+   version="1.1"
+   id="svg2250"
+   inkscape:version="0.92.4 5da689c313, 2019-01-14"
+   sodipodi:docname="nanoheading.svg"
+   inkscape:export-filename="/ssdhome/pj/Projects/space-station-14-content/Resources/Nano/nanoheading.svg.96dpi.png"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96">
+  <defs
+     id="defs2244" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="22.627417"
+     inkscape:cx="6.8190858"
+     inkscape:cy="11.996709"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:pagecheckerboard="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1043"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     units="px" />
+  <metadata
+     id="metadata2247">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-133.09333,-142.98537)">
+    <path
+       sodipodi:nodetypes="cccc"
+       inkscape:connector-curvature="0"
+       id="path894-7-2-9"
+       d="m 133.10097,146.95412 h 3.9603 v -1.60219 l -2.07525,-2.17674"
+       style="fill:none;stroke:#a88b5e;stroke-width:0.5291667;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       inkscape:export-filename="/ssdhome/pj/Projects/space-station-14-content/Resources/Nano/nanoheading.svg.96dpi.png"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96" />
+  </g>
+</svg>

Resources/Nano/stripeback.svg

@@ -0,0 +1,85 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="32"
+   height="32"
+   viewBox="0 0 8.4666666 8.4666669"
+   version="1.1"
+   id="svg1057"
+   inkscape:version="0.92.4 5da689c313, 2019-01-14"
+   sodipodi:docname="stripback.svg"
+   inkscape:export-filename="/ssdhome/pj/Projects/space-station-14-content/Resources/Nano/stripeback.png"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96">
+  <defs
+     id="defs1051" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="22.627417"
+     inkscape:cx="15.032227"
+     inkscape:cy="17.599459"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:pagecheckerboard="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1043"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata1054">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-288.53331)">
+    <rect
+       style="opacity:1;vector-effect:none;fill:#1e1e22;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.44710034;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="rect1707"
+       width="8.4666672"
+       height="8.4666672"
+       x="0"
+       y="288.53329" />
+    <g
+       id="g1697"
+       style="fill:#262626;fill-opacity:1">
+      <path
+         sodipodi:nodetypes="ccccc"
+         inkscape:connector-curvature="0"
+         id="rect1602"
+         d="m 0,294.88331 v -4.23333 l 6.3500001,6.34999 H 2.1166667 Z"
+         style="opacity:1;vector-effect:none;fill:#262626;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.18526772;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+      <path
+         style="opacity:1;vector-effect:none;fill:#262626;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.18526772;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         d="m 8.4666667,290.64998 v 4.23333 l -6.35,-6.35 h 4.2333334 z"
+         id="path1665"
+         inkscape:connector-curvature="0"
+         sodipodi:nodetypes="ccccc" />
+    </g>
+  </g>
+</svg>