| 1 |
/** |
| 2 |
* OpenStation — Users app styles. |
| 3 |
* |
| 4 |
* The tab strip, the Add User panel, the Profile tab and the |
| 5 |
* `<os-user-profile>` layout. The User Edit app points its |
| 6 |
* `->style()` at this same sheet: it hosts the same component, and |
| 7 |
* one sheet is one place to keep the two in step. The list layout |
| 8 |
* (toolbar, body, pager, phone bulk footer) is the framework's |
| 9 |
* `.os-app-list__*` family in `assets/css/app-runtime.css`. |
| 10 |
* |
| 11 |
* Cell-content styles are NOT here — `<os-table>` renders into its |
| 12 |
* own shadow DOM; the cells carry inline styles. |
| 13 |
*/ |
| 14 |
|
| 15 |
/* Tab strip — auto-height, so the active panel below fills the |
| 16 |
column. Without `flex: 0 0 auto` the strip grows and the panel |
| 17 |
collapses to zero height — the "no table" regression. */ |
| 18 |
.os-users__tabs { |
| 19 |
flex: 0 0 auto; |
| 20 |
padding: 0 18px; |
| 21 |
border-bottom: 1px solid var( --os-ui-border, #dcdcde ); |
| 22 |
} |
| 23 |
|
| 24 |
/* The Add User tab. Padding lives on the host so the form's own |
| 25 |
footer separator sits flush with the panel edges; the active tab |
| 26 |
fills the remaining height and the inactive one is fully hidden. */ |
| 27 |
.os-users__add-panel { |
| 28 |
flex: 1 1 auto; |
| 29 |
min-height: 0; |
| 30 |
display: block; |
| 31 |
padding: 32px 24px 28px; |
| 32 |
box-sizing: border-box; |
| 33 |
overflow-y: auto; |
| 34 |
} |
| 35 |
.os-users__add-panel[ hidden ] { |
| 36 |
display: none; |
| 37 |
} |
| 38 |
|
| 39 |
/* Center the form at a comfortable reading width; the os-form does |
| 40 |
the column layout. `min(760px, 100%)` keeps it inside narrow panels. */ |
| 41 |
.os-users__add-panel > os-form { |
| 42 |
display: block; |
| 43 |
margin-inline: auto; |
| 44 |
width: min( 760px, 100% ); |
| 45 |
} |
| 46 |
|
| 47 |
.os-users__add-panel [ slot="header" ] { |
| 48 |
margin-bottom: 4px; |
| 49 |
} |
| 50 |
.os-users__add-panel [ slot="header" ] h2 { |
| 51 |
margin: 0 0 6px; |
| 52 |
font-size: 20px; |
| 53 |
font-weight: 600; |
| 54 |
letter-spacing: -0.01em; |
| 55 |
color: var( --os-ui-fg, #1d2327 ); |
| 56 |
} |
| 57 |
.os-users__form-lede { |
| 58 |
margin: 0 0 8px; |
| 59 |
color: var( --os-ui-fg-muted, #50575e ); |
| 60 |
font-size: 13px; |
| 61 |
line-height: 1.5; |
| 62 |
} |
| 63 |
.os-users__form-pwd-actions { |
| 64 |
display: flex; |
| 65 |
align-items: center; |
| 66 |
gap: 12px; |
| 67 |
flex-wrap: wrap; |
| 68 |
margin-top: -4px; |
| 69 |
} |
| 70 |
.os-users__form-hint { |
| 71 |
margin: 0; |
| 72 |
font-size: 12px; |
| 73 |
color: var( --os-ui-fg-muted, #50575e ); |
| 74 |
} |
| 75 |
|
| 76 |
/* The bulk bar's clusters: the role pick + Apply, and the reassign |
| 77 |
picker + Delete. */ |
| 78 |
.os-users__bulk-group { |
| 79 |
display: inline-flex; |
| 80 |
align-items: center; |
| 81 |
gap: 6px; |
| 82 |
flex-wrap: wrap; |
| 83 |
} |
| 84 |
.os-users__bulk-role { |
| 85 |
min-width: 160px; |
| 86 |
} |
| 87 |
.os-users__reassign { |
| 88 |
display: inline-flex; |
| 89 |
align-items: center; |
| 90 |
gap: 6px; |
| 91 |
font-size: 12px; |
| 92 |
color: var( --os-ui-fg-muted, #50575e ); |
| 93 |
} |
| 94 |
.os-users__reassign-name { |
| 95 |
color: var( --os-ui-fg, #1d2327 ); |
| 96 |
} |
| 97 |
.os-users__reassign-search { |
| 98 |
min-width: 160px; |
| 99 |
} |
| 100 |
|
| 101 |
/* Narrow-window trim — at < 540px the side padding gets in the way |
| 102 |
more than it helps. Same breakpoint the form's own grid uses to |
| 103 |
collapse to one column. */ |
| 104 |
@media ( max-width: 540px ) { |
| 105 |
.os-users__add-panel { |
| 106 |
padding: 20px 14px 16px; |
| 107 |
} |
| 108 |
.os-users__tabs { |
| 109 |
padding: 0 12px; |
| 110 |
} |
| 111 |
} |
| 112 |
|
| 113 |
/* Profile tab — the active tabpanel fills the remaining height, |
| 114 |
scrolls its own content, leaves the tab strip pinned at the top. */ |
| 115 |
.os-users__edit-panel { |
| 116 |
flex: 1 1 auto; |
| 117 |
min-height: 0; |
| 118 |
display: flex; |
| 119 |
flex-direction: column; |
| 120 |
overflow: hidden; |
| 121 |
} |
| 122 |
.os-users__edit-panel[ hidden ] { |
| 123 |
display: none; |
| 124 |
} |
| 125 |
/* The User Edit window. The body is a chromeless host; |
| 126 |
`<os-user-profile>` fills the whole space and owns its own scroll. |
| 127 |
Without `min-height: 0` on the chain, the inner `overflow-y: auto` |
| 128 |
never gets a chance to clip and scroll. */ |
| 129 |
.os-user-edit-window { |
| 130 |
display: flex; |
| 131 |
flex-direction: column; |
| 132 |
flex: 1 1 auto; |
| 133 |
height: 100%; |
| 134 |
min-height: 0; |
| 135 |
} |
| 136 |
/* The component — the light-DOM host of the layout — fills whatever |
| 137 |
hosts it (the Profile tab panel, the User Edit window) so its |
| 138 |
internal scroll container takes the remaining space. */ |
| 139 |
os-user-profile { |
| 140 |
flex: 1 1 auto; |
| 141 |
display: flex; |
| 142 |
flex-direction: column; |
| 143 |
min-height: 0; |
| 144 |
} |
| 145 |
os-user-profile > .os-users__edit-layout { |
| 146 |
flex: 1 1 auto; |
| 147 |
min-height: 0; |
| 148 |
} |
| 149 |
|
| 150 |
/* Sidebar layout — at-a-glance summary on the left, editable form + |
| 151 |
activity feed in the main column on the right. One container query |
| 152 |
collapses the two columns to one stack on narrow widths, where the |
| 153 |
aside moves above the form. */ |
| 154 |
.os-users__edit-layout { |
| 155 |
flex: 1 1 auto; |
| 156 |
min-height: 0; |
| 157 |
overflow-y: auto; |
| 158 |
display: grid; |
| 159 |
grid-template-columns: 280px minmax( 0, 1fr ); |
| 160 |
gap: 28px; |
| 161 |
padding: 28px 32px 32px; |
| 162 |
container-type: inline-size; |
| 163 |
container-name: desktop-mode-user-edit; |
| 164 |
} |
| 165 |
@container desktop-mode-user-edit ( max-width: 800px ) { |
| 166 |
.os-users__edit-layout { |
| 167 |
grid-template-columns: minmax( 0, 1fr ); |
| 168 |
} |
| 169 |
} |
| 170 |
.os-users__edit-aside { |
| 171 |
display: flex; |
| 172 |
flex-direction: column; |
| 173 |
gap: 8px; |
| 174 |
min-width: 0; |
| 175 |
position: sticky; |
| 176 |
top: 0; |
| 177 |
align-self: start; |
| 178 |
} |
| 179 |
@container desktop-mode-user-edit ( max-width: 800px ) { |
| 180 |
.os-users__edit-aside { |
| 181 |
position: static; |
| 182 |
} |
| 183 |
} |
| 184 |
.os-users__edit-main { |
| 185 |
min-width: 0; |
| 186 |
width: 100%; |
| 187 |
max-width: 720px; |
| 188 |
/* Center within the `minmax(0, 1fr)` grid cell so the form stays |
| 189 |
readable on wide windows instead of leaving a large empty band |
| 190 |
on the right edge. */ |
| 191 |
margin-inline: auto; |
| 192 |
display: flex; |
| 193 |
flex-direction: column; |
| 194 |
} |
| 195 |
.os-users__edit-activity { |
| 196 |
min-width: 0; |
| 197 |
} |
| 198 |
|
