Dotclear

source: admin/style/scss/partials/_header.scss @ 3763:857d4768935c

Revision 3763:857d4768935c, 2.6 KB checked in by franck <carnet.franck.paul@…>, 7 years ago (diff)

Use sass variables for every color used (mainly foreground, background, border)

Line 
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
60h1 {
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}
Note: See TracBrowser for help on using the repository browser.

Sites map