[TASK] Add title attribute for icons in ext:viewpage
[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 }