diff --git a/ui/stylesheets/csui/_button.scss b/ui/stylesheets/csui/_button.scss new file mode 100644 index 00000000000..033d8ba451f --- /dev/null +++ b/ui/stylesheets/csui/_button.scss @@ -0,0 +1,22 @@ +@mixin csui-button { + @include linear-gradient(#fff, darken(#ccc, 30%)); + + display: block; + padding-top: 8px; + padding-bottom: 8px; + padding-left: 12px; + padding-right: 12px; + min-width: 92px; + font-size: 12px; + border-radius: 3px; + border: 1px solid black; +} + +@mixin csui-button-cta { + @include csui-button; + @include linear-gradient(darkgray, lighten(black, 15%)); + + color: white; + font-weight: bold; + text-shadow: 0px 1px 1px black; +} \ No newline at end of file diff --git a/ui/stylesheets/csui/_csui.scss b/ui/stylesheets/csui/_csui.scss new file mode 100644 index 00000000000..35c9cf560ea --- /dev/null +++ b/ui/stylesheets/csui/_csui.scss @@ -0,0 +1,17 @@ +// External libs +@import "../lib/normalize"; +@import "../lib/animate"; +@import "../lib/bourbon/bourbon"; +@import "../lib/neat/neat"; + +// Core style +html, body { + height: 100%; + font-family: Segoe UI,Trebuchet MS,Tahoma,Arial,sans-serif; +} + +// Sub-components +@import "login"; +@import "button"; +@import "form"; +@import "header"; \ No newline at end of file diff --git a/ui/stylesheets/csui/_form.scss b/ui/stylesheets/csui/_form.scss new file mode 100644 index 00000000000..b9582075263 --- /dev/null +++ b/ui/stylesheets/csui/_form.scss @@ -0,0 +1,27 @@ +@mixin csui-dropdown { + -webkit-appearance: button; + -moz-appearance: none; + + @include background( + url(csui/img/form/dropdown-arrow.png) no-repeat right 8px center, + linear-gradient(#fff, #b6b6b6) + ); + + border-radius: 3px; + border: 1px solid black; + font-size: 14px; + height: 30px; + text-indent: 8px; +} + +@mixin csui-dropdown-dark { + @include csui-dropdown; + @include background( + url(csui/img/form/dropdown-arrow-white.png) no-repeat right 8px center, + linear-gradient(#4e4e4e, #242424) + ); + + color: white; + font-weight: bold; + text-shadow: 0px 1px 1px black; +} \ No newline at end of file diff --git a/ui/stylesheets/csui/_header.scss b/ui/stylesheets/csui/_header.scss new file mode 100644 index 00000000000..b6d378d4f83 --- /dev/null +++ b/ui/stylesheets/csui/_header.scss @@ -0,0 +1,29 @@ +@mixin csui-header { + @include background( + url(csui/img/overlay-pattern.png) repeat, + url(csui/img/header/gradient.png) no-repeat + ); + + background-size: auto, cover; + + .logo { + background: url(csui/img/logo-main.png) no-repeat left; + width: 1280px; + height: 100px; + margin: auto; + background-size: 300px; + } + + .controls { + @include linear-gradient(#525252, #262626); + @include row; + + width: 1280px; + height: 75px; + padding-top: 14px; + margin: auto; + color: white; + border: 1px solid gray; + border-radius: 4px 4px 0 0; + } +} \ No newline at end of file diff --git a/ui/stylesheets/csui/_login.scss b/ui/stylesheets/csui/_login.scss new file mode 100644 index 00000000000..bf243457947 --- /dev/null +++ b/ui/stylesheets/csui/_login.scss @@ -0,0 +1,70 @@ +@mixin csui-login { + height: 100%; + min-height: 630px; + + @include background( + url(csui/img/login/brand-logo.png), + url(csui/img/login/bottom-bar.png), + url(csui/img/login/overlay-pattern.png), + url(csui/img/login/gradient.png) + ); + + background-repeat: no-repeat, repeat-x, repeat, no-repeat; + background-size: auto, auto, auto, cover; + background-position: center bottom 25px, bottom, center, center; + + form { + @include row; + + background: rgba(#000812, 0.8); + padding-top: 60px; + padding-bottom: 60px; + position: relative; + top: 15%; + height: 400px; + + .logo { + @include shift(2); + @include span-columns(4); + + background: url(csui/img/logo-main.png) no-repeat top center; + background-size: contain; + float: left; + height: 500px; + } + + .fields { + @include shift(3); + @include span-columns(3); + + margin: auto; + color: white; + + input[type=text], + input[type=password] { + font-size: 13px; + width: 100%; + padding: 10px; + margin-top: 10px; + margin-bottom: 10px; + border: 2px solid gray; + + &:focus { + border: 2px solid #6aa6e9; + outline: none; + } + } + + input[type=submit] { + @include csui-button-cta; + } + + select { + @include csui-dropdown-dark; + + width: 100%; + margin-top: 20px; + } + } + } +} \ No newline at end of file diff --git a/ui/stylesheets/csui/img/form/dropdown-arrow-white.png b/ui/stylesheets/csui/img/form/dropdown-arrow-white.png new file mode 100755 index 00000000000..e6b4aea5fb8 Binary files /dev/null and b/ui/stylesheets/csui/img/form/dropdown-arrow-white.png differ diff --git a/ui/stylesheets/csui/img/form/dropdown-arrow.png b/ui/stylesheets/csui/img/form/dropdown-arrow.png new file mode 100755 index 00000000000..9c1f6e48abd Binary files /dev/null and b/ui/stylesheets/csui/img/form/dropdown-arrow.png differ diff --git a/ui/stylesheets/csui/img/header/gradient.png b/ui/stylesheets/csui/img/header/gradient.png new file mode 100644 index 00000000000..8ff49a2e916 Binary files /dev/null and b/ui/stylesheets/csui/img/header/gradient.png differ diff --git a/ui/stylesheets/csui/img/login/bottom-bar.png b/ui/stylesheets/csui/img/login/bottom-bar.png new file mode 100644 index 00000000000..978bbde9919 Binary files /dev/null and b/ui/stylesheets/csui/img/login/bottom-bar.png differ diff --git a/ui/stylesheets/csui/img/login/brand-logo.png b/ui/stylesheets/csui/img/login/brand-logo.png new file mode 100755 index 00000000000..cca6540e815 Binary files /dev/null and b/ui/stylesheets/csui/img/login/brand-logo.png differ diff --git a/ui/stylesheets/csui/img/login/gradient.png b/ui/stylesheets/csui/img/login/gradient.png new file mode 100644 index 00000000000..56e0087cb10 Binary files /dev/null and b/ui/stylesheets/csui/img/login/gradient.png differ diff --git a/ui/stylesheets/csui/img/logo-main.png b/ui/stylesheets/csui/img/logo-main.png new file mode 100644 index 00000000000..82a0f051810 Binary files /dev/null and b/ui/stylesheets/csui/img/logo-main.png differ diff --git a/ui/stylesheets/csui/img/overlay-pattern.png b/ui/stylesheets/csui/img/overlay-pattern.png new file mode 100644 index 00000000000..d03aba89428 Binary files /dev/null and b/ui/stylesheets/csui/img/overlay-pattern.png differ