1 | /* prelude */ |
---|
2 | |
---|
3 | #prelude { |
---|
4 | line-height: 1.5; |
---|
5 | margin: 0; |
---|
6 | padding: 0; |
---|
7 | overflow: hidden; |
---|
8 | position: absolute; |
---|
9 | top: 3em; |
---|
10 | left: 0; |
---|
11 | background: $prelude-background; |
---|
12 | width: 100%; |
---|
13 | z-index: 100; |
---|
14 | li { |
---|
15 | list-style-type: none; |
---|
16 | margin: 0; |
---|
17 | background: transparent; |
---|
18 | display: inline; |
---|
19 | a { |
---|
20 | padding: 3px 16px 3px 8px; |
---|
21 | color: $prelude-color; |
---|
22 | background: $prelude-background; |
---|
23 | text-decoration: underline; |
---|
24 | &:hover, |
---|
25 | &:focus { |
---|
26 | background: $prelude-background-alt; |
---|
27 | } |
---|
28 | } |
---|
29 | } |
---|
30 | } |
---|
31 | |
---|
32 | |
---|
33 | /* si le prélude est affiché on repousse les trucs dessous */ |
---|
34 | |
---|
35 | #wrapper.with-prelude { |
---|
36 | padding-top: 1em; |
---|
37 | } |
---|
38 | |
---|
39 | #help-button.with-prelude, |
---|
40 | #collapser.with-prelude { |
---|
41 | top: 1em; |
---|
42 | } |
---|
43 | |
---|
44 | |
---|
45 | /* header global h1, form#top-info-blog, ul#top-info-user */ |
---|
46 | |
---|
47 | #header { |
---|
48 | a { |
---|
49 | color: $header-color; |
---|
50 | } |
---|
51 | img { |
---|
52 | vertical-align: middle; |
---|
53 | padding-left: .5em; |
---|
54 | } |
---|
55 | } |
---|
56 | |
---|
57 | |
---|
58 | /* h1 */ |
---|
59 | |
---|
60 | h1 { |
---|
61 | text-indent: 100%; |
---|
62 | width: 16.5em; |
---|
63 | a { |
---|
64 | position: absolute; |
---|
65 | top: 0; |
---|
66 | left: 0; |
---|
67 | width: 150px; |
---|
68 | height: 36px; // was 3em; |
---|
69 | color: $header-color; |
---|
70 | background: transparent url(dc_logos/b-dotclear120.png) no-repeat 0 6px; |
---|
71 | transition: none; |
---|
72 | &:hover, |
---|
73 | &:focus { |
---|
74 | background-position: 0 -94px; |
---|
75 | background-color: transparent; |
---|
76 | transition: none; |
---|
77 | } |
---|
78 | &:link { |
---|
79 | transition-timing-function: ease-in-out; |
---|
80 | } |
---|
81 | } |
---|
82 | } |
---|
83 | |
---|
84 | |
---|
85 | /* top-info-blog */ |
---|
86 | |
---|
87 | #top-info-blog { |
---|
88 | select { |
---|
89 | max-width: 20em; |
---|
90 | } |
---|
91 | a { |
---|
92 | margin-left: 1.5em; |
---|
93 | } |
---|
94 | input[type=submit] { |
---|
95 | background: $submit-background; |
---|
96 | border-color: $submit-border; |
---|
97 | margin-left: .33em; |
---|
98 | } |
---|
99 | input[type=submit]:hover { |
---|
100 | color: $submit-color; |
---|
101 | background: $submit-background-alt; |
---|
102 | } |
---|
103 | p { |
---|
104 | display: inline-block; |
---|
105 | margin: 0; |
---|
106 | } |
---|
107 | } |
---|
108 | |
---|
109 | |
---|
110 | /* top-info-user */ |
---|
111 | |
---|
112 | #top-info-user { |
---|
113 | padding-right: .5em; |
---|
114 | list-style-type: none; |
---|
115 | text-align: right; |
---|
116 | li { |
---|
117 | display: inline-block; |
---|
118 | margin-left: .5em; |
---|
119 | padding-left: .5em; |
---|
120 | border-left: 1px solid $header-link-border; |
---|
121 | &:first-child { |
---|
122 | border-left: none; |
---|
123 | } |
---|
124 | } |
---|
125 | a.active { |
---|
126 | border-width: 0; |
---|
127 | border-radius: 4px; |
---|
128 | margin: 0; |
---|
129 | padding: 2px 8px 3px; |
---|
130 | color: $header-active-color; |
---|
131 | background-color: $header-active-background; |
---|
132 | font-weight: bold; |
---|
133 | } |
---|
134 | } |
---|
135 | |
---|
136 | |
---|
137 | /* ------------------------------------------------------------------------------------ |
---|
138 | UN POIL DE MEDIA QUERIES |
---|
139 | ------------------------------------------------------------------------------------ */ |
---|
140 | |
---|
141 | @media screen and (max-width: $xxs-screen) { |
---|
142 | h1, |
---|
143 | h1 a { |
---|
144 | padding: 0; |
---|
145 | } |
---|
146 | } |
---|
147 | |
---|
148 | @media screen and (max-width: $xs-screen) { |
---|
149 | h1 a:link { |
---|
150 | background: transparent url(dc_logos/b-dotclear120.png) no-repeat -270px 6px; |
---|
151 | } |
---|
152 | h1 a:hover, |
---|
153 | h1 a:focus { |
---|
154 | background: url(dc_logos/b-dotclear120.png) no-repeat -270px -94px; |
---|
155 | } |
---|
156 | } |
---|