aboutsummaryrefslogtreecommitdiffstats
path: root/view/theme/quattro/quattro.less
diff options
context:
space:
mode:
Diffstat (limited to 'view/theme/quattro/quattro.less')
-rw-r--r--view/theme/quattro/quattro.less212
1 files changed, 212 insertions, 0 deletions
diff --git a/view/theme/quattro/quattro.less b/view/theme/quattro/quattro.less
new file mode 100644
index 000000000..4c4a002f3
--- /dev/null
+++ b/view/theme/quattro/quattro.less
@@ -0,0 +1,212 @@
+// Quattro Theme LESS file
+
+/* global */
+body {
+ font-family: Liberation Sans,helvetica,arial,clean,sans-serif;
+ font-size: 12px;
+ background-color: @BodyBackground;
+ color: @BodyColor;
+ margin: 0px;
+ display:table-row;
+}
+
+.shadow(@x: 0px, @y: 5px){
+ -webkit-box-shadow:@x @y 10px rgba(0, 0, 0, 0.7);
+ -moz-box-shadow:@x @y 10px rgba(0, 0, 0, 0.7);
+ box-shadow:@x @y 10px rgba(0, 0, 0, 0.7);
+}
+
+.rounded(@tr: 5px, @tl: 5px, @bl: 5px, @br: 5px){
+ -moz-border-radius: @arguments;
+ -webkit-border-radius: @arguments;
+ border-radius: @arguments;
+}
+
+.roundbottom (@radius: 5px){ .rounded(0, 0, @radius, @radius); }
+.roundtop (@radius: 5px){ .rounded(@radius, @radius, 0, 0); }
+
+a, a:link { color: @Link; text-decoration: none; }
+a:visited { color: @LinkVisited; text-decoration: none; }
+a:hover {color: @LinkHover; text-decoration: underline; }
+
+.left { float: left; }
+.right { float: right; }
+
+/* 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: 43%; right: 43%; top: 0px;
+ margin: 0px; padding: 0px;
+ /*width: 100%; height: 12px; */
+ z-index: 110;
+ color: @Grey1;
+ #site-location {
+ display: none;
+ }
+
+ #banner {
+
+ text-align: center;
+ width: 100%;
+ a, a:active, a:visited, a:link, a:hover { color: @Grey1; text-decoration: none; outline: none; vertical-align: bottom; }
+ #logo-img { height: 22px; margin-top:5px;}
+ #logo-text { font-size: 22px }
+ }
+}
+/* nav */
+nav {
+ width: 100%; height: 32px;
+ position: fixed; left: 0px; top: 0px;
+ padding: 0px;
+ background-color: @NavbarBackground;
+ color: @Grey1;
+ z-index: 100;
+ .shadow(0px, 0px);
+
+ a, a:active, a:visited, a:link, a:hover { color: @Banner; 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-menu-icon {
+ position: relative;
+ height: 22px;
+ padding: 5px;
+ margin: 0px 10px;
+ .roundtop();
+
+ &.selected {
+ background-color: @NavbarSelectedBg;
+ }
+
+ img { width: 22px; height: 22px; }
+ .nav-notify { top: 3px; }
+ }
+
+ .nav-menu {
+ position: relative;
+ height: 16px;
+ padding: 5px;
+ margin: 3px 15px 0px;
+ font-size: 14px;
+ border-bottom: 3px solid @NavbarBackground;
+ &.selected {
+ border-bottom: 3px solid @NavbarSelectedBorder;
+ }
+
+ }
+
+ .nav-notify {
+ display: none;
+ position: absolute;
+ background-color: @NavbarNotifBg;
+ .rounded();
+ font-size: 10px;
+ padding: 1px 3px;
+ top: 0px;
+ right: -10px;
+ min-width: 15px;
+ text-align: right;
+
+ &.show{ display: block; }
+ }
+
+
+ #nav-help-link,
+ #nav-search-link,
+ #nav-directory-link,
+ #nav-apps-link,
+ #nav-site-linkmenu {
+ float: right;
+ .menu-popup{ right: 0px; left: auto; }
+ }
+
+ #nav-notifications-linkmenu.selected .icon.s22.notify { background-image: url("../../../images/icons/notify_on_22.png") }
+ #nav-apps-link.selected { background-color: @NavbarSelectedBg; }
+}
+
+
+ul.menu-popup {
+ position: absolute;
+ display: none;
+ width: 10em;
+ background: @MenuBg;
+ color: @Menu;
+ margin: 0px;
+ padding: 0px;
+ list-style: none;
+ border: 3px solid @MenuBorder;
+ z-index: 100000;
+
+ .shadow();
+
+ 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; }
+
+ .empty {
+ padding: 5px;
+ text-align: center;
+ color: @Metalic2;
+ }
+}
+
+#nav-notifications-menu {
+ width: 400px;
+ img { float: left; margin-right: 5px; }
+ .contactname { font-weight: bold; }
+ .notif-when { font-size: 10px; color: @Metalic2; display: block; }
+}
+
+
+
+
+/* aside */
+aside {
+ display: table-cell;
+ width: 200px;
+ padding:50px 10px 0px 20px;
+}
+
+/* section */
+section {
+ display: table-cell;
+ width: 800px;
+ padding:50px 20px 0px 10px;
+}