aboutsummaryrefslogtreecommitdiffstats
path: root/view
diff options
context:
space:
mode:
Diffstat (limited to 'view')
-rw-r--r--view/theme/quattro/style.css166
-rw-r--r--view/theme/quattro/style.less187
2 files changed, 213 insertions, 140 deletions
diff --git a/view/theme/quattro/style.css b/view/theme/quattro/style.css
index 055f8e9b6..ec5231290 100644
--- a/view/theme/quattro/style.css
+++ b/view/theme/quattro/style.css
@@ -2,27 +2,9 @@
* Fabio Comuni <http://kirgroup.com/profile/fabrixxm>
**/
/* 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;
-}
/* 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: #2d2d2d;
@@ -41,37 +23,81 @@ a:hover {
.right {
float: right;
}
+/* icons */
+.icon {
+ background-color: transparent ;
+ background-repeat: no-repeat;
+ background-position: center center;
+ display: block;
+ overflow: hidden;
+ text-indent: -9999px;
+}
+.icon.s22 {
+ width: 22px;
+ height: 22px;
+ padding: 1px;
+}
+.icon.s22.notify {
+ background-image: url("../../../images/icons/notify_off_22.png");
+}
+.icon.s22.gear {
+ background-image: url("../../../images/icons/gear_22.png");
+}
+/* header */
+header {
+ position: fixed;
+ left: 0px;
+ top: 0px;
+ margin: 0px;
+ padding: 0px;
+ width: 100%;
+ height: 12px;
+ color: #FFFFFF;
+}
+header #site-location {
+ /*font-size:8px;
+ float:left;
+ background-color: @Metalic3;
+ padding: 1px 5px;
+ margin-left: 20px;
+ .roundbottom()*/
+
+ display: none;
+}
/* nav */
nav {
width: 100%;
- height: 50px;
+ height: 32px;
+ position: fixed;
+ left: 0px;
+ top: 0px;
background-color: #0e232e;
color: #FFFFFF;
}
nav a,
+nav a:active,
nav a:visited,
nav a:link,
nav a:hover {
color: #FFFFFF;
text-decoration: none;
+ outline: none;
}
-nav #site-location {
- font-size: 8px;
- float: left;
- background-color: #364e59;
- padding: 1px 5px;
- margin-left: 20px;
- -moz-border-radius: 0 0 5px 5px;
- -webkit-border-radius: 0 0 5px 5px;
- border-radius: 0 0 5px 5px;
-}
-nav #nav {
- clear: both;
+nav ul {
+ margin: 0px;
padding: 0px 20px;
- height: auto;
- padding-top: 6px;
}
-nav #nav .nav-menu-icon {
+nav ul li {
+ list-style: none;
+ margin: 0px;
+ padding: 0px;
+ float: left;
+}
+nav ul li .menu-popup {
+ left: 0px;
+ right: auto;
+}
+nav .nav-menu-icon {
position: relative;
height: 22px;
padding: 5px;
@@ -80,14 +106,17 @@ nav #nav .nav-menu-icon {
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
-nav #nav .nav-menu-icon.selected {
+nav .nav-menu-icon.selected {
background-color: #364e59;
}
-nav #nav .nav-menu-icon img {
+nav .nav-menu-icon img {
width: 22px;
height: 22px;
}
-nav #nav .nav-menu {
+nav .nav-menu-icon .nav-notify {
+ top: 3px;
+}
+nav .nav-menu {
position: relative;
height: 16px;
padding: 5px;
@@ -95,10 +124,11 @@ nav #nav .nav-menu {
font-size: 14px;
border-bottom: 3px solid #0e232e;
}
-nav #nav .nav-menu.selected {
+nav .nav-menu.selected {
border-bottom: 3px solid #9eabb0;
}
-nav #nav .nav-menu .nav-notify {
+nav .nav-notify {
+ display: none;
position: absolute;
background-color: #19aeff;
-moz-border-radius: 5px 5px 5px 5px;
@@ -111,10 +141,22 @@ nav #nav .nav-menu .nav-notify {
min-width: 15px;
text-align: right;
}
+nav .nav-notify.show {
+ display: block;
+}
+nav #nav-site-link {
+ float: right;
+}
+nav #nav-site-link .menu-popup {
+ right: 0px;
+ left: auto;
+}
+nav #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: #2d2d2d;
@@ -135,34 +177,26 @@ ul.menu-popup a:hover {
ul.menu-popup .menu-sep {
border-top: 1px solid #9eabb0;
}
-.left .menu-popup {
- left: 0px;
-}
-.right .menu-popup {
- right: 0px;
-}
-/* icons */
-.icon {
- background-color: transparent ;
- background-repeat: no-repeat;
- background-position: center center;
+ul.menu-popup li {
+ float: none;
+ overflow: auto;
+ height: auto;
display: block;
}
-.icon.s22 {
- width: 22px;
- height: 22px;
+#nav-notifications-menu {
+ width: 400px;
}
-.icon.s22.notify_off {
- background-image: url("../../../images/icons/notify_off_22.png");
+#nav-notifications-menu img {
+ float: left;
+ margin-right: 5px;
}
-.icon.s22.notify_on {
- background-image: url("../../../images/icons/notify_on_22.png");
+#nav-notifications-menu .contactname {
+ font-weight: bold;
}
-/* aside */
-aside {
- display: none;
+#nav-notifications-menu .notif-when {
+ font-size: 10px;
+ color: #9eabb0;
+ display: block;
}
+/* aside */
/* section */
-section {
- display: none;
-}
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;}
generated by cgit v1.2.3 (git 2.25.1) at 2024-12-01 10:37:31 +0000