docs/styles/container-home.less

218 lines
5.1 KiB
Plaintext

.details-panel.home {
background-color: @color-background;
overflow: hidden;
.content {
display: flex;
flex: 1 auto;
flex-direction: row;
padding: 1rem;
.left {
width: 100%;
flex-direction: column;
margin-right: 1rem;
}
.right {
width: 40%;
min-width: 200px;
max-width: 600px;
flex-direction: column;
}
.full {
width: 100%;
}
.web-preview {
margin-bottom: 1rem;
.widget {
.widget-style();
.top-bar {
.widget-bar-style();
}
background-color: white;
width: 100%;
height: 100%;
p {
font-size: 13px;
color: @gray-normal;
padding: 10px;
padding-bottom: 0px;
}
.table {
padding-left: 20px;
padding-right: 20px;
.icon-arrow-right {
color: #BBB;
font-size: 13px;
margin: 0px 8px;
position: relative;
top: 2px;
flex: 0 auto;
min-width: 13px;
}
&.ports {
.table-labels {
margin-top: 20px;
flex: 1 auto;
display: flex;
font-size: 10px;
color: @gray-light;
.label-left {
flex: 0 auto;
min-width: 60px;
margin-right: 30px;
text-align: right;
}
.label-right {
flex: 1 auto;
display: inline-block;
}
}
.table-values {
flex: 1 auto;
display: flex;
flex-direction: row;
margin: 8px 0;
font-size: 12px;
.value-left {
text-align: right;
min-width: 70px;
flex: 0 auto;
padding: 0px;
}
.value-right {
flex: 1 auto;
-webkit-user-select: text;
max-width: 170px;
padding: 0px;
}
}
}
}
.frame {
padding-top: 8rem;
border: 0;
position: absolute;
left: -100%;
top: -100%;
height: 400%;
width: 400%;
transform: scale(0.5);
}
.frame-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
color: transparent;
transition: background-color 0.25s;
.icon {
margin-top: 40%;
display: block;
font-size: 60px;
text-align: center;
}
.text {
font-size: 20px;
text-align: center;
}
&:hover {
color: white;
background-color: @gray-darkest;
opacity: 0.75;
}
}
}
}
.mini-logs {
.widget {
.widget-style();
.top-bar {
.widget-bar-style();
background-color: darken(@gray-darkest, 3%);
border-bottom: 1px solid rgba(255,255,255,0.1);
.text {
color: white;
}
}
height: 100%;
.logs {
background-color: @gray-darkest;
color: @gray-lightest;
font-family: @font-code;
font-size: 10px;
white-space: pre-wrap;
-webkit-user-select: text;
padding: 1.2rem;
overflow: auto;
height: 100%;
}
p {
margin-bottom: 0px;
}
/*.mini-logs-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
color: transparent;
transition: all 0.25s;
.icon {
margin-top: 25%;
display: block;
font-size: 60px;
text-align: center;
}
.text {
font-family: @font-regular;
font-size: 20px;
text-align: center;
}
&:hover {
color: white;
background-color: @gray-darkest;
opacity: 0.75;
}
}*/
}
}
.folders {
.widget {
.widget-style();
background-color: white;
.top-bar {
.widget-bar-style();
}
.folders-list {
.folder {
display: flex;
padding: 1rem;
border-bottom: 1px solid @color-divider;
&:last-child {
border-bottom: none;
}
&:hover {
background-color: @color-box-button;
}
img {
width: 32px;
min-width: 32px;
height: 25px;
}
.text {
margin-top: 0.3rem;
margin-left: 1rem;
width: 180px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
}
}
}
}
}
}