932 lines
18 KiB
SCSS
932 lines
18 KiB
SCSS
/**
|
|
* Copyright (c) HashiCorp, Inc.
|
|
* SPDX-License-Identifier: MPL-2.0
|
|
*/
|
|
|
|
@use 'rose/variables/sizing';
|
|
@use 'rose/variables/media';
|
|
@use 'rose/utilities/type';
|
|
|
|
@import 'rose';
|
|
@import 'notify';
|
|
@import '@hashicorp/ember-asciinema-player';
|
|
|
|
.rose-layout-global {
|
|
.rose-layout-global-body {
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
.rose-layout-centered {
|
|
> .rose-layout-page {
|
|
width: sizing.rems(l) * 18;
|
|
}
|
|
|
|
@media (max-width: media.width(small)) {
|
|
display: block;
|
|
|
|
> .rose-layout-page {
|
|
width: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.rose-nav-sidebar {
|
|
margin-top: sizing.rems(xxl);
|
|
|
|
& + .rose-nav-sidebar {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.rose-icon {
|
|
margin-right: sizing.rems(xs);
|
|
}
|
|
}
|
|
|
|
.rose-form {
|
|
&:not(.full-width) {
|
|
width: 66%;
|
|
}
|
|
|
|
.rose-form-input {
|
|
width: 100%;
|
|
|
|
.rose-form-input-field {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.rose-dropdown {
|
|
$icon-width: sizing.rems(m) + sizing.rems(s);
|
|
$indent: $icon-width + sizing.rems(xs);
|
|
|
|
.rose-form-radio-label {
|
|
display: flex;
|
|
|
|
.rose-icon {
|
|
padding-right: sizing.rems(xxs);
|
|
}
|
|
}
|
|
|
|
.indent-label-1 {
|
|
.rose-form-radio-label,
|
|
.rose-form-checkbox-label {
|
|
padding-left: $indent;
|
|
}
|
|
}
|
|
|
|
.indent-label-2 {
|
|
.rose-form-radio-label,
|
|
.rose-form-checkbox-label {
|
|
padding-left: $indent + $icon-width;
|
|
}
|
|
}
|
|
|
|
.is-project {
|
|
.rose-icon {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
}
|
|
|
|
.rose-form-fieldset {
|
|
.rose-table {
|
|
.rose-form-label {
|
|
left: -9999px;
|
|
position: absolute;
|
|
top: -9999px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.rose-table {
|
|
p {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.rose-table-header-cell {
|
|
p {
|
|
color: var(--ui-gray-subtler-1);
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
|
|
.rose-form-checkbox {
|
|
margin-bottom: 0;
|
|
|
|
.rose-form-checkbox-label-text {
|
|
color: var(--stark);
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
|
|
.rose-header {
|
|
position: relative;
|
|
|
|
.logotype {
|
|
display: none;
|
|
}
|
|
|
|
.rose-dropdown {
|
|
.rose-icon {
|
|
transform: scale(0.7);
|
|
}
|
|
}
|
|
|
|
&.loading {
|
|
&::after {
|
|
// animation: gradient 1s linear infinite;
|
|
// background: repeating-linear-gradient(
|
|
// to right,
|
|
// var(--subtle),
|
|
// var(--subtle),
|
|
// var(--info),
|
|
// var(--subtle),
|
|
// var(--subtle)
|
|
// );
|
|
background-position: -100% 0;
|
|
background-size: 200% auto;
|
|
content: ' ';
|
|
height: 3px;
|
|
left: 0;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 100%;
|
|
|
|
@keyframes gradient {
|
|
0% {
|
|
background-position: -100% 0;
|
|
}
|
|
|
|
100% {
|
|
background-position: -200% 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.rose-frame {
|
|
.rose-form-actions {
|
|
.rose-button-primary {
|
|
display: block;
|
|
margin: 0;
|
|
width: 100%;
|
|
|
|
.rose-button-wrapper {
|
|
display: inline;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.rose-dialog-cover {
|
|
svg {
|
|
max-width: 20rem;
|
|
}
|
|
}
|
|
|
|
.copyable {
|
|
white-space: nowrap;
|
|
|
|
.copyable-button {
|
|
margin: 0;
|
|
padding: 0 sizing.rems(xxs);
|
|
position: relative;
|
|
top: -2px;
|
|
}
|
|
|
|
mark {
|
|
animation: fade-background 0.75s linear;
|
|
background-color: transparent;
|
|
color: inherit;
|
|
|
|
@keyframes fade-background {
|
|
0% {
|
|
background-color: var(--action-subtler-1);
|
|
}
|
|
|
|
100% {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
[class*='session-status-'] {
|
|
color: var(--ui-gray-subtler-2);
|
|
}
|
|
|
|
.session-status-active {
|
|
color: var(--success);
|
|
}
|
|
|
|
.nowrap {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
// Spinning animation for refresh button icon
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
.is-loading {
|
|
.rose-icon {
|
|
@keyframes hds-flight-icon-animation-rotation {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
> svg {
|
|
animation: hds-flight-icon-animation-rotation 0.7s linear infinite;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Onboarding styles
|
|
.create-resources {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
width: sizing.rems(xl) * 15;
|
|
|
|
.create-resources-form {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: sizing.rems(s);
|
|
}
|
|
|
|
.hds-form-group {
|
|
margin-top: sizing.rems(l);
|
|
justify-content: center;
|
|
|
|
.image-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: sizing.rems(l);
|
|
}
|
|
}
|
|
|
|
.create-resources-item {
|
|
margin-bottom: sizing.rems(xxl);
|
|
|
|
.create-resources-item-header {
|
|
display: flex;
|
|
align-items: center;
|
|
align-self: center;
|
|
gap: 8px;
|
|
margin-bottom: sizing.rems(s);
|
|
|
|
h3 {
|
|
margin: 0;
|
|
}
|
|
|
|
.hds-icon-tile {
|
|
color: var(--token-color-foreground-success);
|
|
}
|
|
}
|
|
|
|
.hds-link-standalone {
|
|
margin-bottom: sizing.rems(xs);
|
|
}
|
|
|
|
.create-resources-item-controller {
|
|
margin-top: sizing.rems(xl);
|
|
|
|
.create-resources-item-controller-label {
|
|
color: var(--ui-gray);
|
|
}
|
|
|
|
.create-resources-item-controller-copyable {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
border: sizing.rems(xxxxs) solid var(--ui-gray-subtler-2);
|
|
border-radius: sizing.rems(xxxs);
|
|
color: var(--action);
|
|
height: (sizing.rems(xs) * 5);
|
|
margin: sizing.rems(xxs) 0 sizing.rems(l) 0;
|
|
|
|
.copyable {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: sizing.rems(s);
|
|
|
|
span {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
.copyable-button {
|
|
top: 0; // This is to override a negative top declared above
|
|
}
|
|
}
|
|
|
|
.image-container > svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.worker-create-section {
|
|
border: sizing.rems(xxxxs) solid var(--ui-gray-subtler-3);
|
|
border-radius: sizing.rems(xxs);
|
|
margin-bottom: sizing.rems(xl);
|
|
padding: sizing.rems(l);
|
|
|
|
> div {
|
|
margin-bottom: sizing.rems(l);
|
|
}
|
|
|
|
> code {
|
|
background-color: var(--ui-gray-subtler-5);
|
|
border: sizing.rems(xxxxs) solid var(--ui-gray-subtler-2);
|
|
color: var(--failure);
|
|
}
|
|
|
|
.worker-auth-token {
|
|
align-items: flex-end;
|
|
display: flex;
|
|
gap: sizing.rems(m);
|
|
}
|
|
|
|
.worker-success {
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
> div {
|
|
align-items: center;
|
|
display: flex;
|
|
gap: sizing.rems(xs);
|
|
|
|
p {
|
|
margin-bottom: sizing.rems(xxs);
|
|
}
|
|
|
|
&:first-child {
|
|
width: 40%;
|
|
|
|
p {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
p {
|
|
color: var(--success);
|
|
}
|
|
}
|
|
}
|
|
|
|
.rose-icon {
|
|
color: var(--success);
|
|
}
|
|
}
|
|
}
|
|
|
|
.info-field {
|
|
.hds-form-field--layout-vertical {
|
|
grid-template-areas: 'label' 'text-input' 'helper-text';
|
|
|
|
.hds-form-label {
|
|
font-size: sizing.rems(m);
|
|
grid-area: label;
|
|
line-height: sizing.rems(m) + sizing.rems(xxs);
|
|
}
|
|
|
|
.hds-form-text-input {
|
|
background-color: transparent;
|
|
border: 0;
|
|
color: var(--token-form-label-color);
|
|
grid-area: text-input;
|
|
font-size: sizing.rems(m);
|
|
padding: 0;
|
|
}
|
|
|
|
.hds-form-helper-text {
|
|
color: var(--token-form-label-color);
|
|
grid-area: helper-text;
|
|
}
|
|
}
|
|
|
|
&.has-icon {
|
|
.flight-icon {
|
|
position: absolute;
|
|
transform: translateY(sizing.rems(xl) - sizing.rems(xs));
|
|
}
|
|
|
|
.hds-form-helper-text,
|
|
.hds-form-text-input {
|
|
margin-left: sizing.rems(l) + sizing.rems(xs);
|
|
}
|
|
}
|
|
}
|
|
|
|
// json secret editor
|
|
.secret-editor {
|
|
// Secret Editor body and gutter colors are based on the Monokai color template
|
|
// and are used for both the Editor and the Skeleton views
|
|
--button-shadow: #000004;
|
|
--secret-editor-body: #272822; // body and button background
|
|
--secret-editor-gutter: #31332b; // gutter background
|
|
--secret-editor-height: 210px;
|
|
|
|
background: var(--secret-editor-body);
|
|
border-radius: sizing.rems(xxs);
|
|
height: var(--secret-editor-height);
|
|
margin-bottom: sizing.rems(l);
|
|
width: 100%;
|
|
|
|
.secret-editor-json {
|
|
.CodeMirror {
|
|
border-radius: sizing.rems(xxs);
|
|
height: var(--secret-editor-height);
|
|
display: block;
|
|
}
|
|
|
|
.CodeMirror-gutters {
|
|
background: var(--secret-editor-gutter);
|
|
}
|
|
}
|
|
|
|
.secret-editor-skeleton-wrapper {
|
|
// using ui-gray directly so it does not change when
|
|
// user is in dark mode since the secret editor
|
|
// does not change theme colors between light and dark
|
|
color: var(--token-color-palette-neutral-300);
|
|
display: flex;
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.secret-editor-skeleton-gutter {
|
|
background: var(--secret-editor-gutter);
|
|
border-radius: sizing.rems(xxs) 0 0 sizing.rems(xxs);
|
|
width: sizing.rems(xxl) + sizing.rems(xxs); // 52
|
|
}
|
|
|
|
.secret-editor-skeleton-body {
|
|
width: 100%;
|
|
|
|
// skeleton text rows for detail and edit views
|
|
// applies general styles to child div of skeleton-body
|
|
// then adds dynamic width to each child
|
|
// depending on the class (e.g., s, m, l)
|
|
> div {
|
|
background: var(--secret-editor-gutter);
|
|
border-radius: sizing.rems(m);
|
|
height: sizing.rems(xs);
|
|
margin: sizing.rems(s) - sizing.rems(xxxxs); // 11
|
|
|
|
&:first-child {
|
|
margin-top: sizing.rems(m);
|
|
}
|
|
|
|
&.s {
|
|
width: 5%;
|
|
}
|
|
|
|
&.m {
|
|
width: 10%;
|
|
}
|
|
|
|
&.l {
|
|
width: 15%;
|
|
}
|
|
|
|
&.xl {
|
|
width: 20%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.secret-editor-skeleton-message {
|
|
font-size: sizing.rems(s) + sizing.rems(xxxs); // 14
|
|
left: 50%;
|
|
position: absolute;
|
|
top: 50%;
|
|
|
|
// centers message with editor body and gutter
|
|
transform: translate(-50%, -50%);
|
|
z-index: 1;
|
|
}
|
|
|
|
.rose-button-secret-editor-skeleton-button {
|
|
background: var(--secret-editor-body);
|
|
border: sizing.rems(xxxxs) solid var(--ui-gray);
|
|
border-radius: sizing.rems(xxxs);
|
|
box-shadow: 0 sizing.rems(xxs) sizing.rems(xxs) var(--button-shadow);
|
|
|
|
// using ui-gray directly so it does not change when
|
|
// user is in dark mode since the secret editor
|
|
// does not change theme colors between light and dark
|
|
color: #{color(ui-gray, 050)};
|
|
font-size: sizing.rems(s) + sizing.rems(xxxs); // 14
|
|
height: sizing.rems(xl);
|
|
padding: 0 sizing.rems(l);
|
|
}
|
|
}
|
|
|
|
.ordered-series-diagram {
|
|
--group-title-line-height: 2.25rem;
|
|
|
|
width: 100%;
|
|
display: flex;
|
|
margin-bottom: 1rem;
|
|
|
|
&-item {
|
|
display: flex;
|
|
margin-top: var(--group-title-line-height);
|
|
|
|
&-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
|
|
&-title {
|
|
font-weight: var(--token-typography-font-weight-semibold);
|
|
margin-top: 0.5rem;
|
|
width: 4rem;
|
|
}
|
|
|
|
&:last-child {
|
|
> .ordered-series-diagram-separator-icon {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-group {
|
|
&-content {
|
|
border-radius: 0.5rem;
|
|
padding: 0 0.75rem 0.75rem;
|
|
}
|
|
|
|
&-items {
|
|
display: flex;
|
|
|
|
& .ordered-series-diagram-item {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
&-title {
|
|
font-size: var(--token-typography-display-100-font-size);
|
|
line-height: var(--group-title-line-height);
|
|
text-align: center;
|
|
}
|
|
|
|
&:last-child {
|
|
> .ordered-series-diagram-separator-icon {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-separator-icon {
|
|
color: var(--token-color-foreground-faint);
|
|
margin: 0.75rem 0.5rem;
|
|
}
|
|
}
|
|
|
|
// target worker filters
|
|
.target-workers {
|
|
margin-top: sizing.rems(xxl);
|
|
margin-bottom: sizing.rems(xl);
|
|
|
|
.hds-form-legend {
|
|
font-size: sizing.rems(l) - sizing.rems(xxs); // 20
|
|
|
|
+ .hds-form-helper-text {
|
|
margin-bottom: 1rem;
|
|
}
|
|
}
|
|
|
|
.hds-alert {
|
|
margin-bottom: sizing.rems(l); // 16
|
|
}
|
|
|
|
.migration-wrapper {
|
|
margin: sizing.rems(m) 0 sizing.rems(m) 0;
|
|
}
|
|
|
|
// note re Button margin: this is a temp solution,
|
|
// when we migrate buttons to HDS, we will analyze the spacing
|
|
// issue in all scenarios to come up with an efficient solution
|
|
.target-worker-filter {
|
|
width: 100%;
|
|
|
|
.hds-form-field--layout-vertical {
|
|
margin-left: 2.5rem;
|
|
width: 50%;
|
|
}
|
|
|
|
.hds-form-field--layout-flag {
|
|
margin-bottom: 1rem;
|
|
}
|
|
}
|
|
|
|
.worker-diagram {
|
|
min-height: 15rem;
|
|
|
|
.ordered-series-diagram {
|
|
min-height: 10rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.enable-session-recording-toggle {
|
|
width: 50%;
|
|
margin-top: 1.5rem;
|
|
|
|
.hds-form-field--layout-vertical,
|
|
.hds-link-standalone {
|
|
margin-left: 2.5rem;
|
|
}
|
|
|
|
.hds-link-standalone {
|
|
margin-top: 0.75rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
}
|
|
|
|
// target sidebar
|
|
.target-sidebar {
|
|
.description {
|
|
color: var(--token-form-helper-text-color);
|
|
font-weight: var(--token-typography-font-weight-normal);
|
|
font-size: var(--token-typography-body-200-font-size);
|
|
}
|
|
|
|
.hds-link-standalone {
|
|
margin-top: 1rem;
|
|
}
|
|
}
|
|
|
|
.link-list-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 1rem;
|
|
text-decoration: none;
|
|
|
|
&__info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
margin-left: 0.25rem;
|
|
}
|
|
|
|
&__text {
|
|
color: var(--token-color-foreground-primary);
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.flight-icon-arrow-right {
|
|
color: var(--token-color-foreground-faint);
|
|
}
|
|
}
|
|
|
|
.key-value-list {
|
|
border: 0;
|
|
|
|
/* stylelint-disable selector-class-pattern */
|
|
.hds-table__thead {
|
|
.hds-table__th {
|
|
height: auto;
|
|
line-height: 1;
|
|
}
|
|
}
|
|
|
|
.hds-table__thead,
|
|
.hds-table__tbody {
|
|
.hds-table__tr {
|
|
// Remove background color on all cells (especially header cells)
|
|
background-color: transparent;
|
|
}
|
|
|
|
.hds-table__th,
|
|
.hds-table__td {
|
|
padding: 0.75rem 1rem;
|
|
|
|
// Rely on right padding for cell spacing...
|
|
padding-left: 0;
|
|
|
|
&:last-child {
|
|
// ...except in the last cell, which doesn't need right padding
|
|
padding-right: 0;
|
|
|
|
// Shrink last cell to minimum possible width
|
|
width: 1%;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
// Reset field margins to rely instead on cell paddings
|
|
.hds-form-field--layout-vertical,
|
|
.hds-form-text-input {
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
/* stylelint-enable selector-class-pattern */
|
|
}
|
|
|
|
// secret input field
|
|
.secret-input {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
column-gap: 0.5rem;
|
|
position: relative;
|
|
|
|
.overlay {
|
|
width: 60%;
|
|
height: 1rem;
|
|
position: absolute;
|
|
bottom: 2.15rem;
|
|
left: 0.25rem;
|
|
border-radius: 0.25rem;
|
|
background-color: var(--token-color-palette-neutral-200);
|
|
}
|
|
|
|
.hds-button {
|
|
margin-bottom: 1.5rem;
|
|
flex-basis: 6rem;
|
|
}
|
|
}
|
|
|
|
// session recording player
|
|
.session-recording-player {
|
|
--player-background-color: #252937;
|
|
--player-divider: #656a761a;
|
|
--player-white: #fff;
|
|
--player-control-bar-buffer: #656a76;
|
|
--player-play-button: #1060ff;
|
|
--player-play-button-border: #0c56e9;
|
|
|
|
background-color: var(--player-background-color);
|
|
border-radius: 0.75rem;
|
|
|
|
&-header {
|
|
border-bottom: var(--player-divider) 0.125rem solid;
|
|
|
|
// override of button styles to allow for
|
|
// static colors in light and dark mode
|
|
a {
|
|
color: var(--player-white);
|
|
padding: 1rem;
|
|
}
|
|
|
|
.hds-button--color-tertiary:hover,
|
|
.hds-button--color-tertiary:active {
|
|
color: var(--player-white);
|
|
background-color: transparent;
|
|
border-color: transparent;
|
|
}
|
|
}
|
|
|
|
&-theme {
|
|
.asciinema-theme-asciinema {
|
|
background-color: var(--player-background-color);
|
|
}
|
|
|
|
.asciinema-terminal {
|
|
background-color: var(--player-background-color);
|
|
border-color: var(--player-background-color);
|
|
border-width: 1rem;
|
|
}
|
|
|
|
.asciinema-player {
|
|
border-radius: 0.75rem;
|
|
|
|
// hides large play icon overlay
|
|
.start-prompt {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.asciinema-player-wrapper {
|
|
&.hud .control-bar {
|
|
bottom: 0;
|
|
}
|
|
|
|
.control-bar {
|
|
bottom: -3.625rem;
|
|
background: var(--player-background-color);
|
|
border-top: var(--player-divider) 0.125rem solid;
|
|
height: 3.625rem;
|
|
|
|
.playback-button {
|
|
background: var(--player-play-button);
|
|
border: var(--player-play-button-border) 0.063rem solid;
|
|
border-radius: 0.313rem;
|
|
margin: 0.75rem;
|
|
padding: 0.625rem 1rem;
|
|
|
|
.icon path {
|
|
fill: var(--player-white);
|
|
}
|
|
}
|
|
}
|
|
|
|
.timer {
|
|
font-family: var(--token-typography-body-base-font-family);
|
|
font-size: var(--token-typography-body-base-font-size);
|
|
line-height: var(--token-typography-body-base-line-height);
|
|
color: var(--player-white);
|
|
position: relative;
|
|
top: 40%;
|
|
}
|
|
|
|
.progressbar {
|
|
padding-top: 0.875rem;
|
|
|
|
.bar .gutter {
|
|
background-color: var(--player-control-bar-buffer);
|
|
|
|
span {
|
|
background-color: var(--player-white);
|
|
}
|
|
}
|
|
}
|
|
|
|
.fullscreen-button {
|
|
padding-top: 1.5rem;
|
|
|
|
.icon path {
|
|
fill: var(--player-white);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Layout - Sidebar
|
|
.layout-sidebar {
|
|
display: grid;
|
|
grid-template-areas: 'body body sidebar';
|
|
grid-template-columns: repeat(3, 1fr);
|
|
grid-template-rows: auto 1fr;
|
|
gap: 2rem;
|
|
|
|
.layout-sidebar-body {
|
|
grid-area: body;
|
|
}
|
|
|
|
.layout-sidebar-sidebar {
|
|
grid-area: sidebar;
|
|
}
|
|
}
|
|
|
|
@media (max-width: media.width(large)) {
|
|
.layout-sidebar {
|
|
grid-template-columns: 1fr;
|
|
grid-template-areas:
|
|
'body'
|
|
'sidebar';
|
|
}
|
|
}
|
|
|
|
// Session recording - List
|
|
.session-recording-list-cell-item {
|
|
display: flex;
|
|
gap: sizing.rems(xs);
|
|
|
|
span {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
// Channels by Connection
|
|
.channels-by-connection {
|
|
&-connection-header {
|
|
padding: 0.875rem 1rem;
|
|
}
|
|
}
|
|
|
|
// Metadata List
|
|
.metadata-list {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
gap: 1rem;
|
|
|
|
&.vertical {
|
|
flex-direction: column;
|
|
row-gap: 1rem;
|
|
}
|
|
|
|
.metadata-list-item {
|
|
display: flex;
|
|
column-gap: 0.3rem;
|
|
}
|
|
}
|