The frontend/UI server, written in JS using the MarkoJS library
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.

146 lines
3.2 KiB

  1. div.post {
  2. margin-top: 1em;
  3. margin-bottom: 1.25em;
  4. margin-left: -12px;
  5. padding-left: 12px;
  6. padding-right: 0.5ch;
  7. transition: background-color 0.333s linear;
  8. div.post-meta-row {
  9. padding: 0;
  10. margin: 0;
  11. }
  12. a.anchor {
  13. display: block;
  14. position: relative;
  15. top: -4em;
  16. }
  17. div.options {
  18. position: absolute;
  19. text-align: right;
  20. width: calc(100% - 38.75ch);
  21. max-width: 95ch;
  22. a {
  23. display: inline-block;
  24. padding: 0 0.5ch;
  25. opacity: 0.5;
  26. cursor: pointer;
  27. user-select: none;
  28. }
  29. a:hover {
  30. opacity: 1;
  31. }
  32. @media screen and (max-width: 700px) {
  33. width: calc(100% - 6.5ch);
  34. }
  35. }
  36. div.post-body {
  37. font-size: 1.25em;
  38. div.nick-wrapper {
  39. display: inline;
  40. .nick-decoration {
  41. display: inline;
  42. }
  43. .nick {
  44. display: inline;
  45. }
  46. }
  47. div.post-content {
  48. display: inline;
  49. }
  50. div.annotation {
  51. margin-top: 0.33em;
  52. }
  53. p {
  54. line-height: 1.33em;
  55. margin-bottom: -0.25em;
  56. span.icn-bold { font-weight: 800; }
  57. span.icn-underline { text-decoration: underline; }
  58. span.icn-italic { font-style: italic; }
  59. span.icn-fg-0 { color: #fff; }
  60. span.icn-fg-1 { color: #111; }
  61. span.icn-fg-2 { color: #13d; }
  62. span.icn-fg-3 { color: #173; }
  63. span.icn-fg-4 { color: #d21; }
  64. span.icn-fg-5 { color: #721; }
  65. span.icn-fg-6 { color: #727; }
  66. span.icn-fg-7 { color: #d71; }
  67. span.icn-fg-8 { color: #aa1; }
  68. span.icn-fg-9 { color: #1d3; }
  69. span.icn-fg-10 { color: #177; }
  70. span.icn-fg-11 { color: #1DD; }
  71. span.icn-fg-12 { color: #127; }
  72. span.icn-fg-13 { color: #c1a; }
  73. span.icn-fg-14 { color: #444; }
  74. span.icn-fg-15 { color: #aaa; }
  75. span.icn-bg-0 { background-color: #fff; }
  76. span.icn-bg-1 { background-color: #111; }
  77. span.icn-bg-2 { background-color: #13d; }
  78. span.icn-bg-3 { background-color: #173; }
  79. span.icn-bg-4 { background-color: #d21; }
  80. span.icn-bg-5 { background-color: #721; }
  81. span.icn-bg-6 { background-color: #727; }
  82. span.icn-bg-7 { background-color: #d71; }
  83. span.icn-bg-8 { background-color: #aa1; }
  84. span.icn-bg-9 { background-color: #1d3; }
  85. span.icn-bg-10 { background-color: #177; }
  86. span.icn-bg-11 { background-color: #1DD; }
  87. span.icn-bg-12 { background-color: #127; }
  88. span.icn-bg-13 { background-color: #c1a; }
  89. span.icn-bg-14 { background-color: #444; }
  90. span.icn-bg-15 { background-color: #aaa; }
  91. }
  92. p:first-of-type {
  93. margin-top: 0;
  94. padding-top: 0;
  95. }
  96. p:last-of-type {
  97. padding-bottom: 0.1em;
  98. margin-bottom: 0em;
  99. }
  100. }
  101. }
  102. div.post.pk-scene {
  103. margin-left: -14px;
  104. border-left: 2px solid #68A;
  105. }
  106. div.post.pk-scene.anchored {
  107. background-color: rgba(102, 136, 170, 0.25);
  108. }
  109. div.post.pk-action.anchored {
  110. background-color: rgba(170, 102, 68, 0.25);
  111. }
  112. div.post.pk-text.anchored {
  113. background-color: rgba(170, 170, 170, 0.25);
  114. }
  115. div.post.multipart {
  116. margin-top: -1.5em;
  117. div.post-meta {
  118. span {
  119. display: none;
  120. }
  121. }
  122. }
  123. div.post.dark {
  124. opacity: 0.25;
  125. }