(theme: DevtoolsStore['settings']['theme'])
| 80 | } |
| 81 | ` |
| 82 | |
| 83 | const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => { |
| 84 | const semantic = resolveSemanticTheme(theme) |
| 85 | const css = goober.css |
| 86 | // Core scrollers only. Do not put this on a selector that reaches into a |
| 87 | // plugin's own markup — plugins own the scrollbars inside their pane. |
| 88 | const thinScrollbars = ` |
| 89 | scrollbar-width: thin; |
| 90 | scrollbar-color: ${semantic.color.border.control} transparent; |
| 91 | &::-webkit-scrollbar { |
| 92 | width: 8px; |
| 93 | height: 8px; |
| 94 | } |
| 95 | &::-webkit-scrollbar-track { |
| 96 | background: transparent; |
| 97 | } |
| 98 | &::-webkit-scrollbar-thumb { |
| 99 | background-color: ${semantic.color.border.control}; |
| 100 | border-radius: 999px; |
| 101 | border: 2px solid transparent; |
| 102 | background-clip: padding-box; |
| 103 | } |
| 104 | &::-webkit-scrollbar-thumb:hover { |
| 105 | background-color: ${semantic.color.text.muted}; |
| 106 | } |
| 107 | &::-webkit-scrollbar-corner { |
| 108 | background: transparent; |
| 109 | } |
| 110 | ` |
| 111 | |
| 112 | return { |
| 113 | seoWorkspace: css` |
| 114 | display: flex; |
| 115 | flex-direction: column; |
| 116 | width: 100%; |
| 117 | height: 100%; |
| 118 | min-width: 0; |
| 119 | min-height: 0; |
| 120 | overflow: hidden; |
| 121 | `, |
| 122 | seoContent: css` |
| 123 | flex: 1 1 auto; |
| 124 | height: auto; |
| 125 | min-height: 0; |
| 126 | overflow-y: auto; |
| 127 | overscroll-behavior: contain; |
| 128 | ${thinScrollbars} |
| 129 | `, |
| 130 | seoPreviewSection: css` |
| 131 | display: flex; |
| 132 | flex-direction: row; |
| 133 | gap: 16px; |
| 134 | margin-bottom: 0; |
| 135 | justify-content: flex-start; |
| 136 | align-items: flex-start; |
| 137 | overflow-x: auto; |
| 138 | flex-wrap: wrap; |
| 139 | padding-bottom: 0.5rem; |
no test coverage detected