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