diff --git a/css/modern-responsive.css b/css/modern-responsive.css
index f69347270..fac0cb1a4 100644
--- a/css/modern-responsive.css
+++ b/css/modern-responsive.css
@@ -128,6 +128,47 @@
.page.secondary .page-region .page-region-content {
padding-left: 0 ;
}
+ .page.fixed-header .page-header {
+ position: relative !important;
+ }
+ .page.fixed-header .page-header .page-header-content .user-login {
+ float: right;
+ margin: 35px 44px 0 0;
+ cursor: pointer;
+ }
+ .page.fixed-header .page-header .page-header-content .user-login .avatar {
+ float: right;
+ border: 1px #ccc solid;
+ width: 40px;
+ height: 40px;
+ }
+ .page.fixed-header .page-header .page-header-content .user-login .avatar img {
+ width: 100%;
+ height: 100%;
+ }
+ .page.fixed-header .page-header .page-header-content .user-login .name {
+ float: left;
+ margin: 0px 10px;
+ text-align: right;
+ }
+ .page.fixed-header .page-header .page-header-content .user-login .name .first-name {
+ font-family: "Segoe UI Light", "Open Sans", sans-serif, sans;
+ font-size: 14pt;
+ display: block;
+ margin: 0;
+ }
+ .page.fixed-header .page-header .page-header-content .user-login .name .last-name {
+ font-family: "Open Sans", sans-serif, sans;
+ font-size: 8pt;
+ display: block;
+ margin: 0;
+ }
+ .page.fixed-header .page-header .page-header-content h1 {
+ left: 0;
+ }
+ .page.fixed-header .page-region {
+ padding-top: 20px;
+ }
.horizontal-menu {
height: auto;
}
@@ -156,8 +197,49 @@
border: 0;
left: 10px;
}
- .popup-menu {
- position: relative;
+ .tile {
+ width: 120px;
+ height: 120px;
+ }
+ .tile.double {
+ width: 250px;
+ }
+ .tile.double .tile-content {
+ width: 250px;
+ }
+ .tile.triple {
+ width: 380px;
+ }
+ .tile.triple .tile-content {
+ width: 380px;
+ }
+ .tile.quadro {
+ width: 510px;
+ }
+ .tile.quadro .tile-content {
+ width: 510px;
+ }
+ .tile.double-vertical {
+ height: 250px;
+ }
+ .tile.double-vertical .tile-content {
+ height: 210px;
+ }
+ .tile.triple-vertical {
+ height: 380px;
+ }
+ .tile.triple-vertical .tile-content {
+ height: 340px;
+ }
+ .tile.quadro-vertical {
+ height: 510px;
+ }
+ .tile.quadro-vertical .tile-content {
+ height: 470px;
+ }
+ .tile-group {
+ max-width: 400px;
+ float: none;
}
table thead tr th {
font-size: 8pt;
diff --git a/css/modern.css b/css/modern.css
index 6b4b9d048..b41980a99 100644
--- a/css/modern.css
+++ b/css/modern.css
@@ -829,7 +829,6 @@ table {
#font .subheader-secondary-smaller {
font-family: 'Segoe UI Light', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
font-weight: 200;
- font-size: 20pt;
letter-spacing: 0.01em;
line-height: 24pt;
font-size: 16pt;
@@ -1279,33 +1278,6 @@ ol.unstyled,
-webkit-column-gap: 20px;
column-gap: 20px;
}
-.header-bar {
- width: 100%;
- min-height: 40px;
- background: #464646;
- z-index: 10000;
-}
-.header-bar .header-bar-inner {
- padding-top: 5px;
- padding-left: 20px;
- padding-bottom: 5px;
- padding-right: 20px;
- color: #fff;
- font-size: 11pt;
- margin: auto;
-}
-.header-bar.fixed-top {
- position: fixed;
- left: 0;
- right: 0;
- top: 0;
-}
-.header-bar.fixed-bottom {
- position: fixed;
- left: 0;
- right: 0;
- bottom: 0;
-}
.page {
position: relative;
height: 100%;
@@ -1341,7 +1313,7 @@ ol.unstyled,
position: absolute;
margin: 0;
padding: 0;
- left: 120px;
+ left: 20px;
bottom: 0;
}
.page .page-header .page-header-content h1 small {
@@ -1413,6 +1385,17 @@ ol.unstyled,
height: 100%;
position: relative;
}
+.page.secondary .page-header .page-header-content h1,
+.page.secondary .page-header .page-header-content h2,
+.page.secondary .page-header .page-header-content h3,
+.page.secondary .page-header .page-header-content h4,
+.page.secondary .page-header .page-header-content h5 {
+ position: absolute;
+ margin: 0;
+ padding: 0;
+ left: 120px;
+ bottom: 0;
+}
.page.secondary .page-region .page-region-content {
padding-left: 120px;
}
@@ -1455,6 +1438,28 @@ ol.unstyled,
min-height: 100px;
background-color: #1d1d1d !important;
}
+.charms {
+ position: absolute;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ height: 100%;
+ min-width: 200px;
+ width: auto;
+}
+.charms.place-left {
+ left: 0;
+ right: auto;
+}
+.message-dialog {
+ position: absolute;
+ left: 0;
+ right: 0;
+ height: auto;
+ min-height: 100px;
+ top: 30%;
+ padding: 10px 10px 0;
+}
.error-bar,
.warning-bar,
.info-bar {
@@ -1482,9 +1487,10 @@ ol.unstyled,
*
* Buttons.less
*/
-.modern-ui-logo {
- height: 24px;
- width: 24px;
+.modern-ui-logo,
+.metro-ui-logo {
+ height: 28px;
+ width: 28px;
display: block;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGESURBVFhH7ZevTsNQFIfbZgKxB9gjIHgABAIcS0CSQIJE4LEIEgQCyQNMIiHhIRAgEAgECWKIySUTCEjLd3t/Cyml3em6DtMvOTn33PM3XdvbBU2SJMmKlssnjuNtZIisa2t50HQNmXAFEvQHsi9X89CzR8M31/wXZwppDpp0aX7v++XBd41q7r5Qg1I0YE8pQYixqbWFpzAMx1pnoPA5vlOZpdDzHdWPoujZGVX4c1iaH8pvhpwJshOpxtxQawM18JYdrlYXdbKIAa4o1pFphrxX8g5qD0CRPsUeZZogfkzeLjJaxAAjZIuit9oqhbgv4veQl+lGFQqfGHwdbqpLH1YMMUdK8WjfysxHlgbHyKfiM7B/obAf5LNiemfQyB1E6VkwBfsGlb9ZvduM+aVFQ3cgDV0S+gHlHrs8LqAC5gEcxLuD6c5pbeVJy9qpNECLCV1aK+lPwO86kD0TF5s2KqD2m7Au7QDtAO0A7QD/PsBcf0zIWWVdfMRmcd+M/vsvRxB8A6+/IU2N93KYAAAAAElFTkSuQmCC);
-webkit-background-size: cover;
@@ -1921,6 +1927,193 @@ table.bordered tbody tr:last-child td {
* Menus.less
*
*/
+.header-bar,
+.navigation-bar {
+ width: 100%;
+ min-height: 40px;
+ background: #464646;
+ z-index: 10000;
+}
+.header-bar .header-bar-inner,
+.navigation-bar .header-bar-inner,
+.header-bar .navigation-bar-inner,
+.navigation-bar .navigation-bar-inner {
+ padding: 5px 20px;
+ color: #fff;
+ font-size: 11pt;
+ margin: auto;
+}
+.header-bar .header-bar-inner > .brand,
+.navigation-bar .header-bar-inner > .brand,
+.header-bar .navigation-bar-inner > .brand,
+.navigation-bar .navigation-bar-inner > .brand {
+ float: left;
+ margin-right: 20px;
+ margin-top: 3px;
+}
+.header-bar .header-bar-inner > .brand .icon,
+.navigation-bar .header-bar-inner > .brand .icon,
+.header-bar .navigation-bar-inner > .brand .icon,
+.navigation-bar .navigation-bar-inner > .brand .icon {
+ width: 24px;
+ height: 24px;
+ float: left;
+ margin-right: 10px;
+ margin-top: 3px;
+}
+.header-bar .header-bar-inner > .brand .name,
+.navigation-bar .header-bar-inner > .brand .name,
+.header-bar .navigation-bar-inner > .brand .name,
+.navigation-bar .navigation-bar-inner > .brand .name {
+ font-family: 'Segoe UI Light', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
+ font-weight: 200;
+ font-size: 20pt;
+ letter-spacing: 0.01em;
+ line-height: 24pt;
+ font-size: 16pt;
+}
+.header-bar .header-bar-inner > ul,
+.navigation-bar .header-bar-inner > ul,
+.header-bar .navigation-bar-inner > ul,
+.navigation-bar .navigation-bar-inner > ul {
+ margin-left: 0;
+ list-style: none;
+ padding-top: 5px;
+}
+.header-bar .header-bar-inner > ul > li,
+.navigation-bar .header-bar-inner > ul > li,
+.header-bar .navigation-bar-inner > ul > li,
+.navigation-bar .navigation-bar-inner > ul > li {
+ display: inline-block;
+ line-height: 32px;
+ position: relative;
+}
+.header-bar .header-bar-inner > ul > li > a,
+.navigation-bar .header-bar-inner > ul > li > a,
+.header-bar .navigation-bar-inner > ul > li > a,
+.navigation-bar .navigation-bar-inner > ul > li > a {
+ color: #fff;
+ font-family: 'Segoe UI', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
+ font-weight: 400;
+ font-size: 11pt;
+ letter-spacing: 0.01em;
+ line-height: 14pt;
+ padding: 5px 10px;
+}
+.header-bar .header-bar-inner > ul > li.active,
+.navigation-bar .header-bar-inner > ul > li.active,
+.header-bar .navigation-bar-inner > ul > li.active,
+.navigation-bar .navigation-bar-inner > ul > li.active,
+.header-bar .header-bar-inner > ul > li:hover,
+.navigation-bar .header-bar-inner > ul > li:hover,
+.header-bar .navigation-bar-inner > ul > li:hover,
+.navigation-bar .navigation-bar-inner > ul > li:hover {
+ background-color: #fff;
+}
+.header-bar .header-bar-inner > ul > li.active a,
+.navigation-bar .header-bar-inner > ul > li.active a,
+.header-bar .navigation-bar-inner > ul > li.active a,
+.navigation-bar .navigation-bar-inner > ul > li.active a,
+.header-bar .header-bar-inner > ul > li:hover a,
+.navigation-bar .header-bar-inner > ul > li:hover a,
+.header-bar .navigation-bar-inner > ul > li:hover a,
+.navigation-bar .navigation-bar-inner > ul > li:hover a {
+ color: #1e1e1e;
+}
+.header-bar .header-bar-inner > ul > li.pull,
+.navigation-bar .header-bar-inner > ul > li.pull,
+.header-bar .navigation-bar-inner > ul > li.pull,
+.navigation-bar .navigation-bar-inner > ul > li.pull {
+ float: right;
+ cursor: pointer;
+ margin-top: 5px;
+ display: none;
+}
+.header-bar .header-bar-inner > ul > li.pull > a,
+.navigation-bar .header-bar-inner > ul > li.pull > a,
+.header-bar .navigation-bar-inner > ul > li.pull > a,
+.navigation-bar .navigation-bar-inner > ul > li.pull > a {
+ display: block;
+ height: 24px;
+ width: 24px;
+ position: relative;
+ background: url(../images/row24.png) no-repeat;
+}
+.header-bar .header-bar-inner > ul > li.pull:hover,
+.navigation-bar .header-bar-inner > ul > li.pull:hover,
+.header-bar .navigation-bar-inner > ul > li.pull:hover,
+.navigation-bar .navigation-bar-inner > ul > li.pull:hover {
+ background: transparent;
+}
+.header-bar.fixed-top,
+.navigation-bar.fixed-top {
+ position: fixed;
+ left: 0;
+ right: 0;
+ top: 0;
+}
+.header-bar.fixed-bottom,
+.navigation-bar.fixed-bottom {
+ position: fixed;
+ left: 0;
+ right: 0;
+ bottom: 0;
+}
+.dropdown-menu {
+ position: absolute;
+ background-color: #fff;
+ margin-left: 0;
+ list-style: none;
+ top: 100%;
+ z-index: 1001;
+ float: left;
+ border: 1px solid rgba(0, 0, 0, 0.2);
+ box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+ min-width: 160px;
+ padding-bottom: 5px;
+ padding-top: 5px;
+ display: none;
+}
+.dropdown-menu.place-right {
+ right: 0;
+ left: auto;
+}
+.dropdown-menu a {
+ font-family: 'Segoe UI', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
+ font-weight: 400;
+ font-size: 11pt;
+ letter-spacing: 0.01em;
+ line-height: 14pt;
+ color: #000000;
+ display: block;
+ width: 100%;
+ padding: 3px 20px;
+ white-space: nowrap;
+ font-size: 14px;
+}
+.dropdown-menu a:hover {
+ color: rgba(0, 0, 0, 0.8);
+}
+.dropdown-menu a:active {
+ color: rgba(0, 0, 0, 0.4);
+}
+.dropdown-menu a:hover {
+ background-color: #2d89ef !important;
+ color: #ffffff !important;
+}
+.dropdown-menu li {
+ display: list-item;
+ line-height: 20px;
+}
+.dropdown-menu .divider {
+ height: 1px;
+ margin: 9px 1px;
+ overflow: hidden;
+ background-color: #e5e5e5;
+}
+.dropdown-menu.open {
+ display: block !important;
+}
.popup-menu {
margin-left: 0;
list-style: none;
@@ -2121,133 +2314,25 @@ table.bordered tbody tr:last-child td {
.horizontal-menu:after {
clear: both;
}
-.page .page-header .page-header-content h1.sub-menu ul {
- margin-left: 0;
- list-style: none;
- position: absolute;
- top: 100%;
- left: -1px;
- z-index: 1;
- background-color: #fff;
- display: none;
- border: 1px #bababa solid;
- display: none;
- border: 1px #ccc solid;
- margin-top: -10px;
-}
-.page .page-header .page-header-content h1.sub-menu ul li {
- float: none;
- display: block;
- border: 1px transparent solid !important;
- min-width: 150px;
-}
-.page .page-header .page-header-content h1.sub-menu ul li a {
- display: block;
- white-space: nowrap;
- float: none;
- height: auto;
- font-family: 'Segoe UI', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
- font-weight: 400;
- font-size: 9pt;
- color: #1e1e1e;
- padding: 5px 10px;
-}
-.page .page-header .page-header-content h1.sub-menu ul li a:hover {
- color: #fff;
-}
-.page .page-header .page-header-content h1.sub-menu ul li:hover {
- background-color: #008287;
-}
-.page .page-header .page-header-content h1.sub-menu ul li.divider {
- height: 1px !important;
- line-height: 1px !important;
- background-color: transparent !important;
- border-top: 1px #bababa solid !important;
+.page .page-header .page-header-content h1[data-role=dropdown] {
+ cursor: pointer;
}
-.page .page-header .page-header-content h1.sub-menu ul li.divider:hover {
- background-color: transparent !important;
+.page .page-header .page-header-content h1[data-role=dropdown] .dropdown-menu {
+ margin-top: -10px;
}
-.page .page-header .page-header-content h1.sub-menu ul li.sub-menu:after {
+.page .page-header .page-header-content h1[data-role=dropdown]:after {
position: absolute;
content: "\3009";
display: inline-block;
font-size: 10pt;
- top: 5px;
- right: 10px;
- -webkit-transform: rotate(0deg);
- -moz-transform: rotate(0deg);
- -ms-transform: rotate(0deg);
- -o-transform: rotate(0deg);
- transform: rotate(0deg);
-}
-.page .page-header .page-header-content h1.sub-menu:hover ul {
- display: block;
-}
-.page .page-header .page-header-content h1.sub-menu ul.open {
- display: block;
-}
-.ribbon {
- position: relative;
-}
-.ribbon ul {
- margin-left: 0;
- list-style: none;
- *zoom: 1;
- position: absolute;
- z-index: 9000;
-}
-.ribbon ul:before,
-.ribbon ul:after {
- display: table;
- content: "";
-}
-.ribbon ul:after {
- clear: both;
-}
-.ribbon ul li {
- float: left;
- display: block;
- text-align: center;
-}
-.ribbon ul li.active {
- border: 1px #ccc solid;
- border-bottom: 0;
- background-color: #fff;
-}
-.ribbon ul li.active span,
-.ribbon ul li.active a {
- color: #2d89ef;
-}
-.ribbon ul li span,
-.ribbon ul li a {
- text-decoration: none;
- text-transform: uppercase;
- display: block;
- float: left;
- padding: 5px 20px;
- color: #1e1e1e;
- font-family: 'Segoe UI', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
- font-weight: 400;
- font-size: 11pt;
- letter-spacing: 0.01em;
- line-height: 14pt;
- cursor: pointer;
-}
-.ribbon .frames {
- margin-top: 30px;
- width: 100%;
- min-height: 50px;
- border: 1px #ccc solid;
-}
-.ribbon .frames .frame {
- width: 100%;
- min-height: 100%;
- height: auto;
- display: none;
- padding: 10px;
-}
-.ribbon .frames .frame.active {
- display: block;
+ left: 100%;
+ top: 20px;
+ margin-left: 5px;
+ -webkit-transform: rotate(90deg);
+ -moz-transform: rotate(90deg);
+ -ms-transform: rotate(90deg);
+ -o-transform: rotate(90deg);
+ transform: rotate(90deg);
}
/*
* Metro UI CSS v 0.1.1
@@ -3454,7 +3539,7 @@ input[type=submit] {
font-size: 20pt;
letter-spacing: 0.01em;
line-height: 24pt;
- font-family: 'PT Serif Caption', Helvetica, sans-serif;
+ font-family: Tahoma, Arial, sans-serif;
line-height: 18pt;
}
.card:hover {
@@ -3462,7 +3547,7 @@ input[type=submit] {
}
.card .suit {
padding: 0;
- font-size: 84px;
+ font-size: 80px;
position: absolute;
right: 5px;
bottom: 30px;
@@ -3598,7 +3683,7 @@ pre {
font-size: 11pt;
letter-spacing: 0.02em;
line-height: 20px;
- font-size: 12pt;
+ font-size: 10pt;
color: #525252;
}
code {
diff --git a/javascript/dropdown.js b/javascript/dropdown.js
new file mode 100644
index 000000000..5b449a355
--- /dev/null
+++ b/javascript/dropdown.js
@@ -0,0 +1,31 @@
+(function($){
+ $.fn.Dropdown = function( options ){
+ var defaults = {
+ };
+
+ var $this = $(this)
+ ;
+
+ var initSelectors = function(selectors){
+ selectors.on('click, mouseenter', function(e){
+ $(this).children(".dropdown-menu").slideToggle('fast');
+ }).on("mouseleave", function(){
+ $(this).children(".dropdown-menu").hide();
+ });
+ }
+
+ return this.each(function(){
+ if ( options ) {
+ $.extend(defaults, options)
+ }
+
+ initSelectors($this);
+ });
+ }
+
+ $(function () {
+ $('[data-role="dropdown"]').each(function () {
+ $(this).Dropdown();
+ })
+ })
+})(window.jQuery);
\ No newline at end of file
diff --git a/less/buttons.less b/less/buttons.less
index e642a66d3..af91eebc3 100644
--- a/less/buttons.less
+++ b/less/buttons.less
@@ -9,9 +9,9 @@
@logo: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGESURBVFhH7ZevTsNQFIfbZgKxB9gjIHgABAIcS0CSQIJE4LEIEgQCyQNMIiHhIRAgEAgECWKIySUTCEjLd3t/Cyml3em6DtMvOTn33PM3XdvbBU2SJMmKlssnjuNtZIisa2t50HQNmXAFEvQHsi9X89CzR8M31/wXZwppDpp0aX7v++XBd41q7r5Qg1I0YE8pQYixqbWFpzAMx1pnoPA5vlOZpdDzHdWPoujZGVX4c1iaH8pvhpwJshOpxtxQawM18JYdrlYXdbKIAa4o1pFphrxX8g5qD0CRPsUeZZogfkzeLjJaxAAjZIuit9oqhbgv4veQl+lGFQqfGHwdbqpLH1YMMUdK8WjfysxHlgbHyKfiM7B/obAf5LNiemfQyB1E6VkwBfsGlb9ZvduM+aVFQ3cgDV0S+gHlHrs8LqAC5gEcxLuD6c5pbeVJy9qpNECLCV1aK+lPwO86kD0TF5s2KqD2m7Au7QDtAO0A7QD/PsBcf0zIWWVdfMRmcd+M/vsvRxB8A6+/IU2N93KYAAAAAElFTkSuQmCC);
@img-back-button: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAbrSURBVGhDzZpPaBRXHMdnZkMJsocchO4hJhYsBAm9GEVxYyJ4ULSQoEIpuQQqeOghpUorIlWsKNQSCx56KQgKFhQSUVBoS02yMYKR9hCk0FCN7mELOaSYSg7ZnX6+b94uyWY3zmw3u/lCMvP+zHvf7+/93m/ee7OuUyV07d69M+d53a7vv+u4brPvOAnH95tNoetm6ChDOu277t9eLpdyGhpSIyMji6b8f6BiAV1dXY3ZbLbbc5zDkN3vQtoWhYLv+7M88yDn+3disdgDxMzbokiILADiDblcrg8GFyGQsNkGCJmiwSnKMrI0WZmgxEnYkUlQZwt1Omy+AWLmKDvned73CFmw2aEQSUAymTwE6Ys81K40HS+SfgipO3Q+TOdpU/EtwAgbMUIP7RykDY1eo/K5n6atc6lU6oapGAKhBNBh3M/lrnPbo7Qh7jg33FjsFKTzVq4ItN3kZ7OnIf5pQYjjpDDI0TBtv1UAHTRjrft5q4Nh1/NE/A+brgrUD0LOQ74PIQ0YKc1k7x159GjSVimJVQWYyOK6QzSYoMEFGj8WZXgrAW66D1K36LOJPudtnz/a4hUoK8CS/4mG4jSU8Xy/d2R8/LEtXlMwGm25bFaGa1MaEf1jY2PXTGERSgowbpPNPjGWJ6rgjwfCTtBqQXMD170LwaRGHwPuLWXAFQJ4MM6DExS0G8vHYttrTT4PwyUwZFs5LryHlkPRxpKX6t56kRfoex7SH8JFL70Ehh1CVIMtNlgmQHGeSxAqmTy18vnVgIhpDHkUEQrdHYj4xBYZFFxIyij8TdYnOTw6NtYblKwP7EkmB3lbD1hXel+jo/zCCEC+z7rOouK8zV434KV5AW5z1pVO2OxgBLB+I5PluQp5zV4bTaX6TWkF2LFjRzPtFPz09evXs8+ePatooVaMzs7OsxD+CiGaGxqFjBkBrSpF3lif5YGpXQE6OjoGsM4r2ntu/7T8qBoI55fgqAmtSGnmqhHAv8O6UvBQqnQfFSLPZTBIGaTevHlzoFrWF+C2wAgM656r4WwEEHH22+sdXaOiFuTzyFmOjERS7wlPSwYsbzYjWhLrGgW1JC+w+flZcwDO2lAd8rQNVIGWDAxRpJdWrckLxo1wdd3jPl2e2SkBfGpK17CoB/kCfD9YyhN4PP4Fe1leEOYaAnUlD+x2VV7T7BJbx7B+ksQplqyXTI1VUExeoZfLFf7+NRlVwNOnT8/a25JgydPnue51+k67ncmkXmCbEVB2zZ1HCcuvCSYnJ7FpeRB4un3P+1X3CqPmrWktuSqo02pv1w3kQlr772QETjICl21+WWzbtm2QEdNIGCBKxyBX+aulC32EC92k74y7p7NziLwemFxmDXQyqLI6EPElIi7apFDTSYzRBzD6IEb/3YN4EPu1kAsJLKTJ/lmQMkhu2LDh/tatW+M2vaZYEvrT3pKQZDbQYcFEU+SpjwjX3WKu2huYg1blEWRYW2w0BSFRDxHaeOH7+3SP8cc9nRKTMauM/BI1Cmotwi79dWa0yNrtnsfaQuebD1TIKBw0tSKiliKI+wFH130M91mznNYRt66o2s8QNek+KmohwriP4xyxScPZCND5POS132zUQavyKoFE0MZ22tpr/87E4/GKDFIKuPhx2m+mXbnPbeXhNQGIrSdIfEPhgt1v1u08qBS0eWHf/icCtG+/wjvLjLYZAQFFVyH/wo7CeZu9bqCTCJGH45xOKGy2E7NXZ2ZmZrG1tfUfRqEHP2tvaWmZePny5V+2uK7o2rWrnZD5AwLeYfJeGB0dNUFHKIyAoNUo5FNUbEDILYYt0sttLQCHRC4WuwsnnZJP4ynL1mvLBAhU0DFemgeadMRdaVSqBhR1cB19K9gMp3kvm9VZ7bJvaCsEUCGjLyN6gAfb/OBAde2XB0UQefq+iScklcYz+kcmJlZse1cIEPRZhweO2WS3jrhpMFh/1AD0peNDbViCmO/7X6dSKRM2i1GYxMVgAk+1tLbO8LC+Iiawxsfvbdr0ZObVqxe2yppAEzbnOL/Q5wcmA/KEzDPmvgQK74FyKPpOpiPuqwpjeo3bKlWB3FShEsKf05cmrL6P9ZezfB5vFSDQuL5UDlHZfKCmcX2Y/o4Jf6l4UkWFfJ22j9PoaRlJebQ/bSZsCZ8vRigBQpmOZmlgWMd9OjELK0ZtaVXJBDyIlY/QnjnasYb5VqEybFuhBeRB5/r4NkBvX9Cx+TAtaMhJP+RmSpsk0pmYPWvKIlii7c8NtlC2j3QhPJOu2DUjC8gDIYoU+rnAYQgkl4oJA5HWkphb/UzhNsQrCg4VC1gKxMTNQSu3kNKn2WYYyup518iQr5/cpEnohyDjkL4X1dor4Tj/AaxI26ezfxeLAAAAAElFTkSuQmCC);
-.modern-ui-logo {
- height: 24px;
- width: 24px;
+.modern-ui-logo, .metro-ui-logo {
+ height: 28px;
+ width: 28px;
display: block;
background-image: @logo;
-webkit-background-size: cover;
diff --git a/less/cards.less b/less/cards.less
index 6b24f977d..6dbd06349 100644
--- a/less/cards.less
+++ b/less/cards.less
@@ -22,7 +22,7 @@
cursor: pointer;
background: #fff;
#font > .subheader-secondary;
- font-family: 'PT Serif Caption', Helvetica, sans-serif;
+ font-family: Tahoma, Arial, sans-serif;
line-height: 18pt;
&:hover {
@@ -33,7 +33,7 @@
}
.suit {
padding: 0;
- font-size: 84px;
+ font-size: 80px;
position: absolute;
right: 5px;
bottom: 30px;
diff --git a/less/code.less b/less/code.less
index 69609a86e..7a8e96a13 100644
--- a/less/code.less
+++ b/less/code.less
@@ -10,7 +10,7 @@
code, pre {
padding: 0 3px 2px;
#font > .normal;
- font-size: 12pt;
+ font-size: 10pt;
color: @grayDark;
}
diff --git a/less/layout.less b/less/layout.less
index bf3422035..2fc621ac7 100644
--- a/less/layout.less
+++ b/less/layout.less
@@ -43,37 +43,6 @@
.columns(5);
}
-.header-bar {
- width: 100%;
- min-height: @unit * 2;
- background: #464646;
- z-index: 10000;
-
- .header-bar-inner {
- padding-top: @subunit;
- padding-left: @subunit * 4;
- padding-bottom: @subunit;
- padding-right: @subunit * 4;
- color: #fff;
- font-size: 11pt;
- margin: auto;
- }
-
- &.fixed-top {
- position: fixed;
- left: 0;
- right: 0;
- top: 0;
- }
-
- &.fixed-bottom {
- position: fixed;
- left: 0;
- right: 0;
- bottom: 0;
- }
-}
-
.page {
position: relative;
height: 100%;
@@ -97,7 +66,7 @@
position: absolute;
margin: 0;
padding: 0;
- left: @unit * 6;
+ left: @unit;
bottom: 0;
}
h1 small {
@@ -177,6 +146,18 @@
}
&.secondary {
+ .page-header {
+ .page-header-content {
+ h1,h2,h3,h4,h5 {
+ position: absolute;
+ margin: 0;
+ padding: 0;
+ left: @unit * 6;
+ bottom: 0;
+ }
+ }
+ }
+
.page-region {
.page-region-content {
padding-left: @unit * 6;
@@ -241,13 +222,34 @@
}
.charms {
+ position: absolute;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ height: 100%;
+ min-width: 200px;
+ width: auto;
+
+ &.place-left {
+ left: 0;
+ right: auto;
+ }
+
&.search {}
&.sharing{}
&.appsets{}
&.apphelp{}
}
-.message-dialog {}
+.message-dialog {
+ position: absolute;
+ left: 0;
+ right: 0;
+ height: auto;
+ min-height: 100px;
+ top: 30%;
+ padding: 10px 10px 0;
+}
.flyouts{}
.error-bar, .warning-bar, .info-bar {
diff --git a/less/menus.less b/less/menus.less
index e8063d161..a5feca9e5 100644
--- a/less/menus.less
+++ b/less/menus.less
@@ -7,6 +7,151 @@
*
*/
+.header-bar, .navigation-bar {
+ width: 100%;
+ min-height: 40px;
+ background: #464646;
+ z-index: 10000;
+
+ .header-bar-inner, .navigation-bar-inner {
+ padding: 5px 20px;
+ color: #fff;
+ font-size: 11pt;
+ margin: auto;
+
+ & > .brand {
+ float: left;
+ margin-right: 20px;
+ margin-top: 3px;
+
+ .icon {
+ width: 24px;
+ height: 24px;
+ float: left;
+ margin-right: 10px;
+ margin-top: 3px;
+ }
+
+ .name {
+ #font > .subheader;
+ font-size: 16pt;
+ }
+ }
+
+ & > ul {
+ .unstyled;
+ padding-top: 5px;
+
+ & > li {
+ display: inline-block;
+ line-height: 32px;
+ position: relative;
+
+ & > a {
+ color: #fff;
+ #font > .navigation;
+ padding: 5px 10px;
+ }
+
+ &.active, &:hover {
+ background-color: #fff;
+
+ a {
+ color: #1e1e1e;
+ }
+ }
+ }
+
+ & > li.pull {
+ float: right;
+ cursor: pointer;
+ margin-top: 5px;
+ display: none;
+
+ & > a {
+ display: block;
+ height: 24px;
+ width: 24px;
+ position: relative;
+ background: url(../images/row24.png) no-repeat;
+ }
+
+ &:hover {
+ background: transparent;
+ }
+ }
+ }
+
+ }
+
+ &.fixed-top {
+ position: fixed;
+ left: 0;
+ right: 0;
+ top: 0;
+ }
+
+ &.fixed-bottom {
+ position: fixed;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ }
+
+}
+
+.dropdown-menu {
+ position: absolute;
+ background-color: #fff;
+ .unstyled;
+ top: 100%;
+ z-index: 1001;
+ float: left;
+ border: 1px solid rgba(0, 0, 0, 0.2);
+ box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+ min-width: 160px;
+ padding-bottom: 5px;
+ padding-top: 5px;
+ display: none;
+
+ &.place-right {
+ right: 0;
+ left: auto;
+ }
+
+ a {
+ #font > .navigation;
+ #state > .navigation;
+ display: block;
+ width: 100%;
+ padding: 3px 20px;
+ white-space: nowrap;
+ font-size: 14px;
+
+ &:hover {
+ .bg-color-blue;
+ .fg-color-white;
+ }
+ }
+
+ li {
+ display: list-item;
+ line-height: 20px;
+ }
+
+ .divider {
+ height: 1px;
+ margin: 9px 1px;
+ overflow: hidden;
+ background-color: #e5e5e5;
+ }
+
+ &.open {
+ display: block !important;
+ }
+}
+
+
.popup-menu {
.unstyled();
position: absolute;
@@ -149,85 +294,22 @@
.page {
.page-header {
.page-header-content {
- h1.sub-menu {
- ul {
- .popup-menu;
- display: none;
- border: 1px #ccc solid;
+ h1[data-role=dropdown] {
+ cursor: pointer;
+ .dropdown-menu {
margin-top: -10px;
}
-
- &:hover {
- ul {
- display: block;
- }
- }
-
- ul.open {
- display: block;
- }
- }
- }
- }
-}
-
-.ribbon {
- position: relative;
-
- ul {
- .unstyled;
- .clearfix;
- position: absolute;
- z-index: 9000;
-
- li:first-child {
- //margin-left: 20px;
- }
-
- li {
- float: left;
- display: block;
- text-align: center;
-
- &.active {
- border: 1px #ccc solid;
- border-bottom: 0;
- background-color: #fff;
-
- span, a {
- color: @blue;
+ &:after {
+ position: absolute;
+ content: "\3009";
+ display: inline-block;
+ font-size: 10pt;
+ left: 100%;
+ top: 20px;
+ margin-left: 5px;
+ .rotate(90deg);
}
}
-
- span, a {
- text-decoration: none;
- text-transform: uppercase;
- display: block;
- float: left;
- padding: 5px 20px;
- color: #1e1e1e;
- #font > .navigation;
- cursor: pointer;
- }
- }
- }
-
- .frames {
- margin-top: 30px;
- width: 100%;
- min-height: 50px;
- border: 1px #ccc solid;
-
- .frame {
- width: 100%;
- min-height: 100%;
- height: auto;
- display: none;
- padding: 10px;
-
- &.active {
- display: block;
- }
}
}
}
diff --git a/less/modern-responsive-max480.less b/less/modern-responsive-max480.less
new file mode 100644
index 000000000..039a35c53
--- /dev/null
+++ b/less/modern-responsive-max480.less
@@ -0,0 +1,196 @@
+/* Landscape phones and down */
+@tileSmall: 120px;
+@tileLarge: 250px;
+@tileMargin: 5px;
+@tileDouble: @tileSmall * 2 + @tileMargin * 2;
+@tileTriple: @tileSmall * 3 + @tileMargin * 4;
+@tileQuadro: @tileSmall * 4 + @tileMargin * 6;
+
+@media (max-width: 480px) {
+
+ .page.secondary {
+ .page-back {
+ width: 24px;
+ height: 24px;
+ left: 0px !important;
+ }
+
+ .page-header .page-header-content {
+ height: 60px;
+ min-height: 50px;
+
+ h1 {
+ left: 40px;
+
+ }
+ }
+ .page-region .page-region-content {
+ padding-left: 0 ;
+ }
+ }
+
+ .page.fixed-header {
+ .page-header {
+ position: relative !important;
+ //display: none !important;
+ .page-header-content {
+ .user-login {
+ float: right;
+ margin: 35px 44px 0 0;
+ cursor: pointer;
+
+ .avatar {
+ float: right;
+ border: 1px #ccc solid;
+ width: 40px;
+ height: 40px;
+ img {
+ width: 100%;
+ height: 100%;
+ }
+ }
+ .name {
+ float: left;
+ margin: 0px 10px;
+ text-align: right;
+
+ .first-name {
+ font-family: "Segoe UI Light", "Open Sans", sans-serif, sans;
+ font-size: 14pt;
+ display: block;
+ margin: 0;
+ }
+ .last-name {
+ font-family: "Open Sans", sans-serif, sans;
+ font-size: 8pt;
+ display: block;
+ margin: 0;
+ }
+ }
+ }
+
+ h1 {
+ left: 0;
+ }
+ }
+ }
+ .page-region {
+ padding-top: 20px;
+ }
+ }
+ .horizontal-menu {
+ height: auto;
+
+ & > ul {
+ width: 100%;
+ display: block;
+ height: auto;
+
+ & > li {
+ width: 100%;
+ float: none;
+ display: block;
+ position: relative;
+ border-bottom: 1px #1e1e1e solid;
+
+ &:last-child {
+ border-bottom: 1px transparent solid;
+ }
+
+ a {
+ width: 100%;
+ float: none;
+ }
+ }
+
+
+ li ul {
+ position: relative;
+ width: 100%;
+ border: 0;
+ left: 10px;
+ //top: -2px;
+ }
+
+ }
+ }
+
+
+ .tile {
+ width: @tileSmall;
+ height: @tileSmall;
+
+ &.double {
+ width: @tileDouble;
+
+ & .tile-content {
+ width: @tileDouble;
+ }
+ }
+ &.triple {
+ width: @tileTriple;
+
+ & .tile-content {
+ width: @tileTriple;
+ }
+ }
+ &.quadro {
+ width: @tileQuadro;
+
+ & .tile-content {
+ width: @tileQuadro;
+ }
+ }
+ &.double-vertical {
+ height: @tileDouble;
+
+ & .tile-content {
+ height: @tileDouble - 40;
+ }
+ }
+ &.triple-vertical {
+ height: @tileTriple;
+
+ & .tile-content {
+ height: @tileTriple - 40;
+ }
+ }
+ &.quadro-vertical {
+ height: @tileQuadro;
+
+ & .tile-content {
+ height: @tileQuadro - 40;
+ }
+ }
+
+ }
+
+ .tile-group {
+ max-width: 400px;
+ float: none;
+ }
+
+ table {
+ thead {
+ tr {
+ th {
+ font-size: 8pt;
+ }
+ }
+ }
+
+ tbody {
+ tr {
+ td {
+ font-size: 9pt;
+ padding: 2px 5px;
+ }
+ }
+ }
+ }
+
+ h1 {font-size: 26pt; line-height: 18px;}
+ h2 {font-size: 16pt; line-height: 16px;}
+ h3 {font-size: 13pt; line-height: 16px;}
+ h3 {font-size: 13pt; line-height: 14px;}
+}
diff --git a/less/modern-responsive-max767.less b/less/modern-responsive-max767.less
new file mode 100644
index 000000000..9361c69be
--- /dev/null
+++ b/less/modern-responsive-max767.less
@@ -0,0 +1,38 @@
+/* Landscape phone to portrait tablet */
+@media (max-width: 767px) {
+ body {
+ padding-right: 10px;
+ padding-left: 10px !important; //TODO найти и уничтожить
+ }
+ [class*="span"], .hero-unit {
+ float: none;
+ display: block;
+ width: 100%;
+ margin-left: 0;
+ margin-right: 0;
+ }
+ [class*="offset"], .hero-unit {
+ margin-left: 0;
+ }
+
+ table {
+ thead {
+ tr {
+ th {
+ font-size: 9pt;
+ }
+ }
+ }
+
+ tbody {
+ tr {
+ td {
+ font-size: 10pt;
+ }
+ }
+ }
+ }
+
+ h1 {font-size: 30pt;}
+ h2 {font-size: 16pt;}
+}
diff --git a/less/modern-responsive-max979.less b/less/modern-responsive-max979.less
new file mode 100644
index 000000000..1997f6421
--- /dev/null
+++ b/less/modern-responsive-max979.less
@@ -0,0 +1,33 @@
+/* Portrait tablet to landscape and desktop */
+@media (min-width: 768px) and (max-width: 979px) {
+ .span1 {width: 42px;}
+ .span2 {width: 104px;}
+ .span3 {width: 166px;}
+ .span4 {width: 228px;}
+ .span5 {width: 290px;}
+ .span6 {width: 352px;}
+ .span7 {width: 414px;}
+ .span8 {width: 476px;}
+ .span9 {width: 538px;}
+ .span10 {width: 600px;}
+ .span11 {width: 662px;}
+ .span12 {width: 724px;}
+
+ .offset1 {margin-left: 62px; }
+ .offset2 {margin-left: 124px;}
+ .offset3 {margin-left: 186px;}
+ .offset4 {margin-left: 248px;}
+ .offset5 {margin-left: 310px;}
+ .offset6 {margin-left: 372px;}
+ .offset7 {margin-left: 434px;}
+ .offset8 {margin-left: 496px;}
+ .offset9 {margin-left: 558px;}
+ .offset10 {margin-left: 620px;}
+ .offset11 {margin-left: 682px;}
+ .offset12 {margin-left: 744px;}
+
+ .hero-unit {
+ .span12;
+ }
+
+}
diff --git a/less/modern-responsive-min1200.less b/less/modern-responsive-min1200.less
new file mode 100644
index 000000000..6bb7e2990
--- /dev/null
+++ b/less/modern-responsive-min1200.less
@@ -0,0 +1,7 @@
+/* Large desktop */
+@media (min-width: 1200px) {
+
+}
+
+
+
diff --git a/less/modern-responsive.less b/less/modern-responsive.less
index c02651b99..7b6e2fffa 100644
--- a/less/modern-responsive.less
+++ b/less/modern-responsive.less
@@ -1,165 +1,4 @@
-/* Large desktop */
-@media (min-width: 1200px) {
-
-}
-
-/* Portrait tablet to landscape and desktop */
-@media (min-width: 768px) and (max-width: 979px) {
- .span1 {width: 42px;}
- .span2 {width: 104px;}
- .span3 {width: 166px;}
- .span4 {width: 228px;}
- .span5 {width: 290px;}
- .span6 {width: 352px;}
- .span7 {width: 414px;}
- .span8 {width: 476px;}
- .span9 {width: 538px;}
- .span10 {width: 600px;}
- .span11 {width: 662px;}
- .span12 {width: 724px;}
-
- .offset1 {margin-left: 62px; }
- .offset2 {margin-left: 124px;}
- .offset3 {margin-left: 186px;}
- .offset4 {margin-left: 248px;}
- .offset5 {margin-left: 310px;}
- .offset6 {margin-left: 372px;}
- .offset7 {margin-left: 434px;}
- .offset8 {margin-left: 496px;}
- .offset9 {margin-left: 558px;}
- .offset10 {margin-left: 620px;}
- .offset11 {margin-left: 682px;}
- .offset12 {margin-left: 744px;}
-
- .hero-unit {
- .span12;
- }
-
-}
-
-/* Landscape phone to portrait tablet */
-@media (max-width: 767px) {
- body {
- padding-right: 10px;
- padding-left: 10px !important; //TODO найти и уничтожить
- }
- [class*="span"], .hero-unit {
- float: none;
- display: block;
- width: 100%;
- margin-left: 0;
- margin-right: 0;
- }
- [class*="offset"], .hero-unit {
- margin-left: 0;
- }
-
- table {
- thead {
- tr {
- th {
- font-size: 9pt;
- }
- }
- }
-
- tbody {
- tr {
- td {
- font-size: 10pt;
- }
- }
- }
- }
-
- h1 {font-size: 30pt;}
- h2 {font-size: 16pt;}
-}
-
-/* Landscape phones and down */
-@media (max-width: 480px) {
- .page.secondary {
- .page-back {
- width: 24px;
- height: 24px;
- left: 0px !important;
- }
-
- .page-header .page-header-content {
- height: 60px;
- min-height: 50px;
-
- h1 {
- left: 40px;
-
- }
- }
- .page-region .page-region-content {
- padding-left: 0 ;
- }
- }
-
- .horizontal-menu {
- height: auto;
-
- & > ul {
- width: 100%;
- display: block;
- height: auto;
-
- & > li {
- width: 100%;
- float: none;
- display: block;
- position: relative;
- border-bottom: 1px #1e1e1e solid;
-
- &:last-child {
- border-bottom: 1px transparent solid;
- }
-
- a {
- width: 100%;
- float: none;
- }
- }
-
-
- li ul {
- position: relative;
- width: 100%;
- border: 0;
- left: 10px;
- //top: -2px;
- }
-
- }
- }
- .popup-menu {
- position: relative;
- }
-
- table {
- thead {
- tr {
- th {
- font-size: 8pt;
- }
- }
- }
-
- tbody {
- tr {
- td {
- font-size: 9pt;
- padding: 2px 5px;
- }
- }
- }
- }
-
- h1 {font-size: 26pt; line-height: 18px;}
- h2 {font-size: 16pt; line-height: 16px;}
- h3 {font-size: 13pt; line-height: 16px;}
- h3 {font-size: 13pt; line-height: 14px;}
-}
\ No newline at end of file
+@import "modern-responsive-min1200.less";
+@import "modern-responsive-max979.less";
+@import "modern-responsive-max767.less";
+@import "modern-responsive-max480.less";
\ No newline at end of file
diff --git a/less/typography.less b/less/typography.less
index d8e6f7971..7c5f1f16c 100644
--- a/less/typography.less
+++ b/less/typography.less
@@ -78,7 +78,10 @@
}
.subheader-smaller, .subheader-secondary-smaller {
- .subheader;
+ font-family: 'Segoe UI Light', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
+ font-weight: 200;
+ letter-spacing: 0.01em;
+ line-height: 24pt;
font-size: 16pt;
}
diff --git a/public/css/modern-responsive.css b/public/css/modern-responsive.css
index f69347270..fac0cb1a4 100644
--- a/public/css/modern-responsive.css
+++ b/public/css/modern-responsive.css
@@ -128,6 +128,47 @@
.page.secondary .page-region .page-region-content {
padding-left: 0 ;
}
+ .page.fixed-header .page-header {
+ position: relative !important;
+ }
+ .page.fixed-header .page-header .page-header-content .user-login {
+ float: right;
+ margin: 35px 44px 0 0;
+ cursor: pointer;
+ }
+ .page.fixed-header .page-header .page-header-content .user-login .avatar {
+ float: right;
+ border: 1px #ccc solid;
+ width: 40px;
+ height: 40px;
+ }
+ .page.fixed-header .page-header .page-header-content .user-login .avatar img {
+ width: 100%;
+ height: 100%;
+ }
+ .page.fixed-header .page-header .page-header-content .user-login .name {
+ float: left;
+ margin: 0px 10px;
+ text-align: right;
+ }
+ .page.fixed-header .page-header .page-header-content .user-login .name .first-name {
+ font-family: "Segoe UI Light", "Open Sans", sans-serif, sans;
+ font-size: 14pt;
+ display: block;
+ margin: 0;
+ }
+ .page.fixed-header .page-header .page-header-content .user-login .name .last-name {
+ font-family: "Open Sans", sans-serif, sans;
+ font-size: 8pt;
+ display: block;
+ margin: 0;
+ }
+ .page.fixed-header .page-header .page-header-content h1 {
+ left: 0;
+ }
+ .page.fixed-header .page-region {
+ padding-top: 20px;
+ }
.horizontal-menu {
height: auto;
}
@@ -156,8 +197,49 @@
border: 0;
left: 10px;
}
- .popup-menu {
- position: relative;
+ .tile {
+ width: 120px;
+ height: 120px;
+ }
+ .tile.double {
+ width: 250px;
+ }
+ .tile.double .tile-content {
+ width: 250px;
+ }
+ .tile.triple {
+ width: 380px;
+ }
+ .tile.triple .tile-content {
+ width: 380px;
+ }
+ .tile.quadro {
+ width: 510px;
+ }
+ .tile.quadro .tile-content {
+ width: 510px;
+ }
+ .tile.double-vertical {
+ height: 250px;
+ }
+ .tile.double-vertical .tile-content {
+ height: 210px;
+ }
+ .tile.triple-vertical {
+ height: 380px;
+ }
+ .tile.triple-vertical .tile-content {
+ height: 340px;
+ }
+ .tile.quadro-vertical {
+ height: 510px;
+ }
+ .tile.quadro-vertical .tile-content {
+ height: 470px;
+ }
+ .tile-group {
+ max-width: 400px;
+ float: none;
}
table thead tr th {
font-size: 8pt;
diff --git a/public/css/modern.css b/public/css/modern.css
index 6b4b9d048..b41980a99 100644
--- a/public/css/modern.css
+++ b/public/css/modern.css
@@ -829,7 +829,6 @@ table {
#font .subheader-secondary-smaller {
font-family: 'Segoe UI Light', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
font-weight: 200;
- font-size: 20pt;
letter-spacing: 0.01em;
line-height: 24pt;
font-size: 16pt;
@@ -1279,33 +1278,6 @@ ol.unstyled,
-webkit-column-gap: 20px;
column-gap: 20px;
}
-.header-bar {
- width: 100%;
- min-height: 40px;
- background: #464646;
- z-index: 10000;
-}
-.header-bar .header-bar-inner {
- padding-top: 5px;
- padding-left: 20px;
- padding-bottom: 5px;
- padding-right: 20px;
- color: #fff;
- font-size: 11pt;
- margin: auto;
-}
-.header-bar.fixed-top {
- position: fixed;
- left: 0;
- right: 0;
- top: 0;
-}
-.header-bar.fixed-bottom {
- position: fixed;
- left: 0;
- right: 0;
- bottom: 0;
-}
.page {
position: relative;
height: 100%;
@@ -1341,7 +1313,7 @@ ol.unstyled,
position: absolute;
margin: 0;
padding: 0;
- left: 120px;
+ left: 20px;
bottom: 0;
}
.page .page-header .page-header-content h1 small {
@@ -1413,6 +1385,17 @@ ol.unstyled,
height: 100%;
position: relative;
}
+.page.secondary .page-header .page-header-content h1,
+.page.secondary .page-header .page-header-content h2,
+.page.secondary .page-header .page-header-content h3,
+.page.secondary .page-header .page-header-content h4,
+.page.secondary .page-header .page-header-content h5 {
+ position: absolute;
+ margin: 0;
+ padding: 0;
+ left: 120px;
+ bottom: 0;
+}
.page.secondary .page-region .page-region-content {
padding-left: 120px;
}
@@ -1455,6 +1438,28 @@ ol.unstyled,
min-height: 100px;
background-color: #1d1d1d !important;
}
+.charms {
+ position: absolute;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ height: 100%;
+ min-width: 200px;
+ width: auto;
+}
+.charms.place-left {
+ left: 0;
+ right: auto;
+}
+.message-dialog {
+ position: absolute;
+ left: 0;
+ right: 0;
+ height: auto;
+ min-height: 100px;
+ top: 30%;
+ padding: 10px 10px 0;
+}
.error-bar,
.warning-bar,
.info-bar {
@@ -1482,9 +1487,10 @@ ol.unstyled,
*
* Buttons.less
*/
-.modern-ui-logo {
- height: 24px;
- width: 24px;
+.modern-ui-logo,
+.metro-ui-logo {
+ height: 28px;
+ width: 28px;
display: block;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGESURBVFhH7ZevTsNQFIfbZgKxB9gjIHgABAIcS0CSQIJE4LEIEgQCyQNMIiHhIRAgEAgECWKIySUTCEjLd3t/Cyml3em6DtMvOTn33PM3XdvbBU2SJMmKlssnjuNtZIisa2t50HQNmXAFEvQHsi9X89CzR8M31/wXZwppDpp0aX7v++XBd41q7r5Qg1I0YE8pQYixqbWFpzAMx1pnoPA5vlOZpdDzHdWPoujZGVX4c1iaH8pvhpwJshOpxtxQawM18JYdrlYXdbKIAa4o1pFphrxX8g5qD0CRPsUeZZogfkzeLjJaxAAjZIuit9oqhbgv4veQl+lGFQqfGHwdbqpLH1YMMUdK8WjfysxHlgbHyKfiM7B/obAf5LNiemfQyB1E6VkwBfsGlb9ZvduM+aVFQ3cgDV0S+gHlHrs8LqAC5gEcxLuD6c5pbeVJy9qpNECLCV1aK+lPwO86kD0TF5s2KqD2m7Au7QDtAO0A7QD/PsBcf0zIWWVdfMRmcd+M/vsvRxB8A6+/IU2N93KYAAAAAElFTkSuQmCC);
-webkit-background-size: cover;
@@ -1921,6 +1927,193 @@ table.bordered tbody tr:last-child td {
* Menus.less
*
*/
+.header-bar,
+.navigation-bar {
+ width: 100%;
+ min-height: 40px;
+ background: #464646;
+ z-index: 10000;
+}
+.header-bar .header-bar-inner,
+.navigation-bar .header-bar-inner,
+.header-bar .navigation-bar-inner,
+.navigation-bar .navigation-bar-inner {
+ padding: 5px 20px;
+ color: #fff;
+ font-size: 11pt;
+ margin: auto;
+}
+.header-bar .header-bar-inner > .brand,
+.navigation-bar .header-bar-inner > .brand,
+.header-bar .navigation-bar-inner > .brand,
+.navigation-bar .navigation-bar-inner > .brand {
+ float: left;
+ margin-right: 20px;
+ margin-top: 3px;
+}
+.header-bar .header-bar-inner > .brand .icon,
+.navigation-bar .header-bar-inner > .brand .icon,
+.header-bar .navigation-bar-inner > .brand .icon,
+.navigation-bar .navigation-bar-inner > .brand .icon {
+ width: 24px;
+ height: 24px;
+ float: left;
+ margin-right: 10px;
+ margin-top: 3px;
+}
+.header-bar .header-bar-inner > .brand .name,
+.navigation-bar .header-bar-inner > .brand .name,
+.header-bar .navigation-bar-inner > .brand .name,
+.navigation-bar .navigation-bar-inner > .brand .name {
+ font-family: 'Segoe UI Light', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
+ font-weight: 200;
+ font-size: 20pt;
+ letter-spacing: 0.01em;
+ line-height: 24pt;
+ font-size: 16pt;
+}
+.header-bar .header-bar-inner > ul,
+.navigation-bar .header-bar-inner > ul,
+.header-bar .navigation-bar-inner > ul,
+.navigation-bar .navigation-bar-inner > ul {
+ margin-left: 0;
+ list-style: none;
+ padding-top: 5px;
+}
+.header-bar .header-bar-inner > ul > li,
+.navigation-bar .header-bar-inner > ul > li,
+.header-bar .navigation-bar-inner > ul > li,
+.navigation-bar .navigation-bar-inner > ul > li {
+ display: inline-block;
+ line-height: 32px;
+ position: relative;
+}
+.header-bar .header-bar-inner > ul > li > a,
+.navigation-bar .header-bar-inner > ul > li > a,
+.header-bar .navigation-bar-inner > ul > li > a,
+.navigation-bar .navigation-bar-inner > ul > li > a {
+ color: #fff;
+ font-family: 'Segoe UI', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
+ font-weight: 400;
+ font-size: 11pt;
+ letter-spacing: 0.01em;
+ line-height: 14pt;
+ padding: 5px 10px;
+}
+.header-bar .header-bar-inner > ul > li.active,
+.navigation-bar .header-bar-inner > ul > li.active,
+.header-bar .navigation-bar-inner > ul > li.active,
+.navigation-bar .navigation-bar-inner > ul > li.active,
+.header-bar .header-bar-inner > ul > li:hover,
+.navigation-bar .header-bar-inner > ul > li:hover,
+.header-bar .navigation-bar-inner > ul > li:hover,
+.navigation-bar .navigation-bar-inner > ul > li:hover {
+ background-color: #fff;
+}
+.header-bar .header-bar-inner > ul > li.active a,
+.navigation-bar .header-bar-inner > ul > li.active a,
+.header-bar .navigation-bar-inner > ul > li.active a,
+.navigation-bar .navigation-bar-inner > ul > li.active a,
+.header-bar .header-bar-inner > ul > li:hover a,
+.navigation-bar .header-bar-inner > ul > li:hover a,
+.header-bar .navigation-bar-inner > ul > li:hover a,
+.navigation-bar .navigation-bar-inner > ul > li:hover a {
+ color: #1e1e1e;
+}
+.header-bar .header-bar-inner > ul > li.pull,
+.navigation-bar .header-bar-inner > ul > li.pull,
+.header-bar .navigation-bar-inner > ul > li.pull,
+.navigation-bar .navigation-bar-inner > ul > li.pull {
+ float: right;
+ cursor: pointer;
+ margin-top: 5px;
+ display: none;
+}
+.header-bar .header-bar-inner > ul > li.pull > a,
+.navigation-bar .header-bar-inner > ul > li.pull > a,
+.header-bar .navigation-bar-inner > ul > li.pull > a,
+.navigation-bar .navigation-bar-inner > ul > li.pull > a {
+ display: block;
+ height: 24px;
+ width: 24px;
+ position: relative;
+ background: url(../images/row24.png) no-repeat;
+}
+.header-bar .header-bar-inner > ul > li.pull:hover,
+.navigation-bar .header-bar-inner > ul > li.pull:hover,
+.header-bar .navigation-bar-inner > ul > li.pull:hover,
+.navigation-bar .navigation-bar-inner > ul > li.pull:hover {
+ background: transparent;
+}
+.header-bar.fixed-top,
+.navigation-bar.fixed-top {
+ position: fixed;
+ left: 0;
+ right: 0;
+ top: 0;
+}
+.header-bar.fixed-bottom,
+.navigation-bar.fixed-bottom {
+ position: fixed;
+ left: 0;
+ right: 0;
+ bottom: 0;
+}
+.dropdown-menu {
+ position: absolute;
+ background-color: #fff;
+ margin-left: 0;
+ list-style: none;
+ top: 100%;
+ z-index: 1001;
+ float: left;
+ border: 1px solid rgba(0, 0, 0, 0.2);
+ box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+ min-width: 160px;
+ padding-bottom: 5px;
+ padding-top: 5px;
+ display: none;
+}
+.dropdown-menu.place-right {
+ right: 0;
+ left: auto;
+}
+.dropdown-menu a {
+ font-family: 'Segoe UI', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
+ font-weight: 400;
+ font-size: 11pt;
+ letter-spacing: 0.01em;
+ line-height: 14pt;
+ color: #000000;
+ display: block;
+ width: 100%;
+ padding: 3px 20px;
+ white-space: nowrap;
+ font-size: 14px;
+}
+.dropdown-menu a:hover {
+ color: rgba(0, 0, 0, 0.8);
+}
+.dropdown-menu a:active {
+ color: rgba(0, 0, 0, 0.4);
+}
+.dropdown-menu a:hover {
+ background-color: #2d89ef !important;
+ color: #ffffff !important;
+}
+.dropdown-menu li {
+ display: list-item;
+ line-height: 20px;
+}
+.dropdown-menu .divider {
+ height: 1px;
+ margin: 9px 1px;
+ overflow: hidden;
+ background-color: #e5e5e5;
+}
+.dropdown-menu.open {
+ display: block !important;
+}
.popup-menu {
margin-left: 0;
list-style: none;
@@ -2121,133 +2314,25 @@ table.bordered tbody tr:last-child td {
.horizontal-menu:after {
clear: both;
}
-.page .page-header .page-header-content h1.sub-menu ul {
- margin-left: 0;
- list-style: none;
- position: absolute;
- top: 100%;
- left: -1px;
- z-index: 1;
- background-color: #fff;
- display: none;
- border: 1px #bababa solid;
- display: none;
- border: 1px #ccc solid;
- margin-top: -10px;
-}
-.page .page-header .page-header-content h1.sub-menu ul li {
- float: none;
- display: block;
- border: 1px transparent solid !important;
- min-width: 150px;
-}
-.page .page-header .page-header-content h1.sub-menu ul li a {
- display: block;
- white-space: nowrap;
- float: none;
- height: auto;
- font-family: 'Segoe UI', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
- font-weight: 400;
- font-size: 9pt;
- color: #1e1e1e;
- padding: 5px 10px;
-}
-.page .page-header .page-header-content h1.sub-menu ul li a:hover {
- color: #fff;
-}
-.page .page-header .page-header-content h1.sub-menu ul li:hover {
- background-color: #008287;
-}
-.page .page-header .page-header-content h1.sub-menu ul li.divider {
- height: 1px !important;
- line-height: 1px !important;
- background-color: transparent !important;
- border-top: 1px #bababa solid !important;
+.page .page-header .page-header-content h1[data-role=dropdown] {
+ cursor: pointer;
}
-.page .page-header .page-header-content h1.sub-menu ul li.divider:hover {
- background-color: transparent !important;
+.page .page-header .page-header-content h1[data-role=dropdown] .dropdown-menu {
+ margin-top: -10px;
}
-.page .page-header .page-header-content h1.sub-menu ul li.sub-menu:after {
+.page .page-header .page-header-content h1[data-role=dropdown]:after {
position: absolute;
content: "\3009";
display: inline-block;
font-size: 10pt;
- top: 5px;
- right: 10px;
- -webkit-transform: rotate(0deg);
- -moz-transform: rotate(0deg);
- -ms-transform: rotate(0deg);
- -o-transform: rotate(0deg);
- transform: rotate(0deg);
-}
-.page .page-header .page-header-content h1.sub-menu:hover ul {
- display: block;
-}
-.page .page-header .page-header-content h1.sub-menu ul.open {
- display: block;
-}
-.ribbon {
- position: relative;
-}
-.ribbon ul {
- margin-left: 0;
- list-style: none;
- *zoom: 1;
- position: absolute;
- z-index: 9000;
-}
-.ribbon ul:before,
-.ribbon ul:after {
- display: table;
- content: "";
-}
-.ribbon ul:after {
- clear: both;
-}
-.ribbon ul li {
- float: left;
- display: block;
- text-align: center;
-}
-.ribbon ul li.active {
- border: 1px #ccc solid;
- border-bottom: 0;
- background-color: #fff;
-}
-.ribbon ul li.active span,
-.ribbon ul li.active a {
- color: #2d89ef;
-}
-.ribbon ul li span,
-.ribbon ul li a {
- text-decoration: none;
- text-transform: uppercase;
- display: block;
- float: left;
- padding: 5px 20px;
- color: #1e1e1e;
- font-family: 'Segoe UI', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
- font-weight: 400;
- font-size: 11pt;
- letter-spacing: 0.01em;
- line-height: 14pt;
- cursor: pointer;
-}
-.ribbon .frames {
- margin-top: 30px;
- width: 100%;
- min-height: 50px;
- border: 1px #ccc solid;
-}
-.ribbon .frames .frame {
- width: 100%;
- min-height: 100%;
- height: auto;
- display: none;
- padding: 10px;
-}
-.ribbon .frames .frame.active {
- display: block;
+ left: 100%;
+ top: 20px;
+ margin-left: 5px;
+ -webkit-transform: rotate(90deg);
+ -moz-transform: rotate(90deg);
+ -ms-transform: rotate(90deg);
+ -o-transform: rotate(90deg);
+ transform: rotate(90deg);
}
/*
* Metro UI CSS v 0.1.1
@@ -3454,7 +3539,7 @@ input[type=submit] {
font-size: 20pt;
letter-spacing: 0.01em;
line-height: 24pt;
- font-family: 'PT Serif Caption', Helvetica, sans-serif;
+ font-family: Tahoma, Arial, sans-serif;
line-height: 18pt;
}
.card:hover {
@@ -3462,7 +3547,7 @@ input[type=submit] {
}
.card .suit {
padding: 0;
- font-size: 84px;
+ font-size: 80px;
position: absolute;
right: 5px;
bottom: 30px;
@@ -3598,7 +3683,7 @@ pre {
font-size: 11pt;
letter-spacing: 0.02em;
line-height: 20px;
- font-size: 12pt;
+ font-size: 10pt;
color: #525252;
}
code {
diff --git a/public/css/site.css b/public/css/site.css
index 7d1354fb7..157a989d5 100644
--- a/public/css/site.css
+++ b/public/css/site.css
@@ -13,25 +13,19 @@ body {
.github-info {
- margin-top: 5px;
}
.github-info li {
- float: left;
- margin-left: 10px;
- width: auto;
}
.github-info li span{
text-align: center;
display: block;
- border: 1px #ccc solid;
- border-radius: 100%;
padding: 5px;
margin-top: -5px;
}
-.github-info li a img {width: 24px;}
+.github-info li a img {width: 20px;}
.header-bar-inner > ul li a {font-size: 9pt;}
.header-bar-inner > ul li span {width: 30px; height: 30px; font-size: 9pt; border: 0;}
diff --git a/public/header.php b/public/header.php
index 69fec4347..301fe09b5 100644
--- a/public/header.php
+++ b/public/header.php
@@ -1,5 +1,8 @@
-Project is looking for a Sponsor
- 
-
-
- Calendar
-
-
-