You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1100 lines
34 KiB

3 years ago
  1. @import (reference) "./dropdown.less";
  2. @import (reference) "./colortheme-all.less";
  3. @import (reference) "./browser.less";
  4. @import (reference) "./ckeditor-fix.less";
  5. @import (reference) "./avatar.less";
  6. @import (reference) "./toolbar-history.less";
  7. @import (reference) "./icon-colors.less";
  8. @import (reference) "./tools.less";
  9. @import (reference) "./icons.less";
  10. @import (reference) "./modal.less";
  11. @import (reference) "./help.less";
  12. .toolbar_vars (
  13. @color: @colortheme_default-color, // Color of the text for the toolbar
  14. @bg-color: @colortheme_default-bg, // color of the toolbar background
  15. @warn-color: @colortheme_default-warn // color of the warning text in the toolbar
  16. ) {
  17. @toolbar-color: @color;
  18. @toolbar-color-l20: lighten(@color, 20%);
  19. @toolbar-color-d20: darken(@color, 20%);
  20. @toolbar-color-d15: darken(@color, 15%);
  21. @toolbar-bg-color: @bg-color;
  22. @toolbar-bg-color-l8: lighten(@bg-color, 8%);
  23. @toolbar-bg-color-l20: lighten(@bg-color, 20%);
  24. @toolbar-bg-color-d5: darken(@bg-color, 5%);
  25. @toolbar-bg-color-d10: darken(@bg-color, 10%);
  26. @toolbar-bg-color-d15: darken(@bg-color, 15%);
  27. @toolbar-warn-color: @warn-color;
  28. @toolbar-userlist-name-edit: contrast(@toolbar-color, @toolbar-color-l20, @toolbar-color-d20);
  29. };
  30. .toolbar_main (
  31. @color: @colortheme_default-color, // Color of the text for the toolbar
  32. @bg-color: @colortheme_default-bg, // color of the toolbar background
  33. @warn-color: @colortheme_default-warn, // color of the warning text in the toolbar
  34. @barWidth: 600px // width of the toolbar
  35. ) {
  36. --LessLoader_require: LessLoader_currentFile();
  37. .toolbar_vars(@color, @bg-color, @warn-color);
  38. --toolbar-color: @toolbar-color;
  39. --toolbar-color-l20: @toolbar-color-l20;
  40. --toolbar-color-d20: @toolbar-color-d20;
  41. --toolbar-color-d15: @toolbar-color-d15;
  42. --toolbar-bg-color: @toolbar-bg-color;
  43. --toolbar-bg-color-l8: @toolbar-bg-color-l8;
  44. --toolbar-bg-color-l20: @toolbar-bg-color-l20;
  45. --toolbar-bg-color-d5: @toolbar-bg-color-d5;
  46. --toolbar-bg-color-d10: @toolbar-bg-color-d10;
  47. --toolbar-bg-color-d15: @toolbar-bg-color-d15;
  48. --toolbar-warn-color: @toolbar-warn-color;
  49. --toolbar-userlist-name-edit: @toolbar-userlist-name-edit;
  50. @media screen and (max-width: @barWidth) {
  51. .cp-toolbar-rightside {
  52. flex-wrap: wrap;
  53. height: auto;
  54. width: 100%;
  55. }
  56. }
  57. .help_main(@color, @bg-color);
  58. .dropdown_main();
  59. .history_main();
  60. .iconColors_main();
  61. .modal_main();
  62. };
  63. & {
  64. .toolbar_vars();
  65. @toolbar_line-height: 32px;
  66. @toolbar_top-height: 64px;
  67. @toolbar_button-font: @colortheme_app-font;
  68. // if we spell 'share' correctly, then adblock plus hides the share button
  69. // this is a workaround
  70. .fa-shhare-alt:before { content: "\f1e0"; }
  71. .ckeditor_fix();
  72. .cp-markdown-toolbar {
  73. height: @toolbar_line-height;
  74. background-color: @toolbar-bg-color-l20;
  75. background-color: var(--toolbar-bg-color-l20);
  76. display: none;
  77. button {
  78. height: @toolbar_line-height !important;
  79. outline: 0;
  80. color: @toolbar-color;
  81. color: var(--toolbar-color);
  82. .toolbar_button;
  83. font: normal normal normal 14px/1 FontAwesome;
  84. &:hover {
  85. background-color: @toolbar-bg-color-l8;
  86. background-color: var(--toolbar-bg-color-l8);
  87. }
  88. &.cp-markdown-help { float: right; }
  89. }
  90. }
  91. .cp-toolbar-container {
  92. display: flex;
  93. }
  94. .toolbar_button {
  95. height: @toolbar_line-height;
  96. box-sizing: border-box;
  97. padding: 3px 10px;
  98. margin: 0;
  99. transition: all 0.15s;
  100. .tools_unselectable();
  101. &.cp-toolbar-hidden {
  102. display: none;
  103. }
  104. .cp-toolbar-drawer-element {
  105. display: none;
  106. }
  107. // Bootstrap 4 colors (btn-secondary)
  108. border: 1px solid transparent;
  109. color: inherit;
  110. font: @toolbar_button-font;
  111. * {
  112. color: inherit;
  113. font: @toolbar_button-font;
  114. }
  115. background: transparent;
  116. &:hover {
  117. background-color: rgba(50,50,50,0.3);
  118. }
  119. }
  120. .cp-toolbar-userlist-drawer {
  121. background-color: @toolbar-bg-color;
  122. background-color: var(--toolbar-bg-color);
  123. font: @colortheme_app-font-size @colortheme_font;
  124. min-width: 175px;
  125. width: 175px;
  126. display: block;
  127. overflow-y: auto;
  128. overflow-x: hidden;
  129. padding: 10px;
  130. box-sizing: border-box;
  131. .cp-toolbar-userlist-drawer-close {
  132. position: absolute;
  133. margin-top: -10px;
  134. margin-left: 149px;
  135. font-size: 15px;
  136. opacity: 0.5;
  137. cursor: pointer;
  138. text-shadow: unset;
  139. &:hover {
  140. opacity: 1;
  141. }
  142. }
  143. h2 {
  144. color: inherit;
  145. text-align: center;
  146. padding: 5px 0px;
  147. margin: 5px 0px;
  148. font: inherit;
  149. font-weight: bold;
  150. white-space: normal;
  151. line-height: auto;
  152. }
  153. text-align: baseline;
  154. .cp-toolbar-userlist-viewer {
  155. font-style: italic;
  156. padding: 5px;
  157. background: rgba(0,0,0,0.1);
  158. margin: 2px 0;
  159. }
  160. & > p {
  161. font: @colortheme_app-font-size @colortheme_font;
  162. margin: 0;
  163. padding: 0;
  164. display: block;
  165. }
  166. .cp-toolbar-userlist-others {
  167. display: flex;
  168. flex-flow: column;
  169. margin: 10px 0;
  170. margin-bottom: 20px;
  171. &>span {
  172. height: 48px;
  173. padding: 5px;
  174. margin: 2px 0;
  175. background: rgba(0,0,0,0.1);
  176. .avatar_main(30px);
  177. .cp-avatar-default, media-tag {
  178. margin-right: 5px;
  179. }
  180. &.cp-userlist-clickable {
  181. cursor: pointer;
  182. &:hover {
  183. background-color: rgba(0,0,0,0.3);
  184. }
  185. }
  186. .cp-toolbar-userlist-rightcol {
  187. order: 10;
  188. flex: 1;
  189. overflow: hidden;
  190. text-overflow: ellipsis;
  191. white-space: nowrap;
  192. display: flex;
  193. flex-flow: column;
  194. height: 100%;
  195. .cp-toolbar-userlist-name {
  196. flex: 1;
  197. overflow: hidden;
  198. text-overflow: ellipsis;
  199. white-space: nowrap;
  200. display: flex;
  201. justify-content: space-between;
  202. align-items: center;
  203. }
  204. .cp-toolbar-userlist-name-input {
  205. flex: 1;
  206. overflow: hidden;
  207. text-overflow: ellipsis;
  208. white-space: nowrap;
  209. display: none;
  210. border: none;
  211. }
  212. .cp-toolbar-userlist-name-value {
  213. overflow: hidden;
  214. flex: 1;
  215. min-width: 0;
  216. min-height: 0;
  217. text-overflow: ellipsis;
  218. }
  219. .cp-toolbar-userlist-name-edit {
  220. width: 20px;
  221. font-size: 16px;
  222. padding: 0;
  223. border: none;
  224. height: 20px;
  225. cursor: pointer;
  226. }
  227. .cp-toolbar-userlist-friend {
  228. padding: 0;
  229. }
  230. }
  231. }
  232. }
  233. .cp-toolbar-userlist-friend {
  234. display: inline-block;
  235. width: 20px;
  236. }
  237. }
  238. #cp-app-toolbar-creation-dialog.cp-modal-container {
  239. .icons_main();
  240. li {
  241. border: 1px solid @colortheme_modal-fg;
  242. &:hover {
  243. //border: 1px solid @colortheme_modal-fg;
  244. background: @colortheme_modal-fg;
  245. color: @colortheme_modal-bg;
  246. }
  247. }
  248. .cp-modal {
  249. display: flex;
  250. flex-flow: column;
  251. li, li .fa {
  252. cursor: pointer;
  253. }
  254. &> p {
  255. margin: 50px;
  256. }
  257. &> div {
  258. display: flex;
  259. flex-wrap: wrap;
  260. justify-content: center;
  261. align-content: center;
  262. overflow-y: auto;
  263. }
  264. }
  265. .cp-creation-icons-name {
  266. white-space: nowrap;
  267. }
  268. #cp-app-toolbar-creation-advanced {
  269. width: auto;
  270. margin: 0;
  271. padding: 0;
  272. outline: none;
  273. }
  274. label[for="cp-app-toolbar-creation-advanced"] {
  275. margin: 0;
  276. margin-left: 5px;
  277. }
  278. @media screen and (max-height: @browser_media-not-big) {
  279. .cp-modal {
  280. & > p {
  281. display: none;
  282. }
  283. & > div {
  284. align-content: unset;
  285. li {
  286. height: 40px;
  287. width: 200px;
  288. display: flex;
  289. align-items: center;
  290. .fa {
  291. font-size: 32px;
  292. }
  293. .cp-icons-name {
  294. height: auto;
  295. }
  296. }
  297. }
  298. }
  299. }
  300. }
  301. .cp-toolbar-userlist-drawer {
  302. background-color: @toolbar-bg-color;
  303. background-color: var(--toolbar-bg-color);
  304. color: @toolbar-color;
  305. color: var(--toolbar-color);
  306. .cp-toolbar-userlist-drawer-close {
  307. color: @toolbar-color;
  308. color: var(--toolbar-color);
  309. }
  310. h2 {
  311. background-color: @toolbar-bg-color-d10;
  312. background-color: var(--toolbar-bg-color-d10);
  313. color: @toolbar-color;
  314. color: var(--toolbar-color);
  315. }
  316. .cp-toolbar-userlist-name-input {
  317. background-color: @toolbar-bg-color-d10;
  318. background-color: var(--toolbar-bg-color-d10);
  319. color: @toolbar-color;
  320. color: var(--toolbar-color);
  321. }
  322. .cp-toolbar-userlist-name-edit {
  323. color: @toolbar-userlist-name-edit;
  324. color: var(--toolbar-userlist-name-edit);
  325. background: transparent;
  326. &:hover {
  327. color: @toolbar-color;
  328. color: var(--toolbar-color);
  329. }
  330. }
  331. .cp-toolbar-userlist-friend {
  332. &:hover {
  333. color: @toolbar-color-d15;
  334. color: var(--toolbar-color-d15);
  335. }
  336. }
  337. }
  338. .cp-toolbar {
  339. * {
  340. outline-width: 0;
  341. &:focus {
  342. outline-width: 0;
  343. }
  344. }
  345. @toolbar-green: #5cb85c;
  346. box-sizing: border-box;
  347. padding: 0px;
  348. display: flex;
  349. flex-wrap: wrap;
  350. justify-content: space-between;
  351. background-color: @toolbar-bg-color;
  352. background-color: var(--toolbar-bg-color);
  353. color: @toolbar-color;
  354. color: var(--toolbar-color);
  355. .fa {
  356. font: normal normal normal 14px/1 FontAwesome;
  357. font-family: FontAwesome;
  358. }
  359. .tools_unselectable();
  360. font: @toolbar_button-font;
  361. width: 100%;
  362. z-index: 10000; // cp-toolbar
  363. .cp-dropdown-container {
  364. //height: 100%;
  365. //display: inline-block;
  366. button {
  367. height: 100%;
  368. border-radius: 0;
  369. margin: 0;
  370. background: transparent;
  371. }
  372. }
  373. button {
  374. .toolbar_button;
  375. }
  376. .cp-toolbar-limit {
  377. box-sizing: border-box;
  378. height: 26px;
  379. width: 26px;
  380. display: inline-block;
  381. padding: 3px;
  382. margin: 0px 3px 0 6px;
  383. vertical-align: middle;
  384. line-height: @toolbar_top-height;
  385. span {
  386. cursor: pointer;
  387. margin: auto;
  388. font-size: 20px;
  389. }
  390. }
  391. div {
  392. white-space: normal;
  393. }
  394. /*button, select {
  395. height: @toolbar_line-height;
  396. box-sizing: border-box;
  397. padding: 3px 10px;
  398. margin: 0;
  399. }*/
  400. select {
  401. margin-left: 5px;
  402. margin-right: 5px;
  403. padding-left: 5px;
  404. border: 1px solid #A6A6A6;
  405. border-bottom-color: #979797;
  406. vertical-align: top;
  407. box-sizing: content-box;
  408. option {
  409. height: 24px;
  410. }
  411. }
  412. &.cp-toolbar-notitle {
  413. .cp-toolbar-top-filler {
  414. flex: 1;
  415. }
  416. }
  417. .cp-toolbar-top {
  418. @media screen and (max-width: @browser_media-medium-screen) {
  419. flex-wrap: wrap;
  420. height: @toolbar_line-height;
  421. .cp-pad-not-pinned {
  422. line-height: 32px;
  423. flex: unset;
  424. padding: 0;
  425. align-self: auto;
  426. margin: 0 5px;
  427. }
  428. .cp-toolbar-top-filler {
  429. height: 32px;
  430. }
  431. .cp-toolbar-title {
  432. height: @toolbar_line-height;
  433. line-height: initial;
  434. margin: 0;
  435. .cp-toolbar-title-hoverable {
  436. width: 100%;
  437. }
  438. .cp-toolbar-title-value-page {
  439. padding: 5px;
  440. line-height: unset;
  441. border: 0;
  442. }
  443. .cp-toolbar-title-editable, .cp-toolbar-title-value-page {
  444. max-width: ~"calc(100vw - 26px)";
  445. display: inline-block;
  446. overflow: hidden;
  447. text-overflow: ellipsis;
  448. font-size: @colortheme_app-font-size;
  449. height: @toolbar_line-height;
  450. box-sizing: border-box;
  451. line-height: 20px;
  452. }
  453. .cp-toolbar-title-edit, .cp-toolbar-title-save {
  454. box-sizing: border-box;
  455. height: @toolbar_line-height;
  456. line-height: @colortheme_app-font-size;
  457. display: inline-block;
  458. .fa {
  459. font-size: @colortheme_app-font-size;
  460. }
  461. }
  462. input {
  463. height: @toolbar_line-height;
  464. font-size: @colortheme_app-font-size;
  465. flex: 1;
  466. max-width: none;
  467. line-height: calc(@toolbar_line-height - 12px); // padding + border
  468. }
  469. }
  470. .cp-toolbar-link {
  471. height: @toolbar_line-height;
  472. width: @toolbar_line-height;
  473. .cp-toolbar-link-logo {
  474. padding: 5px;
  475. }
  476. }
  477. .cp-toolbar-user {
  478. height: @toolbar_line-height;
  479. .cp-toolbar-new {
  480. height: @toolbar_line-height;
  481. width: @toolbar_line-height;
  482. margin-left: 0;
  483. button {
  484. height: @toolbar_line-height;
  485. width: @toolbar_line-height;
  486. font-size: 20px;
  487. margin-top: -1px;
  488. }
  489. }
  490. .cp-toolbar-user-dropdown {
  491. height: @toolbar_line-height;
  492. width: @toolbar_line-height;
  493. &> button {
  494. height: @toolbar_line-height;
  495. width: @toolbar_line-height;
  496. span { font-size: unset; }
  497. }
  498. &> button.cp-avatar.cp-avatar {
  499. media-tag {
  500. margin: 4px;
  501. max-width: 24px;
  502. min-width: 24px;
  503. max-height: 24px;
  504. min-height: 24px;
  505. }
  506. }
  507. }
  508. .cp-toolbar-limit {
  509. line-height: 32px;
  510. margin: 0;
  511. }
  512. }
  513. /*
  514. .cp-toolbar-top-filler {
  515. flex: 1;
  516. }
  517. .cp-toolbar-title {
  518. flex: auto;
  519. width: 100%;
  520. order: 10;
  521. height: @toolbar_line-height;
  522. line-height: initial;
  523. margin: 0;
  524. .cp-toolbar-title-hoverable {
  525. width: 100%;
  526. }
  527. .cp-toolbar-title-editable {
  528. max-width: ~"calc(100vw - 26px)";
  529. display: inline-block;
  530. overflow: hidden;
  531. text-overflow: ellipsis;
  532. font-size: @colortheme_app-font-size;
  533. height: @toolbar_line-height;
  534. box-sizing: border-box;
  535. line-height: 20px;
  536. }
  537. .cp-toolbar-title-edit, .cp-toolbar-title-save {
  538. box-sizing: border-box;
  539. height: @toolbar_line-height;
  540. line-height: @colortheme_app-font-size;
  541. display: inline-block;
  542. .fa {
  543. font-size: @colortheme_app-font-size;
  544. }
  545. }
  546. input {
  547. height: @toolbar_line-height;
  548. font-size: @colortheme_app-font-size;
  549. flex: 1;
  550. max-width: none;
  551. line-height: calc(@toolbar_line-height - 12px); // padding + border
  552. }
  553. }
  554. */
  555. }
  556. }
  557. .cp-toolbar-spinner {
  558. font-size: @colortheme_app-font-size;
  559. color: @toolbar-color;
  560. color: var(--toolbar-color);
  561. }
  562. .cp-toolbar-limit {
  563. text-shadow: -1px 0 @toolbar-color, 0 1px @toolbar-color, 1px 0 @toolbar-color, 0 -1px @toolbar-color;
  564. text-shadow: -1px 0 var(--toolbar-color), 0 1px var(--toolbar-color), 1px 0 var(--toolbar-color), 0 -1px var(--toolbar-color);
  565. color: @toolbar-warn-color;
  566. color: var(--toolbar-warn-color);
  567. }
  568. .cp-toolbar-leftside, .cp-toolbar-rightside {
  569. background-color: @toolbar-bg-color-l8;
  570. background-color: var(--toolbar-bg-color-l8);
  571. button:hover, button.cp-toolbar-button-active {
  572. background-color: @toolbar-bg-color;
  573. background-color: var(--toolbar-bg-color);
  574. }
  575. }
  576. .cp-toolbar-title-hoverable:hover {
  577. .cp-toolbar-title-editable, .cp-toolbar-title-edit {
  578. cursor: text;
  579. border: 1px solid @toolbar-bg-color-d15;
  580. border: 1px solid var(--toolbar-bg-color-d15);
  581. background: @toolbar-bg-color-d10;
  582. background: var(--toolbar-bg-color-d10);
  583. transition: all 0.15s;
  584. color: @toolbar-color;
  585. color: var(--toolbar-color);
  586. }
  587. .cp-toolbar-title-editable {
  588. cursor: text;
  589. }
  590. }
  591. .cp-toolbar-title-save {
  592. border: 1px solid @toolbar-bg-color-d15;
  593. border: 1px solid var(--toolbar-bg-color-d15);
  594. background: @toolbar-bg-color-d10;
  595. background: var(--toolbar-bg-color-d10);
  596. color: @toolbar-color;
  597. color: var(--toolbar-color);
  598. &:hover {
  599. background: @toolbar-bg-color-d5;
  600. background: var(--toolbar-bg-color-d5);
  601. }
  602. }
  603. input {
  604. border: 1px solid @toolbar-bg-color-d15;
  605. border: 1px solid var(--toolbar-bg-color-d15);
  606. background: @toolbar-bg-color-d10;
  607. background: var(--toolbar-bg-color-d10);
  608. color: @toolbar-color;
  609. color: var(--toolbar-color);
  610. }
  611. .cp-dropdown-content.cp-dropdown-left a {
  612. color: black;
  613. }
  614. }
  615. .cp-toolbar-top {
  616. display: flex;
  617. flex-flow: row;
  618. height: @toolbar_top-height;
  619. position: relative;
  620. width: 100%;
  621. .cp-pad-not-pinned {
  622. order: 4;
  623. flex: 1;
  624. text-overflow: ellipsis;
  625. overflow: hidden;
  626. white-space: nowrap;
  627. line-height: @toolbar_top-height;
  628. padding: 0;
  629. margin: 0 5px;
  630. font-size: @colortheme_app-font-size;
  631. color: @toolbar-warn-color;
  632. color: var(--toolbar-warn-color);
  633. .cp-pnp-msg {
  634. padding-left: 5px;
  635. font-family: @colortheme_font;
  636. font-size: @colortheme_app-font-size;
  637. a {
  638. font-size: @colortheme_app-font-size;
  639. font-family: @colortheme_font;
  640. font-weight: bold;
  641. color: @toolbar-warn-color;
  642. color: var(--toolbar-warn-color);
  643. &:hover {
  644. text-decoration: underline;
  645. }
  646. }
  647. @media screen and (max-width: (@browser_media-not-big)) {
  648. display: none;
  649. }
  650. }
  651. @media screen and (max-width: (@browser_media-not-big)) {
  652. overflow: visible;
  653. max-width: 20px;
  654. }
  655. }
  656. .cp-toolbar-top-filler {
  657. height: @toolbar_top-height;
  658. display: inline-block;
  659. order: 5;
  660. //flex: 1;
  661. }
  662. .cp-toolbar-title {
  663. flex: 1;
  664. overflow: hidden;
  665. text-overflow: ellipsis;
  666. order: 3;
  667. height: 100%;
  668. display: inline-flex;
  669. align-items: center;
  670. line-height: @toolbar_top-height;
  671. margin: 0 10px;
  672. .cp-toolbar-title-value {
  673. border: 1px solid transparent;
  674. padding: 5px;
  675. font-size: 25px;
  676. vertical-align: middle;
  677. line-height: 25px;
  678. white-space: nowrap;
  679. }
  680. .cp-toolbar-title-value-page {
  681. border: 1px solid transparent;
  682. padding: 0 5px;
  683. line-height: 48px;
  684. }
  685. .cp-toolbar-title-edit, .cp-toolbar-title-save {
  686. display: flex;
  687. align-items: center;
  688. font-size: 20px;
  689. vertical-align: middle;
  690. line-height: 20px;
  691. .fa {
  692. font-size: 20px;
  693. }
  694. }
  695. .cp-toolbar-title-readonly {
  696. margin-left: 10px;
  697. font-size: 25px;
  698. font-style: italic;
  699. white-space: nowrap;
  700. }
  701. .cp-toolbar-title-hoverable {
  702. display: inline-flex;
  703. overflow: hidden;
  704. }
  705. .cp-toolbar-title-edit {
  706. cursor: pointer;
  707. border: 1px solid transparent;
  708. padding: 5px;
  709. border-collapse: collapse;
  710. span {
  711. cursor: pointer;
  712. }
  713. }
  714. .cp-toolbar-title-save {
  715. cursor: pointer;
  716. padding: 5px;
  717. border-collapse: collapse;
  718. span {
  719. cursor: pointer;
  720. }
  721. }
  722. .cp-toolbar-title-editable {
  723. overflow: hidden;
  724. text-overflow: ellipsis;
  725. border-collapse: collapse;
  726. }
  727. input {
  728. max-width: ~"calc(100% - 40px)";
  729. //flex: 1;
  730. vertical-align: middle;
  731. box-sizing: border-box;
  732. cursor: auto;
  733. width: 300px;
  734. font-size: 20px;
  735. padding: 5px 5px;
  736. height: 40px;
  737. line-height: 28px; // padding + border
  738. }
  739. }
  740. .cp-toolbar-link, .cp-toolbar-new {
  741. font-size: 48px;
  742. line-height: 64px;
  743. width: @toolbar_top-height;
  744. height: @toolbar_top-height;
  745. padding: 0;
  746. box-sizing: border-box;
  747. display: inline-block;
  748. color: white;
  749. a {
  750. color: white;
  751. }
  752. transition: all 0.15s;
  753. }
  754. .cp-toolbar-new {
  755. background-color: rgba(0,0,0,0.2);
  756. &:hover {
  757. background-color: rgba(0,0,0,0.3);
  758. }
  759. text-align: center;
  760. font-size: 32px;
  761. margin-left: 10px;
  762. &> button {
  763. display: flex;
  764. align-items: center;
  765. justify-content: center;
  766. width: 64px;
  767. font-size: 1em;
  768. color: inherit;
  769. height: 64px;
  770. padding: 0px;
  771. margin: 0;
  772. &::before {
  773. width: 100%;
  774. text-align: center;
  775. padding-top: 4px;
  776. }
  777. &:hover {
  778. background-color: initial;
  779. border-color: transparent;
  780. }
  781. span {
  782. vertical-align: top;
  783. font-size: 1em;
  784. text-decoration: none;
  785. color: inherit;
  786. }
  787. }
  788. }
  789. .cp-toolbar-link {
  790. display: inline-flex;
  791. align-items: center;
  792. justify-content: center;
  793. cursor: pointer;
  794. background-color: rgba(0,0,0,0.4);
  795. &:hover {
  796. background-color: rgba(0,0,0,0.5);
  797. }
  798. order: 1;
  799. .fa {
  800. margin: 0;
  801. }
  802. a.cp-toolbar-link-logo {
  803. cursor: pointer;
  804. display: inline-flex;
  805. text-decoration: none;
  806. height: auto;
  807. padding: 10px;
  808. img {
  809. cursor: pointer;
  810. height: 100%;
  811. width: 100%;
  812. }
  813. }
  814. }
  815. .cp-toolbar-user {
  816. height: @toolbar_top-height;
  817. display: inline-flex;
  818. order: 6;
  819. line-height: @toolbar_top-height;
  820. color: white;
  821. .cp-toolbar-new { order: 2; }
  822. .cp-toolbar-user-dropdown { order: 3; }
  823. .cp-toolbar-backup { order: 4; } // TODO drive migration to secure iframe
  824. &> * {
  825. display: inline-block;
  826. height: 100%;
  827. vertical-align: top;
  828. }
  829. .cp-toolbar-user-dropdown {
  830. z-index: 10000; //Z cp-toolbar-user-dropdown
  831. //margin-left: 20px;
  832. height: 64px;
  833. width: 64px;
  834. padding: 0px;
  835. box-sizing: border-box;
  836. text-align: center;
  837. background-color: rgba(0,0,0,0.3);
  838. transition: all 0.15s;
  839. &:hover {
  840. background-color: rgba(0,0,0,0.4);
  841. }
  842. .cp-dropdown-content {
  843. margin: 0;
  844. overflow: visible;
  845. }
  846. & > button {
  847. display: flex;
  848. justify-content: center;
  849. align-items: center;
  850. height: 64px;
  851. width: 64px;
  852. padding: 0;
  853. span {
  854. text-align: center;
  855. width: 100%;
  856. cursor: default;
  857. font-size: 32px;
  858. }
  859. &.cp-avatar {
  860. .avatar_main(48px);
  861. media-tag {
  862. margin: 8px;
  863. }
  864. border: 0;
  865. }
  866. }
  867. }
  868. p.cp-toolbar-account {
  869. &> span {
  870. font-weight: bold;
  871. span {
  872. font-weight: normal;
  873. }
  874. }
  875. }
  876. .cp-toolbar-backup {
  877. margin: 0;
  878. border-radius: 0;
  879. background: transparent;
  880. &:hover {
  881. background-color: rgba(0,0,0,0.2);
  882. }
  883. }
  884. }
  885. }
  886. .cp-toolbar-leftside {
  887. //height: @toolbar_line-height;
  888. &:empty {
  889. height: 0;
  890. }
  891. display: inline-flex;
  892. align-items: center;
  893. max-width: 100%;
  894. flex: 1 1 auto;
  895. //margin-bottom: -1px;
  896. .cp-toolbar-users {
  897. pre {
  898. /* needed for ckeditor */
  899. white-space: pre;
  900. margin: 5px 0px;
  901. }
  902. }
  903. button {
  904. margin: 0px;
  905. border-radius: 0;
  906. height: 100%;
  907. }
  908. .cp-dropdown-content {
  909. margin-top: -1px;
  910. }
  911. & > span {
  912. height: @toolbar_line-height;
  913. }
  914. #cp-toolbar-userlist-drawer-open { order: 1; }
  915. .cp-toolbar-share-button { order: 2; }
  916. .cp-toolbar-spinner { order: 3; }
  917. #cp-toolbar-userlist-drawer-open button {
  918. width: 125px;
  919. text-align: center;
  920. }
  921. .cp-toolbar-share-button {
  922. width: 50px;
  923. text-align: center;
  924. }
  925. }
  926. .cp-toolbar-rightside {
  927. display: flex;
  928. min-height: @toolbar_line-height;
  929. overflow: hidden;
  930. &:empty {
  931. min-height: 0;
  932. height: 0;
  933. }
  934. .cp-toolbar-rightside-button {
  935. cursor: pointer;
  936. // UI actions
  937. &.cp-toolbar-icon-toggle { order: 1; }
  938. &.cp-toolbar-icon-preview { order: 2; }
  939. &.cp-toolbar-icon-present { order: 3; }
  940. // Content actions
  941. &.cp-toolbar-icon-mediatag { order: 10; }
  942. order: 11;
  943. // Storage actions
  944. &.cp-toolbar-icon-hashtag { order: 20; }
  945. &.cp-toolbar-icon-template { order: 21; }
  946. &.cp-toolbar-icon-forget { order: 22; }
  947. // Drawer
  948. &.cp-toolbar-drawer-button { order: 30; }
  949. }
  950. .cp-toolbar-drawer-content:empty ~ .cp-toolbar-drawer-button {
  951. display: none;
  952. }
  953. .cp-toolbar-drawer-content {
  954. box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
  955. position: absolute;
  956. right: 0px;
  957. margin-top: @toolbar_line-height;
  958. min-width: 50px;
  959. background: @colortheme_dropdown-bg;
  960. display: flex;
  961. flex-flow: column;
  962. z-index: 10000; //Z cp-toolbar-drawer-content
  963. color: black;
  964. .fa {
  965. font-size: 17px;
  966. }
  967. &> span {
  968. order: 8;
  969. box-sizing: border-box;
  970. min-width: 150px;
  971. height: @toolbar_line-height;
  972. border-radius: 0;
  973. border: 0;
  974. }
  975. button {
  976. padding: 5px 16px;
  977. text-align: left;
  978. margin: 0;
  979. border-radius: 0;
  980. border: 0;
  981. width: 100%;
  982. line-height: 1em;
  983. &.cp-toolbar-button-active {
  984. background-color: inherit;
  985. }
  986. .cp-toolbar-drawer-element {
  987. margin-left: 10px;
  988. display: inline;
  989. vertical-align: baseline;
  990. }
  991. &.fa-info-circle, &.fa-history, &.fa-cog {
  992. .cp-toolbar-drawer-element {
  993. margin-left: 11px;
  994. }
  995. }
  996. &.fa-question {
  997. .cp-toolbar-drawer-element {
  998. margin-left: 16px;
  999. }
  1000. }
  1001. &:hover {
  1002. background-color: @colortheme_dropdown-bg-hover !important;
  1003. color: @colortheme_dropdown-color;
  1004. }
  1005. order: 8;
  1006. &.fa-history { order: 1; }
  1007. &.fa-download { order: 2; }
  1008. &.fa-upload { order: 3; }
  1009. &.fa-print { order: 4; }
  1010. &.fa-cog { order: 5; }
  1011. &.fa-info-circle { order: 6; }
  1012. &.fa-help { order: 7; }
  1013. }
  1014. }
  1015. }
  1016. .cp-toolbar-spinner {
  1017. line-height: @toolbar_line-height;
  1018. padding: 0 20px;
  1019. overflow: hidden;
  1020. text-overflow: ellipsis;
  1021. white-space: nowrap;
  1022. min-width: 200px;
  1023. box-sizing: border-box;
  1024. &> span.fa {
  1025. height: 20px;
  1026. width: 20px;
  1027. //margin: 8px;
  1028. line-height: 20px;
  1029. font-size: 20px;
  1030. text-align: center;
  1031. }
  1032. }
  1033. .cp-toolbar-readonly {
  1034. margin-right: 5px;
  1035. font-weight: bold;
  1036. text-transform: uppercase;
  1037. }
  1038. .cp-toolbar-share {
  1039. a {
  1040. .fa {
  1041. margin-right: 5px;
  1042. }
  1043. }
  1044. }
  1045. }