[TASK] Remove gradient from DocHeader
[Packages/TYPO3.CMS.git] / typo3 / sysext / t3skin / Resources / Private / Styles / TYPO3 / _element_docheader.less
1 //
2 // DocHeader
3 //
4
5 @docheader-text: rgb(45, 45, 45);
6 @docheader-bg: #eee;
7 @docheader-border: rgb(195, 195, 195);
8
9 #typo3-docheader {
10         background: @docheader-bg;
11
12         img,
13         input {
14                 cursor: pointer;
15         }
16
17         .t3-icon {
18                 margin-bottom: 3px;
19         }
20
21         // left col
22         .left {
23                 &:extend(.pull-left);
24                 .t3-icon {
25                         margin-right: 6px;
26                 }
27         }
28         // right col
29         .right {
30                 &:extend(.pull-right);
31                 .t3-icon {
32                         margin-left: 6px;
33                 }
34         }
35
36         // Extra margin 6px added to it-icon margin, doubled spacing = 12px
37         .buttongroup {
38                 float: left;
39                 margin-right: 6px;
40                 .c-inputButton {
41                         color: inherit;
42                 }
43         }
44
45         select {
46                 margin-right: 12px;
47         }
48
49         a {
50                 color: @docheader-text;
51
52                 &:hover {
53                         color: #000;
54                 }
55         }
56
57         .typo3-docheader-functions,
58         .typo3-docheader-buttons {
59                 color: @docheader-text;
60                 overflow: hidden;
61                 padding: 0 24px;
62         }
63
64         // first row
65         .typo3-docheader-functions {
66                 height: 27px;
67                 line-height: 27px;
68
69                 // overwrite defaults from normalize.css
70                 select {
71                         color: @docheader-text;
72                 }
73         }
74
75         // second row
76         .typo3-docheader-buttons {
77                 height: 22px;
78                 padding-top: 3px;
79                 padding-bottom: 3px;
80                 border-bottom: 1px solid #C3C3C3;
81         }
82 }
83
84 //
85 // ExtJS Viewport
86 //
87
88 //
89 // Collapsed tree frame is not invisible, but 5px wide.
90 // If no tree frame is in use, an empty container is shown instead
91 //
92
93 #typo3-navigationContainer-xsplit,
94 #typo3-navigationContainer-xcollapsed,
95 #typo3-navigationDummy {
96         background: @body-bg url(../../Images/docheader-split-background.png) left top repeat-x;
97 }
98
99
100 // override the ExtJS collapse page tree button
101 // -------------------------
102
103 @module-menu-border-color-lighter: #F5F5F5;
104 @module-menu-border-color-light: #C3C3C3;
105
106 #typo3-navigationContainer-xcollapsed {
107         width: 24px!important;
108         &:before {
109                 content: "";
110                 position: absolute;
111                 top: 0;
112                 width: 8px;
113                 height: 100%;
114                 background-color: lighten(@module-menu-bg,25%);
115                 border-right: 1px solid lighten(@module-menu-border-color,20%);
116                 border-left: 1px solid @module-menu-border-color;
117                 .box-shadow(3px 0 0 rgba(0,0,0,0.15));
118         }
119 }
120
121 // center collapse button vertical
122 .x-panel-body {
123         .x-layout-cmini-west .x-layout-mini,
124         .x-layout-split-west .x-layout-mini {
125                 top: 50%;
126                 margin-top: -40px;
127         }
128 }
129
130
131 // styling for the page tree collapse button
132 // this class will be extended from ExtJS CSS Class setup (ExtJS close and open html setup)
133 .typo3-btn-collapse-page-tree {
134         height: 80px;
135         width: 14px;
136         border-top-right-radius: 3px;
137         border-bottom-right-radius: 3px;
138         background: none;
139         border: 1px solid @module-menu-border-color-light;
140         border-left: 1px solid @module-menu-border-color-lighter;
141         display: block;
142         font-size: 0;
143         .opacity(1);
144         &:after {
145                 font-family: 'FontAwesome';
146                 content: "\f0d9";
147                 position: absolute;
148                 top: 50%;
149                 display: block;
150                 width: 100%;
151                 margin-top: -1px;
152                 color: #000;
153                 font-size: 12px;
154                 vertical-align: middle;
155                 text-align: center;
156         }
157 }
158
159 // close page tree button
160 .x-layout-split-west .x-layout-mini {
161         &:extend(.typo3-btn-collapse-page-tree all);
162         margin-left: -2px;
163         background-color: @module-menu-border-color-lighter;
164         &:hover {
165                 background-color: darken(@module-menu-border-color-lighter,5%);
166         }
167 }
168
169 // open page tree button
170 .x-layout-cmini-west .x-layout-mini {
171         &:extend(.typo3-btn-collapse-page-tree all);
172         background-color: lighten(@module-menu-bg, 25%);
173         margin-left: 7px;
174         border: 1px solid lighten(@module-menu-border-color, 20%);
175         border-left: 0;
176
177         &:hover {
178                 .opacity(1);
179                 background-color: lighten(@module-menu-bg,30%);
180         }
181         &:after {
182                 margin-top: -9px;
183                 color: #fff;
184                 content: "\f0da";
185         }
186 }
187
188
189
190 //
191 // ExtJS theme for PageTree
192 //
193 #typo3-pagetree-topPanelItems {
194         background: @docheader-bg;
195
196         #typo3-pagetree-topPanel {
197
198                 .x-panel-body-noborder {
199                         border-bottom: 1px solid @docheader-border;
200                 }
201
202                 // Functions
203                 .x-panel-tbar {
204                         color: @docheader-text;
205                         a {
206                                 color: @docheader-text;
207                                 &:hover {
208                                         color: #000;
209                                 }
210                         }
211                 }
212
213                 // Buttons
214                 .x-panel-body {
215                         color: @docheader-text;
216                         .typo3-pagetree-topPanel-button {
217                                 margin-top: 0;
218                         }
219                         a {
220                                 color: @docheader-text;
221                                 &:hover {
222                                         color: #000;
223                                 }
224                         }
225                 }
226         }
227
228 }