b38dea0597
Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
130 lines
2.5 KiB
CSS
Executable file
130 lines
2.5 KiB
CSS
Executable file
|
|
.panel-title {
|
|
font-size: 30px;
|
|
height: 3rem;
|
|
margin: 0;
|
|
}
|
|
|
|
.layer-container {
|
|
position: absolute;
|
|
top: 3rem;
|
|
bottom: 3rem;
|
|
overflow: hidden;
|
|
transition: width 0.2s ease-in-out;
|
|
}
|
|
|
|
.menu-container {
|
|
background-color: white;
|
|
height: calc(100% - 6rem);
|
|
border: 1px solid black;
|
|
}
|
|
|
|
/* root panel */
|
|
.settings-group section {
|
|
padding-top: 1rem;
|
|
padding-bottom: 1rem;
|
|
border-top-right-radius: 1rem;
|
|
border-bottom-right-radius: 1rem;
|
|
border-left: solid 0.5rem orange;
|
|
}
|
|
|
|
.settings-items section {
|
|
padding-top: 1rem;
|
|
padding-bottom: 1rem;
|
|
border-top-right-radius: 1rem;
|
|
border-bottom-right-radius: 1rem;
|
|
border-top-left-radius: 1rem;
|
|
border-bottom-left-radius: 1rem;
|
|
}
|
|
|
|
.settings-detail section {
|
|
padding-top: 1rem;
|
|
padding-bottom: 1rem;
|
|
border-top-left-radius: 1rem;
|
|
border-bottom-left-radius: 1rem;
|
|
}
|
|
|
|
.settings-detail.layer-container {
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
|
|
.settings-group {
|
|
/* 4rem option menu + 1rem spacing + 1rem spacing*/
|
|
right: calc(100% * 2 / 3 + 6rem);
|
|
}
|
|
|
|
.settings-items {
|
|
/* 5rem = 4rem option menu + 1rem spacing*/
|
|
right: 5rem;
|
|
width: calc(100% * 2 / 3);
|
|
}
|
|
|
|
/* state of different panels
|
|
* note menu-items is also aware of active state
|
|
*/
|
|
|
|
/**
|
|
* -------------------------------------------
|
|
* main focus is on group list
|
|
*/
|
|
|
|
body[data-active='group'] .settings-group {
|
|
width: 14rem;
|
|
}
|
|
|
|
body[data-active='group'] .settings-detail {
|
|
display: none;
|
|
}
|
|
|
|
/**
|
|
* ===========================================
|
|
*/
|
|
|
|
/**
|
|
* -------------------------------------------
|
|
* main focus is on settings list
|
|
*/
|
|
body[data-active='list'] .settings-group {
|
|
/* 4rem for icon + 0.5rem for border-left + 0.1rem for border right */
|
|
width: 4.6rem;
|
|
}
|
|
|
|
body[data-active='list'] .settings-detail:not([data-type]) {
|
|
width: 0;
|
|
right: -4rem;
|
|
}
|
|
|
|
body[data-active='list'] .settings-detail[data-type='option-menu'] {
|
|
width: 4rem;
|
|
right: 0;
|
|
}
|
|
|
|
/**
|
|
* ===========================================
|
|
*/
|
|
|
|
/**
|
|
* -------------------------------------------
|
|
* main focus is on option-menu
|
|
*/
|
|
body[data-active='option-menu'] .settings-group {
|
|
/* 4rem for icon + 0.5rem for border-left + 0.1rem for border right */
|
|
width: 4.6rem;
|
|
}
|
|
|
|
/**
|
|
* hide detail panel if it doesn't in option-menu mode.
|
|
*/
|
|
body[data-active='option-menu'] .settings-detail:not([data-type]) {
|
|
width: 0;
|
|
right: -4rem;
|
|
}
|
|
|
|
body[data-active='option-menu'] .settings-detail[data-type='option-menu'] {
|
|
width: calc(100% / 3);
|
|
right: 0;
|
|
}
|
|
|
|
/**
|
|
* ===========================================
|
|
*/
|