From 75d210e85dbcff0a6563cb2e31e8c41260f3f7a8 Mon Sep 17 00:00:00 2001
From: Anika Henke <anika@selfthinker.org>
Date: Mon, 3 Oct 2011 12:19:27 +0100
Subject: main changes for new design

---
 css/_toc.css      |  16 ++--
 css/basic.css     |  22 +++--
 css/default.css   |  71 ---------------
 css/design.css    | 260 ++++++++++++++++++++++++++++++++----------------------
 css/structure.css |  22 ++---
 5 files changed, 186 insertions(+), 205 deletions(-)
 delete mode 100644 css/default.css

(limited to 'css')

diff --git a/css/_toc.css b/css/_toc.css
index 5bff9f648..0213a1829 100755
--- a/css/_toc.css
+++ b/css/_toc.css
@@ -9,12 +9,12 @@
 /* toc container */
 .dokuwiki div.toc {
     float: right;
-    margin:  -0.3em 0 .5em 1.4em;
+    margin:  -2em -2em .5em 1.4em;
     /* @todo: possible to make calculation sort of automatic? */
-    width: 200px; /* __sidebar_width__ - margin-left */
-    margin-left: 20px;
-    /*width: 12em;*/
-    font-size: 0.75em;
+    /*width: 200px;  __sidebar_width__ - margin-left */
+    width: __sidebar_width__;
+    font-size: 0.9em;
+    border-left: 1px solid __border__;
 }
 
 /*____________ toc header ____________*/
@@ -23,14 +23,16 @@
     padding: 0.5em 1em;
     margin-bottom: .2em;
     font-weight: bold;
+    /*
     background-color: __background_alt__;
     color: __text__;
+    */
 }
 
 /* css arrow */
 .dokuwiki .toc span.toc_open,
 .dokuwiki .toc span.toc_close {
-    border: .4em solid __background_alt__;
+    border: .4em solid __background__;
     float: right;
     display: block;
     margin: 0 .2em 0 0;
@@ -52,8 +54,10 @@
 
 .dokuwiki #toc__inside {
     padding: 0.75em 1em 1.5em;
+    /*
     background-color: __background_alt__;
     color: __text__;
+    */
 }
 .dokuwiki #toc__inside ul {
     padding: 0 0 0 1.5em;
diff --git a/css/basic.css b/css/basic.css
index fc0b99efc..3c7e6dc74 100755
--- a/css/basic.css
+++ b/css/basic.css
@@ -13,7 +13,16 @@ html {
     overflow-y: scroll;
 }
 html, body {
-    background-color: __background__;
+    background-color: #fbfaf9;
+    background: -moz-linear-gradient(   top, #ddd 0%, #eee 1em, #fbfaf9 4em);
+    /* do we want to support old browsers?
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ddd), color-stop(1em,#eee), color-stop(4em,#fbfaf9));
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ddd', endColorstr='#fbfaf9',GradientType=0 );
+    */
+    background: -webkit-linear-gradient(top, #ddd 0%, #eee 1em, #fbfaf9 4em);
+    background: -o-linear-gradient(     top, #ddd 0%, #eee 1em, #fbfaf9 4em);
+    background: -ms-linear-gradient(    top, #ddd 0%, #eee 1em, #fbfaf9 4em);
+    background: linear-gradient(        top, #ddd 0%, #eee 1em, #fbfaf9 4em);
     color: __text__;
     margin: 0;
     padding: 0;
@@ -135,7 +144,7 @@ a {
 }
 a:link, a:visited {
     text-decoration: none;
-    color: #00c; /* §colour */
+    color: __link__; /* §colour */
 }
 a:link:hover, a:visited:hover,
 a:link:focus, a:visited:focus,
@@ -161,11 +170,12 @@ img {
 }
 
 hr {
-    border-style: solid;
-    border-width: 1px 0 0;
-    text-align: center;
+    border-top: solid #ccc;
+    border-bottom: solid #fff;
+    border-width: 1px 0;
     height: 0;
     width: 100%;
+    text-align: center;
     clear: both;
 }
 
@@ -253,7 +263,7 @@ option   { font-style: normal; font-weight: normal; }
 /* @todo: either make input.edit and buttons more generic or put into design.css */
 .dokuwiki input.edit {
     border: 1px solid __border__;
-    padding: 0.41em 0;
+    padding: 0.35em .1em;
     -moz-box-shadow: inset 0 0 1px __background_alt__;
     -webkit-box-shadow: inset 0 0 1px __background_alt__;
     box-shadow: inset 0 0 1px __background_alt__;
diff --git a/css/default.css b/css/default.css
deleted file mode 100644
index f402cbdde..000000000
--- a/css/default.css
+++ /dev/null
@@ -1,71 +0,0 @@
-#dokuwiki__header h1 a{
-  font-size: 24px;
-}
-
-#dokuwiki__header{
-  padding-top: 3.5em;
-  padding-bottom: 1em;
-}
-
-#page_id{
-  font-size: 0.875em;
-  padding-bottom: 1em;
-  color: #888;
-}
-
-.breadcrumbs{
-  margin-bottom: 0 !important;
-  padding-bottom: 0 !important;
-  color: #888;
-}
-
-#dokuwiki__content .page{
-  position: relative;
-}
-
-/*____________ basic ____________*/
-
-a:link{
-  color: #06d;
-}
-a:visited{
-  color: #2E5E94;
-  border-bottom: 1px dotted #09d;
-}
-
-/*____________ content ____________*/
-
-.mode_show #dokuwiki__content h1{
-  line-height: 1.175em;
-}
-
-.mode_show #dokuwiki__aside{
-  /*border-top: 1px solid #ccc;*/
-  font-size: 0.87em;
-  /* @todo: is 1.5 intentional? shouldn't it be less? */
-  line-height: 1.5;
-}
-
-.mode_show #dokuwiki__aside h1{
-  font-size: 1.25em;
-  margin-top: 1.25em;
-}
-
-.mode_show #dokuwiki__aside h1:first-child{
-  margin-top: 0;
-}
-
-
-/*____________ _edit ____________*/
-
-.dokuwiki .secedit {
-    float: none;
-    margin: -1em 0 1.4em 0;
-    text-align: right;
-}
-.dokuwiki div.secedit {
-}
-.dokuwiki .secedit input.button {
-    padding: 0.5em 0.9em;
-    color: #555;
-}
diff --git a/css/design.css b/css/design.css
index 751631afc..f1285aae9 100755
--- a/css/design.css
+++ b/css/design.css
@@ -7,30 +7,23 @@
  * @author Clarence Lee <spicynoodles@gmail.com>
  */
 
-
 /* header
 ********************************************************************/
 
 #dokuwiki__header {
-    padding: 4em 0 2em;
-    background-color: __background_alt__;
-    /* @todo: add gradients for other browsers */
-    background: -webkit-linear-gradient(top, __background_alt__ 98%, __background_neu__ 100%);
-}
-#IE7 #dokuwiki__header {
-}
-#dokuwiki__header .pad {
-    padding: 0 1em; /* @pad */
+    padding: 2em 0;
 }
 
-#dokuwiki__header .headings {
+#dokuwiki__header .headings,
+#dokuwiki__header .tools {
     margin-bottom: 1em;
 }
 #dokuwiki__header h1 {
     margin-bottom: 0;
-    font-size: 2.25em;
-    font-weight: bold;
+    font-size: 1.5em;
+    /*
     text-shadow: 1px 1px 0px #fff;
+    */
 }
 #dokuwiki__header h1 a {
     text-decoration: none;
@@ -38,22 +31,18 @@
     color: #000;
     background-color: inherit;
 }
+#dokuwiki__header h1 a:hover,
+#dokuwiki__header h1 a:active,
+#dokuwiki__header h1 a:focus {
+}
 #dokuwiki__header p.claim {
     margin-bottom: 0;
-    /* @todo: style.ini */
-    color: #888;
-    font-style: italic;
+    /*color: __text_neu__;*/
     font-size: 0.875em;
 }
 
 #dokuwiki__header .tools {
-    margin-bottom: 1em;
-}
-#dokuwiki__header .tools ul {
-    margin-bottom: 0;
-}
-#dokuwiki__header .tools ul li {
-    display: inline;
+    margin-top: .2em;
 }
 
 
@@ -73,124 +62,156 @@
     font-weight: bold;
 }
 
-#dokuwiki__usertools ul,
-#dokuwiki__sitetools ul,
-#dokuwiki__pagetools ul {
+#dokuwiki__header .tools ul {
     padding-left: 0;
+    margin-bottom: 0;
 }
-#dokuwiki__usertools ul li,
-#dokuwiki__sitetools ul li,
-#dokuwiki__pagetools ul li {
+#dokuwiki__header .tools li {
     font-size: 0.875em;
     margin-left: 1em;
-}
-#dokuwiki__usertools ul li,
-#dokuwiki__pagetools ul li {
-    margin-top: .7em;
-    margin-bottom: .7em;
-    float: left;
     list-style: none;
+    display: inline;
 }
 
 /*____________ user tools ____________*/
 
 #dokuwiki__usertools {
     position: absolute;
-    top: 0;
-    left: 0;
-    text-align: left;
+    top: .5em;
+    right: .5em;
+    text-align: right;
     width: 100%;
 }
 #dokuwiki__usertools ul {
-    /* @todo: style.ini colours for gradients? */
-    background-color: __background__;
-    background: -moz-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f2f2f2));
-    background: -webkit-linear-gradient(top, #ffffff 0%,#f2f2f2 100%);
-    background: -o-linear-gradient(top, #ffffff 0%,#f2f2f2 100%);
-    background: -ms-linear-gradient(top, #ffffff 0%,#f2f2f2 100%);
-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f2',GradientType=0 );
-    background: linear-gradient(top, #ffffff 0%,#f2f2f2 100%);
-    border: solid __background_neu__;
-    border-width: 0 1px 1px;
-    border-bottom-left-radius: .3em;
-    border-bottom-right-radius: .3em;
     margin: 0 auto;
     padding: 0;
     max-width: __site_width__;
-    overflow: hidden;
 }
 #IE6 #dokuwiki__usertools ul {
     width: 100%;
 }
-#dokuwiki__usertools ul li {
-    margin: .7em 0 .7em 1em;
-    float: left;
-    list-style: none;
-}
 #dokuwiki__usertools ul li.user {
 }
 
 /*____________ page tools ____________*/
 
 #dokuwiki__pagetools {
+    position: absolute;
+    right: -32px;
+    top: 1em;
+    font-size: 90%;
+}
+
+#dokuwiki__pagetools div.tools {
     position: fixed;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    z-index: 10;
-    background: #dbdfe0;
-    background: -moz-linear-gradient(top, #dbdfe0 0%, #eaeaea 12%, #edf1f2 100%);
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dbdfe0), color-stop(12%,#eaeaea), color-stop(100%,#edf1f2));
-    background: -webkit-linear-gradient(top, #dbdfe0 0%,#eaeaea 12%,#edf1f2 100%);
-    background: -o-linear-gradient(top, #dbdfe0 0%,#eaeaea 12%,#edf1f2 100%);
-    background: -ms-linear-gradient(top, #dbdfe0 0%,#eaeaea 12%,#edf1f2 100%);
-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dbdfe0', endColorstr='#edf1f2',GradientType=0 );
-    background: linear-gradient(top, #dbdfe0 0%,#eaeaea 12%,#edf1f2 100%);
-}
-#IE6 #dokuwiki__content {
-    margin-bottom: 1.4em;
 }
+
 #dokuwiki__pagetools ul {
-    margin: 0 auto;
-    max-width: __site_width__;
-    padding: 0 1em; /* @pad */
+    position: absolute;
+    right: 0;
+    width: 32px;
+    overflow: hidden;
+    border: solid __border__;
+    border-width: 1px 1px 1px 0;
+    border-radius: 2px;
+    text-align: right;
+    margin: 0;
+    padding: 0;
+    background-color: __background__;
+    color: inherit;
+}
+
+#dokuwiki__pagetools:hover ul,
+#dokuwiki__pagetools:active ul,
+#dokuwiki__pagetools:focus ul {
+    width: auto;
+    border-width: 1px;
 }
+
 #dokuwiki__pagetools ul li {
-    margin: .7em 1em .7em 0;
+    padding: 4px 2px;
+    margin: 0;
+    list-style: none;
 }
-#dokuwiki__pagetools ul {
-    position: relative;
+#dokuwiki__pagetools:hover ul li,
+#dokuwiki__pagetools:active ul li,
+#dokuwiki__pagetools:focus ul li {
+    padding: 4px 4px;
 }
-#dokuwiki__pagetools ul li a.action.top {
-    position: absolute;
-    top: .7em;
-    right: 0;
+
+#dokuwiki__pagetools ul li a {
+    white-space: nowrap;
+    background-repeat: no-repeat;
+    padding-right: 0;
+    padding-left: 32px;
+    background-position: 10px center;
+}
+
+#dokuwiki__pagetools:hover ul li a,
+#dokuwiki__pagetools:active ul li a,
+#dokuwiki__pagetools:focus ul li a {
+    padding-right: 32px;
+    padding-left: 0;
+    background-position: right center;
+}
+
+/* @todo: add NEW icons */
+#dokuwiki__pagetools ul li a.edit {
+    background-image: url(images/pagetools/pencil.png);
+}
+#dokuwiki__pagetools ul li a.show {
+    background-image: url(images/pagetools/page.png);
+}
+#dokuwiki__pagetools ul li a.create {
+    background-image: url(images/pagetools/pencil_add.png);
+}
+#dokuwiki__pagetools ul li a.draft {
+    background-image: url(images/pagetools/inbox-document-text.png);
+}
+#dokuwiki__pagetools ul li a.source {
+    background-image: url(images/pagetools/page_code.png);
+}
+#dokuwiki__pagetools ul li a.revs {
+    background-image: url(images/pagetools/time.png);
+}
+#dokuwiki__pagetools ul li a.backlink {
+    background-image: url(images/pagetools/arrow_redo.png);
+}
+#dokuwiki__pagetools ul li a.subscribe {
+    background-image: url(images/pagetools/email_star.png);
+}
+#dokuwiki__pagetools ul li a.top {
+    background-image: url(images/pagetools/arrow_up.png);
 }
 
+
 /*____________ site tools ____________*/
 
 #dokuwiki__sitetools {
-    /* @todo: is the width still needed? */
-    width: __sidebar_width__;
     text-align: right;
 }
 
 #dokuwiki__sitetools form.search {
     display: block;
     font-size: 0.875em;
+    position: relative;
 }
 #dokuwiki__sitetools form.search input.edit {
-    /* @todo: em doesn't fit with px value for sitetools div */
-    width: 12em;
-    border-right: none;
-    border-bottom-right-radius: 0;
-    border-top-right-radius: 0;
+    width: 16em;
+    padding-right: 22px;
 }
 #dokuwiki__sitetools form.search input.button {
+/*
     border-bottom-left-radius: 0;
     border-top-left-radius: 0;
     padding: 0.5em 0.75em;
+*/
+    background: transparent url(images/search.png) no-repeat 0 0;
+    border-width: 0;
+    width: 14px;
+    height: 14px;
+    text-indent: -99999px;
+    margin-left: -20px;
 }
 
 #dokuwiki__sitetools ul {
@@ -199,12 +220,33 @@
 #dokuwiki__sitetools li {
 }
 
+/*____________ breadcrumbs ____________*/
+
+.dokuwiki div.breadcrumbs {
+    border: 1px solid __border__;
+    padding: .1em .35em;
+    -moz-box-shadow: inset 0 0 1px __background_alt__;
+    -webkit-box-shadow: inset 0 0 1px __background_alt__;
+    box-shadow: inset 0 0 1px __background_alt__;
+    border-radius: 2px;
+    /* @todo: style.ini */
+    background-color: #fdfdfd;
+    margin-bottom: .5em;
+    font-size: 0.875em;
+}
+.dokuwiki div.breadcrumbs a {
+    color: __link__;
+    background-color: inherit;
+}
+.dokuwiki div.breadcrumbs .bcsep {
+    font-size: 0.75em;
+}
+
 
 /* sidebar
 ********************************************************************/
 
 #dokuwiki__aside {
-    padding-top: .4em;
     line-height: 1.2;
 }
 
@@ -233,24 +275,28 @@
 /* content
 ********************************************************************/
 
-.dokuwiki .page {
+.dokuwiki .pageId {
+    position: absolute;
+    top: -1.5em;
+    right: .5em;
+    font-size: 0.875em;
+    border: solid __border__;
+    border-width: 1px 1px 0;
+    background-color: __background__;
+    color: __text_alt__;
+    padding: .1em .35em;
+    border-top-left-radius: 2px;
+    border-top-right-radius: 2px;
 }
 
-/*____________ breadcrumbs ____________*/
+.dokuwiki .page {
+    background: __background__;
+    color: inherit;
+    border: 1px solid #eee;
+    box-shadow: 0 0 .5em #999;
+    border-radius: 2px;
+    padding: 2em;
 
-.dokuwiki div.breadcrumbs {
-    /*border-top: 1px solid #ccc;*/
-    padding: 0.2em 0 0.75em 0;
-    margin-bottom: 0.6em;
-    font-size: 0.875em;
-}
-.dokuwiki div.breadcrumbs a {
-    /* @todo: wiki page colour or external link colour? */
-    color: __existing__;
-    background-color: inherit;
-}
-.dokuwiki div.breadcrumbs .bcsep {
-    font-size: 0.75em;
 }
 
 /*____________ misc ____________*/
@@ -299,10 +345,10 @@
 ********************************************************************/
 
 .dokuwiki .wrapper {
-    margin-bottom: 2.8em;
+    margin-bottom: 1.4em;
 }
 #IE6 .dokuwiki .wrapper {
-    margin-bottom: 1.4em;
+    margin-bottom: .7em;
 }
 
 #dokuwiki__footer {
diff --git a/css/structure.css b/css/structure.css
index 638d882b4..82ed17031 100755
--- a/css/structure.css
+++ b/css/structure.css
@@ -8,16 +8,17 @@ body {
     margin: 0 auto;
 }
 #dokuwiki__site {
+    margin: 0 auto;
+    max-width: __site_width__;
 }
 #dokuwiki__site .site {
+    padding: 0 .5em;
 }
 
 #dokuwiki__header {
     width: 100%;
 }
 #dokuwiki__header .pad {
-    margin: 0 auto;
-    max-width: __site_width__;
 }
     #dokuwiki__header .headings {
         float: left;
@@ -35,20 +36,13 @@ body {
 
 #dokuwiki__site .wrapper {
     position: relative;
-    margin: 0 auto;
-    max-width: __site_width__;
-    padding: 1.4em 1em; /* @pad */
 }
 #IE6 #dokuwiki__site .wrapper,
 #IE7 #dokuwiki__site .wrapper {
     height: 1%;
 }
 
-    /* show sidebar only in show mode */
     #dokuwiki__aside {
-        display: none;
-    }
-    .mode_show #dokuwiki__aside {
         width: __sidebar_width__;
         float: left;
         position: relative;
@@ -58,21 +52,19 @@ body {
         margin: 0 1.5em 0 0;
     }
 
-    /* make content wider when there's no sidebar */
-    .mode_show #dokuwiki__content {
+    #dokuwiki__content {
         float: right;
         margin-left: -__sidebar_width__;
         width: 100%;
     }
-    .mode_show #dokuwiki__content .pad {
+    #dokuwiki__content .pad {
         margin-left: __sidebar_width__;
     }
 
 #dokuwiki__footer {
     clear: both;
-    margin: 0 auto;
-    max-width: __site_width__;
-    padding: 0 1em 2.4em; /* @pad */
+    padding: 0 0 2.4em; /* @pad */
+    margin-left: __sidebar_width__;
 }
 #dokuwiki__footer .pad {
 }
-- 
cgit v1.2.3