logicsimulator/less/physical.less

113 lines
1.8 KiB
Plaintext

.physical {
background:#FFF;
@keyframes smoke {
from { stroke: #FF0000 }
to { stroke: #000000 }
}
font-size:16px;
.logic {
display:none;
}
.togglebutton {
.outer {
fill: #f5f5f5;
stroke: #000000;
stroke-width: 0.5;
}
circle {
fill:#FF0000;
cursor: pointer;
}
.inner {
font-size:8px;
}
text.label {
font-weight: bold;
}
.labelbg {
fill: rgba(255,255,255,.75);
}
}
.switch {
cursor: pointer;
}
#dot {
fill: #000000;
opacity: 0.4;
}
.wire {
fill: none;
stroke-width: 2;
stroke: #333;
transition: stroke 0.4s;
&.brightred {
stroke: #FF0000;
}
&.red {
stroke: #990000;
}
&.yellow {
stroke: #FFFF00;
}
&.orange {
stroke: #cc5500;
}
&.orange2 {
stroke: #ee7722;
}
&.blue {
stroke: #2222ff;
}
&.brightblue {
stroke: #a2a2ff;
}
&.green {
stroke: #229922;
}
&.short {
stroke-width:5;
animation-name: smoke;
animation-duration: 2s;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
&.white {
stroke: #FFFFFF;
}
&:hover {
stroke-width:3;
animation-name: hilight;
animation-duration: 1s;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
&.high:hover, &.up:hover {
stroke:#FF0000;
transition: 0.2s;
}
&.low:hover, &.down:hover {
stroke:#000000;
transition: 0.2s;
}
circle {
fill:#333;
}
}
}
.pull {
.outer {
stroke: #000000;
}
}
.pull .physical {
path {
&outline {
stroke: #000000;
}
stroke-width: 1;
}
}