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

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

Seitendurchgang mit Heribert zum t29v6-Launch und darauffolgende Arbeiten.

  • Viele Bugfixes in den deutschen Seiten
  • "weisser-rahmen"-Klasse für Bilder mit weißem Hintergrund eingeführt
  • menu.php: Behandlung von Geräte-Seiten, Body-Klassen auf Basis der Navigationszugehörigkeit
  • RessourceLoader-Optimierungen (nur noch JS-Messages laden)
  • Neuer "Mini"-Modus für Navigationsleiste, implementiert durch menu.js, für Geräteseiten.
  • Bugfixes im Footer: Beam Navigation beim ungerader Anzahl Elemente, Opacity vs. Visibility probiert
  • Überschriftenebene 5 eingeführt (Sieht wie bold aus)
  • Tabellenlayout gefixt
  • Bildboxen kleinen Bug gefixt
  • Heading-Links Padding-Top
  • img_license.js: Fix bei Bildern mit Border
  • menu.js gross umgeschrieben: Entzwirbelung von Collapsable und Scrollable-Code (verschoben auf CSS-Anweisung), besserer Umgang mit Konstanten in Collapsable, Mini-Menu implementierung (eher hacky)

Es gibt noch eine grosse TODO-Liste, was alles gemacht werden muss.

  • Property svn:keywords set to Id
File size: 5.6 KB
Line 
1/**
2 * t29v6 Design sidebar.css
3 * $Id: 12-sidebar.css 278 2012-07-18 12:55:44Z 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,
66nav.side .u4 > li.active > a {
67        color: #e90015;
68        font-weight: bold;
69}
70
71/* 4. Ebene, wird derzeit nicht aktiv verwendet (nur fuer .u4.geraete) */
72nav.side .u4 {
73        margin-left: 8px;
74        margin-bottom: 8px;
75}
76
77nav.side .u4 > li > a {
78        font-size: 12px;
79        margin: 0 -32px 0 -48px;
80        padding: 1px 32px 1px 48px;
81}
82
83/* nav.side .geraete-Listen */
84nav.side .geraete a {
85        text-transform: none !important;
86        opacity: .5 !important;
87}
88
89nav a:hover, nav ul.rich-text li:hover a, nav a:focus, nav ul.rich-text li:focus a {
90        color: #A12A40;
91        background-color: white;
92}
93
94/* Nav-Hover-Transistions */
95nav a, nav a:link, nav a:visited, nav a:hover, nav a:focus {
96        /*-webkit-transition: color,background-color .18s cubic-bezier(0.420, 0.000, 0.580, 1.000);
97        -moz-transition: color,background-color .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
98        -ms-transition: color,background-color .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
99        -o-transition: color,background-color .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
100        transition: color,background-color .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
101        */
102}
103
104
105/* Scroll-Zustände der Navigationsleiste
106 * Siehe Script, es gibt:
107 *   html.no-js             - Ausgangslage ohne Javascript
108 *   html.mini-menu         - Anzeige nur der aktiven Komponenten
109 *   html.static-menu       - Default mit Javascript
110 *   html.fixed-menu        - Umgeschaltet auf fix
111 *   html.stick-top-menu    - Zwischensituation wenn fix und ganz hochgescrollt (wie static-menu)
112 *   html.stick-bottom-menu - Zwischensituation wenn fix und ganz runtergescrollt (absolut positioniert)
113 */
114html.static-menu nav.side, html.stick-top-menu nav.side {
115        /* Ein/Ausblendeffekt fuer .get-menu-Button erzeugen  */
116        /* http://www.colorzilla.com/gradient-editor */
117        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+ */
118        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+ */
119        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+ */
120        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+ */
121        background: -ms-linear-gradient(top,  rgba(223,234,240,1) 0%,rgba(223,234,240,1) 82%,rgba(223,234,240,0) 100%); /* IE10+ */
122        background: linear-gradient(top,  rgba(223,234,240,1) 0%,rgba(223,234,240,1) 82%,rgba(223,234,240,0) 100%); /* W3C */
123        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dfeaf0', endColorstr='#00dfeaf0',GradientType=0 ); /* IE6-9 */
124
125        padding-bottom: 200%; /* sic! die 82% aus dem gradient muessen unterhalb der Navi anfangen*/
126        position: relative; z-index: 10;
127}
128
129html.fixed-menu nav.side {
130        position: fixed;
131        width: 210px;
132        top: 15px;
133}
134
135html.stick-bottom-menu nav.side {
136        position: absolute;
137        width: 210px;
138        /* Top-Wert durch JS gesetzt. */
139}
140
141html.mini-menu nav.side li { display: none; }
142html.mini-menu nav.side li.active,
143html.mini-menu nav.side li.active > ul.u3 > li,
144html.mini-menu nav.side li.active > ul.u4 > li {
145        display: inline;
146}
147
148
149/* Buttons in Navigationsleiste */
150section.sidebar .button {
151        display: block;
152        cursor: pointer;
153
154        /*font: 14px "Myriad Pro Light";*/
155        font-size: 14px;
156        text-transform: uppercase;
157        color: #a07f60;
158        font-weight: bold;
159}
160
161section.sidebar .button:hover {
162        background-color: white;
163}
164
165section.sidebar .button.get-menu {
166        /* Menü-runterhol-Button */
167        position: fixed; z-index: 1;
168        bottom: 0; margin: 0 -25px;
169        padding: 15px 25px;
170        text-align: center; width: 210px;
171}
172
173section.sidebar .button.collapse-menu {
174        /* Ein/Ausklapp-Button */
175        margin: 3em -25px 0 -25px;
176        padding: 5px 25px;
177}
178
179html.fixed-menu nav.side .button.collapse-menu,
180html.stick-bottom-menu nav.side .button.collapse-menu {
181        display: none;
182}
183
184
185section.sidebar .button.for-geraete {
186        /* Geraete content collapse button */
187        position: relative;
188        top: -27px; right: -140px;
189        width: 70px; margin-top: 0;
190}
191
192body.collapsed-menu-u3 section.sidebar .button.for-geraete { display: none; }
193
194/* Untere Sidebar */
195section.sidebar.bottom {
196        position: absolute;
197        bottom: 0; left: 0;
198}
199
200section.sidebar.bottom .button.get-menu {
201        position: static;
202        margin-bottom: -25px;
203}
204
205html.button-stick-bottom section.sidebar.top .button.get-menu {
206        display: none;
207}
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