editor.less 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083
  1. @padding-top : 40px;
  2. body.editor {
  3. height: 100%;
  4. overflow: hidden;
  5. padding-top: 0;
  6. background-color: white;
  7. }
  8. @-webkit-keyframes dot {
  9. 0% { background-color: rgb(40,40,40); }
  10. 50% { background-color: white; }
  11. 100% { background-color: rgb(40,40,40); }
  12. }
  13. .animation-delay(@time) {
  14. -webkit-animation-delay: @time;
  15. animation-delay: @time;
  16. }
  17. #loadingScreen {
  18. background-color: #eeeeee;
  19. text-align: center;
  20. padding-top: 120px;
  21. position: absolute;
  22. top: 0;
  23. bottom: 0;
  24. left: 0;
  25. right: 0;
  26. z-index: 1040;
  27. h3 {
  28. font-size: 22px;
  29. background-image: url(/brand/logo/logo-128.png);
  30. background-repeat: no-repeat;
  31. background-position: center 0px;
  32. padding-top: 130px;
  33. }
  34. p {
  35. font-size: 14px;
  36. padding-top: 6px;
  37. }
  38. }
  39. .content-with-navigation-sidebar {
  40. padding-left: 200px;
  41. padding-right: 20px;
  42. }
  43. .sidebar-navigation {
  44. background: rgb(40,40,40);
  45. border-right: 1px solid #999;
  46. position: fixed;
  47. left: 0;
  48. top: 0;
  49. bottom: 0;
  50. width: 40px;
  51. overflow: hidden;
  52. z-index: 10;
  53. ul {
  54. list-style: none;
  55. margin: 0;
  56. li {
  57. a {
  58. color: #ccc;
  59. width: 100%;
  60. display: block;
  61. .content {
  62. padding: 12px 0;
  63. }
  64. &:hover {
  65. .box-shadow(inset 0 0 15px #111);
  66. text-decoration: none;
  67. color: white;
  68. }
  69. }
  70. }
  71. li.active {
  72. background-color: @blue;
  73. a {
  74. color: white;
  75. &:hover {
  76. .box-shadow(none);
  77. }
  78. }
  79. }
  80. }
  81. .image-button {
  82. margin-top: 4px;
  83. margin-right: 8px;
  84. cursor: pointer;
  85. }
  86. a.tab-link {
  87. background-position: 12px center;
  88. background-repeat: no-repeat;
  89. padding-left: 40px;
  90. height: 40px;
  91. }
  92. a.code-tab {
  93. background-image: url(/brand/icons/code.png);
  94. }
  95. a.history-tab {
  96. background-image: url(/brand/icons/history.png);
  97. }
  98. a.settings-tab, a.account-settings-tab {
  99. background-image: url(/brand/icons/settings.png);
  100. }
  101. a.collaborators-tab {
  102. background-image: url(/brand/icons/collaborators.png);
  103. }
  104. a.project-list-tab {
  105. background-image: url(/brand/icons/projects.png);
  106. }
  107. a.subscription-tab {
  108. background-image: url(/brand/icons/subscription.png);
  109. }
  110. #toolbar-footer {
  111. position: absolute;
  112. bottom: 0;
  113. left: 0;
  114. width: 180px;
  115. padding-bottom: 16px;
  116. text-align: center;
  117. a {
  118. font-size: 12px;
  119. color: #ddd;
  120. &:hover {
  121. color: white;
  122. }
  123. }
  124. > div {
  125. margin-top: 3px;
  126. }
  127. }
  128. }
  129. .ui-layout-resizer {
  130. width: 6px;
  131. background-color: #eee;
  132. .ui-layout-toggler {
  133. background-color: #ddd;
  134. background-image: url(/img/resizer.png);
  135. background-repeat: no-repeat;
  136. background-position: center center;
  137. }
  138. }
  139. .ui-layout-resizer-dragging {
  140. background-color: #ddd;
  141. }
  142. .splitter-bar-vertical-docked {
  143. width: 15px;
  144. }
  145. #content{
  146. border-left: 1px solid #aaa;
  147. iframe{
  148. width: 100%;
  149. height: 100%;
  150. }
  151. .fullEditorArea, #pdfArea, #imageArea iframe{
  152. position: absolute;
  153. top: 0;
  154. left: 0;
  155. bottom: 0;
  156. right: 0;
  157. }
  158. #editorArea {
  159. width: 100%;
  160. height: 100%;
  161. #editorSplitter {
  162. width: 100%;
  163. height: 100%;
  164. }
  165. #editor {
  166. width: 100%;
  167. height: 100%;
  168. }
  169. #editorWrapper {
  170. height: 100%;
  171. width: 100%;
  172. }
  173. #rightEditorPanel {
  174. border-left: 1px solid #aaa;
  175. }
  176. #leftEditorPanel {
  177. border-right: 1px solid #aaa;
  178. }
  179. .loading {
  180. background: url('/img/spin.gif') center center no-repeat, url('/img/noise.png') #aaa;
  181. position: absolute;
  182. top: 0;
  183. left: 0;
  184. right: 0;
  185. bottom: 0;
  186. z-index: 100;
  187. }
  188. #trackChangesPanel {
  189. width: 100%;
  190. height: 100%;
  191. }
  192. .sync-buttons {
  193. z-index: 3;
  194. position: absolute;
  195. top: 45px;
  196. right: 0;
  197. padding: 2px;
  198. background-color: #eee;
  199. .border-radius(3px);
  200. border: 1px solid #aaa;
  201. button {
  202. display: block;
  203. padding: 3px;
  204. font-size: 12px;
  205. line-height: 12px;
  206. }
  207. button:first-child {
  208. margin-bottom: 3px;
  209. }
  210. }
  211. }
  212. #undoConflictWarning {
  213. position: absolute;
  214. top: 0;
  215. right: 0;
  216. left: 0;
  217. z-index: 10;
  218. padding: 8px;
  219. background-color: rgb(255, 210, 210);
  220. .js-hide {
  221. display: inline;
  222. float: right;
  223. }
  224. }
  225. #pdfArea {
  226. background-color: #eee;
  227. #pdfToolBar{
  228. padding: 5px 5px 3px 5px;
  229. margin: 0;
  230. background-color: white;
  231. border-bottom: 1px solid #aaa;
  232. i {
  233. display: block;
  234. height: 18px;
  235. width: 24px;
  236. background-repeat: no-repeat
  237. }
  238. i.icon-flatview {
  239. background-image: url(/img/flatview.png);
  240. }
  241. i.icon-splitview {
  242. background-image: url(/img/splitview.png);
  243. }
  244. }
  245. #pdfAreaContent {
  246. #logArea, #rawLogArea, .pdfjs-list-view {
  247. height: 100%;
  248. width: 100%;
  249. }
  250. }
  251. .compiling-message {
  252. z-index: 100;
  253. position: absolute;
  254. top: 45px;
  255. left: 10px;
  256. padding: 20px;
  257. .border-radius(5px);
  258. border: 1px solid #999;
  259. background-color: #eee;
  260. background-image: url(/img/spin1.gif);
  261. background-repeat: no-repeat;
  262. background-position: 10px center;
  263. padding-left: 50px;
  264. }
  265. .not-compiled-yet-message {
  266. padding: 9px;
  267. background: url(/img/silk/arrow-up.png) 20px 7px no-repeat;
  268. padding-left: 43px;
  269. font-size: 16px;
  270. }
  271. #logArea {
  272. overflow: auto;
  273. ul {
  274. margin: 0px;
  275. padding: 10px;
  276. li {
  277. cursor:pointer;
  278. list-style: none;
  279. margin-bottom: 10px;
  280. }
  281. }
  282. button {
  283. margin-left: 10px;
  284. margin-bottom: 20px;
  285. }
  286. background: url('/img/noise.png') #eee;
  287. .alert-warning {
  288. border-color: lighten(#f89406, 35%);
  289. background-color: lighten(#f89406, 40%);
  290. color: #f89406;
  291. text-shadow: none;
  292. }
  293. .small {
  294. color: #666;
  295. margin-top: 6px;
  296. white-space: pre-wrap;
  297. }
  298. }
  299. #rawLogArea {
  300. overflow: auto;
  301. background: url('/img/noise.png') #eee;
  302. pre {
  303. background: none;
  304. border: none;
  305. }
  306. }
  307. .pdfjs-viewer {
  308. position: relative;
  309. height: 100%;
  310. width: 100%;
  311. .pdfjs-list-view {
  312. overflow: scroll;
  313. canvas {
  314. background: white;
  315. box-shadow: black 0px 0px 10px;
  316. }
  317. .page-container {
  318. margin: 10px auto;
  319. padding: 0 10px;
  320. }
  321. }
  322. .btn-group {
  323. position: absolute;
  324. top: 15px;
  325. left: 20px;
  326. z-index: 50;
  327. img {
  328. vertical-align: middle;
  329. }
  330. }
  331. .progress {
  332. width: 200px;
  333. position: absolute;
  334. bottom: 15px;
  335. left: 20px;
  336. z-index: 50;
  337. border: 1px solid #666;
  338. height: 32px;
  339. .bar {
  340. height: 32px;
  341. }
  342. span {
  343. position: absolute;
  344. width: 100%;
  345. text-align: center;
  346. top: 8px;
  347. }
  348. }
  349. }
  350. }
  351. #loading{
  352. background: url('/img/spin.gif') center center no-repeat, url('/img/noise.png') #aaa;
  353. }
  354. #projectDeleted {
  355. background: url('/img/noise.png') #aaa;
  356. }
  357. #mainAreaMessage {
  358. margin-top: 100px;
  359. font-size: 1.4em;
  360. text-align: center;
  361. }
  362. .projectSettings {
  363. overflow: scroll;
  364. padding: 0 12px 12px 12px;
  365. }
  366. }
  367. #tab-content {
  368. position: absolute;
  369. top: 0;
  370. bottom: 0;
  371. left: 40px;
  372. right: 0;
  373. #collaborators-tab, #settings-tab {
  374. padding: 10px;
  375. overflow: scroll;
  376. }
  377. #collaborators-tab, #settings-tab, #history-tab {
  378. background: url('/img/noise.png') #eee;
  379. position: absolute;
  380. top: 0;
  381. bottom: 0;
  382. left: 140px;
  383. right: 0;
  384. }
  385. }
  386. #sections{
  387. -moz-user-select: none;
  388. -webkit-user-select: none;
  389. overflow: auto;
  390. }
  391. #options {
  392. position: absolute;
  393. left: 0;
  394. width: 100%;
  395. height: 20px;
  396. padding: 0 0 5px 0;
  397. bottom: 0;
  398. overflow: hidden;
  399. }
  400. #options button, button.gradient {
  401. background: #fafafa;
  402. border: 1px solid rgba(0,0,0,0.25);
  403. box-shadow: 0 -10px rgba(0,0,0,0.05) inset, 0 1px 2px white;
  404. padding: 2px 4px;
  405. vertical-align: -10%;
  406. margin: 0 0 0 -1px;
  407. height: 26px;
  408. }
  409. #options button:active, button.gradient:active {
  410. background: #b7cbe1;
  411. }
  412. #options button:hover, button.gradient:hover {
  413. background: #ffffff;
  414. }
  415. #saving-area{
  416. float: right;
  417. padding-top:3px;
  418. padding-right:10px;
  419. }
  420. #search {
  421. display: none;
  422. }
  423. #sidebar {
  424. width: 250px;
  425. overflow: hidden;
  426. cursor: default;
  427. border-right: 1px solid #aaa;
  428. background-color: rgb(238,238,238);
  429. padding: 6px 0 0 6px;
  430. ul {
  431. margin: 8px 0;
  432. padding-left: 0;
  433. list-style: none;
  434. }
  435. .entity-list-item {
  436. color: #444;
  437. font-family: 'Lucida Grande', 'Segoe UI', 'Ubuntu', sans-serif;
  438. font-size: 9pt;
  439. list-style: none;
  440. white-space: nowrap;
  441. cursor: pointer;
  442. position: relative;
  443. .clickable {
  444. height: 24px;
  445. margin-left: 20px;
  446. }
  447. .dropdown-caret {
  448. display: none;
  449. }
  450. .entity-label {
  451. display: none;
  452. }
  453. }
  454. .entity-folder {
  455. position: relative;
  456. .toggle {
  457. position: absolute;
  458. top: 0;
  459. left: 0;
  460. display: inline-block;
  461. width: 16px;
  462. padding: 4px;
  463. }
  464. }
  465. .entity-project {
  466. .clickable {
  467. margin-left: 0;
  468. }
  469. }
  470. .entity-deleted-docs-folder {
  471. margin-top: 16px;
  472. span.name {
  473. padding: 6px;
  474. border-bottom: 1px solid #ccc;
  475. }
  476. }
  477. .entity-list {
  478. padding-left: 0px;
  479. }
  480. .entity-list .entity-list {
  481. padding-left: 10px;
  482. }
  483. .droppable-folder-hover, {
  484. background:lighten(#eddc89, 0%);
  485. }
  486. li.selected, .entity-list-item.selected {
  487. background-color: rgb(185,201,227);
  488. .border-radius(5px 0 0 5px);
  489. color: #3d5979;
  490. .dropdown-caret {
  491. display: block;
  492. padding: 4px 6px 4px 4px;
  493. position: absolute;
  494. top: 0;
  495. right: 0;
  496. bottom: 0;
  497. background-color: rgb(185,201,227);
  498. &:before {
  499. content: " ";
  500. #gradient > .horizontal(rgba(185,201,227,0), rgb(185,201,227));
  501. background-color: transparent;
  502. width: 12px;
  503. height: 100%;
  504. position: absolute;
  505. top: 0;
  506. bottom: 0;
  507. right: 20px
  508. }
  509. i {
  510. vertical-align: top;
  511. margin: 0;
  512. }
  513. }
  514. }
  515. .entity-list-item.show-label {
  516. .dropdown-caret {
  517. display: none;
  518. }
  519. .entity-label {
  520. display: block;
  521. position: absolute;
  522. top: 3px;
  523. right: 3px;
  524. font-size: 13px;
  525. line-height: 13px;
  526. padding: 2px 6px 3px;
  527. background-color: hsl(100, 80%, 42%);
  528. font-weight: normal;
  529. text-shadow: none;
  530. &:hover {
  531. background-color: hsl(100, 80%, 35%)
  532. }
  533. }
  534. }
  535. .entity-list-item.folder-open.show-label {
  536. .entity-label {
  537. display: none;
  538. }
  539. }
  540. li img, .entity-list-item i {
  541. margin: 4px;
  542. vertical-align: -7px;
  543. min-width: 16px;
  544. min-height: 16px;
  545. }
  546. input.rename{
  547. margin: -1px 0 0 -1px;
  548. padding: 1px;
  549. width: 120px;
  550. }
  551. input.checkbox {
  552. float: left;
  553. margin-left: 5px;
  554. margin-top: 7px;
  555. width: 16px;
  556. opacity: 0.5;
  557. &:hover {
  558. opacity: 1;
  559. }
  560. }
  561. .multi-selected input.checkbox {
  562. opacity: 1;
  563. }
  564. .actions {
  565. margin: 4px 4px 4px 26px;
  566. > div {
  567. display: inline;
  568. margin-right: 8px;
  569. }
  570. a {
  571. color: #333;
  572. }
  573. .rename-btn, .delete-btn {
  574. margin-top: 4px;
  575. }
  576. .text {
  577. margin-left: 4px;
  578. }
  579. .new-entity .dropdown-menu {
  580. left: -12px;
  581. margin: 0;
  582. }
  583. .new-entity.open .dropdown-toggle {
  584. background: none;
  585. text-decoration: underline;
  586. }
  587. }
  588. .new-entity ul.dropdown-menu a {
  589. padding: 0 5px;
  590. }
  591. }
  592. table#addUserTable, table#addUserTable td{
  593. border:none;
  594. border-left:none;
  595. }
  596. table {
  597. margin: 1em 0;
  598. clear: both;
  599. }
  600. .addUserForm {
  601. padding: 12px;
  602. input, button, select {
  603. margin: 6px;
  604. }
  605. }
  606. .auto-complete-menu {
  607. border: 1px solid #999;
  608. background-color: white;
  609. margin: 0;
  610. padding: 5px;
  611. list-style: none;
  612. color: #888;
  613. z-index: 10;
  614. li {
  615. padding: 0 4px;
  616. cursor: pointer;
  617. }
  618. li.selected, li:hover {
  619. strong {
  620. color: white;
  621. }
  622. color: #ddd;
  623. background-color: blue;
  624. }
  625. strong {
  626. font-weight: normal;
  627. color: black;
  628. }
  629. }
  630. .context-menu {
  631. display: block;
  632. left: auto;
  633. .border-radius(0);
  634. }
  635. .clear-modal-backdrop {
  636. background: none;
  637. }
  638. .sharelatex-spelling-highlight {
  639. position: absolute;
  640. background-image: url(/img/spellcheck-underline.png);
  641. background-repeat: repeat-x;
  642. background-position: bottom left;
  643. }
  644. @defaultCursorColor: rgb(14, 158, 0);
  645. .sharelatex-remote-cursor {
  646. position: absolute;
  647. z-index: 2;
  648. .name {
  649. font-size: 0.8em;
  650. background-color: @defaultCursorColor;
  651. color: white;
  652. padding: 2px 6px;
  653. .border-radius(3px 3px 3px 0);
  654. position: absolute;
  655. left: -4px;
  656. }
  657. .nubbin {
  658. height: 6px;
  659. width: 6px;
  660. background-color: @defaultCursorColor;
  661. position: absolute;
  662. left: -4px;
  663. }
  664. }
  665. @cursorGreen: rgb(14,158,0);
  666. @cursorBlue: rgb(0,25,168);
  667. @cursorRed: rgb(220,36,31);
  668. @cursorPurple: rgb(117,16,86);
  669. @cursorBrown: rgb(137,78,36);
  670. @cursorOrange: rgb(255,127,0);
  671. @cursorGrey: rgb(65,75,86);
  672. @cursorLightBlue: rgb(0,175,173);
  673. .sharelatex-remote-cursor-0 {
  674. border-left: 2px solid @cursorGreen;
  675. .name, .nubbin {
  676. background-color: @cursorGreen;
  677. }
  678. }
  679. .sharelatex-remote-cursor-1 {
  680. border-left: 2px solid @cursorBlue;
  681. .name, .nubbin {
  682. background-color: @cursorBlue;
  683. }
  684. }
  685. .sharelatex-remote-cursor-2 {
  686. border-left: 2px solid @cursorRed;
  687. .name, .nubbin {
  688. background-color: @cursorRed;
  689. }
  690. }
  691. .sharelatex-remote-cursor-3 {
  692. border-left: 2px solid @cursorPurple;
  693. .name, .nubbin {
  694. background-color: @cursorPurple;
  695. }
  696. }
  697. .sharelatex-remote-cursor-4 {
  698. border-left: 2px solid @cursorBrown;
  699. .name, .nubbin {
  700. background-color: @cursorBrown;
  701. }
  702. }
  703. .sharelatex-remote-cursor-5 {
  704. border-left: 2px solid @cursorOrange;
  705. .name, .nubbin {
  706. background-color: @cursorOrange;
  707. }
  708. }
  709. .sharelatex-remote-cursor-6 {
  710. border-left: 2px solid @cursorGrey;
  711. .name, .nubbin {
  712. background-color: @cursorGrey;
  713. }
  714. }
  715. .sharelatex-remote-cursor-7 {
  716. border-left: 2px solid @cursorLightBlue;
  717. .name, .nubbin {
  718. background-color: @cursorLightBlue;
  719. }
  720. }
  721. .spell-check-menu {
  722. position: absolute;
  723. margin-left: 1px;
  724. .btn {
  725. padding: 1px 4px 4px;
  726. margin-top: -4px;
  727. line-height: normal;
  728. }
  729. .underlined {
  730. background-image: url(/img/spellcheck-underline.png);
  731. background-repeat: repeat-x;
  732. background-position: bottom left;
  733. }
  734. .dropdown-menu {
  735. min-width: 0;
  736. left: auto;
  737. right: 0;
  738. a {
  739. padding: 1px 8px;
  740. }
  741. }
  742. }
  743. .ace_search {
  744. background-color: #ddd;
  745. border: 1px solid #cbcbcb;
  746. border-top: 0 none;
  747. max-width: 500px;
  748. overflow: hidden;
  749. margin: 0;
  750. padding: 4px;
  751. position: absolute;
  752. top: 0px;
  753. right: 0;
  754. z-index: 99;
  755. border-radius: 0px 0px 0px 5px;
  756. border-right: 0 none;
  757. }
  758. .icon-chevron-up, .icon-chevron-down, .icon-trash, .icon-plus, .icon-pencil {
  759. display: inline-block;
  760. width: 14px;
  761. height: 14px;
  762. line-height: 14px;
  763. vertical-align: text-top;
  764. background-image: url(@iconSpritePath);
  765. background-position: 14px 14px;
  766. background-repeat: no-repeat;
  767. .ie7-restore-right-whitespace();
  768. }
  769. .icon-white {
  770. background-image: url(@iconWhiteSpritePath);
  771. }
  772. .icon-chevron-up { background-position: -288px -120px; }
  773. .icon-chevron-down { background-position: -313px -119px; }
  774. .icon-trash { background-position: -456px 0; }
  775. .icon-plus { background-position: -408px -96px; }
  776. .icon-pencil { background-position: 0 -72px; }
  777. .ace_search_form {
  778. margin-bottom: 4px;
  779. }
  780. .ace_searchbtn:last-child,
  781. .ace_replacebtn:last-child {
  782. border-top-right-radius: 3px;
  783. border-bottom-right-radius: 3px;
  784. }
  785. .ace_searchbtn_close {
  786. background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAcCAYAAABRVo5BAAAAZ0lEQVR42u2SUQrAMAhDvazn8OjZBilCkYVVxiis8H4CT0VrAJb4WHT3C5xU2a2IQZXJjiQIRMdkEoJ5Q2yMqpfDIo+XY4k6h+YXOyKqTIj5REaxloNAd0xiKmAtsTHqW8sR2W5f7gCu5nWFUpVjZwAAAABJRU5ErkJggg==) no-repeat 50% 0;
  787. border-radius: 50%;
  788. border: 0 none;
  789. color: #656565;
  790. cursor: pointer;
  791. display: block;
  792. position: absolute;
  793. top: 3px;
  794. right: 6px;
  795. font-family: Arial;
  796. font-size: 16px;
  797. height: 14px;
  798. line-height: 16px;
  799. margin: 5px 1px 9px 5px;
  800. padding: 0;
  801. text-align: center;
  802. width: 14px;
  803. }
  804. .ace_searchbtn_close:hover {
  805. background-color: #656565;
  806. background-position: 50% 100%;
  807. color: white;
  808. }
  809. i[class*="sprite-"] {
  810. display: inline-block;
  811. height: 16px;
  812. width: 16px;
  813. }
  814. .sprite-folder {
  815. background-image: url(/img/nide/folder.png);
  816. }
  817. .sprite-project {
  818. background-image: url(/img/project.png);
  819. }
  820. .sprite-file {
  821. background-image: url(/img/file.png);
  822. }
  823. .sprite-doc {
  824. background-image: url(/img/nide/doc.png);
  825. }
  826. .hotkeys {
  827. .hotkeys-column {
  828. width: 50%;
  829. float: left;
  830. }
  831. .hotkey {
  832. margin: 8px 0;
  833. }
  834. .combination {
  835. padding: 3px 6px;
  836. .border-radius(4px);
  837. background-color: #444;
  838. color: white;
  839. margin-right: 4px;
  840. }
  841. .description {
  842. font-weight: bold;
  843. }
  844. .clear {
  845. .clearfix();
  846. }
  847. }
  848. #fileViewArea {
  849. text-align: center;
  850. background-color: #ddd;
  851. img {
  852. max-width: 600px;
  853. max-height: 600px;
  854. border: 1px solid #999;
  855. background-color: white;
  856. padding: 10px;
  857. margin-top: 20px;
  858. }
  859. .no-preview {
  860. color: #666;
  861. font-size: 32px;
  862. margin-top: 20px;
  863. }
  864. .download {
  865. margin-top: 16px;
  866. }
  867. }
  868. #socialSharing {
  869. .share-button {
  870. display: inline-block;
  871. margin-right: 8px;
  872. margin-bottom: 8px;
  873. }
  874. }
  875. .project-description {
  876. textarea {
  877. min-height: 120px;
  878. }
  879. label {
  880. border-bottom: 1px solid #eeeeee;
  881. font-size: 1.2em;
  882. line-height: 1.8em;
  883. margin-bottom: 6px;
  884. }
  885. }
  886. .btn-facebook {
  887. color: #ffffff;
  888. text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  889. background-color: #2b4b90;
  890. *background-color: #133783;
  891. background-image: -moz-linear-gradient(top, #3b5998, #133783);
  892. background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#3b5998), to(#133783));
  893. background-image: -webkit-linear-gradient(top, #3b5998, #133783);
  894. background-image: -o-linear-gradient(top, #3b5998, #133783);
  895. background-image: linear-gradient(to bottom, #3b5998, #133783);
  896. background-repeat: repeat-x;
  897. border-color: #133783 #133783 #091b40;
  898. border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  899. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3b5998', endColorstr='#ff133783', GradientType=0);
  900. filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  901. }
  902. .btn-facebook:hover,
  903. .btn-facebook:focus,
  904. .btn-facebook:active,
  905. .btn-facebook.active,
  906. .btn-facebook.disabled,
  907. .btn-facebook[disabled] {
  908. color: #ffffff;
  909. background-color: #133783;
  910. *background-color: #102e6d;
  911. }
  912. .btn-facebook:active,
  913. .btn-facebook.active {
  914. background-color: #0d2456 \9;
  915. }
  916. .btn-twitter {
  917. color: #ffffff;
  918. text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  919. background-color: #1c95d0;
  920. *background-color: #0271bf;
  921. background-image: -moz-linear-gradient(top, #2daddc, #0271bf);
  922. background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#2daddc), to(#0271bf));
  923. background-image: -webkit-linear-gradient(top, #2daddc, #0271bf);
  924. background-image: -o-linear-gradient(top, #2daddc, #0271bf);
  925. background-image: linear-gradient(to bottom, #2daddc, #0271bf);
  926. background-repeat: repeat-x;
  927. border-color: #0271bf #0271bf #014473;
  928. border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  929. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff2daddc', endColorstr='#ff0271bf', GradientType=0);
  930. filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  931. }
  932. .btn-twitter:hover,
  933. .btn-twitter:focus,
  934. .btn-twitter:active,
  935. .btn-twitter.active,
  936. .btn-twitter.disabled,
  937. .btn-twitter[disabled] {
  938. color: #ffffff;
  939. background-color: #0271bf;
  940. *background-color: #0262a6;
  941. }
  942. .btn-twitter:active,
  943. .btn-twitter.active {
  944. background-color: #01538d \9;
  945. }
  946. .btn-google-plus {
  947. color: #ffffff;
  948. text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  949. background-color: #d34332;
  950. *background-color: #c53727;
  951. background-image: -moz-linear-gradient(top, #dd4b39, #c53727);
  952. background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#dd4b39), to(#c53727));
  953. background-image: -webkit-linear-gradient(top, #dd4b39, #c53727);
  954. background-image: -o-linear-gradient(top, #dd4b39, #c53727);
  955. background-image: linear-gradient(to bottom, #dd4b39, #c53727);
  956. background-repeat: repeat-x;
  957. border-color: #c53727 #c53727 #85251a;
  958. border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  959. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdd4b39', endColorstr='#ffc53727', GradientType=0);
  960. filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  961. }
  962. .btn-google-plus:hover,
  963. .btn-google-plus:focus,
  964. .btn-google-plus:active,
  965. .btn-google-plus.active,
  966. .btn-google-plus.disabled,
  967. .btn-google-plus[disabled] {
  968. color: #ffffff;
  969. background-color: #c53727;
  970. *background-color: #b03123;
  971. }
  972. .btn-google-plus:active,
  973. .btn-google-plus.active {
  974. background-color: #9a2b1f \9;
  975. }
  976. #errorMessages {
  977. z-index: 10000;
  978. top: 4px;
  979. width: 300px;
  980. position: absolute;
  981. left: 50%;
  982. margin-left: -154px;
  983. #connectionLostMessage {
  984. background-color: rgb(250, 199, 199);
  985. padding: 4px;
  986. text-align: center;
  987. border: 2px solid red;
  988. margin-bottom: 6px;
  989. }
  990. #savingProblems {
  991. background-color: #FFE9C2;
  992. padding: 4px;
  993. text-align: center;
  994. border: 2px solid rgb(255, 163, 0);
  995. margin-bottom: 6px;
  996. }
  997. }