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

Last change on this file since 929 was 929, checked in by heribert, 8 years ago

Layoutgrundveränderungen Maerz 2016:

  • Uppercase-Schrift in Navigation ersetzt durch Normal, Schriftgröße von 15px auf 17px vergrößert, Futura-ähnliche Webschrift ausprobiert
  • Alternativen Body-Hintergrund ausprobiert, aber noch nicht aktiviert (ist im Commit aber enthalten)
  • Property svn:keywords set to Id
File size: 6.1 KB
Line 
1/**
2 * t29v6 Design sidebar.css
3 * $Id: 12-sidebar.css 929 2016-03-25 17:53:43Z heribert $
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: 23px; /* font-weight: bold; */
27        /*text-transform: uppercase; */
28        /*color: #124b6b;*/
29        margin: 0 -25px;
30        padding: 5px 25px;
31}
32
33/* 25.12.2013: Kapitel durch Linien abtrennen */
34nav.side .u1 > li > a {
35        padding-top: 19px;
36        border-top: 2px solid /*#A07F60;*/ rgba(173,148,125,.8);
37}
38nav.side .u1 > li.first > a {
39        border-top: none; /* Nicht ueber erstem Eintrag (Computer History) */ 
40}
41
42nav.side .u2 {
43        margin: 0 0 20px 0;
44}
45
46nav.side .u2 > li > a {
47        /*text-transform: uppercase; */
48        font-size: 17px;
49        margin: 0 -25px;
50        padding: 5px 25px;
51}
52
53nav.side .u2 > li.active > a {
54        color: #E90015; /* hellblau:  #40a8e2; */
55        /*font-weight: bold;*/
56}
57
58nav.side .u3 {
59        margin-left: 12px;
60        margin-bottom: 12px;
61}
62
63nav.side .u3 { display: none; }
64nav.side .u2 > li.active .u3 { display: block; }
65
66nav.side .u3 > li > a {
67        font-size: 14px;
68        margin: 0 -25px 0 -40px;
69        padding: 1px 25px 1px 40px;
70        opacity: .9;
71        /*text-transform: uppercase;*/
72}
73
74nav.side .u3 > li.active > a,
75nav.side .u4 > li.active > a {
76        color: #e90015;
77        /*font-weight: bold;*/
78}
79
80/* 4. Ebene, wird derzeit nicht aktiv verwendet (nur fuer .u4.geraete) */
81nav.side .u4 {
82        margin-left: 8px;
83        margin-bottom: 8px;
84}
85
86nav.side .u4 > li > a {
87        font-size: 12px;
88        margin: 0 -32px 0 -48px;
89        padding: 1px 32px 1px 48px;
90}
91
92/* nav.side .geraete-Listen */
93nav.side .geraete a {
94        text-transform: none !important;
95        opacity: .5 !important;
96}
97
98nav a:hover, nav ul.rich-text li:hover a, nav a:focus, nav ul.rich-text li:focus a {
99        color: #A12A40;
100        background-color: white;
101}
102
103/* Nav-Hover-Transistions */
104nav a, nav a:link, nav a:visited, nav a:hover, nav a:focus {
105        /*-webkit-transition: color,background-color .18s cubic-bezier(0.420, 0.000, 0.580, 1.000);
106        -moz-transition: color,background-color .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
107        -ms-transition: color,background-color .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
108        -o-transition: color,background-color .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
109        transition: color,background-color .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
110        */
111}
112
113
114/* Scroll-Zustände der Navigationsleiste
115 * Siehe Script, es gibt:
116 *   html.no-js             - Ausgangslage ohne Javascript
117 *   html.mini-menu         - Anzeige nur der aktiven Komponenten
118 *   html.static-menu       - Default mit Javascript
119 *   html.fixed-menu        - Umgeschaltet auf fix
120 *   html.stick-top-menu    - Zwischensituation wenn fix und ganz hochgescrollt (wie static-menu)
121 *   html.stick-bottom-menu - Zwischensituation wenn fix und ganz runtergescrollt (absolut positioniert)
122 */
123html.static-menu nav.side, html.stick-top-menu nav.side {
124        /* Ein/Ausblendeffekt fuer .get-menu-Button erzeugen  */
125        /* http://www.colorzilla.com/gradient-editor */
126        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+ */
127        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+ */
128        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+ */
129        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+ */
130        background: -ms-linear-gradient(top,  rgba(223,234,240,1) 0%,rgba(223,234,240,1) 82%,rgba(223,234,240,0) 100%); /* IE10+ */
131        background: linear-gradient(top,  rgba(223,234,240,1) 0%,rgba(223,234,240,1) 82%,rgba(223,234,240,0) 100%); /* W3C */
132        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dfeaf0', endColorstr='#00dfeaf0',GradientType=0 ); /* IE6-9 */
133
134        padding-bottom: 200%; /* sic! die 82% aus dem gradient muessen unterhalb der Navi anfangen*/
135        position: relative; z-index: 10;
136}
137
138html.fixed-menu nav.side {
139        position: fixed;
140        width: 210px;
141        top: 15px;
142}
143
144html.stick-bottom-menu nav.side {
145        position: absolute;
146        width: 210px;
147        /* Top-Wert durch JS gesetzt. */
148}
149
150html.mini-menu nav.side li { display: none; }
151html.mini-menu nav.side li.active,
152html.mini-menu nav.side li.active > ul.u3 > li,
153html.mini-menu nav.side li.active > ul.u4 > li {
154        display: inline;
155}
156
157
158/* Buttons in Navigationsleiste */
159section.sidebar .button {
160        display: block;
161        cursor: pointer;
162
163        /*font: 14px "Myriad Pro Light";*/
164        font-size: 17px; /*  25.12.2013: .button.collapsed-menu in Navigation drinnnen */
165        /*text-transform: uppercase; */
166        color: #a07f60;
167        /*font-weight: bold;*/
168}
169
170section.sidebar .button:hover {
171        background-color: white;
172}
173
174section.sidebar .button.get-menu {
175        /* Menü-runterhol-Button */
176        position: fixed; z-index: 1;
177        bottom: 0; margin: 0 -25px;
178        padding: 15px 25px;
179        text-align: center; width: 210px;
180}
181
182section.sidebar .button.collapse-menu {
183        /* Ein/Ausklapp-Button */
184        /* Seit 25.12.2013 direkt zwischen den Navigationselemten, jeweils
185       nach li.collapsible-button-after. */
186        /*margin: 3em -25px 0 -25px;
187        padding: 5px 25px;*/
188        padding: 5px 25px;
189        margin: 0 -25px;
190        margin-top:  -10px;
191        margin-bottom: 20px;
192}
193
194html.fixed-menu nav.side .button.collapse-menu,
195html.stick-bottom-menu nav.side .button.collapse-menu {
196        display: none;
197}
198
199
200section.sidebar .button.for-geraete {
201        /* Geraete content collapse button */
202        position: relative;
203        top: -27px; right: -140px;
204        width: 70px; margin-top: 0;
205}
206
207body.collapsed-menu-u3 section.sidebar .button.for-geraete { display: none; }
208
209/* Untere Sidebar */
210section.sidebar.bottom {
211        position: absolute;
212        bottom: 0; left: 0;
213}
214
215section.sidebar.bottom .button.get-menu {
216        position: static;
217        margin-bottom: -25px;
218}
219
220html.button-stick-bottom section.sidebar.top .button.get-menu {
221        display: none;
222}
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