mirror of
https://github.com/livebook-dev/livebook.git
synced 2024-11-17 13:27:50 +08:00
5c8e117800
* Add initial user config modal * Assign user ids * Update session data to hold user ids * Get users list for specific ids * Render user avatar * User update * Refactor user changes * Subscribe to individual user updates * Show users in side panel * Add sidebar to homepage * Don't generate the same color twice in a row * Add documentation notes * Fix tests * Add tests * Keep users in session data * Rename color to hex_color
105 lines
2.6 KiB
CSS
105 lines
2.6 KiB
CSS
/*
|
|
Conditional elements display.
|
|
|
|
Verious hooks and callbacks dynamically set attributes
|
|
based on which we hide/show certain elements.
|
|
This way we don't have to engage the server in
|
|
solely client-side operations.
|
|
*/
|
|
|
|
/* === Global === */
|
|
|
|
[data-element="menu"]:not([data-js-open]) > [data-content] {
|
|
@apply hidden;
|
|
}
|
|
|
|
/* === Session === */
|
|
|
|
[data-element="session"]:not([data-js-insert-mode])
|
|
[data-element="insert-mode-indicator"] {
|
|
@apply invisible;
|
|
}
|
|
|
|
[data-element="session"]
|
|
[data-element="cell"][data-type="markdown"]
|
|
[data-element="editor-box"] {
|
|
@apply hidden;
|
|
}
|
|
|
|
[data-element="session"][data-js-insert-mode]
|
|
[data-element="cell"][data-type="markdown"][data-js-focused]
|
|
[data-element="editor-box"] {
|
|
@apply block;
|
|
}
|
|
|
|
[data-element="session"][data-js-insert-mode]
|
|
[data-element="cell"][data-type="markdown"][data-js-focused]
|
|
[data-element="enable-insert-mode-button"] {
|
|
@apply hidden;
|
|
}
|
|
|
|
[data-element="session"]:not([data-js-insert-mode])
|
|
[data-element="cell"][data-type="markdown"][data-js-focused]
|
|
[data-element="insert-image-button"] {
|
|
@apply hidden;
|
|
}
|
|
|
|
[data-element="cell"][data-js-focused] {
|
|
@apply border-blue-300 border-opacity-100;
|
|
}
|
|
|
|
[data-element="cell"]:not([data-js-focused])
|
|
[data-element="actions"]:not(:focus-within) {
|
|
/* Note: using opacity, so the buttons are focusable (via tab navigation)
|
|
and when focused we show the actions back. */
|
|
@apply opacity-0 pointer-events-none;
|
|
}
|
|
|
|
[data-element="cell"]:not([data-js-focused]):hover
|
|
[data-element="actions"][data-primary] {
|
|
@apply opacity-100 pointer-events-auto;
|
|
}
|
|
|
|
[data-element="section-list-item"][data-js-is-viewed] {
|
|
@apply text-gray-900;
|
|
}
|
|
|
|
[data-element="cell"]:not([data-js-focused]):hover
|
|
[data-element="cell-focus-indicator"] {
|
|
@apply bg-blue-200;
|
|
}
|
|
|
|
[data-element="cell"][data-js-focused] [data-element="cell-focus-indicator"] {
|
|
@apply bg-blue-300;
|
|
}
|
|
|
|
[data-element="session"]:not([data-js-side-panel-content])
|
|
[data-element="side-panel"] {
|
|
@apply hidden;
|
|
}
|
|
|
|
[data-element="session"]:not([data-js-side-panel-content="sections-list"])
|
|
[data-element="sections-list"] {
|
|
@apply hidden;
|
|
}
|
|
|
|
[data-element="session"]:not([data-js-side-panel-content="users-list"])
|
|
[data-element="users-list"] {
|
|
@apply hidden;
|
|
}
|
|
|
|
[data-element="session"][data-js-side-panel-content="sections-list"]
|
|
[data-element="sections-list-toggle"] {
|
|
@apply text-gray-50 bg-gray-700;
|
|
}
|
|
|
|
[data-element="session"][data-js-side-panel-content="users-list"]
|
|
[data-element="users-list-toggle"] {
|
|
@apply text-gray-50 bg-gray-700;
|
|
}
|
|
|
|
[data-element="section-headline"]:not(:hover)
|
|
[data-element="section-name"]:not(:focus)
|
|
+ [data-element="section-actions"] {
|
|
@apply hidden;
|
|
}
|