Monorepo containing core modules of Zeichen.
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.

156 lines
2.6 KiB

  1. /**
  2. * Editor
  3. */
  4. .__mobiledoc-editor {
  5. font-family: var(--font-family-body), serif;
  6. margin: 1em 0;
  7. color: #454545;
  8. font-size: 1.2em;
  9. line-height: 1.6em;
  10. position: relative;
  11. min-height: 1em;
  12. }
  13. .__mobiledoc-editor:focus {
  14. outline: none;
  15. }
  16. .__mobiledoc-editor > * {
  17. position: relative;
  18. }
  19. .__mobiledoc-editor.__has-no-content:after {
  20. content: attr(data-placeholder);
  21. color: #bbb;
  22. cursor: text;
  23. position: absolute;
  24. top: 0;
  25. }
  26. .__mobiledoc-editor a {
  27. color: var(--color-primary);
  28. white-space: nowrap;
  29. }
  30. .__mobiledoc-editor h1,
  31. .__mobiledoc-editor h2,
  32. .__mobiledoc-editor h3,
  33. .__mobiledoc-editor h4,
  34. .__mobiledoc-editor h5,
  35. .__mobiledoc-editor h6 {
  36. font-family: var(--font-family-base), sans-serif;
  37. letter-spacing: -0.02em;
  38. }
  39. .__mobiledoc-editor blockquote {
  40. border-left: 4px solid var(--color-primary);
  41. margin: 1em 0 1em -1.2em;
  42. padding-left: 1.05em;
  43. color: #a0a0a0;
  44. }
  45. .__mobiledoc-editor img {
  46. display: block;
  47. max-width: 100%;
  48. margin: 0 auto;
  49. }
  50. .__mobiledoc-editor div,
  51. .__mobiledoc-editor iframe {
  52. max-width: 100%;
  53. }
  54. .__mobiledoc-editor [data-md-text-align='left'] {
  55. text-align: left;
  56. }
  57. .__mobiledoc-editor [data-md-text-align='center'] {
  58. text-align: center;
  59. }
  60. .__mobiledoc-editor [data-md-text-align='right'] {
  61. text-align: right;
  62. }
  63. .__mobiledoc-editor [data-md-text-align='justify'] {
  64. text-align: justify;
  65. }
  66. .__mobiledoc-editor ol,
  67. .__mobiledoc-editor ul {
  68. list-style-position: inside;
  69. }
  70. /**
  71. * Cards
  72. */
  73. .__mobiledoc-card {
  74. display: inline-block;
  75. }
  76. /**
  77. * Tooltips
  78. */
  79. @-webkit-keyframes fade-in {
  80. 0% { opacity: 0; }
  81. 100% { opacity: 1; }
  82. }
  83. @keyframes fade-in {
  84. 0% { opacity: 0; }
  85. 100% { opacity: 1; }
  86. }
  87. .__mobiledoc-tooltip {
  88. font-family: var(--font-family-base), sans-serif;
  89. font-size: 0.7em;
  90. white-space: nowrap;
  91. position: absolute;
  92. background-color: rgba(43,43,43,0.9);
  93. border-radius: 3px;
  94. line-height: 1em;
  95. padding: 0.7em 0.9em;
  96. color: #FFF;
  97. -webkit-animation: fade-in 0.2s;
  98. animation: fade-in 0.2s;
  99. }
  100. .__mobiledoc-tooltip:before {
  101. content: '';
  102. position: absolute;
  103. left: 50%;
  104. width: 0;
  105. height: 0;
  106. border-left: 5px solid transparent;
  107. border-right: 5px solid transparent;
  108. border-bottom: 5px solid rgba(43,43,43,0.9);
  109. top: -5px;
  110. margin-left: -5px;
  111. }
  112. /* help keeps mouseover state when moving from link to tooltip */
  113. .__mobiledoc-tooltip:after {
  114. content: '';
  115. position: absolute;
  116. left: 0;
  117. right: 0;
  118. top: -5px;
  119. height: 5px;
  120. }
  121. .__mobiledoc-tooltip a {
  122. color: #FFF;
  123. text-decoration: none;
  124. }
  125. .__mobiledoc-tooltip a:hover {
  126. text-decoration: underline;
  127. }
  128. .__mobiledoc-tooltip__edit-link {
  129. margin-left: 5px;
  130. cursor: pointer;
  131. }