diff --git a/less/colors.less b/less/colors.less index 7df012d3e..b65205f16 100644 --- a/less/colors.less +++ b/less/colors.less @@ -1,115 +1,131 @@ -/* - * Metro UI CSS - * Copyright 2012 Sergey Pimenov - * Licensed under the MIT Lilcense - * - * Variables.less - */ - -// Units -@unit: 20px; -@subunit: 5px; - -// Color vars -@white: #ffffff; -@black: #000000; -@blue: #2d89ef; -@blueLight: #EFF4FF; -@blueDark: #2B5797; -@green: #00a300; -@greenLight: #99b433; -@greenDark: #1E7145; -@red: #b91d47; -@yellow: #ffc40d; -@orange: #e3a21a; -@orangeDark: #da532c; -@pinkDark: #7E3878; -@pink: #9f00a7; -@purple: #603cba; -@darken: #1d1d1d; -@lighten: #d5e7ec; -@grayDark: #525252; - - -// Foregraund colors classes -.fg-color-blue {color: @blue !important;} -.fg-color-blueLight {color: @blueLight !important;} -.fg-color-blueDark {color: @blueDark !important;} -.fg-color-green {color: @green !important;} -.fg-color-greenLight {color: @greenLight !important;} -.fg-color-greenDark {color: @greenDark !important;} -.fg-color-red {color: @red !important;} -.fg-color-yellow {color: @yellow !important;} -.fg-color-orange {color: @orange !important;} -.fg-color-orangeDark {color: @orangeDark !important;} -.fg-color-pink {color: @pink !important;} -.fg-color-pinkDark {color: @pinkDark !important;} -.fg-color-purple {color: @purple !important;} -.fg-color-darken {color: @darken !important;} -.fg-color-lighten {color: @lighten !important;} -.fg-color-white {color: @white !important;} -.fg-color-grayDark {color: @grayDark !important;} - -// Background colors classes -.bg-color-blue {background-color: @blue !important;} -.bg-color-blueLight {background-color: @blueLight !important;} -.bg-color-blueDark {background-color: @blueDark !important;} -.bg-color-green {background-color: @green !important;} -.bg-color-greenLight {background-color: @greenLight !important;} -.bg-color-greenDark {background-color: @greenDark !important;} -.bg-color-red {background-color: @red !important;} -.bg-color-yellow {background-color: @yellow !important;} -.bg-color-orange {background-color: @orange !important;} -.bg-color-orangeDark {background-color: @orangeDark !important;} -.bg-color-pink {background-color: @pink !important;} -.bg-color-pinkDark {background-color: @pinkDark !important;} -.bg-color-purple {background-color: @purple !important;} -.bg-color-darken {background-color: @darken !important;} -.bg-color-lighten {background-color: @lighten !important;} -.bg-color-white {background-color: @white !important;} -.bg-color-grayDark {background-color: @grayDark !important;} - -// Border colors classes - -[class*=border-color]{ - border: 2px solid; -} - -.border-color-blue {border-color: @blue !important;} -.border-color-blueLight {border-color: @blueLight !important;} -.border-color-blueDark {border-color: @blueDark !important;} -.border-color-green {border-color: @green !important;} -.border-color-greenLight {border-color: @greenLight !important;} -.border-color-greenDark {border-color: @greenDark !important;} -.border-color-red {border-color: @red !important;} -.border-color-yellow {border-color: @yellow !important;} -.border-color-orange {border-color: @orange !important;} -.border-color-orangeDark {border-color: @orangeDark !important;} -.border-color-pink {border-color: @pink !important;} -.border-color-pinkDark {border-color: @pinkDark !important;} -.border-color-purple {border-color: @purple !important;} -.border-color-darken {border-color: @darken !important;} -.border-color-lighten {border-color: @lighten !important;} -.border-color-white {border-color: @white !important;} -.border-color-grayDark {border-color: @grayDark !important;} - -*:hover[class=outline-color] { - outline: 3px solid; -} -.outline-color-blue {outline-color: @blue !important;} -.outline-color-blueLight {outline-color: @blueLight !important;} -.outline-color-blueDark {outline-color: @blueDark !important;} -.outline-color-green {outline-color: @green !important;} -.outline-color-greenLight {outline-color: @greenLight !important;} -.outline-color-greenDark {outline-color: @greenDark !important;} -.outline-color-red {outline-color: @red !important;} -.outline-color-yellow {outline-color: @yellow !important;} -.outline-color-orange {outline-color: @orange !important;} -.outline-color-orangeDark {outline-color: @orangeDark !important;} -.outline-color-pink {outline-color: @pink !important;} -.outline-color-pinkDark {outline-color: @pinkDark !important;} -.outline-color-purple {outline-color: @purple !important;} -.outline-color-darken {outline-color: @darken !important;} -.outline-color-lighten {outline-color: @lighten !important;} -.outline-color-white {outline-color: @white !important;} -.outline-color-grayDark {outline-color: @grayDark !important;} \ No newline at end of file +/* + * Metro UI CSS + * Copyright 2012 Sergey Pimenov + * Licensed under the MIT Lilcense + * + * Variables.less + */ + +// Units +@unit: 20px; +@subunit: 5px; + +// Color vars +@white: #ffffff; +@black: #000000; +@blue: #2d89ef; +@blueLight: #EFF4FF; +@blueDark: #2B5797; +@green: #00a300; +@greenLight: #99b433; +@greenDark: #1E7145; +@red: #b91d47; +@yellow: #ffc40d; +@orange: #e3a21a; +@orangeDark: #da532c; +@pinkDark: #7E3878; +@pink: #9f00a7; +@purple: #603cba; +@darken: #1d1d1d; +@lighten: #d5e7ec; +@grayDark: #525252; + +@magenta: #FF0097; +@teal: #00ABA9; +@redLight: #EE1111; + + +// Foregraund colors classes +.fg-color-blue {color: @blue !important;} +.fg-color-blueLight {color: @blueLight !important;} +.fg-color-blueDark {color: @blueDark !important;} +.fg-color-green {color: @green !important;} +.fg-color-greenLight {color: @greenLight !important;} +.fg-color-greenDark {color: @greenDark !important;} +.fg-color-red {color: @red !important;} +.fg-color-yellow {color: @yellow !important;} +.fg-color-orange {color: @orange !important;} +.fg-color-orangeDark {color: @orangeDark !important;} +.fg-color-pink {color: @pink !important;} +.fg-color-pinkDark {color: @pinkDark !important;} +.fg-color-purple {color: @purple !important;} +.fg-color-darken {color: @darken !important;} +.fg-color-lighten {color: @lighten !important;} +.fg-color-white {color: @white !important;} +.fg-color-grayDark {color: @grayDark !important;} +.fg-color-magenta {color: @magenta !important;} +.fg-color-teal {color: @teal !important;} +.fg-color-redLight {color: @redLight !important;} + +// Background colors classes +.bg-color-blue {background-color: @blue !important;} +.bg-color-blueLight {background-color: @blueLight !important;} +.bg-color-blueDark {background-color: @blueDark !important;} +.bg-color-green {background-color: @green !important;} +.bg-color-greenLight {background-color: @greenLight !important;} +.bg-color-greenDark {background-color: @greenDark !important;} +.bg-color-red {background-color: @red !important;} +.bg-color-yellow {background-color: @yellow !important;} +.bg-color-orange {background-color: @orange !important;} +.bg-color-orangeDark {background-color: @orangeDark !important;} +.bg-color-pink {background-color: @pink !important;} +.bg-color-pinkDark {background-color: @pinkDark !important;} +.bg-color-purple {background-color: @purple !important;} +.bg-color-darken {background-color: @darken !important;} +.bg-color-lighten {background-color: @lighten !important;} +.bg-color-white {background-color: @white !important;} +.bg-color-grayDark {background-color: @grayDark !important;} +.bg-color-magenta {background-color: @magenta !important;} +.bg-color-teal {background-color: @teal !important;} +.bg-color-redLight {background-color: @redLight !important;} + +// Border colors classes + +[class*=border-color]{ + border: 2px solid; +} + +.border-color-blue {border-color: @blue !important;} +.border-color-blueLight {border-color: @blueLight !important;} +.border-color-blueDark {border-color: @blueDark !important;} +.border-color-green {border-color: @green !important;} +.border-color-greenLight {border-color: @greenLight !important;} +.border-color-greenDark {border-color: @greenDark !important;} +.border-color-red {border-color: @red !important;} +.border-color-yellow {border-color: @yellow !important;} +.border-color-orange {border-color: @orange !important;} +.border-color-orangeDark {border-color: @orangeDark !important;} +.border-color-pink {border-color: @pink !important;} +.border-color-pinkDark {border-color: @pinkDark !important;} +.border-color-purple {border-color: @purple !important;} +.border-color-darken {border-color: @darken !important;} +.border-color-lighten {border-color: @lighten !important;} +.border-color-white {border-color: @white !important;} +.border-color-grayDark {border-color: @grayDark !important;} +.border-color-magenta {border-color: @magenta !important;} +.border-color-teal {border-color: @teal !important;} +.border-color-redLight {border-color: @redLight !important;} + +*:hover[class=outline-color] { + outline: 3px solid; +} +.outline-color-blue {outline-color: @blue !important;} +.outline-color-blueLight {outline-color: @blueLight !important;} +.outline-color-blueDark {outline-color: @blueDark !important;} +.outline-color-green {outline-color: @green !important;} +.outline-color-greenLight {outline-color: @greenLight !important;} +.outline-color-greenDark {outline-color: @greenDark !important;} +.outline-color-red {outline-color: @red !important;} +.outline-color-yellow {outline-color: @yellow !important;} +.outline-color-orange {outline-color: @orange !important;} +.outline-color-orangeDark {outline-color: @orangeDark !important;} +.outline-color-pink {outline-color: @pink !important;} +.outline-color-pinkDark {outline-color: @pinkDark !important;} +.outline-color-purple {outline-color: @purple !important;} +.outline-color-darken {outline-color: @darken !important;} +.outline-color-lighten {outline-color: @lighten !important;} +.outline-color-white {outline-color: @white !important;} +.outline-color-grayDark {outline-color: @grayDark !important;} +.outline-color-magenta {outline-color: @magenta !important;} +.outline-color-teal {outline-color: @teal !important;} +.outline-color-redLight {outline-color: @redLight !important;} \ No newline at end of file diff --git a/less/notices.less b/less/notices.less index dd1bed40f..53355125f 100644 --- a/less/notices.less +++ b/less/notices.less @@ -1,185 +1,188 @@ -/* - * Metro UI CSS - * Copyright 2012 Sergey Pimenov - * Licensed under the MIT Lilcense - * - * Notices.less - */ - -.replies { - //list-style: none; - //margin: 0; - //padding: 0; - .unstyled; - - & > div, & > li, & > span { - .medium-brick; - #font > .normal; - height: auto; - padding: 10px; - - .avatar { - width: 50px; - height: 50px; - overflow: hidden; - display: table-cell; - vertical-align:middle !important; - background: #6e6e6e; - box-shadow-bottom: inset 0px 0px 3px #fff; - - img { - width: 100%; - height: 100%; - display:inline-block !important; - vertical-align:middle !important; - } - } - - .reply { - margin-left: 60px; - margin-top: -50px; - - .date { - float: right; - font-size: 55%; - color: @white; - } - .author { - color: @white; - } - .text { - .tertiary-text; - color: @white; - line-height: 16px; - &:hover { - color: @white; - } - } - } - - .sticker { - width: 0; - height: 0; - border-top: 10px solid @white; - position: absolute; - display: block; - z-index: 1000; - } - - .sticker.sticker-color-blue {border-color: @blue !important;} - .sticker.sticker-color-blueLight {border-color: @blueLight !important;} - .sticker.sticker-color-blueDark {border-color: @blueDark !important;} - .sticker.sticker-color-green {border-color: @green !important;} - .sticker.sticker-color-greenLight {border-color: @greenLight !important;} - .sticker.sticker-color-greenDark {border-color: @greenDark !important;} - .sticker.sticker-color-red {border-color: @red !important;} - .sticker.sticker-color-yellow {border-color: @yellow !important;} - .sticker.sticker-color-orange {border-color: @orange !important;} - .sticker.sticker-color-orangeDark {border-color: @orangeDark !important;} - .sticker.sticker-color-pink {border-color: @pink !important;} - .sticker.sticker-color-pinkDark {border-color: @pinkDark !important;} - .sticker.sticker-color-purple {border-color: @purple !important;} - .sticker.sticker-color-darken {border-color: @darken !important;} - .sticker.sticker-color-white {border-color: @white !important;} - .sticker.sticker-color-lighten {border-color: @lighten !important;} - .sticker.sticker-color-grayDark {border-color: @grayDark !important;} - - .sticker.sticker-left { - border-left: 20px solid transparent !important; - left: -20px; - } - - .sticker.sticker-right { - border-right: 20px solid transparent !important; - right: -20px; - } - } -} - - -.notices { - list-style: none; - margin: 0; - padding: 0; - - & > div, & > li, & > span, & > a { - //width: 385px; - width: 100%; - height: 90px; - display: block; - overflow: hidden; - position: relative; - margin-bottom: 10px; - - .notice-header, .header { - position: relative; - background: transparent; - #font > .subheader-secondary; - font-size: 12pt; - margin-top: 5px; - margin-left: 10px; - } - - .notice-text, .text { - position: relative; - margin-right: 50px; - margin-left: 10px; - color: #fff; - #font > .small; - margin-top: -5px; - line-height: 16px; - } - - .notice-icon, .icon { - position: absolute; - right: 10px; - bottom: 5px; - - img { - width: 32px; - height: 32px; - } - } - - .notice-image, .image { - max-height: 48px; - width: 48px; - height: 48px; - margin: 20px 20px 20px 20px; - float: left; - - img { - width: 48px; - height: 48px; - } - } - - .close { - z-index: 2; - position: absolute; - top: 5px; - right: 10px; - cursor: pointer; - font-weight: bold; - text-decoration: none; - color: #fff !important; - } - .close::before { - content: "\00d7"; - color: #fff !important; - } - - .image-large { - width: 88px; - height: 88px; - margin: 1px 10px 1px 1px; - overflow: hidden; - float: left; - - img { - width: 88px; - height: 88px; - } - } - } -} +/* + * Metro UI CSS + * Copyright 2012 Sergey Pimenov + * Licensed under the MIT Lilcense + * + * Notices.less + */ + +.replies { + //list-style: none; + //margin: 0; + //padding: 0; + .unstyled; + + & > div, & > li, & > span { + .medium-brick; + #font > .normal; + height: auto; + padding: 10px; + + .avatar { + width: 50px; + height: 50px; + overflow: hidden; + display: table-cell; + vertical-align:middle !important; + background: #6e6e6e; + box-shadow-bottom: inset 0px 0px 3px #fff; + + img { + width: 100%; + height: 100%; + display:inline-block !important; + vertical-align:middle !important; + } + } + + .reply { + margin-left: 60px; + margin-top: -50px; + + .date { + float: right; + font-size: 55%; + color: @white; + } + .author { + color: @white; + } + .text { + .tertiary-text; + color: @white; + line-height: 16px; + &:hover { + color: @white; + } + } + } + + .sticker { + width: 0; + height: 0; + border-top: 10px solid @white; + position: absolute; + display: block; + z-index: 1000; + } + + .sticker.sticker-color-blue {border-color: @blue !important;} + .sticker.sticker-color-blueLight {border-color: @blueLight !important;} + .sticker.sticker-color-blueDark {border-color: @blueDark !important;} + .sticker.sticker-color-green {border-color: @green !important;} + .sticker.sticker-color-greenLight {border-color: @greenLight !important;} + .sticker.sticker-color-greenDark {border-color: @greenDark !important;} + .sticker.sticker-color-red {border-color: @red !important;} + .sticker.sticker-color-yellow {border-color: @yellow !important;} + .sticker.sticker-color-orange {border-color: @orange !important;} + .sticker.sticker-color-orangeDark {border-color: @orangeDark !important;} + .sticker.sticker-color-pink {border-color: @pink !important;} + .sticker.sticker-color-pinkDark {border-color: @pinkDark !important;} + .sticker.sticker-color-purple {border-color: @purple !important;} + .sticker.sticker-color-darken {border-color: @darken !important;} + .sticker.sticker-color-white {border-color: @white !important;} + .sticker.sticker-color-lighten {border-color: @lighten !important;} + .sticker.sticker-color-grayDark {border-color: @grayDark !important;} + .sticker.sticker-color-magenta {border-color: @magenta !important;} + .sticker.sticker-color-teal {border-color: @teal !important;} + .sticker.sticker-color-redLight {border-color: @redLight !important;} + + .sticker.sticker-left { + border-left: 20px solid transparent !important; + left: -20px; + } + + .sticker.sticker-right { + border-right: 20px solid transparent !important; + right: -20px; + } + } +} + + +.notices { + list-style: none; + margin: 0; + padding: 0; + + & > div, & > li, & > span, & > a { + //width: 385px; + width: 100%; + height: 90px; + display: block; + overflow: hidden; + position: relative; + margin-bottom: 10px; + + .notice-header, .header { + position: relative; + background: transparent; + #font > .subheader-secondary; + font-size: 12pt; + margin-top: 5px; + margin-left: 10px; + } + + .notice-text, .text { + position: relative; + margin-right: 50px; + margin-left: 10px; + color: #fff; + #font > .small; + margin-top: -5px; + line-height: 16px; + } + + .notice-icon, .icon { + position: absolute; + right: 10px; + bottom: 5px; + + img { + width: 32px; + height: 32px; + } + } + + .notice-image, .image { + max-height: 48px; + width: 48px; + height: 48px; + margin: 20px 20px 20px 20px; + float: left; + + img { + width: 48px; + height: 48px; + } + } + + .close { + z-index: 2; + position: absolute; + top: 5px; + right: 10px; + cursor: pointer; + font-weight: bold; + text-decoration: none; + color: #fff !important; + } + .close::before { + content: "\00d7"; + color: #fff !important; + } + + .image-large { + width: 88px; + height: 88px; + margin: 1px 10px 1px 1px; + overflow: hidden; + float: left; + + img { + width: 88px; + height: 88px; + } + } + } +} diff --git a/less/sidebar.less b/less/sidebar.less index 9e2d089c0..4e8fe87d9 100644 --- a/less/sidebar.less +++ b/less/sidebar.less @@ -1,136 +1,139 @@ -/* - * Metro UI CSS - * Copyright 2012 Sergey Pimenov - * Licensed under the MIT Lilcense - * - * Sidebar.less - */ - -.page-sidebar { - display: block; - width: 213px; - float: left; - min-height: 100% !important; - height: auto; - background-color: #EBEBEB; - padding-top: 10px; - padding-bottom: 10px; - margin-top: 10px; - margin-left: 7px; - - a { - #font > .navigation; - #state > .navigation; - display: block; - width: 100%; - padding: 5px 20px 5px 10px; - white-space: nowrap; - font-size: 14px; - cursor: pointer; - - &:hover { - .bg-color-blue; - .fg-color-white; - } - } - - li { - display: list-item; - line-height: 20px; - position: relative; - } - - & > ul > li > a { - font-size: 1.1em; - } - - & > ul > li a.lead, & > ul > li.lead a, & > ul > li.lead { - font-weight: bold; - } - - & > ul > li.sticker { - - &:before { - content: "."; - position: absolute; - width: 7px; - height: 28px; - left: -7px; - text-indent: -9999px; - border-top-left-radius: 10px; - border-bottom-left-radius: 10px; - background-color: #ebebeb; - } - - &.sticker-color-blue {&:before{background-color: @blue;}} - &.sticker-color-blueLight {&:before{background-color: @blueLight;}} - &.sticker-color-blueDark {&:before{background-color: @blueDark;}} - &.sticker-color-green {&:before{background-color: @green !important;}} - &.sticker-color-greenLight {&:before{background-color: @greenLight !important;}} - &.sticker-color-greenDark {&:before{background-color: @greenDark !important;}} - &.sticker-color-red {&:before{background-color: @red !important;}} - &.sticker-color-yellow {&:before{background-color: @yellow !important;}} - &.sticker-color-orange {&:before{background-color: @orange !important;}} - &.sticker-color-orangeDark {&:before{background-color: @orangeDark !important;}} - &.sticker-color-pink {&:before{background-color: @pink !important;}} - &.sticker-color-pinkDark {&:before{background-color: @pinkDark !important;}} - &.sticker-color-purple {&:before{background-color: @purple !important;}} - &.sticker-color-darken {&:before{background-color: @darken !important;}} - &.sticker-color-white {&:before{background-color: @white !important;}} - &.sticker-color-grayDark {&:before{background-color: @grayDark !important;}} - } - - .divider { - height: 1px; - margin: 9px 1px; - overflow: hidden; - background-color: #e5e5e5; - } - - & ul { - .unstyled; - background-color: #EBEBEB; - } - - ul.sub-menu { - padding-top: 5px; - padding-bottom: 5px; - - a { - padding: 5px 20px 5px 25px; - } - - &.light { - background-color: #f9f9f9 !important; - } - } - - .sidebar-dropdown-menu { - display: none; - - &.open { - display: block; - } - } - - & > ul > li.dropdown { - position: relative; - - &:after { - content: ""; - display: block; - position: absolute; - top: 6px; - left: 100%; - margin-left: -20px; - width: 16px; - height: 16px; - background: no-repeat; - background-position: 0 -1586px; - z-index: 200; - } - &.active:after { - background-position: 0 -676px; - } - } +/* + * Metro UI CSS + * Copyright 2012 Sergey Pimenov + * Licensed under the MIT Lilcense + * + * Sidebar.less + */ + +.page-sidebar { + display: block; + width: 213px; + float: left; + min-height: 100% !important; + height: auto; + background-color: #EBEBEB; + padding-top: 10px; + padding-bottom: 10px; + margin-top: 10px; + margin-left: 7px; + + a { + #font > .navigation; + #state > .navigation; + display: block; + width: 100%; + padding: 5px 20px 5px 10px; + white-space: nowrap; + font-size: 14px; + cursor: pointer; + + &:hover { + .bg-color-blue; + .fg-color-white; + } + } + + li { + display: list-item; + line-height: 20px; + position: relative; + } + + & > ul > li > a { + font-size: 1.1em; + } + + & > ul > li a.lead, & > ul > li.lead a, & > ul > li.lead { + font-weight: bold; + } + + & > ul > li.sticker { + + &:before { + content: "."; + position: absolute; + width: 7px; + height: 28px; + left: -7px; + text-indent: -9999px; + border-top-left-radius: 10px; + border-bottom-left-radius: 10px; + background-color: #ebebeb; + } + + &.sticker-color-blue {&:before{background-color: @blue;}} + &.sticker-color-blueLight {&:before{background-color: @blueLight;}} + &.sticker-color-blueDark {&:before{background-color: @blueDark;}} + &.sticker-color-green {&:before{background-color: @green !important;}} + &.sticker-color-greenLight {&:before{background-color: @greenLight !important;}} + &.sticker-color-greenDark {&:before{background-color: @greenDark !important;}} + &.sticker-color-red {&:before{background-color: @red !important;}} + &.sticker-color-yellow {&:before{background-color: @yellow !important;}} + &.sticker-color-orange {&:before{background-color: @orange !important;}} + &.sticker-color-orangeDark {&:before{background-color: @orangeDark !important;}} + &.sticker-color-pink {&:before{background-color: @pink !important;}} + &.sticker-color-pinkDark {&:before{background-color: @pinkDark !important;}} + &.sticker-color-purple {&:before{background-color: @purple !important;}} + &.sticker-color-darken {&:before{background-color: @darken !important;}} + &.sticker-color-white {&:before{background-color: @white !important;}} + &.sticker-color-grayDark {&:before{background-color: @grayDark !important;}} + &.sticker-color-magenta {&:before{background-color: @magenta !important;}} + &.sticker-color-teal {&:before{background-color: @teal !important;}} + &.sticker-color-redLight {&:before{background-color: @redLight !important;}} + } + + .divider { + height: 1px; + margin: 9px 1px; + overflow: hidden; + background-color: #e5e5e5; + } + + & ul { + .unstyled; + background-color: #EBEBEB; + } + + ul.sub-menu { + padding-top: 5px; + padding-bottom: 5px; + + a { + padding: 5px 20px 5px 25px; + } + + &.light { + background-color: #f9f9f9 !important; + } + } + + .sidebar-dropdown-menu { + display: none; + + &.open { + display: block; + } + } + + & > ul > li.dropdown { + position: relative; + + &:after { + content: ""; + display: block; + position: absolute; + top: 6px; + left: 100%; + margin-left: -20px; + width: 16px; + height: 16px; + background: no-repeat; + background-position: 0 -1586px; + z-index: 200; + } + &.active:after { + background-position: 0 -676px; + } + } } \ No newline at end of file diff --git a/less/tiles.less b/less/tiles.less index a269380d9..abf1f7baa 100644 --- a/less/tiles.less +++ b/less/tiles.less @@ -1,285 +1,291 @@ -/* - * Metro UI CSS - * Copyright 2012 Sergey Pimenov - * Licensed under the MIT Lilcense - * - * Tiles.less - * - */ - -@badge-activity-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGMSURBVDhPvZMtTwNBEIbv2mtScaICcQJRgSgJCQIEhqSiAlEHAlFRwU/ov0AgUEgUsrIkiJIgMOAQJFSQQAIJJBWIu95Hj2eGvXIpB3W8yWTn452Z3dld25pDmqZuFEWdcrm8jr6JK7Bt+wb9Ft85+vsXswBxHHdIfmFNi4TYG7InXAp6ss52kCTJIc6e6KzSVbrdYzrYDaSFXZU4uEQ8x3FW1ZpMJge5Tn3IdQ3kID5iw4zHTqIsUEP3TWCA7WhgDjRZg/eUFRCR3Fl3KYJjyfALIUU46jHcsSlQl8FdmQJnhrcQJFbJ6QZB0LDDMNyS4XBFo1Kp9Gw4/wi247GLHmvNuBaC47Y5gtzIQB1mBmMGdDSdTpfV+QdM8vfcsqkap6ClgQIQa+a4bXViPGRO5ILjuBqYAwk7yIfhXcNz9CljDFkkST6P4JGjnHA7d+gBxAY3tIve1Khljbi1beKvakHQp0uhfTrMjvOL9H3fX9FE8OM7yxAhdem4QWHZkSufSoTYaaVSkY9kYFmfXgyTciI3uacAAAAASUVORK5CYII%3D); -@badge-alert-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAFeSURBVDhPpZMtT8RAEIbb7YoTJ04gkQgQuBNIEpB4LD8AwQ9AkCCQhGAvQSAuKHCIE0gEP+DEISAhQYK4pE0/eWa65a7lSvh4k8nsvDv77sxs67UhSZLNNE0LZ3uO/gLj/J+hAkVRWI1+geqMCuR5fkKZoyiKViX+DuQu094wy7KhEmEYrkAk0qt4Nk5R77GszQCuE8fxIXxY8ZJjgiBY8n3/UcTwlsQDNifGmF29AcBtITyGOyan47gXXFfW2g/q+yi+VeptJhVgR1KRHp4HZI+bzknQlhYcvpQZuHRF8xmnCDyLL8MZEI9o4YkW3h1VB+o73DJp3to08l7xsw9Lng5i1EiSSV/Pcbdwzfk8MLcNqjIyye1STnHD5joln7lYcGWtXaP8gYsFfeJyHvR9waExt3wKsV74L3Brn/geu3OUDqiL1T7nNoEK8mLi9RUoZYqlsv4pqtf459/oeR8seozS7mDHCwAAAABJRU5ErkJggg%3D%3D); -@badge-attention-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAEbSURBVDhPtZI9bsJAEIVZ7ANQ5gApEomChjoNBUUOkSJFivSUQE3JEThCCo4BkotcIVKKNEi2vP7hveVZrMFgKPJJo915szOzf51/Jc/zhbV2Jfc+kiR5QrLNsqzEMJJ8O0hcM1kWlWUZKtQOOo69ZGdpmn4ofB12QsI3k1BoRtP8F7Gell0GnT6rrpJ4HOfzUiU1ww7o9HepAGI2juNHyeegw7Ja3FRA9iW5jv9slSl0WqD2rEYjF7Hy68E7gCPNORpjpk44sg2CYAg969JTxVoywYIXmlyfAS77jRPDZ8PZN5j3KfiEYeh2yG07wQN5P4g/d9H9Hf5ZMkHM/QO5NbCzh6IoJgbVI/iNBdrALnY8An9X+w9rpLPbA/sADga+JgSiAAAAAElFTkSuQmCC); -@badge-available-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAIGNIUk0AAHolAACAgwAA+f8AAIDoAABSCAABFVgAADqXAAAXb9daH5AAAAKvSURBVHjahJA/bJR1HMY/31977x33r2LuClc1LYM9TSAUr5gqtkVJjAkSFxYHE3VgaWRw0cUwOagxMZLApoXFBIwuHVSoQYkVMBXUpqSkMW9jaS25plh7/3rv+3scTIwixs/8PHn+2Bk/SVtN2mqxacYOKw13KfNiXtlneihmDONXqs0VVs/VXP1UqJvnc8qBeZoWYWf9JHXVqWkj2EX55G76X86R4W40aDHNzMdzLBwJLLEWm6fTI+o0knvZ+dkgO/cDfGczTNpl5gjxePrpY0SPMKwKT1A5nCe7Y4ofDgQEv/Ghn2AqunZabUmR9Fb8gQoaUVIVFTSiokaV0qDu0T694Y+rGbWktnQ5+nHiuP+IjrFjR4cqevj9wBK8beO87t6jiyzbKJAiIEWSreQxjAm7QGyeAwzRzb39i/7WFbdV2bGs0nxvs7zjxtlOgRwZPP6v7R5PmhQPUOKEneFLd4UECfqs51WXU/opDL6wb/mdDfJkEfrXgUKk2UKbiM/5BoD76d7reujOANwgJH9H8p14PDnSzBGySZsSReecDIAIDxj/jxH/LcQtW7UJ0E8f69RwuP+0Ohwb1CnTS0CCW6zK3Wb9a4AnNcgWktRoYHdpYhgtWvypfRSARVv5yVXd2smGWuzTHo7qeRZZpk7zH00cRos2ITd5yT/HQY0gPKGW3u0YPvZ06HB77tO2hx5jN5HFTNk11lgHRIs2VW5Tp8kRf5g3eYUUSa5y/eKsfn7NTvlPaCjqelwDF3bx4ADAeXeJc1xijpCYmDJ9jKrCIe0H4IaF81/56VGDJTvtPwV1IFmhTO/4AOWDSQIAWmwiRIokADEx08xeXGD5hUjxQp0GnQCdOAKS1RnNP7tO7VDOMmO9bB8qUQRghVVCW7raUOPEvH45W7IidRoA/DEAmmk0pL+n6f4AAAAASUVORK5CYII%3D); -@badge-away-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAIGNIUk0AAHolAACAgwAA+f8AAIDoAABSCAABFVgAADqXAAAXb9daH5AAAAJ2SURBVHjajJI7iFVnFIW//d9zz52ZO2fG14gzJBgbp5JYKPh+NqKxsxWMRZoBCxu1sAuBKFaClj5KDUQhRXybCIqICjqNYjFDhtExN45e7/uc8y+L/yJGp3A1+2fDWv/ea23zlQvIp0gpRgfrWbZRNrhP0cAOopEyGGSvWmQz15zq59SeuC5LsAis0MJ85SLKG8jXY3pXnKb8/X6iBAB8KLhuzZtQf/gbrWc/WTGetSgnAg9qlCiv/pNk1RYAqz3A6jeg/SyoxMtReRNKNsLAhj24gWW0726H+B3+9Rmyd3fPp5KyXMpf/SqNL5KelEIdH5Ke9Ejj8+SnjyrLWkolZbX7f/jZk5h/e3WN7197j0I/NnMMN3MYoiXgBv6/g+rQmUJDR/Ajv4BP0eylnU5u/pgK/Vj9Ee6/411y8gm5a4b1Qfwt9uYUrnoTXBGLvzvoFCXbDLDaVcjfd38WX0JBRCnUroRW/M1qRzRSxgPt55+NPRc8FJJgbtaB4rBz+phRxtcj//hylr5s4YDScvDVT0KfCw7yGpRGIYohfS2H3v4NoL6tYL3BbWwOsoHawY3y1tDJpp46p8pp5U2UrEcLD0BnCtT4bBIXyJ0J/Pwf0eAu8ELtiROO5uQtazy9LMAvPoKGDoU00n/CSr4K2RTkFfyCMRj+OWg2Ht9RNv27+X/PId8cVN+62/SvWAngqtehdq17yjmURlHfZjRvdxi98fyFr/21GWfT5ivnkQehRfSOnqV35S4KpW4w7ZB/1NNNMYf6wzukk3ulbBI1iIJkBBZX1Bn/gby621wyRrx0DcXhQGzPYOnEY/nmKbVeXLTicNcn+DAArZ4503S5ZjkAAAAASUVORK5CYII%3D); -@badge-busy-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAIGNIUk0AAHolAACAgwAA+f8AAIDoAABSCAABFVgAADqXAAAXb9daH5AAAAKNSURBVHjajJI9a1RBGIWfGeLdmPXuKkR0Q0RTmFsFUxgQNcaPRonpbAW1sAlY2IhFfoCIVSDaaVImFhYWmkTxAwJBVgttNqTYQFAjAWPi7t3svXeOxeC3hQdeZpiZ887DmTFuchIlCUoSTLOJ6erqV7F4QYXCaTo68hgDHz82WFmZsbXauKrVWYUhBjCNBsZNTaF6HdVqAT09tzlw4BJhyD8Vx1Au36dSuWyC4LPJMlpwDur1HH19jzh48DiAefUK8+QJVCrgHHR3o2PHUH8/HD16jkKhi7m5UwTBF9zdu6RzcxOJpFRSduOG1N4u5XJ+3LlTam2Vtm+XGxlR2mgokZTOzz90o6PgpqcPpRsbP83GSKWSFEXS/v2+okjq7JRA7vp1pZLSZlPJ5OQZqx07hrVtG+b1a+zNm7B7N4ShR/8u56CtDfbswYyNYZ8+hS1bMPv2XbUKw5MGMNPTsLEBhQJIfwco+SZJAo8f+7XOzj5LR0cegIUFb/715j/lnKerVKDZhFLJWlnrN9OU/1aW/Zha8+FDA4Dublhfh+8N/yVr4etXiCIIAvj0SZa1tRcAOnECtm6FWg2M+dtsDGxu8uMsYJaX31q7unpbcYyOHEFXrsDyMtTrv5NY683VKu7iRTQ4CBKqVm/h7twhnZ9/kEhK41ju2jWpWJTa2qRdu3zl81I+r2x4WNnamv8H5fKLZHQU48bHURwXdfjwM3p6egHs7CzMzPi0swyiCA0MoKEhj76wsOiePx/AmPfGTUwgQFI7UXSP3t5BcjmPvrnp37+19Wf65fJLlpbOK02XqNdpAaClBYJgVe/enWV9fciE4TB79x6iVPLGlRVMtfpGcTymxcUpUyr5nIBvAwDWIWcndiwtQAAAAABJRU5ErkJggg%3D%3D); -@badge-error-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAFiSURBVDhPjVM7TsNQELRjy8ISBQeIREtBEYnQUXCINFTkCCBxgNwAJI5AaejSpaCAEqRINBTcIQ1SbD9/mHmfZP3iSIw0ytt9O7O7thMGHpqmGVZVNQnD8AwcMde27RL8rOt6nqbpjy7sA4RTpdQKv20fcbcuy/IOZrGVbIHLpz7RHr52TJCYukuMeU+6WDBjdxej4UyLubMbm0KdBDyTzHWEyY01UEVRnA4Q8IEdaZVAFEW3yD/g+IzzFc6VuTFAHAPXO7vLKQi5q+suuOD+X15yx4ToEXON1QB3B6ZkC3Qd+q8Kaxzbo0TMCTLPefPAfPS8nTeOtnk1YEfMsf11pIm+y/P8BLusmaCZrevsLE1QO3F51FzopJyCQil2pAnFoLLxI7X6z8SxkVjgeMn4H/jGQz3Ht/BrY2MC85nrsI/sjNpDKzMTSODzHPELQ9EY1H9ndFqCHxC/JEnyrgs1guAPTvwreuY0IiIAAAAASUVORK5CYII%3D); -@badge-newMessage-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAC/SURBVDhP1ZE9DgIhFIQhobDYg1haWniMbSw9j0exsfMAeg9L7Sy2kPATnCFI2LgYtjJOMjx4vPkoED+X5OK934cQ+thpFOYvSqmdMMascVDOuQMcGn1GptNaL4W1dgBkMwOSw8jeBJszIKMwexFAN0A+wnQG0Lh4wv0EJIb5AO4fRX8MoDFAlZAyPJSztOSSfiYLAYeyxTcdURcIrqSUJ7iLA4UmAdQbgnqvhakqgEoQXQtTXwEtIuCa9n8pIV67VJf6AmhGmgAAAABJRU5ErkJggg%3D%3D); -@badge-paused-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAArSURBVDhPY/j9+7fDnz9//mPBCQxQgE8NE1QN2WDUgFEDQGDUgIE3gIEBAArtNKc4HT7sAAAAAElFTkSuQmCC); -@badge-playing-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAEXSURBVDhPY4CBnz9/pvz+/dsFyiUaMEFpBiYmJhkgtf3v37/t////Z4GIEgZwA0CAkZGRBai5AmjIYSCtABXGC1AMQAIWf/78OQ/EEVA+ToDLAJBrBIDUcqBrZgNdwwMRxQQ4DYABoOYUoCGngYFsABVCAQQNgAINYCAf//XrVwGUDwfEGgDyEgfQkH5guGwGukoEKky8AUhA5sePH6DwAQOSDAC6YgIzM7MpJyfnHagQcQYAnfwGiD2BmguBhvyBCoMBMQbsYWFh0WVlZd0B5aMAnAYAbfzz79+/SqBmV6CtL6DCGACXAQ+ABliysbF1QPk4AYYBQI0rgH7VBWo+AxXCC+AGADV+AVKJQL9GAp0MYhMBGBgA8v5j1f90TA8AAAAASUVORK5CYII%3D); -@badge-unavailable-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAIGNIUk0AAHolAACAgwAA+f8AAIDoAABSCAABFVgAADqXAAAXb9daH5AAAAKASURBVHjalJK9axxXFMV/772ZzOysVqvRDgtaSSwpJYFwY3ATEpIm5KNLawgp3Ljz/5E2bu20CYQUBoMNNnaRMkUKqYiQtIgdCQ0TaVc7M29n3nspzC7GMYYcuMWFe7jnHI4YjUY453DOYYyh0+l8opT63vO8L8MwbAshqKqq0lo/c849rqrquXMOIcSbGY1GWGsxxny0urr6MI7jH5RSAFhrAZBSLvc8z3+dTqf3lFL/SCnxAIwxwdra2tP19fXPAC4vL8myjKIoAIiiiF6vR7/fJ0mS75RSH19dXX0hpbwWx8fHrKys/JwkyV1rLYeHh5yenuKc420lzjm2trbY3d3F8zzyPH8ynU6/ERcXF3fiOP7D930ODg44OjoiDMOl7AWstZRlyXA4ZH9/H2MM4/H4K+l53n3f98myjJOTE4Ig+A95kUMURZydnXF+fo5SiiiKHkjf9z9f+AaWst+HRfKL2yiKbssgCNrOOWaz2Xs/vwulFLPZjLquCcPwDcM5x//B2/dyPp9XC3/WWoQQHyQbY2i32/i+T1VVTtZ1/QogSZJlGz/02VpLkiQAlGX5l2ya5mHTNPT7fba3tynLctnAd8llWTIYDNjY2MBaS1EUP0qt9YvJZPI7wM7ODsPhEK01WmuapqFpGrTWVFXFYDBgb28PIQTX19ev67r+TYzHY7TW3W63+zKO41sAaZqSZRk3NzcAtNtter0em5ubAEwmk7/zPP9USjkWaZoyn89xziWdTudRt9v9etGFuq4B8H1/aSXP89dFUdx1zp065xBpmlLXNUIIjDG0Wq1vPc+7H4bhnVarhRCCsiwpiuJPY8xPRVH8EgQBxhistfw7ABpxTL93U9x/AAAAAElFTkSuQmCC); - - -@tileSmall: 150px; -@tileLarge: 310px; -@tileMargin: 5px; -@tileDouble: @tileSmall * 2 + @tileMargin * 2; -@tileTriple: @tileSmall * 3 + @tileMargin * 4; -@tileQuadro: @tileSmall * 4 + @tileMargin * 6; - - -.tile-group { - margin: 0; - margin-right: @unit * 4; - float: left; - width: auto; - height: auto; - min-height: 1px; - width: 802px; -} - -.tile { - display: block; - float: left; - background-color: @grayDark; - width: @tileSmall; - height: @tileSmall; - cursor: pointer; - box-shadow: inset 0px 0px 1px #FFFFCC; - text-decoration: none; - color: @white; - .no-overflow; - .pos-rel; - #font > .normal; - margin: 0 10px 10px 0; - overflow: hidden; - - - * { - color: @white; - } - - .tile-content { - width: 100%; - height: 100%; - padding: 0; - padding-bottom: 30px; - vertical-align: top; - padding: 10px 15px; - overflow: hidden; - text-overflow: ellipsis; - position: relative; - - .tertiary-text; - color: @white; - line-height: 16px; - - &:hover { - color: @white; - } - - h1,h2,h3,h4,h5,h6,p { - padding: 0; - margin: 0; - line-height: 24px; - - &:hover { - color: @white; - } - } - - p { - .tertiary-text; - color: @white; - line-height: 16px; - overflow: hidden; - text-overflow: ellipsis; - &:hover { - color: @white; - } - } - } - - &.icon { - & > .tile-content { - padding: 0; - - & > img { - position: absolute; - width: 64px; - height: 64px; - top: 50%; - left: 50%; - margin-left: -32px; - margin-top: -32px; - } - } - } - - &.image, &.image-slider { - & > .tile-content { - padding: 0; - - & > img { - width: 100%; - height : auto; - min-height: 100%; - max-width: 100%; - } - } - } - - &.image-set { - & > .tile-content { - margin: 0; - padding: 0; - width: 25% !important; - height: 50%; - float: left; - border: 1px #1e1e1e solid; - - & > img { - min-width: 100%; - width: 100%; - height : auto; - min-height: 100%; - } - } - - .tile-content:first-child { - width: 50% !important; - float: left; - height: 100%; - } - } - - &.double { - width: @tileDouble; - } - &.triple { - width: @tileTriple; - } - &.quadro { - width: @tileQuadro; - } - &.double-vertical { - height: @tileDouble; - } - &.triple-vertical { - height: @tileTriple; - } - &.quadro-vertical { - height: @tileQuadro; - } - - - .brand, .tile-status { - .pos-abs; - bottom: 0; - left: 0; - right: 0; - min-height: 30px; - background-color: transparent; - .clearfix; - - & > .badge { - .bottom-right; - right: 5px; - margin-bottom: 0; - color: @white; - width: 34px; - height: 28px; - text-align: center; - #font > .small-subheader; - padding-top: 3px; - - &.activity { - background: @blue @badge-activity-image 50% no-repeat; - } - &.alert { - background: @blue @badge-alert-image 50% no-repeat; - } - &.available { - background: @blue @badge-available-image 50% no-repeat; - } - &.unavailable { - background: @blue @badge-unavailable-image 50% no-repeat; - } - &.away { - background: @blue @badge-away-image 50% no-repeat; - } - &.busy { - background: @blue @badge-busy-image 50% no-repeat; - } - &.newMessage { - background: @blue @badge-newMessage-image 50% no-repeat; - } - &.paused { - background: @blue @badge-paused-image 50% no-repeat; - } - &.playing { - background: @blue @badge-playing-image 50% no-repeat; - } - &.error { - background: @blue @badge-error-image 50% no-repeat; - } - &.attention { - background: @blue @badge-attention-image 50% no-repeat; - } - } - - & > .name { - .bottom-left; - margin-bottom: 5px; - margin-left: 15px; - #font > .tertiary; - - color: @white; - &:hover { - color: @white; - } - - & > [class*=icon-] { - font-size: 24px; - } - - } - - & > .icon { - margin: 5px 15px; - width: 32px; - height: 32px; - - & > [class*=icon-] { - font-size: 32px; - } - - & > img { - width: 100%; - height: 100%; - } - } - - & > .text { - .pos-abs; - left: 60px; - top: 5px; - right: 50px; - .tertiary-text; - color: @white; - line-height: 14px; - - &:hover { - color: @white; - } - } - } - - &:hover { - outline: 3px #3a3a3a solid; - } -} - -.tiles { - &.scale {} +/* + * Metro UI CSS + * Copyright 2012 Sergey Pimenov + * Licensed under the MIT Lilcense + * + * Tiles.less + * + */ + +@badge-activity-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGMSURBVDhPvZMtTwNBEIbv2mtScaICcQJRgSgJCQIEhqSiAlEHAlFRwU/ov0AgUEgUsrIkiJIgMOAQJFSQQAIJJBWIu95Hj2eGvXIpB3W8yWTn452Z3dld25pDmqZuFEWdcrm8jr6JK7Bt+wb9Ft85+vsXswBxHHdIfmFNi4TYG7InXAp6ss52kCTJIc6e6KzSVbrdYzrYDaSFXZU4uEQ8x3FW1ZpMJge5Tn3IdQ3kID5iw4zHTqIsUEP3TWCA7WhgDjRZg/eUFRCR3Fl3KYJjyfALIUU46jHcsSlQl8FdmQJnhrcQJFbJ6QZB0LDDMNyS4XBFo1Kp9Gw4/wi247GLHmvNuBaC47Y5gtzIQB1mBmMGdDSdTpfV+QdM8vfcsqkap6ClgQIQa+a4bXViPGRO5ILjuBqYAwk7yIfhXcNz9CljDFkkST6P4JGjnHA7d+gBxAY3tIve1Khljbi1beKvakHQp0uhfTrMjvOL9H3fX9FE8OM7yxAhdem4QWHZkSufSoTYaaVSkY9kYFmfXgyTciI3uacAAAAASUVORK5CYII%3D); +@badge-alert-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAFeSURBVDhPpZMtT8RAEIbb7YoTJ04gkQgQuBNIEpB4LD8AwQ9AkCCQhGAvQSAuKHCIE0gEP+DEISAhQYK4pE0/eWa65a7lSvh4k8nsvDv77sxs67UhSZLNNE0LZ3uO/gLj/J+hAkVRWI1+geqMCuR5fkKZoyiKViX+DuQu094wy7KhEmEYrkAk0qt4Nk5R77GszQCuE8fxIXxY8ZJjgiBY8n3/UcTwlsQDNifGmF29AcBtITyGOyan47gXXFfW2g/q+yi+VeptJhVgR1KRHp4HZI+bzknQlhYcvpQZuHRF8xmnCDyLL8MZEI9o4YkW3h1VB+o73DJp3to08l7xsw9Lng5i1EiSSV/Pcbdwzfk8MLcNqjIyye1STnHD5joln7lYcGWtXaP8gYsFfeJyHvR9waExt3wKsV74L3Brn/geu3OUDqiL1T7nNoEK8mLi9RUoZYqlsv4pqtf459/oeR8seozS7mDHCwAAAABJRU5ErkJggg%3D%3D); +@badge-attention-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAEbSURBVDhPtZI9bsJAEIVZ7ANQ5gApEomChjoNBUUOkSJFivSUQE3JEThCCo4BkotcIVKKNEi2vP7hveVZrMFgKPJJo915szOzf51/Jc/zhbV2Jfc+kiR5QrLNsqzEMJJ8O0hcM1kWlWUZKtQOOo69ZGdpmn4ofB12QsI3k1BoRtP8F7Gell0GnT6rrpJ4HOfzUiU1ww7o9HepAGI2juNHyeegw7Ja3FRA9iW5jv9slSl0WqD2rEYjF7Hy68E7gCPNORpjpk44sg2CYAg969JTxVoywYIXmlyfAS77jRPDZ8PZN5j3KfiEYeh2yG07wQN5P4g/d9H9Hf5ZMkHM/QO5NbCzh6IoJgbVI/iNBdrALnY8An9X+w9rpLPbA/sADga+JgSiAAAAAElFTkSuQmCC); +@badge-available-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAIGNIUk0AAHolAACAgwAA+f8AAIDoAABSCAABFVgAADqXAAAXb9daH5AAAAKvSURBVHjahJA/bJR1HMY/31977x33r2LuClc1LYM9TSAUr5gqtkVJjAkSFxYHE3VgaWRw0cUwOagxMZLApoXFBIwuHVSoQYkVMBXUpqSkMW9jaS25plh7/3rv+3scTIwixs/8PHn+2Bk/SVtN2mqxacYOKw13KfNiXtlneihmDONXqs0VVs/VXP1UqJvnc8qBeZoWYWf9JHXVqWkj2EX55G76X86R4W40aDHNzMdzLBwJLLEWm6fTI+o0knvZ+dkgO/cDfGczTNpl5gjxePrpY0SPMKwKT1A5nCe7Y4ofDgQEv/Ghn2AqunZabUmR9Fb8gQoaUVIVFTSiokaV0qDu0T694Y+rGbWktnQ5+nHiuP+IjrFjR4cqevj9wBK8beO87t6jiyzbKJAiIEWSreQxjAm7QGyeAwzRzb39i/7WFbdV2bGs0nxvs7zjxtlOgRwZPP6v7R5PmhQPUOKEneFLd4UECfqs51WXU/opDL6wb/mdDfJkEfrXgUKk2UKbiM/5BoD76d7reujOANwgJH9H8p14PDnSzBGySZsSReecDIAIDxj/jxH/LcQtW7UJ0E8f69RwuP+0Ohwb1CnTS0CCW6zK3Wb9a4AnNcgWktRoYHdpYhgtWvypfRSARVv5yVXd2smGWuzTHo7qeRZZpk7zH00cRos2ITd5yT/HQY0gPKGW3u0YPvZ06HB77tO2hx5jN5HFTNk11lgHRIs2VW5Tp8kRf5g3eYUUSa5y/eKsfn7NTvlPaCjqelwDF3bx4ADAeXeJc1xijpCYmDJ9jKrCIe0H4IaF81/56VGDJTvtPwV1IFmhTO/4AOWDSQIAWmwiRIokADEx08xeXGD5hUjxQp0GnQCdOAKS1RnNP7tO7VDOMmO9bB8qUQRghVVCW7raUOPEvH45W7IidRoA/DEAmmk0pL+n6f4AAAAASUVORK5CYII%3D); +@badge-away-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAIGNIUk0AAHolAACAgwAA+f8AAIDoAABSCAABFVgAADqXAAAXb9daH5AAAAJ2SURBVHjajJI7iFVnFIW//d9zz52ZO2fG14gzJBgbp5JYKPh+NqKxsxWMRZoBCxu1sAuBKFaClj5KDUQhRXybCIqICjqNYjFDhtExN45e7/uc8y+L/yJGp3A1+2fDWv/ea23zlQvIp0gpRgfrWbZRNrhP0cAOopEyGGSvWmQz15zq59SeuC5LsAis0MJ85SLKG8jXY3pXnKb8/X6iBAB8KLhuzZtQf/gbrWc/WTGetSgnAg9qlCiv/pNk1RYAqz3A6jeg/SyoxMtReRNKNsLAhj24gWW0726H+B3+9Rmyd3fPp5KyXMpf/SqNL5KelEIdH5Ke9Ejj8+SnjyrLWkolZbX7f/jZk5h/e3WN7197j0I/NnMMN3MYoiXgBv6/g+rQmUJDR/Ajv4BP0eylnU5u/pgK/Vj9Ee6/411y8gm5a4b1Qfwt9uYUrnoTXBGLvzvoFCXbDLDaVcjfd38WX0JBRCnUroRW/M1qRzRSxgPt55+NPRc8FJJgbtaB4rBz+phRxtcj//hylr5s4YDScvDVT0KfCw7yGpRGIYohfS2H3v4NoL6tYL3BbWwOsoHawY3y1tDJpp46p8pp5U2UrEcLD0BnCtT4bBIXyJ0J/Pwf0eAu8ELtiROO5uQtazy9LMAvPoKGDoU00n/CSr4K2RTkFfyCMRj+OWg2Ht9RNv27+X/PId8cVN+62/SvWAngqtehdq17yjmURlHfZjRvdxi98fyFr/21GWfT5ivnkQehRfSOnqV35S4KpW4w7ZB/1NNNMYf6wzukk3ulbBI1iIJkBBZX1Bn/gby621wyRrx0DcXhQGzPYOnEY/nmKbVeXLTicNcn+DAArZ4503S5ZjkAAAAASUVORK5CYII%3D); +@badge-busy-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAIGNIUk0AAHolAACAgwAA+f8AAIDoAABSCAABFVgAADqXAAAXb9daH5AAAAKNSURBVHjajJI9a1RBGIWfGeLdmPXuKkR0Q0RTmFsFUxgQNcaPRonpbAW1sAlY2IhFfoCIVSDaaVImFhYWmkTxAwJBVgttNqTYQFAjAWPi7t3svXeOxeC3hQdeZpiZ887DmTFuchIlCUoSTLOJ6erqV7F4QYXCaTo68hgDHz82WFmZsbXauKrVWYUhBjCNBsZNTaF6HdVqAT09tzlw4BJhyD8Vx1Au36dSuWyC4LPJMlpwDur1HH19jzh48DiAefUK8+QJVCrgHHR3o2PHUH8/HD16jkKhi7m5UwTBF9zdu6RzcxOJpFRSduOG1N4u5XJ+3LlTam2Vtm+XGxlR2mgokZTOzz90o6PgpqcPpRsbP83GSKWSFEXS/v2+okjq7JRA7vp1pZLSZlPJ5OQZqx07hrVtG+b1a+zNm7B7N4ShR/8u56CtDfbswYyNYZ8+hS1bMPv2XbUKw5MGMNPTsLEBhQJIfwco+SZJAo8f+7XOzj5LR0cegIUFb/715j/lnKerVKDZhFLJWlnrN9OU/1aW/Zha8+FDA4Dublhfh+8N/yVr4etXiCIIAvj0SZa1tRcAOnECtm6FWg2M+dtsDGxu8uMsYJaX31q7unpbcYyOHEFXrsDyMtTrv5NY683VKu7iRTQ4CBKqVm/h7twhnZ9/kEhK41ju2jWpWJTa2qRdu3zl81I+r2x4WNnamv8H5fKLZHQU48bHURwXdfjwM3p6egHs7CzMzPi0swyiCA0MoKEhj76wsOiePx/AmPfGTUwgQFI7UXSP3t5BcjmPvrnp37+19Wf65fJLlpbOK02XqNdpAaClBYJgVe/enWV9fciE4TB79x6iVPLGlRVMtfpGcTymxcUpUyr5nIBvAwDWIWcndiwtQAAAAABJRU5ErkJggg%3D%3D); +@badge-error-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAFiSURBVDhPjVM7TsNQELRjy8ISBQeIREtBEYnQUXCINFTkCCBxgNwAJI5AaejSpaCAEqRINBTcIQ1SbD9/mHmfZP3iSIw0ytt9O7O7thMGHpqmGVZVNQnD8AwcMde27RL8rOt6nqbpjy7sA4RTpdQKv20fcbcuy/IOZrGVbIHLpz7RHr52TJCYukuMeU+6WDBjdxej4UyLubMbm0KdBDyTzHWEyY01UEVRnA4Q8IEdaZVAFEW3yD/g+IzzFc6VuTFAHAPXO7vLKQi5q+suuOD+X15yx4ToEXON1QB3B6ZkC3Qd+q8Kaxzbo0TMCTLPefPAfPS8nTeOtnk1YEfMsf11pIm+y/P8BLusmaCZrevsLE1QO3F51FzopJyCQil2pAnFoLLxI7X6z8SxkVjgeMn4H/jGQz3Ht/BrY2MC85nrsI/sjNpDKzMTSODzHPELQ9EY1H9ndFqCHxC/JEnyrgs1guAPTvwreuY0IiIAAAAASUVORK5CYII%3D); +@badge-newMessage-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAC/SURBVDhP1ZE9DgIhFIQhobDYg1haWniMbSw9j0exsfMAeg9L7Sy2kPATnCFI2LgYtjJOMjx4vPkoED+X5OK934cQ+thpFOYvSqmdMMascVDOuQMcGn1GptNaL4W1dgBkMwOSw8jeBJszIKMwexFAN0A+wnQG0Lh4wv0EJIb5AO4fRX8MoDFAlZAyPJSztOSSfiYLAYeyxTcdURcIrqSUJ7iLA4UmAdQbgnqvhakqgEoQXQtTXwEtIuCa9n8pIV67VJf6AmhGmgAAAABJRU5ErkJggg%3D%3D); +@badge-paused-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAArSURBVDhPY/j9+7fDnz9//mPBCQxQgE8NE1QN2WDUgFEDQGDUgIE3gIEBAArtNKc4HT7sAAAAAElFTkSuQmCC); +@badge-playing-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAEXSURBVDhPY4CBnz9/pvz+/dsFyiUaMEFpBiYmJhkgtf3v37/t////Z4GIEgZwA0CAkZGRBai5AmjIYSCtABXGC1AMQAIWf/78OQ/EEVA+ToDLAJBrBIDUcqBrZgNdwwMRxQQ4DYABoOYUoCGngYFsABVCAQQNgAINYCAf//XrVwGUDwfEGgDyEgfQkH5guGwGukoEKky8AUhA5sePH6DwAQOSDAC6YgIzM7MpJyfnHagQcQYAnfwGiD2BmguBhvyBCoMBMQbsYWFh0WVlZd0B5aMAnAYAbfzz79+/SqBmV6CtL6DCGACXAQ+ABliysbF1QPk4AYYBQI0rgH7VBWo+AxXCC+AGADV+AVKJQL9GAp0MYhMBGBgA8v5j1f90TA8AAAAASUVORK5CYII%3D); +@badge-unavailable-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAIGNIUk0AAHolAACAgwAA+f8AAIDoAABSCAABFVgAADqXAAAXb9daH5AAAAKASURBVHjalJK9axxXFMV/772ZzOysVqvRDgtaSSwpJYFwY3ATEpIm5KNLawgp3Ljz/5E2bu20CYQUBoMNNnaRMkUKqYiQtIgdCQ0TaVc7M29n3nspzC7GMYYcuMWFe7jnHI4YjUY453DOYYyh0+l8opT63vO8L8MwbAshqKqq0lo/c849rqrquXMOIcSbGY1GWGsxxny0urr6MI7jH5RSAFhrAZBSLvc8z3+dTqf3lFL/SCnxAIwxwdra2tP19fXPAC4vL8myjKIoAIiiiF6vR7/fJ0mS75RSH19dXX0hpbwWx8fHrKys/JwkyV1rLYeHh5yenuKc420lzjm2trbY3d3F8zzyPH8ynU6/ERcXF3fiOP7D930ODg44OjoiDMOl7AWstZRlyXA4ZH9/H2MM4/H4K+l53n3f98myjJOTE4Ig+A95kUMURZydnXF+fo5SiiiKHkjf9z9f+AaWst+HRfKL2yiKbssgCNrOOWaz2Xs/vwulFLPZjLquCcPwDcM5x//B2/dyPp9XC3/WWoQQHyQbY2i32/i+T1VVTtZ1/QogSZJlGz/02VpLkiQAlGX5l2ya5mHTNPT7fba3tynLctnAd8llWTIYDNjY2MBaS1EUP0qt9YvJZPI7wM7ODsPhEK01WmuapqFpGrTWVFXFYDBgb28PIQTX19ev67r+TYzHY7TW3W63+zKO41sAaZqSZRk3NzcAtNtter0em5ubAEwmk7/zPP9USjkWaZoyn89xziWdTudRt9v9etGFuq4B8H1/aSXP89dFUdx1zp065xBpmlLXNUIIjDG0Wq1vPc+7H4bhnVarhRCCsiwpiuJPY8xPRVH8EgQBxhistfw7ABpxTL93U9x/AAAAAElFTkSuQmCC); + + +@tileSmall: 150px; +@tileLarge: 310px; +@tileMargin: 5px; +@tileDouble: @tileSmall * 2 + @tileMargin * 2; +@tileTriple: @tileSmall * 3 + @tileMargin * 4; +@tileQuadro: @tileSmall * 4 + @tileMargin * 6; + + +.tile-group { + margin: 0; + margin-right: @unit * 4; + float: left; + width: auto; + height: auto; + min-height: 1px; + width: 802px; +} + +.tile { + display: block; + float: left; + background-color: @grayDark; + width: @tileSmall; + height: @tileSmall; + cursor: pointer; + box-shadow: inset 0px 0px 1px #FFFFCC; + text-decoration: none; + color: @white; + .no-overflow; + .pos-rel; + #font > .normal; + margin: 0 10px 10px 0; + overflow: hidden; + + + * { + color: @white; + } + + + .offset1tile {margin-left: @tileSmall + @tileMargin *2;} + .upset1tile {margin-top: -1 * (@tileSmall + @tileMargin *2);} + .offset1tile {margin-left: @tileDouble + @tileMargin *2;} + .upset1tile {margin-top: -1 * (@tileDouble + @tileMargin *2);} + + .tile-content { + width: 100%; + height: 100%; + padding: 0; + padding-bottom: 30px; + vertical-align: top; + padding: 10px 15px; + overflow: hidden; + text-overflow: ellipsis; + position: relative; + + .tertiary-text; + color: @white; + line-height: 16px; + + &:hover { + color: @white; + } + + h1,h2,h3,h4,h5,h6,p { + padding: 0; + margin: 0; + line-height: 24px; + + &:hover { + color: @white; + } + } + + p { + .tertiary-text; + color: @white; + line-height: 16px; + overflow: hidden; + text-overflow: ellipsis; + &:hover { + color: @white; + } + } + } + + &.icon { + & > .tile-content { + padding: 0; + + & > img { + position: absolute; + width: 64px; + height: 64px; + top: 50%; + left: 50%; + margin-left: -32px; + margin-top: -32px; + } + } + } + + &.image, &.image-slider { + & > .tile-content { + padding: 0; + + & > img { + width: 100%; + height : auto; + min-height: 100%; + max-width: 100%; + } + } + } + + &.image-set { + & > .tile-content { + margin: 0; + padding: 0; + width: 25% !important; + height: 50%; + float: left; + border: 1px #1e1e1e solid; + + & > img { + min-width: 100%; + width: 100%; + height : auto; + min-height: 100%; + } + } + + .tile-content:first-child { + width: 50% !important; + float: left; + height: 100%; + } + } + + &.double { + width: @tileDouble; + } + &.triple { + width: @tileTriple; + } + &.quadro { + width: @tileQuadro; + } + &.double-vertical { + height: @tileDouble; + } + &.triple-vertical { + height: @tileTriple; + } + &.quadro-vertical { + height: @tileQuadro; + } + + + .brand, .tile-status { + .pos-abs; + bottom: 0; + left: 0; + right: 0; + min-height: 30px; + background-color: transparent; + .clearfix; + + & > .badge { + .bottom-right; + right: 5px; + margin-bottom: 0; + color: @white; + width: 34px; + height: 28px; + text-align: center; + #font > .small-subheader; + padding-top: 3px; + + &.activity { + background: @blue @badge-activity-image 50% no-repeat; + } + &.alert { + background: @blue @badge-alert-image 50% no-repeat; + } + &.available { + background: @blue @badge-available-image 50% no-repeat; + } + &.unavailable { + background: @blue @badge-unavailable-image 50% no-repeat; + } + &.away { + background: @blue @badge-away-image 50% no-repeat; + } + &.busy { + background: @blue @badge-busy-image 50% no-repeat; + } + &.newMessage { + background: @blue @badge-newMessage-image 50% no-repeat; + } + &.paused { + background: @blue @badge-paused-image 50% no-repeat; + } + &.playing { + background: @blue @badge-playing-image 50% no-repeat; + } + &.error { + background: @blue @badge-error-image 50% no-repeat; + } + &.attention { + background: @blue @badge-attention-image 50% no-repeat; + } + } + + & > .name { + .bottom-left; + margin-bottom: 5px; + margin-left: 15px; + #font > .tertiary; + + color: @white; + &:hover { + color: @white; + } + + & > [class*=icon-] { + font-size: 24px; + } + + } + + & > .icon { + margin: 5px 15px; + width: 32px; + height: 32px; + + & > [class*=icon-] { + font-size: 32px; + } + + & > img { + width: 100%; + height: 100%; + } + } + + & > .text { + .pos-abs; + left: 60px; + top: 5px; + right: 50px; + .tertiary-text; + color: @white; + line-height: 14px; + + &:hover { + color: @white; + } + } + } + + &:hover { + outline: 3px #3a3a3a solid; + } +} + +.tiles { + &.scale {} } \ No newline at end of file diff --git a/my-todo.md b/my-todo.md new file mode 100644 index 000000000..325ca70df --- /dev/null +++ b/my-todo.md @@ -0,0 +1,3 @@ + - new color + - double-vertical tile in the middle of other + - tile-slider : shuffle diff --git a/public/global.php b/public/global.php index 8bc5b3f0d..a0ae446b8 100644 --- a/public/global.php +++ b/public/global.php @@ -1,147 +1,150 @@ - - -
-
-
-

Globalstyles

- -
-
- -
-
-
-
-
-

Requires HTML5 doctype

-

Metro UI CSS makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.

- -
-    <!DOCTYPE html>
-    <html lang="en">
-      ...
-    </html>
-
-
-
-
-
-

Reset Styles

-

- In Metro UI CSS used normalize.css by Nicolas Gallaher -

-
-
-
-
-

Colors

-
    -
  • *-color-green
    • -
  • *-color-greenDark
    • -
  • *-color-greenLight
    • -
  • *-color-pink
    • -
  • *-color-pinkDark
    • -
-
-
-

 

-
    -
  • *-color-yellow
    • -
  • *-color-darken
    • -
  • *-color-purple
    • -
  • *-color-blue
    • -
  • *-color-blueDark
    • -
-
-
-

 

-
    -
  • *-color-blueLight
    • -
  • *-color-orange
    • -
  • *-color-orangeDark
    • -
  • *-color-red
    • -
  • *-color-white
    • -
-
-
-
-
-

To set background color use prefix bg, for set text color use prefix fg

-
-    <div class="bg-color-red">...</div>
-    <span class="fg-color-blue">...</span>
-
-
-
- -
-
-

To set border color use prefix border

-
-
-   -
-
-   -
-
-   -
-
-   -
-
-   -
-
-
-    <div class="border-color-red">...</div>
-
-
-
- -
-
-

To set outline color for components (such as tile, listView item, etc.) use prefix outline

-
-
-   -
-
-   -
-
-   -
-
-   -
-
-
-    <div class="tile outline-color-red">...</div>
-
-
-
- -
-
-

Fonts

-

- In Metro UI CSS i use Segoe UI, Open Sans fonts (depending on the availability in the system). -

-
-
-
- -
-
- -
-
- -
-
-
- - + + +
+
+
+

Globalstyles

+ +
+
+ +
+
+
+
+
+

Requires HTML5 doctype

+

Metro UI CSS makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.

+ +
+    <!DOCTYPE html>
+    <html lang="en">
+      ...
+    </html>
+
+
+
+
+
+

Reset Styles

+

+ In Metro UI CSS used normalize.css by Nicolas Gallaher +

+
+
+
+
+

Colors

+
    +
  • *-color-green
    • +
  • *-color-greenDark
    • +
  • *-color-greenLight
    • +
  • *-color-magenta
    • +
  • *-color-pink
    • +
  • *-color-pinkDark
    • +
+
+
+

 

+
    +
  • *-color-yellow
    • +
  • *-color-darken
    • +
  • *-color-purple
    • +
  • *-color-teal
    • +
  • *-color-blue
    • +
  • *-color-blueDark
    • +
+
+
+

 

+
    +
  • *-color-blueLight
    • +
  • *-color-orange
    • +
  • *-color-orangeDark
    • +
  • *-color-red
    • +
  • *-color-redLight
    • +
  • *-color-white
    • +
+
+
+
+
+

To set background color use prefix bg, for set text color use prefix fg

+
+    <div class="bg-color-red">...</div>
+    <span class="fg-color-blue">...</span>
+
+
+
+ +
+
+

To set border color use prefix border

+
+
+   +
+
+   +
+
+   +
+
+   +
+
+   +
+
+
+    <div class="border-color-red">...</div>
+
+
+
+ +
+
+

To set outline color for components (such as tile, listView item, etc.) use prefix outline

+
+
+   +
+
+   +
+
+   +
+
+   +
+
+
+    <div class="tile outline-color-red">...</div>
+
+
+
+ +
+
+

Fonts

+

+ In Metro UI CSS i use Segoe UI, Open Sans fonts (depending on the availability in the system). +

+
+
+
+ +
+
+ +
+
+ +
+
+
+ + \ No newline at end of file