diff options
Diffstat (limited to 'view/theme/quattro/style.less')
| -rw-r--r-- | view/theme/quattro/style.less | 187 |
1 files changed, 113 insertions, 74 deletions
diff --git a/view/theme/quattro/style.less b/view/theme/quattro/style.less index e267834a6..53f833cfd 100644 --- a/view/theme/quattro/style.less +++ b/view/theme/quattro/style.less @@ -37,25 +37,27 @@ /* fonts */ -@font-face { - font-family: "LiberationSans"; - src: local("Liberation Sans"), url( LiberationSans-Regular.ttf ) format("truetype"); - font-weight: normal; font-style: normal; -} -@font-face { - font-family: "LiberationSans"; - src: local("Liberation Sans"), url( LiberationSans-Bold.ttf ) format("truetype"); - font-weight: bold; font-style: normal; -} -@font-face { - font-family: "LiberationSans"; - src: local("Liberation Sans"), url( LiberationSans-Italic.ttf ) format("truetype"); - font-weight: normal; font-style: italic; -} - +// @font-face { +// font-family: "LiberationSans"; +// src: local("Liberation Sans"),url( LiberationSans-Regular.ttf ) format("truetype"); +// font-weight: bold; font-style: italic; +// } +// +// @font-face { +// font-family: "LiberationSans"; +// src: local("Liberation Sans"),url( LiberationSans-Bold.ttf ) format("truetype"); +// font-weight: bold; font-style: normal; +// } +// @font-face { +// font-family: "LiberationSans"; +// src: local("Liberation Sans"),url( LiberationSans-Italic.ttf ) format("truetype"); +// font-weight: normal; font-style: italic; +// } + + /* global */ body { - font-family: LiberationSans,helvetica,arial,freesans,clean,sans-serif; + font-family: Liberation Sans,helvetica,arial,clean,sans-serif; font-size: 12px; background-color: #FFFFFF; color: @Grey5; @@ -77,28 +79,70 @@ a:hover {text-decoration: underline; } .left { float: left; } .right { float: right; } -/* nav */ -nav { - width: 100%; height: 50px; - background-color: @Metalic4; - color: #FFFFFF; - a, a:visited, a:link, a:hover { color: #FFFFFF; text-decoration: none; } +/* icons */ + + +.icons(@size: 22) { + &.notify { background-image: url("../../../images/icons/notify_off_@{size}.png"); } + &.gear { background-image: url("../../../images/icons/gear_@{size}.png"); } +} + + +.icon { + background-color: transparent ; + background-repeat: no-repeat; + background-position: center center; + display: block; + overflow: hidden; + text-indent: -9999px; + + &.s22 { + width:22px; height: 22px; + padding: 1px; + .icons(22); + } + +} + + +/* header */ +header { + position: fixed; left: 0px; top: 0px; + margin: 0px; padding: 0px; + width: 100%; height: 12px; + color: #FFFFFF; #site-location { - font-size:8px; + /*font-size:8px; float:left; background-color: @Metalic3; padding: 1px 5px; margin-left: 20px; - .roundbottom() + .roundbottom()*/ + display: none; } +} +/* nav */ +nav { + width: 100%; height: 32px; + position: fixed; left: 0px; top: 0px; + background-color: @Metalic4; + color: #FFFFFF; + + a, a:active, a:visited, a:link, a:hover { color: #FFFFFF; text-decoration: none; outline: none; } + + ul { + margin: 0px; + padding: 0px 20px; + li { + list-style: none; + margin: 0px; padding: 0px; + float: left; + .menu-popup{ left: 0px; right: auto; } + } + + } - #nav { - clear: both; - padding: 0px 20px; - height: auto; - padding-top: 6px; - .nav-menu-icon { position: relative; height: 22px; @@ -110,7 +154,8 @@ nav { background-color: @Metalic3; } - img { width: 22px; height: 22px; } + img { width: 22px; height: 22px; } + .nav-notify { top: 3px; } } .nav-menu { @@ -124,26 +169,37 @@ nav { border-bottom: 3px solid @Metalic2; } - .nav-notify { - position: absolute; - background-color: @Blue1; - .rounded(); - font-size: 10px; - padding: 1px 3px; - top: 0px; - right: -10px; - min-width: 15px; - text-align: right; - } + } + + .nav-notify { + display: none; + position: absolute; + background-color: @Blue1; + .rounded(); + font-size: 10px; + padding: 1px 3px; + top: 0px; + right: -10px; + min-width: 15px; + text-align: right; + &.show{ display: block; } } - } + + + #nav-site-link { + float: right; + .menu-popup{ right: 0px; left: auto; } + } + + #nav-notifications-link.selected .icon.s22.notify { background-image: url("../../../images/icons/notify_on_22.png") } + } ul.menu-popup { position: absolute; - /*display: none;*/ + display: none; width: auto; background: #FFFFFF; color: @Grey5; @@ -151,43 +207,26 @@ ul.menu-popup { padding: 0px; list-style: none; border: 3px solid @Metalic3; - a { display: block; color: @Grey5; padding: 5px 10px;} - a:hover { background-color: @Metalic1; } z-index: 100000; - - .menu-sep { - border-top: 1px solid @Metalic2; - } + + a { display: block; color: @Grey5; padding: 5px 10px;} + a:hover { background-color: @Metalic1; } + .menu-sep { border-top: 1px solid @Metalic2; } + li { float: none; overflow: auto; height: auto; display: block; } } -.left .menu-popup{ left: 0px; } -.right .menu-popup{ right: 0px; } - -/* icons */ - -.icons(@size: 22) { - &.notify_off { background-image: url("../../../images/icons/notify_off_@{size}.png"); } - &.notify_on { background-image: url("../../../images/icons/notify_on_@{size}.png"); } +#nav-notifications-menu { + width: 400px; + img { float: left; margin-right: 5px; } + .contactname { font-weight: bold; } + .notif-when { font-size: 10px; color: @Metalic2; display: block; } } -.icon { - background-color: transparent ; - background-repeat: no-repeat; - background-position: center center; - display: block; - - &.s22 { - width:22px; height: 22px; - .icons(22); - } - -} - /* aside */ -aside { display: none; } +// aside { display: none; } /* section */ -section { display: none;} +// section { display: none;} |