aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorfriendica <info@friendica.com>2012-08-09 22:48:13 -0700
committerfriendica <info@friendica.com>2012-08-09 22:48:13 -0700
commitcac2d408329c8ad0f2f7faed07c4615be12acdf5 (patch)
tree7b43227a514145c304df75ce5861a4b4fb3c781a
parentc8fe8f4376f0bb1873522a3c7679de7193243498 (diff)
downloadvolse-hubzilla-cac2d408329c8ad0f2f7faed07c4615be12acdf5.tar.gz
volse-hubzilla-cac2d408329c8ad0f2f7faed07c4615be12acdf5.tar.bz2
volse-hubzilla-cac2d408329c8ad0f2f7faed07c4615be12acdf5.zip
Dr. Theme-instein - It Lives!
-rw-r--r--view/css/default.css11
-rw-r--r--view/theme/duepuntozero/css/style.css349
-rw-r--r--view/theme/slackr/css/style.css39
-rw-r--r--view/tpl/nav.tpl135
4 files changed, 369 insertions, 165 deletions
diff --git a/view/css/default.css b/view/css/default.css
index 956d8c728..7846a09ac 100644
--- a/view/css/default.css
+++ b/view/css/default.css
@@ -6,15 +6,18 @@ nav {
aside {
display: block;
- min-height: 112px;
width: 200px;
position: absolute;
- float: left;
+ top: 64px;
+ left: 0;
+ margin-left: 10px;
+/* float: left; */
}
section {
- padding-left: 250px;
+ position: absolute;
+ top: 64px;
+ left: 250px;
display: block;
- min-height: 112px;
}
diff --git a/view/theme/duepuntozero/css/style.css b/view/theme/duepuntozero/css/style.css
index beeaccb41..5b9aee3d2 100644
--- a/view/theme/duepuntozero/css/style.css
+++ b/view/theme/duepuntozero/css/style.css
@@ -19,6 +19,35 @@ abbr {
border-bottom: none;
}
+
+/* icons */
+.icon {
+ background-color: transparent ;
+ background-repeat: no-repeat;
+ display: block;
+ overflow: hidden;
+ text-indent: -9999px;
+/* min-width: 22px;
+ height: 22px; */
+}
+.icon.text {
+ text-indent: 0px;
+}
+.icon.notify {
+ background-image: url("../../../../images/icons/22/notify_off.png");
+ min-width: 22px;
+ height: 22px;
+ background-position: left center;
+ padding: 1px;
+}
+.icon.gear {
+ background-image: url("../../../../images/icons/22/gear.png");
+ min-width: 22px;
+ height: 22px;
+ background-position: left center;
+ padding: 1px;
+}
+
a, a:visited, a:link { color: #3465a4; text-decoration: none; }
a:hover {text-decoration: underline; }
@@ -91,7 +120,7 @@ blockquote {
/* nav */
nav {
display: block;
- margin: 0px 10%;
+/* margin: 0px 10%; */
border-bottom: 1px solid #babdb6;
}
nav #site-location {
@@ -174,16 +203,7 @@ nav #nav-link-wrapper .nav-link {
border-right: 1px solid #babdb6;
}
-/* aside */
-aside {
- display: block;
- min-height: 112px;
- margin-left: 10%;
- padding: 1em;
- background-image: url(../img/border.jpg);
- background-position: top left;
- background-repeat: no-repeat;
-}
+
#dfrn-request-link {
display: block;
@@ -206,17 +226,6 @@ aside {
background-color: #3465a4;
}
-/* section */
-section {
- margin: 0px 10%;
- padding-top: 1em;
- padding-right: 1em;
- background-color: #ffffff;
- background-image: url(../img/border.jpg);
- background-position: top right;
- background-repeat: no-repeat;
-}
-
.tabs {
height: 27px;
background-image: url(../img/head.jpg);
@@ -224,6 +233,7 @@ section {
background-position: 0px -20px;
border-bottom: 1px solid #babdb6;
padding:0px;
+ margin-right: 15px;
}
.tabs li { margin: 0px; list-style: none; }
.tab {
@@ -3189,6 +3199,255 @@ div.jGrowl div.info {
filter:alpha(opacity=100);
}
+
+#id_term_label {
+ width:75px;
+}
+#id_term {
+ width:100px;
+}
+
+#recip {
+
+}
+.autocomplete-w1 { background: #ffffff; no-repeat bottom right; position:absolute; top:0px; left:0px; margin:6px 0 0 6px; /* IE6 fix: */ _background:none; _margin:1px 0 0 0; }
+.autocomplete { color:#000; border:1px solid #999; background:#FFF; cursor:default; text-align:left; max-height:350px; overflow:auto; margin:-6px 6px 6px -6px; /* IE6 specific: */ _height:350px; _margin:0; _overflow-x:hidden; }
+.autocomplete .selected { background:#F0F0F0; }
+.autocomplete div { padding:2px 5px; white-space:nowrap; overflow:hidden; }
+
+#datebrowse-sidebar select {
+ margin-left: 25px;
+}
+
+
+.jslider .jslider-scale ins {
+ color: #333;
+ font-size: 12px;
+ width: 100px;
+ text-align: center;
+}
+
+.slider {
+ margin-top: 10px;
+ margin-bottom: 30px;
+}
+
+
+#main-slider {
+ position: relative;
+ left: 5%;
+ width: 90%;
+}
+
+
+#contact-slider {
+ position: relative;
+ left: 5%;
+ width: 90%;
+}
+
+/* nav */
+nav {
+ width: 100%;
+ height: 32px;
+ position: fixed;
+ left: 0px;
+ top: 0px;
+ padding: 0px;
+ background-color: #888888;
+ color: #ffffff;
+ z-index: 100;
+ -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
+ -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
+ box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
+}
+nav a,
+nav a:active,
+nav a:visited,
+nav a:link,
+nav a:hover {
+ color: #ffffff;
+ text-decoration: none;
+ outline: none;
+}
+nav ul {
+ margin: 0px;
+ padding: 0px 20px;
+}
+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;
+ margin: 0px 10px;
+ -moz-border-radius: 5px 5px 0 0;
+ -webkit-border-radius: 5px 5px 0 0;
+ border-radius: 5px 5px 0 0;
+}
+nav .nav-menu-icon.selected {
+ background-color: #FF0000;
+}
+nav .nav-menu-icon img {
+ width: 22px;
+ height: 22px;
+}
+nav .nav-menu-icon .nav-notify {
+ top: 3px;
+}
+nav .nav-menu {
+ position: relative;
+ height: 16px;
+ padding: 5px;
+ margin: 3px 15px 0px;
+ font-size: 14px;
+ border-bottom: 3px solid #888888;
+}
+nav .nav-menu.selected {
+ border-bottom: 3px solid #FF8888;
+}
+nav .nav-notify {
+ display: none;
+ position: absolute;
+ background-color: #dc0000;
+ -moz-border-radius: 5px 5px 5px 5px;
+ -webkit-border-radius: 5px 5px 5px 5px;
+ border-radius: 5px 5px 5px 5px;
+ font-size: 10px;
+ padding: 1px 3px;
+ top: 0px;
+ right: -10px;
+ min-width: 15px;
+ text-align: right;
+}
+nav .nav-notify.show {
+ display: block;
+}
+nav #nav-help-link,
+nav #nav-search-link,
+nav #nav-directory-link,
+nav #nav-apps-link,
+nav #nav-site-linkmenu {
+ float: right;
+}
+nav #nav-help-link .menu-popup,
+nav #nav-search-link .menu-popup,
+nav #nav-directory-link .menu-popup,
+nav #nav-apps-link .menu-popup,
+nav #nav-site-linkmenu .menu-popup {
+ right: 0px;
+ left: auto;
+}
+nav #nav-notifications-linkmenu.on .icon.s22.notify,
+nav #nav-notifications-linkmenu.selected .icon.s22.notify {
+ background-image: url("../../../../images/icons/22/notify_on.png");
+}
+nav #nav-apps-link.selected {
+ background-color: #364e59;
+}
+ul.menu-popup {
+ position: absolute;
+ display: none;
+ width: 10em;
+ background: #ffffff;
+ color: #2d2d2d;
+ margin: 0px;
+ padding: 0px;
+ list-style: none;
+ border: 3px solid #364e59;
+ z-index: 100000;
+ -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
+ -moz-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
+ box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
+}
+ul.menu-popup a {
+ display: block;
+ color: #2d2d2d;
+ padding: 5px 10px;
+ text-decoration: none;
+}
+ul.menu-popup a:hover {
+ background-color: #ccff42;
+}
+ul.menu-popup .menu-sep {
+ border-top: 1px solid #9eabb0;
+}
+ul.menu-popup li {
+ float: none;
+ overflow: auto;
+ height: auto;
+ display: block;
+}
+ul.menu-popup li img {
+ float: left;
+ width: 16px;
+ height: 16px;
+ padding-right: 5px;
+}
+ul.menu-popup .empty {
+ padding: 5px;
+ text-align: center;
+ color: #9eabb0;
+}
+ul.menu-popup .toolbar {
+ background-color: #9eabb0;
+ height: auto;
+ overflow: auto;
+}
+ul.menu-popup .toolbar a {
+ float: right;
+}
+ul.menu-popup .toolbar a:hover {
+ background-color: #ffffff;
+}
+/* header */
+header {
+ position: fixed;
+ left: 43%;
+ right: 43%;
+ top: 0px;
+ margin: 0px;
+ padding: 0px;
+ /*width: 100%; height: 12px; */
+
+ z-index: 110;
+ color: #ffffff;
+}
+header #site-location {
+ display: none;
+}
+header #banner {
+ overflow: hidden;
+ text-align: center;
+ width: 100%;
+}
+header #banner a,
+header #banner a:active,
+header #banner a:visited,
+header #banner a:link,
+header #banner a:hover {
+ color: #ffffff;
+ text-decoration: none;
+ outline: none;
+ vertical-align: bottom;
+}
+header #banner #logo-img {
+ height: 22px;
+ margin-top: 5px;
+}
+header #banner #logo-text {
+ font-size: 22px;
+}
+
+
/* notifications popup menu */
.nav-notify {
display: none;
@@ -3258,49 +3517,3 @@ ul.menu-popup {
.notify-seen {
background: #DDDDDD;
}
-
-#id_term_label {
- width:75px;
-}
-#id_term {
- width:100px;
-}
-
-#recip {
-
-}
-.autocomplete-w1 { background: #ffffff; no-repeat bottom right; position:absolute; top:0px; left:0px; margin:6px 0 0 6px; /* IE6 fix: */ _background:none; _margin:1px 0 0 0; }
-.autocomplete { color:#000; border:1px solid #999; background:#FFF; cursor:default; text-align:left; max-height:350px; overflow:auto; margin:-6px 6px 6px -6px; /* IE6 specific: */ _height:350px; _margin:0; _overflow-x:hidden; }
-.autocomplete .selected { background:#F0F0F0; }
-.autocomplete div { padding:2px 5px; white-space:nowrap; overflow:hidden; }
-
-#datebrowse-sidebar select {
- margin-left: 25px;
-}
-
-
-.jslider .jslider-scale ins {
- color: #333;
- font-size: 12px;
- width: 100px;
- text-align: center;
-}
-
-.slider {
- margin-top: 10px;
- margin-bottom: 30px;
-}
-
-
-#main-slider {
- position: relative;
- left: 5%;
- width: 90%;
-}
-
-
-#contact-slider {
- position: relative;
- left: 5%;
- width: 90%;
-}
diff --git a/view/theme/slackr/css/style.css b/view/theme/slackr/css/style.css
index 7ee6d133d..8471982e9 100644
--- a/view/theme/slackr/css/style.css
+++ b/view/theme/slackr/css/style.css
@@ -39,17 +39,6 @@ nav #banner img {
background: #ffffff !important;
}
-section {
- margin: 0px 32px;
-}
-
-aside {
- margin-left: 32px;
-}
-nav {
- margin-left: 32px;
- margin-right: 32px;
-}
nav #site-location {
top: 80px;
@@ -220,31 +209,3 @@ nav #site-location {
-o-transform: rotate(4deg);
}
-
-/*
-.jslider .jslider-scale ins {
- color: #333;
- font-size: 12px;
- width: 100px;
- text-align: center;
-}
-
-.slider {
- margin-top: 10px;
- margin-bottom: 15px;
- height: 32px;
-}
-
-#main-slider {
- position: relative;
- left: 10%;
- width: 90%;
-}
-
-#contact-slider {
- position: relative;
- left: 10%;
- width: 90%;
-
-}
-*/ \ No newline at end of file
diff --git a/view/tpl/nav.tpl b/view/tpl/nav.tpl
index 4675c3e5c..af1fc9414 100644
--- a/view/tpl/nav.tpl
+++ b/view/tpl/nav.tpl
@@ -1,68 +1,95 @@
-<nav>
- $langselector
+<header>
+ {# $langselector #}
<div id="site-location">$sitelocation</div>
-
- {{ if $nav.logout }}<a id="nav-logout-link" class="nav-link $nav.logout.2" href="$nav.logout.0" title="$nav.logout.3" >$nav.logout.1</a> {{ endif }}
- {{ if $nav.login }}<a id="nav-login-link" class="nav-login-link $nav.login.2" href="$nav.login.0" title="$nav.login.3" >$nav.login.1</a> {{ endif }}
-
- <span id="nav-link-wrapper" >
-
- {{ if $nav.register }}<a id="nav-register-link" class="nav-commlink $nav.register.2 $sel.register" href="$nav.register.0" title="$nav.register.3" >$nav.register.1</a>{{ endif }}
+ <div id="banner">$banner</div>
+</header>
+<nav>
+ <ul>
+ {{ if $userinfo }}
+ <li id="nav-user-linkmenu" class="nav-menu-icon"><a href="#" rel="#nav-user-menu" title="$sitelocation"><img src="$userinfo.icon" alt="$userinfo.name"></a>
+ <ul id="nav-user-menu" class="menu-popup">
+ {{ for $nav.usermenu as $usermenu }}
+ <li><a class="$usermenu.2" href="$usermenu.0" title="$usermenu.3">$usermenu.1</a></li>
+ {{ endfor }}
+
+ {{ if $nav.notifications }}<li><a class="$nav.notifications.2" href="$nav.notifications.0" title="$nav.notifications.3" >$nav.notifications.1</a></li>{{ endif }}
+ {{ if $nav.messages }}<li><a class="$nav.messages.2" href="$nav.messages.0" title="$nav.messages.3" >$nav.messages.1</a></li>{{ endif }}
+ {{ if $nav.contacts }}<li><a class="$nav.contacts.2" href="$nav.contacts.0" title="$nav.contacts.3" >$nav.contacts.1</a></li>{{ endif }}
+ </ul>
+ </li>
+ {{ endif }}
- {{ if $nav.help }} <a id="nav-help-link" class="nav-link $nav.help.2" target="friendika-help" href="$nav.help.0" title="$nav.help.3" >$nav.help.1</a>{{ endif }}
+ {{ if $nav.community }}
+ <li id="nav-community-link" class="nav-menu $sel.community">
+ <a class="$nav.community.2" href="$nav.community.0" title="$nav.community.3" >$nav.community.1</a>
+ </li>
+ {{ endif }}
+
+ {{ if $nav.network }}
+ <li id="nav-network-link" class="nav-menu $sel.network">
+ <a class="$nav.network.2" href="$nav.network.0" title="$nav.network.3" >$nav.network.1</a>
+ <span id="net-update" class="nav-notify"></span>
+ </li>
+ {{ endif }}
+ {{ if $nav.home }}
+ <li id="nav-home-link" class="nav-menu $sel.home">
+ <a class="$nav.home.2" href="$nav.home.0" title="$nav.home.3" >$nav.home.1</a>
+ <span id="home-update" class="nav-notify"></span>
+ </li>
+ {{ endif }}
- {{ if $nav.apps }}<a id="nav-apps-link" class="nav-link $nav.apps.2" href="$nav.apps.0" title="$nav.apps.3" >$nav.apps.1</a>{{ endif }}
-
- <a id="nav-search-link" class="nav-link $nav.search.2" href="$nav.search.0" title="$nav.search.3" >$nav.search.1</a>
- <a id="nav-directory-link" class="nav-link $nav.directory.2" href="$nav.directory.0" title="$nav.directory.3" >$nav.directory.1</a>
-
- {{ if $nav.admin }}<a id="nav-admin-link" class="nav-link $nav.admin.2" href="$nav.admin.0" title="$nav.admin.3" >$nav.admin.1</a>{{ endif }}
-
- {{ if $nav.network }}
- <a id="nav-network-link" class="nav-commlink $nav.network.2 $sel.network" href="$nav.network.0" title="$nav.network.3" >$nav.network.1</a>
- <span id="net-update" class="nav-ajax-left"></span>
- {{ endif }}
- {{ if $nav.home }}
- <a id="nav-home-link" class="nav-commlink $nav.home.2 $sel.home" href="$nav.home.0" title="$nav.home.3" >$nav.home.1</a>
- <span id="home-update" class="nav-ajax-left"></span>
- {{ endif }}
- {{ if $nav.community }}
- <a id="nav-community-link" class="nav-commlink $nav.community.2 $sel.community" href="$nav.community.0" title="$nav.community.3" >$nav.community.1</a>
- {{ endif }}
- {{ if $nav.introductions }}
- <a id="nav-notify-link" class="nav-commlink $nav.introductions.2 $sel.introductions" href="$nav.introductions.0" title="$nav.introductions.3" >$nav.introductions.1</a>
- <span id="intro-update" class="nav-ajax-left"></span>
- {{ endif }}
- {{ if $nav.messages }}
- <a id="nav-messages-link" class="nav-commlink $nav.messages.2 $sel.messages" href="$nav.messages.0" title="$nav.messages.3" >$nav.messages.1</a>
- <span id="mail-update" class="nav-ajax-left"></span>
- {{ endif }}
-
-
-
- {{ if $nav.manage }}<a id="nav-manage-link" class="nav-commlink $nav.manage.2 $sel.manage" href="$nav.manage.0" title="$nav.manage.3">$nav.manage.1</a>{{ endif }}
-
-
{{ if $nav.notifications }}
- <a id="nav-notifications-linkmenu" class="nav-commlink" href="$nav.notifications.0" rel="#nav-notifications-menu" title="$nav.notifications.1">$nav.notifications.1</a>
- <span id="notify-update" class="nav-ajax-left"></span>
+ <li id="nav-notifications-linkmenu" class="nav-menu-icon"><a href="$nav.notifications.0" rel="#nav-notifications-menu" title="$nav.notifications.1"><span class="icon s22 notify">$nav.notifications.1</span></a>
+ <span id="notify-update" class="nav-notify"></span>
<ul id="nav-notifications-menu" class="menu-popup">
- <li id="nav-notifications-see-all"><a href="$nav.notifications.all.0">$nav.notifications.all.1</a></li>
- <li id="nav-notifications-mark-all"><a href="#" onclick="notifyMarkAll(); return false;">$nav.notifications.mark.1</a></li>
+ <!-- TODO: better icons! -->
+ <li id="nav-notifications-mark-all" class="toolbar"><a href="#" onclick="notifyMarkAll(); return false;" title="$nav.notifications.mark.1"><span class="icon s10 edit"></span></a></a><a href="$nav.notifications.all.0" title="$nav.notifications.all.1"><span class="icon s10 plugin"></span></a></li>
<li class="empty">$emptynotifications</li>
</ul>
+ </li>
{{ endif }}
+
+ <li id="nav-site-linkmenu" class="nav-menu-icon"><a href="#" rel="#nav-site-menu"><span class="icon s22 gear">Site</span></a>
+ <ul id="nav-site-menu" class="menu-popup">
+ {{ if $nav.manage }}<li><a class="$nav.manage.2" href="$nav.manage.0" title="$nav.manage.3">$nav.manage.1</a></li>{{ endif }}
- {{ if $nav.settings }}<a id="nav-settings-link" class="nav-link $nav.settings.2" href="$nav.settings.0" title="$nav.settings.3">$nav.settings.1</a>{{ endif }}
- {{ if $nav.profiles }}<a id="nav-profiles-link" class="nav-link $nav.profiles.2" href="$nav.profiles.0" title="$nav.profiles.3" >$nav.profiles.1</a>{{ endif }}
+ {{ if $nav.settings }}<li><a class="$nav.settings.2" href="$nav.settings.0" title="$nav.settings.3">$nav.settings.1</a></li>{{ endif }}
+ {{ if $nav.admin }}<li><a class="$nav.admin.2" href="$nav.admin.0" title="$nav.admin.3" >$nav.admin.1</a></li>{{ endif }}
- {{ if $nav.contacts }}<a id="nav-contacts-link" class="nav-link $nav.contacts.2" href="$nav.contacts.0" title="$nav.contacts.3" >$nav.contacts.1</a>{{ endif }}
- </span>
- <span id="nav-end"></span>
- <span id="banner">$banner</span>
-</nav>
+ {{ if $nav.logout }}<li><a class="menu-sep $nav.logout.2" href="$nav.logout.0" title="$nav.logout.3" >$nav.logout.1</a></li>{{ endif }}
+ {{ if $nav.login }}<li><a class="$nav.login.2" href="$nav.login.0" title="$nav.login.3" >$nav.login.1</a><li>{{ endif }}
+ </ul>
+ </li>
+
+ {{ if $nav.help }}
+ <li id="nav-help-link" class="nav-menu $sel.help">
+ <a class="$nav.help.2" target="friendika-help" href="$nav.help.0" title="$nav.help.3" >$nav.help.1</a>
+ </li>
+ {{ endif }}
+ <li id="nav-search-link" class="nav-menu $sel.search">
+ <a class="$nav.search.2" href="$nav.search.0" title="$nav.search.3" >$nav.search.1</a>
+ </li>
+ <li id="nav-directory-link" class="nav-menu $sel.directory">
+ <a class="$nav.directory.2" href="$nav.directory.0" title="$nav.directory.3" >$nav.directory.1</a>
+ </li>
+
+ {{ if $nav.apps }}
+ <li id="nav-apps-link" class="nav-menu $sel.apps">
+ <a class=" $nav.apps.2" href="#" rel="#nav-apps-menu" title="$nav.apps.3" >$nav.apps.1</a>
+ <ul id="nav-apps-menu" class="menu-popup">
+ {{ for $apps as $ap }}
+ <li>$ap</li>
+ {{ endfor }}
+ </ul>
+ </li>
+ {{ endif }}
+ </ul>
+
+</nav>
<ul id="nav-notifications-template" style="display:none;" rel="template">
- <li class="{4}"><a href="{0}"><img src="{1}" height="24" width="24" alt="" />{2} <span class="notif-when">{3}</span></a></li>
+ <li><a href="{0}"><img src="{1}">{2} <span class="notif-when">{3}</span></a></li>
</ul>
+
+<div style="position: fixed; top: 3px; left: 5px; z-index:9999">$langselector</div>