logo

pleroma-fe

My custom branche(s) on git.pleroma.social/pleroma/pleroma-fe git clone https://anongit.hacktivis.me/git/pleroma-fe.git/

panel.scss (4623B)


  1. /* stylelint-disable no-descending-specificity */
  2. .panel {
  3. --__panel-background: var(--background);
  4. --__panel-backdrop-filter: var(--backdrop-filter);
  5. --_shadow: var(--shadow);
  6. .tab-switcher .tabs {
  7. background: var(--__panel-background);
  8. backdrop-filter: var(--__panel-backdrop-filter);
  9. }
  10. position: relative;
  11. display: flex;
  12. flex-direction: column;
  13. .panel-heading {
  14. background-color: inherit;
  15. }
  16. &::after,
  17. & {
  18. border-radius: var(--roundness);
  19. }
  20. &::after {
  21. content: "";
  22. position: absolute;
  23. top: 0;
  24. bottom: 0;
  25. left: 0;
  26. right: 0;
  27. z-index: 5;
  28. box-shadow: var(--_shadow);
  29. pointer-events: none;
  30. }
  31. }
  32. .panel-body {
  33. padding: var(--panel-body-padding, 0);
  34. background: var(--background);
  35. backdrop-filter: var(--__panel-backdrop-filter);
  36. .tab-switcher .tabs {
  37. background: none;
  38. backdrop-filter: none;
  39. }
  40. &:empty::before {
  41. content: "¯\\_(ツ)_/¯"; // Could use words but it'd require translations
  42. display: block;
  43. padding: 1em;
  44. text-align: center;
  45. }
  46. > p {
  47. line-height: 1.3;
  48. padding: 1em;
  49. margin: 0;
  50. }
  51. }
  52. .panel-heading,
  53. .panel-footer {
  54. --panel-heading-height-padding: calc(var(--panel-header-height) * 0.2);
  55. --__panel-heading-gap: calc(var(--panel-header-height) * 0.1565);
  56. --__panel-heading-height: var(--panel-header-height);
  57. --__panel-heading-height-inner: calc(var(--__panel-heading-height) - 2 * var(--panel-heading-height-padding, 0));
  58. font-size: calc(var(--panelHeaderSize) / 3.2);
  59. backdrop-filter: var(--__panel-backdrop-filter);
  60. position: relative;
  61. box-sizing: border-box;
  62. display: grid;
  63. grid-auto-flow: column;
  64. grid-template-columns: minmax(50%, 1fr);
  65. grid-auto-columns: auto;
  66. grid-column-gap: var(--__panel-heading-gap);
  67. flex: none;
  68. background-size: cover;
  69. padding: var(--panel-heading-height-padding);
  70. height: var(--__panel-heading-height);
  71. line-height: var(--__panel-heading-height-inner);
  72. z-index: 4;
  73. &.-flexible-height {
  74. --__panel-heading-height: auto;
  75. &::after,
  76. &::before {
  77. display: none;
  78. }
  79. }
  80. &.-stub {
  81. &,
  82. &::after {
  83. border-radius: var(--roundness);
  84. }
  85. }
  86. &.-sticky {
  87. position: sticky;
  88. top: var(--navbar-height);
  89. }
  90. &::after,
  91. &::before {
  92. content: "";
  93. position: absolute;
  94. top: 0;
  95. bottom: 0;
  96. right: 0;
  97. left: 0;
  98. pointer-events: none;
  99. }
  100. .title {
  101. font-size: 1.3em;
  102. margin: 0;
  103. font-weight: normal;
  104. }
  105. .alert {
  106. white-space: nowrap;
  107. text-overflow: ellipsis;
  108. overflow-x: hidden;
  109. }
  110. &:not(.-flexible-height) {
  111. > .button-default,
  112. > .alert {
  113. height: var(--__panel-heading-height-inner);
  114. min-height: 0;
  115. box-sizing: border-box;
  116. margin: 0;
  117. min-width: 1px;
  118. padding-top: 0;
  119. padding-bottom: 0;
  120. align-self: stretch;
  121. }
  122. > .alert {
  123. line-height: calc(var(--__panel-heading-height-inner) - 2px);
  124. }
  125. }
  126. }
  127. // TODO Should refactor panels into separate component and utilize slots
  128. .panel-heading {
  129. border-radius: var(--roundness) var(--roundness) 0 0;
  130. border-width: 0 0 1px;
  131. align-items: start;
  132. background-image:
  133. linear-gradient(to bottom, var(--background), var(--background)),
  134. linear-gradient(to bottom, var(--__panel-background), var(--__panel-background));
  135. --_shadow: var(--shadow);
  136. &::after {
  137. background-color: var(--background);
  138. z-index: -2;
  139. border-radius: var(--roundness) var(--roundness) 0 0;
  140. box-shadow: var(--_shadow);
  141. }
  142. &:not(.-flexible-height) {
  143. > .button-default {
  144. flex-shrink: 0;
  145. }
  146. }
  147. .rightside-button {
  148. align-self: stretch;
  149. text-align: center;
  150. width: var(--__panel-heading-height);
  151. height: var(--__panel-heading-height);
  152. margin: calc(-1 * var(--panel-heading-height-padding)) 0;
  153. margin-right: calc(-1 * var(--__panel-heading-gap));
  154. > button {
  155. box-sizing: border-box;
  156. padding: calc(1 * var(--panel-heading-height-padding)) 0;
  157. height: 100%;
  158. width: 100%;
  159. text-align: center;
  160. svg {
  161. font-size: 1.2em;
  162. }
  163. }
  164. }
  165. .rightside-icon {
  166. align-self: stretch;
  167. text-align: center;
  168. width: var(--__panel-heading-height);
  169. margin-right: calc(-1 * var(--__panel-heading-gap));
  170. svg {
  171. font-size: 1.2em;
  172. }
  173. }
  174. }
  175. .panel-footer {
  176. border-top-left-radius: 0;
  177. border-top-right-radius: 0;
  178. align-items: center;
  179. border-width: 1px 0 0;
  180. border-style: solid;
  181. border-color: var(--border);
  182. background-color: var(--__panel-background);
  183. }
  184. /* stylelint-enable no-descending-specificity */