skin.less 40 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783
  1. // Reset
  2. .@{prefix}-container, .@{prefix}-container *, .@{prefix}-widget, .@{prefix}-widget *, .@{prefix}-reset {
  3. margin: 0; padding: 0; border: 0; outline: 0;
  4. vertical-align: top; background: transparent;
  5. text-decoration: none; color: @text;
  6. font-family: @font-family;
  7. font-size: @font-size; text-shadow: none; float: none;
  8. position: static; width: auto; height: auto;
  9. white-space: nowrap; cursor: inherit;
  10. -webkit-tap-highlight-color: transparent;
  11. line-height: normal; font-weight: normal;
  12. text-align: left;
  13. -moz-box-sizing: content-box;
  14. -webkit-box-sizing: content-box;
  15. box-sizing: content-box;
  16. direction: ltr;
  17. }
  18. .@{prefix}-widget button {
  19. -moz-box-sizing: border-box;
  20. -webkit-box-sizing: border-box;
  21. box-sizing: border-box;
  22. }
  23. .@{prefix}-container *[unselectable] {
  24. -moz-user-select: none;
  25. -webkit-user-select: none;
  26. -o-user-select: none;
  27. user-select: none;
  28. }
  29. // Variables
  30. // Syntax: <control>-(<sub control>)-<bg|border|text>-(<state>)-(<extra>);
  31. // Example: @btn-primary-bg-hover-hlight;
  32. @prefix: mce;
  33. // Default font
  34. @font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  35. @font-size: 14px;
  36. @line-height: 20px;
  37. @has-gradients: true;
  38. @has-radius: true;
  39. @has-boxshadow: true;
  40. // Text colors
  41. @text: #333;
  42. @text-inverse: white;
  43. @text-disabled: #aaa;
  44. @text-shadow: 0 1px 1px hsla(hue(@text-inverse), saturation(@text-inverse), lightness(@text-inverse), 0.75);
  45. @text-error: #aa0000;
  46. // Button
  47. @btn-text: @text;
  48. @btn-text-shadow: @text-inverse;
  49. @btn-border-top: rgba(0, 0, 0, .1);
  50. @btn-border-right: rgba(0, 0, 0, .1);
  51. @btn-border-bottom: fadein(rgba(0, 0, 0, .1), 15%);
  52. @btn-border-left: fadein(rgba(0, 0, 0, .1), 15%);
  53. @btn-split-border: #bdbdbd;
  54. @btn-caret-border: @btn-text;
  55. @btn-text-disabled: @text-disabled;
  56. @btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
  57. @btn-box-shadow-active: inset 0 2px 4px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .05);
  58. @btn-box-disabled-opacity: 0.4;
  59. @btn-bg: white;
  60. @btn-bg-hlight: #D9D9D9;
  61. @btn-bg-hover: darken(@btn-bg, 5%);
  62. @btn-bg-hlight-hover: darken(@btn-bg-hlight, 5%);
  63. @btn-primary-bg: #0088cc;
  64. @btn-primary-bg-hlight: #0044cc;
  65. @btn-primary-bg-hover: darken(@btn-primary-bg, 5%);
  66. @btn-primary-bg-hover-hlight: darken(@btn-primary-bg-hlight, 5%);
  67. @btn-primary-text: #fff;
  68. @btn-primary-text-shadow: #333;
  69. @btn-primary-border-top: mix(@btn-border-top, @btn-primary-bg, 50%);
  70. @btn-primary-border-right: mix(@btn-border-right, @btn-primary-bg, 50%);
  71. @btn-primary-border-bottom: mix(@btn-border-bottom, @btn-primary-bg, 50%);
  72. @btn-primary-border-left: mix(@btn-border-left, @btn-primary-bg, 50%);
  73. // Menu
  74. @menuitem-text: @text;
  75. @menu-bg: #fff;
  76. @menu-border: rgba(0, 0, 0, 0.2);
  77. @menubar-border: mix(@panel-border, @panel-bg, 60%);
  78. @menuitem-text-inverse: @text-inverse;
  79. @menubar-bg-active: darken(@btn-bg, 10%);
  80. @menuitem-bg-hover: #0081C2;
  81. @menuitem-bg-selected: #08C;
  82. @menuitem-bg-selected-hlight: #0077B3;
  83. @menuitem-bg-disabled: #CCC;
  84. @menuitem-caret: @menuitem-text;
  85. @menuitem-caret-selected: @menuitem-text-inverse;
  86. @menuitem-separator-top: #CBCBCB;
  87. @menuitem-separator-bottom: @menu-bg;
  88. @menuitem-bg-active: #C8DEF4;
  89. @menuitem-text-active: @text;
  90. @menuitem-preview-border-active: #aaa;
  91. // Panel
  92. @panel-border: #9E9E9E;
  93. @panel-bg: #FDFDFD;
  94. @panel-bg-hlight: #DDD;
  95. // Tabs
  96. @tab-border: #c5c5c5;
  97. @tab-bg: #e3e3e3;
  98. @tab-bg-hover: #FDFDFD;
  99. @tab-bg-active: #FDFDFD;
  100. // Tooltip
  101. @tooltip-bg: #000;
  102. @tooltip-text: white;
  103. @tooltip-font-size: 11px;
  104. // Window
  105. @window-border: #c5c5c5;
  106. @window-head-border: @window-border;
  107. @window-head-close: mix(@text, @window-bg, 60%);
  108. @window-head-close-hover: mix(@text, @window-bg, 40%);
  109. @window-foot-border: @window-border;
  110. @window-foot-bg: @window-bg;
  111. @window-fullscreen-bg: #FFF;
  112. @window-modalblock-bg: #000;
  113. @window-modalblock-opacity: 0.3;
  114. @window-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  115. @window-bg: #FFF;
  116. @window-title-font-size: 20px;
  117. // Popover
  118. @popover-bg: @window-bg;
  119. @popover-arrow-width: 10px;
  120. @popover-arrow: @window-bg;
  121. @popover-arrow-outer-width: @popover-arrow-width + 1;
  122. @popover-arrow-outer: rgba(0, 0, 0, 0.25);
  123. // Floatpanel
  124. @floatpanel-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
  125. // Checkbox
  126. @checkbox-bg: @btn-bg;
  127. @checkbox-bg-hlight: @btn-bg-hlight;
  128. @checkbox-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
  129. @checkbox-border: #c5c5c5;
  130. @checkbox-border-focus: rgba(82, 168, 236, .8);
  131. // Path
  132. @path-text: @text;
  133. @path-bg-focus: #666;
  134. @path-text-focus: #fff;
  135. // Textbox
  136. @textbox-text-placeholder: #aaa;
  137. @textbox-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  138. @textbox-bg: #fff;
  139. @textbox-border: #c5c5c5;
  140. @textbox-border-focus: rgba(82, 168, 236, .8);
  141. // Throbber
  142. @throbber-bg: #fff url('img/loader.gif') no-repeat center center;
  143. // Combobox
  144. @combobox-border: @textbox-border;
  145. // Grid
  146. @grid-bg-active: @menuitem-bg-active;
  147. @grid-border-active: #a1a1a1;
  148. @grid-border: #d6d6d6;
  149. // Misc
  150. @colorbtn-backcolor-bg: #BBB;
  151. @iframe-border: @panel-border;
  152. // Mixins
  153. .opacity(@opacity) {
  154. opacity: @opacity;
  155. @opacityie: @opacity * 100;
  156. filter: ~"alpha(opacity=@{opacityie})";
  157. zoom: 1;
  158. }
  159. .vertical-gradient(@startColor, @endColor) when (@has-gradients = true) {
  160. background-color: mix(@startColor, @endColor, 60%);
  161. background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
  162. background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
  163. background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
  164. background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
  165. background-image: linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10
  166. background-repeat: repeat-x;
  167. filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)", argb(@startColor), argb(@endColor)));
  168. zoom: 1;
  169. }
  170. .vertical-gradient(@startColor, @endColor) when (@has-gradients = false) {
  171. background-color: mix(@startColor, @endColor, 60%);
  172. }
  173. .border-radius(@radius) when (@has-radius = true) {
  174. -webkit-border-radius: @radius;
  175. -moz-border-radius: @radius;
  176. border-radius: @radius;
  177. }
  178. .box-shadow(@shadowA, @shadowB:X, ...) when (@has-boxshadow = true) {
  179. // Multiple shadow solution from http://toekneestuck.com/blog/2012/05/15/less-css-arguments-variable/
  180. @props: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;
  181. -webkit-box-shadow: @props;
  182. -moz-box-shadow: @props;
  183. box-shadow: @props;
  184. }
  185. .transition(@transition) {
  186. -webkit-transition: @transition;
  187. transition: @transition;
  188. }
  189. .inline-block() {
  190. display: inline-block;
  191. *display: inline;
  192. *zoom: 1;
  193. }
  194. .reset-gradient() {
  195. filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
  196. background: transparent;
  197. }
  198. // Animations
  199. .@{prefix}-fade {
  200. opacity: 0;
  201. .transition(opacity .15s linear);
  202. &.@{prefix}-in {
  203. opacity: 1;
  204. }
  205. }
  206. .@{prefix}-tinymce {
  207. // Avoid FOUC
  208. visibility: visible !important;
  209. position: relative;
  210. }
  211. .@{prefix}-fullscreen {
  212. border: 0; padding: 0; margin: 0;
  213. overflow: hidden;
  214. height: 100%;
  215. z-index: 100;
  216. }
  217. div.@{prefix}-fullscreen {
  218. position: fixed;
  219. top: 0; left: 0;
  220. width: 100%;
  221. height: auto;
  222. }
  223. .@{prefix}-tinymce {
  224. display: block;
  225. .border-radius(2px);
  226. }
  227. .@{prefix}-wordcount {
  228. position: absolute;
  229. top: 0;
  230. right: 0;
  231. padding: 8px;
  232. }
  233. div.@{prefix}-edit-area {
  234. background: #FFF;
  235. filter: none;
  236. }
  237. .@{prefix}-statusbar {
  238. position: relative;
  239. }
  240. .@{prefix}-statusbar .@{prefix}-container-body {
  241. position: relative;
  242. }
  243. .@{prefix}-fullscreen .@{prefix}-resizehandle {
  244. display: none;
  245. }
  246. // Charmap
  247. .@{prefix}-charmap {
  248. border-collapse: collapse;
  249. }
  250. .@{prefix}-charmap td {
  251. cursor: default;
  252. border: 1px solid @panel-border;
  253. width: 20px;
  254. height: 20px;
  255. line-height: 20px;
  256. text-align: center;
  257. vertical-align: middle;
  258. padding: 2px;
  259. }
  260. .@{prefix}-charmap td div {
  261. text-align: center;
  262. }
  263. .@{prefix}-charmap td:hover {
  264. background: @btn-bg-hlight;
  265. }
  266. .@{prefix}-grid td div {
  267. border: 1px solid @grid-border;
  268. width: 12px; height: 12px;
  269. margin: 2px;
  270. cursor: pointer;
  271. &:focus {
  272. border-color: @grid-border-active;
  273. }
  274. }
  275. .@{prefix}-grid {
  276. border-spacing: 2px;
  277. border-collapse: separate;
  278. a {
  279. display: block;
  280. border: 1px solid transparent;
  281. &:hover, &:focus {
  282. border-color: @grid-border-active;
  283. }
  284. }
  285. }
  286. .@{prefix}-grid-border {
  287. margin: 0 4px 0 4px;
  288. a {
  289. border-color: @grid-border;
  290. width: 13px; height: 13px;
  291. }
  292. a:hover, a.@{prefix}-active {
  293. border-color: @grid-border-active;
  294. background: @grid-bg-active;
  295. }
  296. }
  297. .@{prefix}-text-center {
  298. text-align: center;
  299. }
  300. div.@{prefix}-tinymce-inline {
  301. width: 100%;
  302. .box-shadow(none);
  303. }
  304. // Reduce double margins between toolbar rows
  305. .@{prefix}-toolbar-grp {
  306. padding-bottom: 2px;
  307. }
  308. .@{prefix}-toolbar-grp .@{prefix}-flow-layout-item {
  309. margin-bottom: 0;
  310. }
  311. // RTL
  312. .@{prefix}-rtl .@{prefix}-wordcount {
  313. left: 0;
  314. right: auto;
  315. }
  316. // Container
  317. .@{prefix}-container, .@{prefix}-container-body {
  318. display: block;
  319. }
  320. .@{prefix}-autoscroll {
  321. overflow: hidden;
  322. }
  323. // Scrollbar
  324. .@{prefix}-scrollbar {
  325. position: absolute;
  326. width: 7px;
  327. height: 100%;
  328. top: 2px;
  329. right: 2px;
  330. .opacity(0.4);
  331. }
  332. .@{prefix}-scrollbar-h {
  333. top: auto;
  334. right: auto;
  335. left: 2px;
  336. bottom: 2px;
  337. width: 100%;
  338. height: 7px;
  339. }
  340. .@{prefix}-scrollbar-thumb {
  341. position: absolute;
  342. background-color: #000;
  343. border: 1px solid #888;
  344. border-color: rgba(85, 85, 85, .6);
  345. width: 5px;
  346. height: 100%;
  347. .border-radius(7px);
  348. }
  349. .@{prefix}-scrollbar-h .@{prefix}-scrollbar-thumb {
  350. width: 100%;
  351. height: 5px;
  352. }
  353. .@{prefix}-scrollbar:hover, .@{prefix}-scrollbar.@{prefix}-active {
  354. background-color: #AAA;
  355. .opacity(0.6);
  356. .border-radius(7px);
  357. }
  358. .@{prefix}-scroll {
  359. position: relative;
  360. }
  361. // Panel
  362. .@{prefix}-panel {
  363. border: 0 solid @panel-border;
  364. .vertical-gradient(@panel-bg, @panel-bg-hlight);
  365. }
  366. // FloatPanel
  367. .@{prefix}-floatpanel {
  368. position: absolute;
  369. .box-shadow(@floatpanel-box-shadow);
  370. }
  371. .@{prefix}-floatpanel.@{prefix}-fixed {
  372. position: fixed;
  373. }
  374. // Popover panel
  375. .@{prefix}-floatpanel .@{prefix}-arrow,
  376. .@{prefix}-floatpanel .@{prefix}-arrow:after {
  377. position: absolute;
  378. display: block;
  379. width: 0;
  380. height: 0;
  381. border-color: transparent;
  382. border-style: solid;
  383. }
  384. .@{prefix}-floatpanel .@{prefix}-arrow {
  385. border-width: @popover-arrow-outer-width;
  386. }
  387. .@{prefix}-floatpanel .@{prefix}-arrow:after {
  388. border-width: @popover-arrow-width;
  389. content: "";
  390. }
  391. .@{prefix}-floatpanel.@{prefix}-popover {
  392. .reset-gradient();
  393. .border-radius(6px);
  394. .box-shadow(@floatpanel-box-shadow);
  395. top: 0;
  396. left: 0;
  397. background: @popover-bg;
  398. border: 1px solid @panel-border;
  399. border: 1px solid @popover-arrow-outer;
  400. &.@{prefix}-bottom {
  401. margin-top: @popover-arrow-width;
  402. *margin-top: 0;
  403. & > .@{prefix}-arrow {
  404. left: 50%;
  405. margin-left: -@popover-arrow-outer-width;
  406. border-top-width: 0;
  407. border-bottom-color: @panel-border;
  408. border-bottom-color: @popover-arrow-outer;
  409. top: -@popover-arrow-outer-width;
  410. &:after {
  411. top: 1px;
  412. margin-left: -@popover-arrow-width;
  413. border-top-width: 0;
  414. border-bottom-color: @popover-arrow;
  415. }
  416. }
  417. &.@{prefix}-start { margin-left: -22px; }
  418. &.@{prefix}-start > .@{prefix}-arrow { left: 20px; }
  419. &.@{prefix}-end { margin-left: 22px; }
  420. &.@{prefix}-end > .@{prefix}-arrow { right: 10px; left: auto; }
  421. }
  422. }// Window
  423. .@{prefix}-fullscreen {
  424. border: 0; padding: 0; margin: 0;
  425. overflow: hidden;
  426. background: @window-fullscreen-bg;
  427. height: 100%;
  428. }
  429. div.@{prefix}-fullscreen {
  430. position: fixed;
  431. top: 0; left: 0;
  432. }
  433. #@{prefix}-modal-block {
  434. .opacity(0);
  435. position: fixed;
  436. left: 0; top: 0;
  437. width: 100%; height: 100%;
  438. background: @window-modalblock-bg;
  439. }
  440. #@{prefix}-modal-block.@{prefix}-in {
  441. .opacity(@window-modalblock-opacity);
  442. }
  443. .@{prefix}-window-move {
  444. cursor: move;
  445. }
  446. .@{prefix}-window {
  447. .border-radius(6px);
  448. .box-shadow(@window-box-shadow);
  449. .reset-gradient();
  450. background: @window-bg;
  451. position: fixed;
  452. top: 0; left: 0;
  453. opacity: 0;
  454. .transition(opacity 150ms ease-in);
  455. }
  456. .@{prefix}-window.@{prefix}-in {
  457. opacity: 1;
  458. }
  459. .@{prefix}-window-head {
  460. padding: 9px 15px;
  461. border-bottom: 1px solid @window-head-border;
  462. position: relative;
  463. }
  464. .@{prefix}-window-head .@{prefix}-close {
  465. position: absolute;
  466. right: 15px;
  467. top: 9px;
  468. font-size: 20px;
  469. font-weight: bold;
  470. line-height: 20px;
  471. color: @window-head-close;
  472. cursor: pointer;
  473. // IE7
  474. height: 20px;
  475. overflow: hidden;
  476. }
  477. .@{prefix}-close:hover {
  478. color: @window-head-close-hover;
  479. }
  480. .@{prefix}-window-head .@{prefix}-title {
  481. line-height: 20px;
  482. font-size: @window-title-font-size;
  483. font-weight: bold;
  484. text-rendering: optimizelegibility;
  485. padding-right: 10px;
  486. }
  487. .@{prefix}-window .@{prefix}-container-body {
  488. display: block;
  489. }
  490. .@{prefix}-foot {
  491. display: block;
  492. background-color: @window-foot-bg;
  493. border-top: 1px solid @window-foot-border;
  494. .border-radius(0 0 6px 6px);
  495. }
  496. .@{prefix}-window-head .@{prefix}-dragh {
  497. position: absolute;
  498. top: 0; left: 0;
  499. cursor: move;
  500. width: 90%;
  501. height: 100%;
  502. }
  503. .@{prefix}-window iframe {
  504. width: 100%;
  505. height: 100%;
  506. }
  507. .@{prefix}-window.@{prefix}-fullscreen, .@{prefix}-window.@{prefix}-fullscreen .@{prefix}-foot {
  508. .border-radius(0);
  509. }
  510. // RTL
  511. .@{prefix}-rtl .@{prefix}-window-head .@{prefix}-close {
  512. position: absolute;
  513. right: auto;
  514. left: 15px;
  515. }
  516. .@{prefix}-rtl .@{prefix}-window-head .@{prefix}-dragh {
  517. left: auto;
  518. right: 0;
  519. }
  520. .@{prefix}-rtl .@{prefix}-window-head .@{prefix}-title {
  521. direction: rtl;
  522. text-align: right;
  523. }
  524. // AbsoluteLayout
  525. .@{prefix}-abs-layout {
  526. position: relative;
  527. }
  528. body .@{prefix}-abs-layout-item, .@{prefix}-abs-end {
  529. position: absolute;
  530. }
  531. .@{prefix}-abs-end {
  532. width: 1px; height: 1px;
  533. }
  534. .@{prefix}-container-body.@{prefix}-abs-layout {
  535. overflow: hidden;
  536. }
  537. // Tooltip
  538. .@{prefix}-tooltip {
  539. position: absolute;
  540. padding: 5px;
  541. .opacity(0.8);
  542. }
  543. .@{prefix}-tooltip-inner {
  544. font-size: @tooltip-font-size;
  545. background-color: @tooltip-bg;
  546. color: @tooltip-text;
  547. max-width: 200px;
  548. padding: 5px 8px 4px 8px;
  549. text-align: center;
  550. white-space: normal;
  551. }
  552. .@{prefix}-tooltip-inner {
  553. .border-radius(3px);
  554. }
  555. .@{prefix}-tooltip-inner {
  556. .box-shadow(0 0 5px @tooltip-bg);
  557. }
  558. .@{prefix}-tooltip-arrow {
  559. position: absolute;
  560. width: 0;
  561. height: 0;
  562. line-height: 0;
  563. border: 5px dashed @tooltip-bg;
  564. }
  565. .@{prefix}-tooltip-arrow-n {
  566. border-bottom-color: @tooltip-bg;
  567. }
  568. .@{prefix}-tooltip-arrow-s {
  569. border-top-color: @tooltip-bg;
  570. }
  571. .@{prefix}-tooltip-arrow-e {
  572. border-left-color: @tooltip-bg;
  573. }
  574. .@{prefix}-tooltip-arrow-w {
  575. border-right-color: @tooltip-bg;
  576. }
  577. .@{prefix}-tooltip-nw, .@{prefix}-tooltip-sw {
  578. margin-left: -14px;
  579. }
  580. .@{prefix}-tooltip-n .@{prefix}-tooltip-arrow {
  581. top: 0px;
  582. left: 50%;
  583. margin-left: -5px;
  584. border-bottom-style: solid;
  585. border-top: none;
  586. border-left-color: transparent;
  587. border-right-color: transparent;
  588. }
  589. .@{prefix}-tooltip-nw .@{prefix}-tooltip-arrow {
  590. top: 0;
  591. left: 10px;
  592. border-bottom-style: solid;
  593. border-top: none;
  594. border-left-color: transparent;
  595. border-right-color: transparent;
  596. }
  597. .@{prefix}-tooltip-ne .@{prefix}-tooltip-arrow {
  598. top: 0;
  599. right: 10px;
  600. border-bottom-style: solid;
  601. border-top: none;
  602. border-left-color: transparent;
  603. border-right-color: transparent;
  604. }
  605. .@{prefix}-tooltip-s .@{prefix}-tooltip-arrow {
  606. bottom: 0;
  607. left: 50%;
  608. margin-left: -5px;
  609. border-top-style: solid;
  610. border-bottom: none;
  611. border-left-color: transparent;
  612. border-right-color: transparent;
  613. }
  614. .@{prefix}-tooltip-sw .@{prefix}-tooltip-arrow {
  615. bottom: 0;
  616. left: 10px;
  617. border-top-style: solid;
  618. border-bottom: none;
  619. border-left-color: transparent;
  620. border-right-color: transparent;
  621. }
  622. .@{prefix}-tooltip-se .@{prefix}-tooltip-arrow {
  623. bottom: 0;
  624. right: 10px;
  625. border-top-style: solid;
  626. border-bottom: none;
  627. border-left-color: transparent;
  628. border-right-color: transparent;
  629. }
  630. .@{prefix}-tooltip-e .@{prefix}-tooltip-arrow {
  631. right: 0;
  632. top: 50%;
  633. margin-top: -5px;
  634. border-left-style: solid;
  635. border-right: none;
  636. border-top-color: transparent;
  637. border-bottom-color: transparent;
  638. }
  639. .@{prefix}-tooltip-w .@{prefix}-tooltip-arrow {
  640. left: 0;
  641. top: 50%;
  642. margin-top: -5px;
  643. border-right-style: solid;
  644. border-left: none;
  645. border-top-color: transparent;
  646. border-bottom-color: transparent;
  647. }
  648. // Button
  649. .@{prefix}-btn {
  650. border: 1px solid mix(rgb(red(@btn-border-right), green(@btn-border-right), blue(@btn-border-right)), @panel-bg, 30%);
  651. border-color: @btn-border-top @btn-border-right @btn-border-bottom @btn-border-left;
  652. position: relative;
  653. text-shadow: @text-shadow;
  654. .inline-block();
  655. .border-radius(3px);
  656. .box-shadow(@btn-box-shadow);
  657. .vertical-gradient(@btn-bg, @btn-bg-hlight);
  658. &:hover, &:focus {
  659. color: @btn-text;
  660. .vertical-gradient(darken(@btn-bg, 5%), darken(@btn-bg-hlight, 5%));
  661. }
  662. &.@{prefix}-disabled button, &.@{prefix}-disabled:hover button {
  663. cursor: default;
  664. .box-shadow(none);
  665. .opacity(@btn-box-disabled-opacity);
  666. }
  667. &.@{prefix}-active, &.@{prefix}-active:hover {
  668. .vertical-gradient(darken(@btn-bg, 10%), darken(@btn-bg-hlight, 10%));
  669. .box-shadow(@btn-box-shadow-active);
  670. }
  671. &:not(.@{prefix}-disabled):active {
  672. .vertical-gradient(darken(@btn-bg, 10%), darken(@btn-bg-hlight, 10%));
  673. .box-shadow(@btn-box-shadow-active);
  674. }
  675. }
  676. .@{prefix}-btn button {
  677. padding: 4px 10px;
  678. font-size: @font-size;
  679. line-height: @line-height;
  680. *line-height: @line-height - 4px;
  681. cursor: pointer;
  682. color: @btn-text;
  683. text-align: center;
  684. // Fixes for default inner padding of button
  685. overflow: visible; // IE7
  686. -webkit-appearance: none; // WebKit
  687. &::-moz-focus-inner { // Gecko
  688. border: 0;
  689. padding: 0;
  690. }
  691. }
  692. .@{prefix}-btn i {
  693. text-shadow: 1px 1px @btn-text-shadow;
  694. }
  695. .@{prefix}-primary {
  696. min-width: 50px;
  697. color: @btn-primary-text;
  698. border: 1px solid mix(rgb(red(@btn-border-right), green(@btn-border-right), blue(@btn-border-right)), @panel-bg, 30%);
  699. border-color: @btn-border-top @btn-border-right @btn-border-bottom @btn-border-left;
  700. .vertical-gradient(@btn-primary-bg, @btn-primary-bg-hlight);
  701. &:hover, &:focus {
  702. .vertical-gradient(darken(@btn-primary-bg, 5%), darken(@btn-primary-bg-hlight, 5%));
  703. }
  704. &.@{prefix}-disabled button, &.@{prefix}-disabled:hover button {
  705. cursor: default;
  706. .box-shadow(none);
  707. .opacity(@btn-box-disabled-opacity);
  708. }
  709. &.@{prefix}-active, &.@{prefix}-active:hover, &:not(.@{prefix}-disabled):active {
  710. .vertical-gradient(darken(@btn-primary-bg, 10%), darken(@btn-primary-bg-hlight, 10%));
  711. .box-shadow(@btn-box-shadow-active);
  712. }
  713. }
  714. .@{prefix}-primary button, .@{prefix}-primary button i {
  715. color: @btn-primary-text;
  716. text-shadow: 1px 1px @btn-primary-text-shadow;
  717. }
  718. .@{prefix}-btn-large button {
  719. padding: 9px 14px;
  720. font-size: @font-size + 2px;
  721. line-height: normal;
  722. .border-radius(5px);
  723. }
  724. .@{prefix}-btn-large i {
  725. margin-top: 2px;
  726. }
  727. .@{prefix}-btn-small button {
  728. padding: 1px 5px;
  729. font-size: @font-size - 2px;
  730. *padding-bottom: 2px;
  731. }
  732. .@{prefix}-btn-small i {
  733. line-height: 20px;
  734. vertical-align: top;
  735. *line-height: 18px;
  736. }
  737. .@{prefix}-btn .@{prefix}-caret {
  738. margin-top: 8px;
  739. margin-left: 0;
  740. }
  741. .@{prefix}-btn-small .@{prefix}-caret {
  742. margin-top: 8px;
  743. margin-left: 0;
  744. }
  745. .@{prefix}-caret {
  746. .inline-block();
  747. width: 0; height: 0;
  748. vertical-align: top;
  749. border-top: 4px solid @btn-caret-border;
  750. border-right: 4px solid transparent;
  751. border-left: 4px solid transparent;
  752. content: "";
  753. }
  754. .@{prefix}-disabled .@{prefix}-caret {
  755. border-top-color: @text-disabled;
  756. }
  757. .@{prefix}-caret.@{prefix}-up {
  758. border-bottom: 4px solid @btn-caret-border;
  759. border-top: 0;
  760. }
  761. // RTL
  762. .@{prefix}-rtl .@{prefix}-btn button {
  763. direction: rtl;
  764. }
  765. // ButtonGroup
  766. .@{prefix}-btn-group .@{prefix}-btn {
  767. border-width: 1px 0 1px 0;
  768. margin: 0;
  769. .border-radius(0);
  770. }
  771. .@{prefix}-btn-group .@{prefix}-first {
  772. border-left: 1px solid mix(rgb(red(@btn-border-left), green(@btn-border-left), blue(@btn-border-left)), @panel-bg, 30%);
  773. border-left: 1px solid @btn-border-left;
  774. .border-radius(3px 0 0 3px);
  775. }
  776. .@{prefix}-btn-group .@{prefix}-last {
  777. border-right: 1px solid mix(rgb(red(@btn-border-right), green(@btn-border-right), blue(@btn-border-right)), @panel-bg, 30%);
  778. border-right: 1px solid @btn-border-right;
  779. .border-radius(0 3px 3px 0);
  780. }
  781. .@{prefix}-btn-group .@{prefix}-first.@{prefix}-last {
  782. .border-radius(3px);
  783. }
  784. .@{prefix}-btn-group .@{prefix}-btn.@{prefix}-flow-layout-item {
  785. margin: 0;
  786. }
  787. // Checkbox
  788. .@{prefix}-checkbox {
  789. cursor: pointer;
  790. }
  791. i.@{prefix}-i-checkbox {
  792. margin: 0 3px 0 0;
  793. border: 1px solid @checkbox-border;
  794. .border-radius(3px);
  795. .box-shadow(@checkbox-box-shadow);
  796. .vertical-gradient(@checkbox-bg, @checkbox-bg-hlight);
  797. text-indent: -10em;
  798. *font-size: 0;
  799. *line-height: 0;
  800. *text-indent: 0;
  801. overflow: hidden;
  802. }
  803. .@{prefix}-checked i.@{prefix}-i-checkbox {
  804. color: @btn-text;
  805. font-size: 16px;
  806. line-height: 16px;
  807. text-indent: 0;
  808. }
  809. .@{prefix}-checkbox:focus i.@{prefix}-i-checkbox, .@{prefix}-checkbox.@{prefix}-focus i.@{prefix}-i-checkbox {
  810. border: 1px solid @checkbox-border-focus;
  811. .box-shadow(inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px fadeout(@checkbox-border-focus, 15%));
  812. }
  813. .@{prefix}-checkbox.@{prefix}-disabled .@{prefix}-label, .@{prefix}-checkbox.@{prefix}-disabled i.@{prefix}-i-checkbox {
  814. color: mix(@text, @panel-bg, 40%);
  815. }
  816. // RTL
  817. .@{prefix}-rtl .@{prefix}-checkbox {
  818. direction: rtl;
  819. text-align: right;
  820. }
  821. .@{prefix}-rtl i.@{prefix}-i-checkbox {
  822. margin: 0 0 0 3px;
  823. }
  824. // ColorButton
  825. .@{prefix}-colorbutton .@{prefix}-ico {
  826. position: relative;
  827. }
  828. .@{prefix}-colorbutton-grid {
  829. margin: 4px;
  830. }
  831. .@{prefix}-colorbutton button {
  832. padding-right: 4px;
  833. }
  834. .@{prefix}-colorbutton .@{prefix}-preview {
  835. padding-right: 3px;
  836. display: block;
  837. position: absolute;
  838. left: 50%;
  839. top: 50%;
  840. margin-left: -14px;
  841. margin-top: 7px;
  842. background: gray;
  843. width: 13px;
  844. height: 2px;
  845. overflow: hidden;
  846. }
  847. .@{prefix}-colorbutton.@{prefix}-btn-small .@{prefix}-preview {
  848. margin-left: -16px;
  849. padding-right: 0;
  850. width: 16px;
  851. }
  852. .@{prefix}-colorbutton .@{prefix}-open {
  853. padding-left: 4px;
  854. border-left: 1px solid transparent;
  855. border-right: 1px solid transparent;
  856. }
  857. .@{prefix}-colorbutton:hover .@{prefix}-open {
  858. border-left-color: @btn-split-border;
  859. border-right-color: @btn-split-border;
  860. }
  861. .@{prefix}-colorbutton.@{prefix}-btn-small .@{prefix}-open {
  862. padding: 0 3px 0 3px;
  863. }
  864. // RTL
  865. .@{prefix}-rtl .@{prefix}-colorbutton {
  866. direction: rtl;
  867. }
  868. .@{prefix}-rtl .@{prefix}-colorbutton .@{prefix}-preview {
  869. margin-left: 0;
  870. padding-right: 0;
  871. padding-left: 4px;
  872. margin-right: -14px;
  873. }
  874. .@{prefix}-rtl .@{prefix}-colorbutton.@{prefix}-btn-small .@{prefix}-preview {
  875. margin-left: 0;
  876. padding-right: 0;
  877. margin-right: -17px;
  878. padding-left: 0;
  879. }
  880. .@{prefix}-rtl .@{prefix}-colorbutton button {
  881. padding-right: 10px;
  882. padding-left: 10px;
  883. }
  884. .@{prefix}-rtl .@{prefix}-colorbutton .@{prefix}-open {
  885. padding-left: 4px;
  886. padding-right: 4px;
  887. }
  888. // ComboBox
  889. .@{prefix}-combobox {
  890. .inline-block();
  891. .border-radius(3px);
  892. .box-shadow(@textbox-box-shadow);
  893. *height: 32px;
  894. }
  895. .@{prefix}-combobox input {
  896. border: 1px solid @textbox-border;
  897. border-right-color: @combobox-border;
  898. height: 28px;
  899. }
  900. .@{prefix}-combobox.@{prefix}-disabled input {
  901. color: mix(@text, @textbox-bg, 40%);
  902. }
  903. .@{prefix}-combobox.@{prefix}-has-open input {
  904. .border-radius(4px 0 0 4px);
  905. }
  906. .@{prefix}-combobox .@{prefix}-btn {
  907. border-left: 0;
  908. .border-radius(0 4px 4px 0);
  909. }
  910. .@{prefix}-combobox button {
  911. padding-right: 8px;
  912. padding-left: 8px;
  913. }
  914. .@{prefix}-combobox.@{prefix}-disabled .@{prefix}-btn button {
  915. cursor: default;
  916. .box-shadow(none);
  917. .opacity(@btn-box-disabled-opacity);
  918. }
  919. // Path
  920. .@{prefix}-path {
  921. .inline-block();
  922. padding: 8px;
  923. white-space: normal;
  924. }
  925. .@{prefix}-path .@{prefix}-txt {
  926. display: inline-block;
  927. padding-right: 3px;
  928. }
  929. .@{prefix}-path .@{prefix}-path-body {
  930. display: inline-block;
  931. }
  932. .@{prefix}-path-item {
  933. .inline-block();
  934. cursor: pointer;
  935. color: @path-text;
  936. }
  937. .@{prefix}-path-item:hover {
  938. text-decoration: underline;
  939. }
  940. .@{prefix}-path-item:focus {
  941. background: @path-bg-focus;
  942. color: @path-text-focus;
  943. }
  944. .@{prefix}-path .@{prefix}-divider {
  945. display: inline;
  946. }
  947. .@{prefix}-disabled .@{prefix}-path-item {
  948. color: @text-disabled;
  949. }
  950. // RTL
  951. .@{prefix}-rtl .@{prefix}-path {
  952. direction: rtl;
  953. }
  954. // FieldSet
  955. .@{prefix}-fieldset {
  956. border: 0 solid #9E9E9E;
  957. .border-radius(3px);
  958. }
  959. .@{prefix}-fieldset > .@{prefix}-container-body {
  960. margin-top: -15px;
  961. }
  962. .@{prefix}-fieldset-title {
  963. margin-left: 5px;
  964. padding: 0 5px 0 5px;
  965. }// FitLayout
  966. .@{prefix}-fit-layout {
  967. .inline-block();
  968. }
  969. .@{prefix}-fit-layout-item {
  970. position: absolute;
  971. }
  972. // FlowLayout
  973. .@{prefix}-flow-layout-item {
  974. .inline-block();
  975. }
  976. .@{prefix}-flow-layout-item {
  977. margin: 2px 0 2px 2px;
  978. }
  979. .@{prefix}-flow-layout-item.@{prefix}-last {
  980. margin-right: 2px;
  981. }
  982. .@{prefix}-flow-layout {
  983. white-space: normal;
  984. }
  985. .@{prefix}-tinymce-inline .@{prefix}-flow-layout {
  986. white-space: nowrap;
  987. }
  988. // RTL
  989. .@{prefix}-rtl .@{prefix}-flow-layout {
  990. text-align: right;
  991. direction: rtl;
  992. }
  993. .@{prefix}-rtl .@{prefix}-flow-layout-item {
  994. margin: 2px 2px 2px 0;
  995. }
  996. .@{prefix}-rtl .@{prefix}-flow-layout-item.@{prefix}-last {
  997. margin-left: 2px;
  998. }
  999. // Iframe
  1000. .@{prefix}-iframe {
  1001. border: 0 solid @iframe-border;
  1002. width: 100%; height: 100%;
  1003. }
  1004. // Label
  1005. .@{prefix}-label {
  1006. .inline-block();
  1007. text-shadow: @text-shadow;
  1008. overflow: hidden;
  1009. }
  1010. .@{prefix}-label.@{prefix}-autoscroll {
  1011. overflow: auto;
  1012. }
  1013. .@{prefix}-label.@{prefix}-disabled {
  1014. color: @text-disabled;
  1015. }
  1016. .@{prefix}-label.@{prefix}-multiline {
  1017. white-space: pre-wrap;
  1018. }
  1019. .@{prefix}-label.@{prefix}-error {
  1020. color: @text-error;
  1021. }
  1022. // RTL
  1023. .@{prefix}-rtl .@{prefix}-label {
  1024. text-align: right;
  1025. direction: rtl;
  1026. }
  1027. /* MenuBar */
  1028. .@{prefix}-menubar .@{prefix}-menubtn {
  1029. border-color: transparent;
  1030. background: transparent;
  1031. .border-radius(0);
  1032. .box-shadow(none);
  1033. filter: none;
  1034. }
  1035. .@{prefix}-menubar {
  1036. border: 1px solid @menubar-border;
  1037. }
  1038. .@{prefix}-menubar .@{prefix}-menubtn button span {
  1039. color: @text;
  1040. }
  1041. .@{prefix}-menubar .@{prefix}-caret {
  1042. border-top-color: @text;
  1043. }
  1044. .@{prefix}-menubar .@{prefix}-menubtn:hover, .@{prefix}-menubar .@{prefix}-menubtn.@{prefix}-active, .@{prefix}-menubar .@{prefix}-menubtn:focus {
  1045. border-color: transparent;
  1046. background: @menubar-bg-active;
  1047. filter: none;
  1048. .box-shadow(none);
  1049. }
  1050. /* MenuButton */
  1051. .@{prefix}-menubtn span {
  1052. color: @btn-text;
  1053. margin-right: 2px;
  1054. line-height: @line-height;
  1055. *line-height: @line-height - 4px;
  1056. }
  1057. .@{prefix}-menubtn.@{prefix}-btn-small span {
  1058. font-size: @font-size - 2px;
  1059. }
  1060. .@{prefix}-menubtn.@{prefix}-fixed-width span {
  1061. display: inline-block;
  1062. overflow-x: hidden;
  1063. text-overflow: ellipsis;
  1064. width: 90px;
  1065. }
  1066. .@{prefix}-menubtn.@{prefix}-fixed-width.@{prefix}-btn-small span {
  1067. width: 70px;
  1068. }
  1069. .@{prefix}-menubtn .@{prefix}-caret {
  1070. *margin-top: 6px;
  1071. }
  1072. // RTL
  1073. .@{prefix}-rtl .@{prefix}-menubtn button {
  1074. direction: rtl;
  1075. text-align: right;
  1076. }
  1077. // ListBox
  1078. .@{prefix}-listbox button {
  1079. text-align: left;
  1080. padding-right: 20px;
  1081. position: relative;
  1082. }
  1083. .@{prefix}-listbox .@{prefix}-caret {
  1084. position: absolute;
  1085. margin-top: -2px;
  1086. right: 8px;
  1087. top: 50%;
  1088. }
  1089. // RTL
  1090. .@{prefix}-rtl .@{prefix}-listbox .@{prefix}-caret {
  1091. right: auto;
  1092. left: 8px;
  1093. }
  1094. .@{prefix}-rtl .@{prefix}-listbox button {
  1095. padding-right: 10px;
  1096. padding-left: 20px;
  1097. }
  1098. // MenuItem
  1099. .@{prefix}-menu-item {
  1100. display: block;
  1101. padding: 6px 15px 6px 12px;
  1102. clear: both;
  1103. font-weight: normal;
  1104. line-height: 20px;
  1105. color: @menuitem-text;
  1106. white-space: nowrap;
  1107. cursor: pointer;
  1108. line-height: normal;
  1109. border-left: 4px solid transparent;
  1110. margin-bottom: 1px;
  1111. }
  1112. .@{prefix}-menu-item .@{prefix}-ico, .@{prefix}-menu-item .@{prefix}-text {
  1113. color: @menuitem-text;
  1114. }
  1115. .@{prefix}-menu-item.@{prefix}-disabled .@{prefix}-text, .@{prefix}-menu-item.@{prefix}-disabled .@{prefix}-ico {
  1116. color: mix(@menuitem-text, @menu-bg, 40%);
  1117. }
  1118. .@{prefix}-menu-item:hover .@{prefix}-text, .@{prefix}-menu-item.@{prefix}-selected .@{prefix}-text, .@{prefix}-menu-item:focus .@{prefix}-text {
  1119. color: @menuitem-text-inverse;
  1120. }
  1121. .@{prefix}-menu-item:hover .@{prefix}-ico, .@{prefix}-menu-item.@{prefix}-selected .@{prefix}-ico, .@{prefix}-menu-item:focus .@{prefix}-ico {
  1122. color: @menuitem-text-inverse;
  1123. }
  1124. .@{prefix}-menu-item.@{prefix}-disabled:hover {
  1125. background: @menuitem-bg-disabled;
  1126. }
  1127. .@{prefix}-menu-shortcut {
  1128. display: inline-block;
  1129. color: mix(@menuitem-text, @menu-bg, 40%);
  1130. }
  1131. .@{prefix}-menu-shortcut {
  1132. .inline-block();
  1133. padding: 0 15px 0 20px;
  1134. }
  1135. .@{prefix}-menu-item:hover .@{prefix}-menu-shortcut, .@{prefix}-menu-item.@{prefix}-selected .@{prefix}-menu-shortcut, .@{prefix}-menu-item:focus .@{prefix}-menu-shortcut {
  1136. color: @menuitem-text-inverse;
  1137. }
  1138. .@{prefix}-menu-item .@{prefix}-caret {
  1139. margin-top: 4px;
  1140. *margin-top: 3px;
  1141. margin-right: 6px;
  1142. border-top: 4px solid transparent;
  1143. border-bottom: 4px solid transparent;
  1144. border-left: 4px solid @menuitem-caret;
  1145. }
  1146. .@{prefix}-menu-item.@{prefix}-selected .@{prefix}-caret, .@{prefix}-menu-item:focus .@{prefix}-caret, .@{prefix}-menu-item:hover .@{prefix}-caret {
  1147. border-left-color: @menuitem-caret-selected;
  1148. }
  1149. .@{prefix}-menu-align .@{prefix}-menu-shortcut {
  1150. *margin-top: -2px;
  1151. }
  1152. .@{prefix}-menu-align .@{prefix}-menu-shortcut, .@{prefix}-menu-align .@{prefix}-caret {
  1153. position: absolute;
  1154. right: 0;
  1155. }
  1156. .@{prefix}-menu-item.@{prefix}-active i {
  1157. visibility: visible;
  1158. }
  1159. .@{prefix}-menu-item-normal.@{prefix}-active {
  1160. background-color: @menuitem-bg-active;
  1161. }
  1162. .@{prefix}-menu-item-preview.@{prefix}-active {
  1163. border-left: 5px solid @menuitem-preview-border-active;
  1164. }
  1165. .@{prefix}-menu-item-normal.@{prefix}-active .@{prefix}-text {
  1166. color: @menuitem-text-active;
  1167. }
  1168. .@{prefix}-menu-item-normal.@{prefix}-active:hover .@{prefix}-text, .@{prefix}-menu-item-normal.@{prefix}-active:hover .@{prefix}-ico {
  1169. color: @menuitem-text-inverse;
  1170. }
  1171. .@{prefix}-menu-item-normal.@{prefix}-active:focus .@{prefix}-text, .@{prefix}-menu-item-normal.@{prefix}-active:focus .@{prefix}-ico {
  1172. color: @menuitem-text-inverse;
  1173. }
  1174. .@{prefix}-menu-item:hover, .@{prefix}-menu-item.@{prefix}-selected, .@{prefix}-menu-item:focus {
  1175. text-decoration: none;
  1176. color: @menuitem-text-inverse;
  1177. .vertical-gradient(@menuitem-bg-selected, @menuitem-bg-selected-hlight);
  1178. }
  1179. div.@{prefix}-menu .@{prefix}-menu-item-sep, .@{prefix}-menu-item-sep:hover {
  1180. border: 0;
  1181. padding: 0;
  1182. height: 1px;
  1183. margin: 9px 1px;
  1184. overflow: hidden;
  1185. background: @menuitem-separator-top;
  1186. border-bottom: 1px solid @menuitem-separator-bottom;
  1187. cursor: default;
  1188. filter: none;
  1189. }
  1190. // RTL
  1191. .@{prefix}-menu.@{prefix}-rtl {
  1192. direction: rtl;
  1193. }
  1194. .@{prefix}-rtl .@{prefix}-menu-item {
  1195. text-align: right;
  1196. direction: rtl;
  1197. padding: 6px 12px 6px 15px;
  1198. }
  1199. .@{prefix}-menu-align.@{prefix}-rtl .@{prefix}-menu-shortcut, .@{prefix}-menu-align.@{prefix}-rtl .@{prefix}-caret {
  1200. right: auto;
  1201. left: 0;
  1202. }
  1203. .@{prefix}-rtl .@{prefix}-menu-item .@{prefix}-caret {
  1204. margin-left: 6px;
  1205. margin-right: 0;
  1206. border-right: 4px solid @menuitem-caret;
  1207. border-left: 0;
  1208. }
  1209. .@{prefix}-rtl .@{prefix}-menu-item.@{prefix}-selected .@{prefix}-caret, .@{prefix}-rtl .@{prefix}-menu-item:focus .@{prefix}-caret, .@{prefix}-rtl .@{prefix}-menu-item:hover .@{prefix}-caret {
  1210. border-left-color: transparent;
  1211. border-right-color: @menuitem-caret-selected;
  1212. }
  1213. // Menu
  1214. .@{prefix}-menu {
  1215. position: absolute;
  1216. left: 0; top: 0;
  1217. .reset-gradient();
  1218. z-index: 1000;
  1219. padding: 5px 0 5px 0;
  1220. margin: 2px 0 0;
  1221. min-width: 160px;
  1222. background: @menu-bg;
  1223. border: 1px solid mix(rgb(red(@menu-border), green(@menu-border), blue(@menu-border)), @panel-bg, round(alpha(@menu-border) * 200));
  1224. border: 1px solid @menu-border;
  1225. z-index: 1002;
  1226. .border-radius(6px);
  1227. .box-shadow(0 5px 10px rgba(0,0,0,.2));
  1228. max-height: 400px;
  1229. overflow: auto;
  1230. overflow-x: hidden;
  1231. }
  1232. .@{prefix}-menu i {
  1233. display: none;
  1234. }
  1235. .@{prefix}-menu-has-icons i {
  1236. display: inline-block;
  1237. *display: inline;
  1238. }
  1239. .@{prefix}-menu-sub-tr-tl { margin: -6px 0 0 -1px; }
  1240. .@{prefix}-menu-sub-br-bl { margin: 6px 0 0 -1px; }
  1241. .@{prefix}-menu-sub-tl-tr { margin: -6px 0 0 1px; }
  1242. .@{prefix}-menu-sub-bl-br { margin: 6px 0 0 1px; }
  1243. // Radio - not implemented yet
  1244. .@{prefix}-container-body .@{prefix}-resizehandle {
  1245. position: absolute;
  1246. right: 0;
  1247. bottom: 0;
  1248. width: 16px;
  1249. height: 16px;
  1250. visibility: visible;
  1251. cursor: s-resize;
  1252. margin: 0;
  1253. }
  1254. .@{prefix}-container-body .@{prefix}-resizehandle-both {
  1255. cursor: se-resize;
  1256. }
  1257. i.@{prefix}-i-resize {
  1258. color: @text;
  1259. }
  1260. // Spacer
  1261. .@{prefix}-spacer {
  1262. visibility: hidden;
  1263. }
  1264. // SplitButton
  1265. .@{prefix}-splitbtn .@{prefix}-open {
  1266. border-left: 1px solid transparent;
  1267. border-right: 1px solid transparent;
  1268. }
  1269. .@{prefix}-splitbtn:hover .@{prefix}-open {
  1270. border-left-color: @btn-split-border;
  1271. border-right-color: @btn-split-border;
  1272. }
  1273. .@{prefix}-splitbtn button {
  1274. padding-right: 4px;
  1275. }
  1276. .@{prefix}-splitbtn .@{prefix}-open {
  1277. padding-left: 4px;
  1278. }
  1279. .@{prefix}-splitbtn .@{prefix}-open.@{prefix}-active {
  1280. .box-shadow(inset 0 2px 4px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0 ,.05));
  1281. }
  1282. .@{prefix}-splitbtn.@{prefix}-btn-small .@{prefix}-open {
  1283. padding: 0 3px 0 3px;
  1284. }
  1285. // RTL
  1286. .@{prefix}-rtl .@{prefix}-splitbtn {
  1287. direction: rtl;
  1288. text-align: right;
  1289. }
  1290. .@{prefix}-rtl .@{prefix}-splitbtn button {
  1291. padding-right: 10px;
  1292. padding-left: 10px;
  1293. }
  1294. .@{prefix}-rtl .@{prefix}-splitbtn .@{prefix}-open {
  1295. padding-left: 4px;
  1296. padding-right: 4px;
  1297. }
  1298. // StackLayout
  1299. .@{prefix}-stack-layout-item {
  1300. display: block;
  1301. }
  1302. // TabPanel
  1303. .@{prefix}-tabs {
  1304. display: block;
  1305. border-bottom: 1px solid @tab-border;
  1306. }
  1307. .@{prefix}-tab {
  1308. .inline-block();
  1309. border: 1px solid @tab-border;
  1310. border-width: 0 1px 0 0;
  1311. background: @tab-bg;
  1312. padding: 8px;
  1313. text-shadow: @text-shadow;
  1314. height: 13px;
  1315. cursor: pointer;
  1316. }
  1317. .@{prefix}-tab:hover {
  1318. background: @tab-bg-hover;
  1319. }
  1320. .@{prefix}-tab.@{prefix}-active {
  1321. background: @tab-bg-active;
  1322. border-bottom-color: transparent;
  1323. margin-bottom: -1px;
  1324. height: 14px;
  1325. }
  1326. // RTL
  1327. .@{prefix}-rtl .@{prefix}-tabs {
  1328. text-align: right;
  1329. direction: rtl;
  1330. }
  1331. .@{prefix}-rtl .@{prefix}-tab {
  1332. border-width: 0 0 0 1px;
  1333. }
  1334. // TextBox
  1335. .@{prefix}-textbox {
  1336. background: @textbox-bg;
  1337. border: 1px solid @textbox-border;
  1338. .border-radius(3px);
  1339. .box-shadow(@textbox-box-shadow);
  1340. display: inline-block;
  1341. .transition(~"border linear .2s, box-shadow linear .2s");
  1342. height: 28px;
  1343. resize: none;
  1344. padding: 0 4px 0 4px;
  1345. white-space: pre-wrap;
  1346. *white-space: pre;
  1347. color: @text;
  1348. }
  1349. .@{prefix}-textbox:focus, .@{prefix}-textbox.@{prefix}-focus {
  1350. border-color: @textbox-border-focus;
  1351. .box-shadow(inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px fadeout(@textbox-border-focus, 15%));
  1352. }
  1353. .@{prefix}-placeholder .@{prefix}-textbox {
  1354. color: @textbox-text-placeholder;
  1355. }
  1356. .@{prefix}-textbox.@{prefix}-multiline {
  1357. padding: 4px;
  1358. }
  1359. .@{prefix}-textbox.@{prefix}-disabled {
  1360. color: mix(@text, @textbox-bg, 40%);
  1361. }
  1362. // RTL
  1363. .@{prefix}-rtl .@{prefix}-textbox {
  1364. text-align: right;
  1365. direction: rtl;
  1366. }
  1367. // Throbber
  1368. .@{prefix}-throbber {
  1369. position: absolute;
  1370. top: 0; left: 0;
  1371. width: 100%; height: 100%;
  1372. .opacity(0.6);
  1373. background: @throbber-bg;
  1374. }
  1375. .@{prefix}-throbber-inline {
  1376. position: static;
  1377. height: 50px;
  1378. }
  1379. /* Icons */
  1380. @font-face {
  1381. font-family: 'tinymce';
  1382. src:url('fonts/tinymce.eot');
  1383. src:url('fonts/tinymce.eot?#iefix') format('embedded-opentype'),
  1384. url('fonts/tinymce.woff') format('woff'),
  1385. url('fonts/tinymce.ttf') format('truetype'),
  1386. url('fonts/tinymce.svg#tinymce') format('svg');
  1387. font-weight: normal;
  1388. font-style: normal;
  1389. }
  1390. @font-face {
  1391. font-family: 'tinymce-small';
  1392. src:url('fonts/tinymce-small.eot');
  1393. src:url('fonts/tinymce-small.eot?#iefix') format('embedded-opentype'),
  1394. url('fonts/tinymce-small.woff') format('woff'),
  1395. url('fonts/tinymce-small.ttf') format('truetype'),
  1396. url('fonts/tinymce-small.svg#tinymce') format('svg');
  1397. font-weight: normal;
  1398. font-style: normal;
  1399. }
  1400. @iconSize: 16px;
  1401. .@{prefix}-ico {
  1402. font-family: 'tinymce', Arial;
  1403. font-style: normal;
  1404. font-weight: normal;
  1405. font-variant: normal;
  1406. font-size: @iconSize;
  1407. line-height: 16px;
  1408. speak: none;
  1409. vertical-align: text-top;
  1410. -webkit-font-smoothing: antialiased;
  1411. -moz-osx-font-smoothing: grayscale;
  1412. display: inline-block;
  1413. background: transparent center center;
  1414. background-size: cover;
  1415. width: 16px;
  1416. height: 16px;
  1417. color: @btn-text;
  1418. }
  1419. .@{prefix}-btn-small .@{prefix}-ico {
  1420. font-family: 'tinymce-small', Arial;
  1421. }
  1422. .@{prefix}-i-save:before { content: "\e000"; }
  1423. .@{prefix}-i-newdocument:before { content: "\e001"; }
  1424. .@{prefix}-i-fullpage:before { content: "\e002"; }
  1425. .@{prefix}-i-alignleft:before { content: "\e003"; }
  1426. .@{prefix}-i-aligncenter:before { content: "\e004"; }
  1427. .@{prefix}-i-alignright:before { content: "\e005"; }
  1428. .@{prefix}-i-alignjustify:before { content: "\e006"; }
  1429. .@{prefix}-i-cut:before { content: "\e007"; }
  1430. .@{prefix}-i-paste:before { content: "\e008"; }
  1431. .@{prefix}-i-searchreplace:before { content: "\e009"; }
  1432. .@{prefix}-i-bullist:before { content: "\e00a"; }
  1433. .@{prefix}-i-numlist:before { content: "\e00b"; }
  1434. .@{prefix}-i-indent:before { content: "\e00c"; }
  1435. .@{prefix}-i-outdent:before { content: "\e00d"; }
  1436. .@{prefix}-i-blockquote:before { content: "\e00e"; }
  1437. .@{prefix}-i-undo:before { content: "\e00f"; }
  1438. .@{prefix}-i-redo:before { content: "\e010"; }
  1439. .@{prefix}-i-link:before { content: "\e011"; }
  1440. .@{prefix}-i-unlink:before { content: "\e012"; }
  1441. .@{prefix}-i-anchor:before { content: "\e013"; }
  1442. .@{prefix}-i-image:before { content: "\e014"; }
  1443. .@{prefix}-i-media:before { content: "\e015"; }
  1444. .@{prefix}-i-help:before { content: "\e016"; }
  1445. .@{prefix}-i-code:before { content: "\e017"; }
  1446. .@{prefix}-i-insertdatetime:before { content: "\e018"; }
  1447. .@{prefix}-i-preview:before { content: "\e019"; }
  1448. .@{prefix}-i-forecolor:before { content: "\e01a"; }
  1449. .@{prefix}-i-backcolor:before { content: "\e01a"; }
  1450. .@{prefix}-i-table:before { content: "\e01b"; }
  1451. .@{prefix}-i-hr:before { content: "\e01c"; }
  1452. .@{prefix}-i-removeformat:before { content: "\e01d"; }
  1453. .@{prefix}-i-subscript:before { content: "\e01e"; }
  1454. .@{prefix}-i-superscript:before { content: "\e01f"; }
  1455. .@{prefix}-i-charmap:before { content: "\e020"; }
  1456. .@{prefix}-i-emoticons:before { content: "\e021"; }
  1457. .@{prefix}-i-print:before { content: "\e022"; }
  1458. .@{prefix}-i-fullscreen:before { content: "\e023"; }
  1459. .@{prefix}-i-spellchecker:before { content: "\e024"; }
  1460. .@{prefix}-i-nonbreaking:before { content: "\e025"; }
  1461. .@{prefix}-i-template:before { content: "\e026"; }
  1462. .@{prefix}-i-pagebreak:before { content: "\e027"; }
  1463. .@{prefix}-i-restoredraft:before { content: "\e028"; }
  1464. .@{prefix}-i-untitled:before { content: "\e029"; }
  1465. .@{prefix}-i-bold:before { content: "\e02a"; }
  1466. .@{prefix}-i-italic:before { content: "\e02b"; }
  1467. .@{prefix}-i-underline:before { content: "\e02c"; }
  1468. .@{prefix}-i-strikethrough:before { content: "\e02d"; }
  1469. .@{prefix}-i-visualchars:before { content: "\e02e"; }
  1470. .@{prefix}-i-visualblocks:before { content: "\e02e"; }
  1471. .@{prefix}-i-ltr:before { content: "\e02f"; }
  1472. .@{prefix}-i-rtl:before { content: "\e030"; }
  1473. .@{prefix}-i-copy:before { content: "\e031"; }
  1474. .@{prefix}-i-resize:before { content: "\e032"; }
  1475. .@{prefix}-i-browse:before { content: "\e034"; }
  1476. .@{prefix}-i-pastetext:before { content: "\e035"; }
  1477. .@{prefix}-i-checkbox:before, .@{prefix}-i-selected:before {
  1478. content: "\e033";
  1479. }
  1480. .@{prefix}-i-selected { visibility: hidden; }
  1481. i.@{prefix}-i-backcolor { text-shadow: none; background: @colorbtn-backcolor-bg; }