source: t29-www/shared/css-v6/modules/12-sidebar.css @ 272

Last change on this file since 272 was 272, checked in by sven, 12 years ago

Rudimentaere Dokumentation der split css-Files.

  • Property svn:keywords set to Id
File size: 4.6 KB
Line 
1/**
2 * t29v6 Design sidebar.css
3 * $Id: 12-sidebar.css 272 2012-06-01 19:29:17Z sven $
4 * In dieser Datei:
5 *
6 *   section.sidebar = Sidebar-Bereiche (.top, .botom)
7 *   nav.side = Inhaltsnavigation (Tour),
8 *              JavaScript-Menue (static, fixed, stick-*, ...),
9 *              Sidebar-Buttons
10 *
11 **/
12
13/* Rechtsnavi */
14section.sidebar {
15        width: 210px;
16        padding: 25px; padding-top: 35px;
17        /*background-color: #dfeaf0;*/  /* Die uebernimmt der Container*/
18        float: left;
19}
20
21/* Navigationsleiste */
22nav.side .guide-only { display: none; } /* Nur in nav.guide anzeigen */
23
24nav.side .u1 > li > a {
25        /*font: 18px "Futura Std Book";*/
26        font-size: 21px; font-weight: bold;
27        text-transform: uppercase;
28        /*color: #124b6b;*/
29        margin: 0 -25px;
30        padding: 5px 25px;
31}
32
33nav.side .u2 {
34        margin: 0 0 20px 0;
35}
36
37nav.side .u2 > li > a {
38        text-transform: uppercase;
39        font-size: 15px;
40        margin: 0 -25px;
41        padding: 5px 25px;
42}
43
44nav.side .u2 > li.active > a {
45        color: #E90015; /* hellblau:  #40a8e2; */
46        font-weight: bold;
47}
48
49nav.side .u3 {
50        margin-left: 12px;
51        margin-bottom: 12px;
52}
53
54nav.side .u3 { display: none; }
55nav.side .u2 > li.active .u3 { display: block; }
56
57nav.side .u3 > li > a {
58        font-size: 14px;
59        margin: 0 -25px 0 -40px;
60        padding: 1px 25px 1px 40px;
61        opacity: .9;
62        text-transform: uppercase;
63}
64
65nav.side .u3 > li.active a {
66        color: #e90015;
67        font-weight: bold;
68}
69
70nav a:hover, nav ul.rich-text li:hover a, nav a:focus, nav ul.rich-text li:focus a {
71        color: #A12A40;
72        background-color: white;
73}
74
75/* Nav-Hover-Transistions */
76nav a, nav a:link, nav a:visited, nav a:hover, nav a:focus {
77        /*-webkit-transition: color,background-color .18s cubic-bezier(0.420, 0.000, 0.580, 1.000);
78        -moz-transition: color,background-color .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
79        -ms-transition: color,background-color .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
80        -o-transition: color,background-color .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
81        transition: color,background-color .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
82        */
83}
84
85
86/* Scroll-Zustände der Navigationsleiste
87 * Siehe Script, es gibt:
88 *   html.no-js             - Ausgangslage ohne Javascript
89 *   html.static-menu       - Default mit Javascript
90 *   html.fixed-menu        - Umgeschaltet auf fix
91 *   html.stick-top-menu    - Zwischensituation wenn fix und ganz hochgescrollt (wie static-menu)
92 *   html.stick-bottom-menu - Zwischensituation wenn fix und ganz runtergescrollt (absolut positioniert)
93 */
94html.static-menu nav.side, html.stick-top-menu nav.side {
95        /* Ein/Ausblendeffekt fuer .get-menu-Button erzeugen  */
96        /* http://www.colorzilla.com/gradient-editor */
97        background: -moz-linear-gradient(top,  rgba(223,234,240,1) 0%, rgba(223,234,240,1) 82%, rgba(223,234,240,0) 100%); /* FF3.6+ */
98        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(223,234,240,1)), color-stop(82%,rgba(223,234,240,1)), color-stop(100%,rgba(223,234,240,0))); /* Chrome,Safari4+ */
99        background: -webkit-linear-gradient(top,  rgba(223,234,240,1) 0%,rgba(223,234,240,1) 82%,rgba(223,234,240,0) 100%); /* Chrome10+,Safari5.1+ */
100        background: -o-linear-gradient(top,  rgba(223,234,240,1) 0%,rgba(223,234,240,1) 82%,rgba(223,234,240,0) 100%); /* Opera 11.10+ */
101        background: -ms-linear-gradient(top,  rgba(223,234,240,1) 0%,rgba(223,234,240,1) 82%,rgba(223,234,240,0) 100%); /* IE10+ */
102        background: linear-gradient(top,  rgba(223,234,240,1) 0%,rgba(223,234,240,1) 82%,rgba(223,234,240,0) 100%); /* W3C */
103        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dfeaf0', endColorstr='#00dfeaf0',GradientType=0 ); /* IE6-9 */
104
105        padding-bottom: 200%; /* sic! die 82% aus dem gradient muessen unterhalb der Navi anfangen*/
106        position: relative; z-index: 10;
107}
108
109html.fixed-menu nav.side {
110        position: fixed;
111        width: 210px;
112        top: 15px;
113}
114
115html.stick-bottom-menu nav.side {
116        position: absolute;
117        width: 210px;
118        /* Top-Wert durch JS gesetzt. */
119}
120
121/* Buttons in Navigationsleiste */
122section.sidebar .button {
123        display: block;
124        cursor: pointer;
125
126        /*font: 14px "Myriad Pro Light";*/
127        font-size: 14px;
128        text-transform: uppercase;
129        color: #a07f60;
130        font-weight: bold;
131}
132
133section.sidebar .button:hover {
134        background-color: white;
135}
136
137section.sidebar .button.get-menu {
138        /* Menü-runterhol-Button */
139        position: fixed; z-index: 1;
140        bottom: 0; margin: 0 -25px;
141        padding: 15px 25px;
142        text-align: center; width: 210px;
143}
144
145section.sidebar .button.collapse-menu {
146        /* Ein/Ausklapp-Button */
147        margin: 3em -25px 0 -25px;
148        padding: 5px 25px;
149}
150
151section.sidebar.bottom {
152        position: absolute;
153        bottom: 0; left: 0;
154}
155
156section.sidebar.bottom .button.get-menu {
157        position: static;
158        margin-bottom: -25px;
159}
160
161html.button-stick-bottom section.sidebar.top .button.get-menu {
162        display: none;
163}
Note: See TracBrowser for help on using the repository browser.
© 2008 - 2013 technikum29 • Sven Köppel • Some rights reserved
Powered by Trac
Expect where otherwise noted, content on this site is licensed under a Creative Commons 3.0 License