sc-portal/app/src/app/machines/machines.component.scss

221 lines
2.6 KiB
SCSS

:host
{
flex-grow: 1;
overflow: hidden;
}
.ips
{
+ .ips
{
margin-left: .5rem;
padding-left: .5rem;
border-left: 2px solid #2b3540;
}
}
.card
{
border: 1px solid rgba(0, 0, 0, .5);
background-color: rgba(16, 21, 39, .5);
box-shadow: 0 0 0 2px #0b2b51, 0 0 2px 4px #0b284b, 0 0 10px 3px #0e162a;
transition: box-shadow .15s ease-out;
&:hover
{
box-shadow: 0 0 0 2px #0b2b51, 0 0 2px 4px rgba(18, 203, 240, .4), 0 0 10px 3px #0e162a;
}
.card-title
{
color: #ff9c07;
margin-bottom: 0;
font-weight: bold;
}
.card-body
{
background-color: rgba(16, 21, 39, .5);
max-height: 205px;
overflow: auto;
padding-top: .7rem !important;
}
.list-group-item
{
background: none;
span
{
color: #8881ff;
}
b,
.strong
{
color: #ff9c07;
font-weight: bold;
}
}
.btn-info,
.btn-outline-info
{
font-size: 1rem;
line-height: 1;
}
}
.card-info
{
background-color: rgba(16, 21, 39, .75);
display: flex;
flex-direction: column;
justify-content: space-between;
padding: .25rem .5rem .5rem;
height: 170px;
}
.full-details .card-info
{
height: 240px;
}
@media (max-width: 576px)
{
.card-info
{
height: auto;
}
}
.no-overflow-sm
{
overflow: hidden;
}
@media (max-width: 992px)
{
.no-overflow-sm
{
overflow: visible;
}
}
.open .dropdown-toggle
{
}
.filters
{
width: 240px;
.btn-group + *
{
margin-top: 1rem;
}
}
.form-check-label
{
color: inherit;
}
.btn-toolbar .btn
{
.badge
{
padding: .1rem .35rem 0;
border: 1px solid transparent;
font-weight: 400;
font-size: 1.25rem;
&:first-letter
{
font-size: 1.2rem;
}
}
&:hover
{
.badge
{
border-color: rgba(0,0,0,.25);
}
}
}
@keyframes flash
{
from, 50%, to
{
opacity: 1;
}
25%, 75%
{
opacity: 0;
}
}
.flash
{
animation-name: flash;
animation-duration: calc(.9s * 1.3);
animation-timing-function: ease-in-out;
}
.btn-state-filter:not(.btn-lg):not(.btn-sm)
{
background-color: #11182b;
color: #ff9c07;
padding: .5rem 1rem;
}
.open.show .btn-state-filter
{
border-radius: 1.25rem 1.25rem 0 0;
}
.dropdown-menu.dropdown-menu-state-filter
{
background: #11182b;
color: #ff9c07;
width: 100%;
padding: 0;
border-radius: 0 0 .25rem .25rem;
.dropdown-item
{
color: inherit;
&.active
{
color: #0dcaf0;
}
&:hover
{
background-color: rgba(11, 172, 204, .2);
}
}
}
.form-switch,
.form-switch input,
.form-switch label
{
cursor: pointer;
}
.dropdown-toggle b
{
font-weight: 400;
}
button.badge
{
border: none;
}