b38dea0597
Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
115 lines
2.6 KiB
CSS
Executable file
115 lines
2.6 KiB
CSS
Executable file
ul {
|
|
list-style-type: none;
|
|
}
|
|
|
|
ul, li {
|
|
margin: 0;
|
|
padding: 0;
|
|
/* have a default height for setting vertical align */
|
|
height: 4rem;
|
|
}
|
|
|
|
.menu-item {
|
|
width: calc(100% - 4.4rem);
|
|
height: 4rem;
|
|
font-size: 20px;
|
|
color: black;
|
|
display: inline-block;
|
|
/* add padding 4rem for left space for icon */
|
|
padding: 0.2rem 4.2rem 0.2rem 0.2rem;
|
|
}
|
|
|
|
.menu-item span {
|
|
width: 100%;
|
|
display: inline-block;
|
|
line-height: 4rem;
|
|
}
|
|
|
|
.settings-group .menu-item span {
|
|
text-align: right;
|
|
}
|
|
|
|
.settings-items .menu-item {
|
|
width: calc(100% - 6rem);
|
|
padding-left: 1rem;
|
|
padding-right: 5rem;
|
|
}
|
|
|
|
.settings-items .menu-item span[data-value]:after {
|
|
content: attr(data-value);
|
|
position: absolute;
|
|
right: 0;
|
|
/**
|
|
* The .settings-items is 2/3 window size, and the .settings-detail is 1/3
|
|
* window size with no margin right.
|
|
* We need to calculate the space of .settings-detail while
|
|
* .settings-detail shows up:
|
|
* the left position of .settings-items is 2/3 window size + 5rem
|
|
* the left position of .settings-detail is 1/3 window size
|
|
* the width of menu item 100% = (1/3 windows size + 5rem)
|
|
* the space covered by .settings-detail is 100% - 5rem
|
|
*/
|
|
width: calc(100% / 2 - 5rem);
|
|
}
|
|
|
|
.settings-detail .menu-item {
|
|
width: calc(100% - 2rem);
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
}
|
|
|
|
.option-menu .menu-item {
|
|
width: calc(100% - 6rem);
|
|
margin-left: 4rem;
|
|
}
|
|
|
|
.option-menu .menu-item .selected {
|
|
font-weight: bold;
|
|
}
|
|
|
|
/**
|
|
* -------------------------------------------
|
|
* main focus is on settings list
|
|
*/
|
|
body[data-active='list'] .settings-group .menu-item {
|
|
width: calc(100% - 4rem);
|
|
padding: 0 4rem 0 0;
|
|
}
|
|
|
|
body[data-active='list'] .settings-group span {
|
|
display: none;
|
|
}
|
|
|
|
/**
|
|
* ===========================================
|
|
*/
|
|
|
|
/**
|
|
* -------------------------------------------
|
|
* main focus is on option menu
|
|
*/
|
|
body[data-active='option-menu'] .settings-group .menu-item {
|
|
width: calc(100% - 4rem);
|
|
padding: 0 4rem 0 0;
|
|
}
|
|
|
|
body[data-active='option-menu'] .settings-group span {
|
|
display: none;
|
|
}
|
|
|
|
body[data-active='option-menu'] .settings-items ul {
|
|
/**
|
|
* The .settings-items is 2/3 window size, and the .settings-detail is 1/3
|
|
* window size with no margin right.
|
|
* We need to calculate the left space of .settings-items when
|
|
* .settings-detail shows up:
|
|
* the left position of .settings-items is 2/3 window size + 5rem
|
|
* the left position of .settings-detail is 1/3 window size
|
|
* the size of option menu is 1/3 window size + 5rem
|
|
*/
|
|
width: calc(100% / 2 + 5rem);
|
|
}
|
|
|
|
/**
|
|
* ===========================================
|
|
*/
|