You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
155 lines
2.6 KiB
155 lines
2.6 KiB
.box { |
|
background-color: hsl(0,0%,97%); |
|
border-radius: 5px; |
|
margin: 1em 0; |
|
padding: .5em; |
|
box-shadow: 0 5px 20px rgba(0,0,0,.5); |
|
} |
|
|
|
.box-tip { |
|
min-width: 100px; |
|
z-index: 1; |
|
text-align: center; |
|
} |
|
|
|
.box-danger { |
|
background-color: #faa; |
|
} |
|
|
|
.left-container .flow-item { |
|
display: inline-block; |
|
width: 600px; |
|
float: left; |
|
} |
|
|
|
.flow-reply-row { |
|
display: inline-flex; |
|
align-items: flex-start; |
|
width: calc(100% - 625px); |
|
margin-left: -25px; |
|
padding-left: 18px; |
|
overflow-x: auto; |
|
} |
|
|
|
.flow-reply-row::-webkit-scrollbar { |
|
display: none; |
|
} |
|
|
|
.flow-reply-row:empty { |
|
margin: 0 !important; |
|
display: none; |
|
} |
|
|
|
.flow-item-row::after { |
|
content: ""; |
|
display: block; |
|
clear: both; |
|
} |
|
|
|
@media screen and (max-width: 900px) { |
|
.left-container .flow-item { |
|
display: block; |
|
width: calc(100vw - 20px); |
|
max-width: 600px; |
|
float: none; |
|
} |
|
|
|
.flow-reply-row { |
|
display: flex; |
|
width: 100% !important; |
|
margin-left: 0; |
|
padding-left: 30px; |
|
margin-top: -2.5em; |
|
margin-bottom: -1em; |
|
} |
|
} |
|
|
|
.left-container .flow-reply { |
|
flex: 0 0 300px; |
|
max-height: 15em; |
|
margin-right: -7px; |
|
overflow-y: hidden; |
|
} |
|
|
|
.aux-margin, |
|
.left-container .flow-item { |
|
margin-left: 50px; |
|
} |
|
.aux-margin { |
|
width: calc(100% - 2 * 50px); |
|
} |
|
|
|
@media screen and (max-width: 1200px) { |
|
.aux-margin, |
|
.left-container .flow-item { |
|
margin-left: 10px; |
|
} |
|
.aux-margin { |
|
width: calc(100% - 2 * 10px); |
|
} |
|
|
|
.flow-reply-row { |
|
width: calc(100% - 585px); |
|
} |
|
} |
|
|
|
.left-container .flow-item-row { |
|
cursor: default; |
|
} |
|
|
|
.left-container .flow-item-row:hover::before { |
|
content: '>>'; |
|
position: absolute; |
|
left: 10px; |
|
margin-top: 1.5em; |
|
color: white; |
|
text-shadow: 0 0 5px #000; |
|
font-family: 'Consolas', 'Courier', monospace; |
|
} |
|
|
|
@media screen and (max-width: 1200px) { |
|
.flow-item-row:hover::before { |
|
display: none; |
|
} |
|
} |
|
|
|
.box-header { |
|
font-size: small; |
|
} |
|
|
|
.flow-item-row p.img { |
|
text-align: center; |
|
margin-top: .5em; |
|
} |
|
.flow-item-row p.img img { |
|
max-width: 100%; |
|
box-shadow: 0 1px 5px rgba(0,0,0,.4); |
|
} |
|
.left-container .flow-item-row p.img img { |
|
max-height: 80vh; |
|
} |
|
|
|
.box-header-badge { |
|
float: right; |
|
margin: 0 .5em; |
|
} |
|
|
|
.flow-item-dot { |
|
position: relative; |
|
top: calc(-.5em - 5px); |
|
left: calc(-.5em - 5px); |
|
width: 10px; |
|
height: 10px; |
|
margin-bottom: -10px; |
|
border-radius: 50%; |
|
background-color: orange; |
|
box-shadow: 0 0 5px rgba(0,0,0,.4); |
|
} |
|
|
|
.box-content { |
|
margin: .5em 0; |
|
} |
|
|
|
.box-id { |
|
color: #666666; |
|
} |