shortcut.theme.css 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. /**
  2. * @file
  3. * Styling for the shortcut module.
  4. */
  5. /**
  6. * Toolbar.
  7. */
  8. .toolbar .toolbar-tray-vertical .edit-shortcuts {
  9. text-align: right; /* LTR */
  10. padding: 1em;
  11. }
  12. [dir="rtl"] .toolbar .toolbar-tray-vertical .edit-shortcuts {
  13. text-align: left;
  14. }
  15. .toolbar .toolbar-tray-horizontal .edit-shortcuts {
  16. float: right; /* LTR */
  17. }
  18. [dir="rtl"] .toolbar .toolbar-tray-horizontal .edit-shortcuts {
  19. float: left;
  20. }
  21. /**
  22. * Add/remove links.
  23. */
  24. .shortcut-action {
  25. display: inline-block;
  26. margin-left: 0.3em; /* LTR */
  27. }
  28. [dir="rtl"] .shortcut-action {
  29. margin-left: 0;
  30. margin-right: 0.3em;
  31. }
  32. .shortcut-action__message {
  33. background: #000;
  34. background: rgba(0, 0, 0, 0.5);
  35. border-radius: 5px;
  36. padding: 0 5px;
  37. color: #fff;
  38. display: inline-block;
  39. margin-left: 0.3em; /* LTR */
  40. opacity: 0;
  41. -ms-transform: translateY(-12px);
  42. -webkit-transform: translateY(-12px);
  43. transform: translateY(-12px);
  44. -webkit-transition: all 200ms ease-out;
  45. transition: all 200ms ease-out;
  46. -ms-backface-visibility: hidden;
  47. -webkit-backface-visibility: hidden;
  48. backface-visibility: hidden;
  49. }
  50. [dir="rtl"] .shortcut-action__message {
  51. margin-left: 0;
  52. margin-right: 0.3em;
  53. }
  54. .shortcut-action:hover .shortcut-action__message,
  55. .shortcut-action:focus .shortcut-action__message {
  56. opacity: 1;
  57. -ms-transform: translateY(-2px);
  58. -webkit-transform: translateY(-2px);
  59. transform: translateY(-2px);
  60. }