io.parrots
Version:
Parrots.io App
139 lines (136 loc) • 3.9 kB
text/less
.parrots-page-system-page {
width: 100%;
height: 100%;
position: relative;
.system-text-title {
display: flex;
color: extract(@CLR_0, 1);
.FC1();
}
.system-text-description {
display: flex;
color: extract(@CLR_0, 7);
.FC0();
}
>.wrapper-system-left {
.wrapper-page-left();
z-index: 3;
>.line-system {
height: @SYSTEM_PAGE_WRAPPER_SYSTEM_LEFT_LINE_HEIGHT;
width: @SYSTEM_PAGE_WRAPPER_SYSTEM_LEFT_LINE_WIDTH;
background-color: extract(@CLR_1, 8);
}
>.menu-system {
.wrapper-under-line(72pt);
align-items: center;
&:hover {
background-color: extract(@CLR_1, 7);
}
}
>.selected {
background-color: extract(@CLR_1, 8);
}
>.none {
cursor: unset;
opacity: 0.5;
color: extract(@CLR_1, 6);
&:hover {
background-color: extract(@CLR_1, 9);
}
}
.img-system {
margin-left: @SYSTEM_PAGE_WRAPPER_SYSTEM_LEFT_IMG_MARGIN_LEFT;
}
.wrapper-title-system {
display: inline-block;
padding-left: @SYSTEM_PAGE_WRAPPER_SYSTEM_LEFT_TITLE_PADDING_LEFT;
}
}
>.wrapper-system-center {
.wrapper-page-right();
}
.selected-monitor {
width: 79.28%;
}
.full-line-wrapper-system-right {
position: absolute;
height: 100%;
width: 0.08%;
margin-left: 79.3%;
background-color: extract(@CLR_1, 6);
}
>.wrapper-system-right {
display: inline-block;
position: absolute;
right: 0;
height: 100%;
width: @SYSTEM_PAGE_WRAPPER_SYSTEM_RIGHT_WIDTH;
background-color: extract(@CLR_1, 8);
padding-left: @SYSTEM_PAGE_WRAPPER_SYSTEM_RIGHT_PADDING_LEFT;
padding-top: @SYSTEM_PAGE_WRAPPER_SYSTEM_RIGHT_PADDING_TOP;
>.right-text-title{
display: flex;
color: extract(@CLR_0, 0);
.FC2();
}
>.right-text-description {
display: flex;
padding-bottom: @SYSTEM_PAGE_WRAPPER_SYSTEM_RIGHT_DESCRIPTION_PADDING_BOTTOM;
color: extract(@CLR_1, 1);
.FC0();
}
>.right-text-description-0 {
display: flex;
padding-top: @SYSTEM_PAGE_WRAPPER_SYSTEM_RIGHT_DESCRIPTION_PADDING_TOP;
color: extract(@CLR_0, 0);
.FC0();
}
}
}
// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1225px) {
.parrots-page-system-page {
>.wrapper-system-left {
width: 22.62%;
.img-system {
margin-left: 20px;
margin-right: 10px;
}
}
>.wrapper-system-center {
left: 22.7%;
width: 77.6%;
}
.full-line-wrapper-system-right {
display: none;
}
>.wrapper-system-right {
display: none;
}
}
}
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) {
.parrots-page-system-page {
>.wrapper-system-left {
width: 27.62%;
.img-system {
margin-left: 20px;
margin-right: 10px;
}
}
>.wrapper-system-center {
left: 27.7%;
width: 72.6%;
}
.full-line-wrapper-system-right {
display: none;
}
>.wrapper-system-right {
display: none;
}
}
}
@import "./system/SystemInfoPage";
@import "./system/TimeLanguagePage";
@import "./system/MonitorPage";