Cammie arrows
This commit is contained in:
parent
6408c84f69
commit
8d5e5d79f9
2 changed files with 22 additions and 12 deletions
|
@ -45,12 +45,21 @@
|
||||||
|
|
||||||
.ctrl {
|
.ctrl {
|
||||||
|
|
||||||
|
// Center arrows
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
background-color: $cammie-controls-color;
|
background-color: $cammie-controls-color;
|
||||||
color: white;
|
color: white;
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: $zeus_orange;
|
background-color: $zeus_orange;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.diag i {
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.row {
|
.row {
|
||||||
|
@ -61,6 +70,7 @@
|
||||||
&.top-row, &.middle-row, &.bottom-row {
|
&.top-row, &.middle-row, &.bottom-row {
|
||||||
flex-basis: 0;
|
flex-basis: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.top-row, &.bottom-row {
|
&.top-row, &.bottom-row {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
|
|
|
@ -31,35 +31,35 @@ title: Cammie
|
||||||
<img id="cammie-feed" src="https://kelder.zeus.ugent.be/webcam/video/mjpg.cgi?profileid=2">
|
<img id="cammie-feed" src="https://kelder.zeus.ugent.be/webcam/video/mjpg.cgi?profileid=2">
|
||||||
<div id="cammie-ctrls">
|
<div id="cammie-ctrls">
|
||||||
<div class="top-row row">
|
<div class="top-row row">
|
||||||
<div class="column ctrl left" data-x="-10" data-y="10">
|
<div class="column ctrl diag left" data-x="-10" data-y="10">
|
||||||
diag up left
|
<%= fa 'chevron-circle-left' %>
|
||||||
</div>
|
</div>
|
||||||
<div class="column ctrl center" data-x="0" data-y="10">
|
<div class="column ctrl center" data-x="0" data-y="10">
|
||||||
up
|
<%= fa 'chevron-circle-up' %>
|
||||||
</div>
|
</div>
|
||||||
<div class="column ctrl right" data-x="10" data-y="10">
|
<div class="column ctrl diag right" data-x="10" data-y="10">
|
||||||
diag up right
|
<%= fa 'chevron-circle-up' %>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row middle-row">
|
<div class="row middle-row">
|
||||||
<div class="column ctrl left" data-x="-10" data-y="0">
|
<div class="column ctrl left" data-x="-10" data-y="0">
|
||||||
left
|
<%= fa 'chevron-circle-left' %>
|
||||||
</div>
|
</div>
|
||||||
<div class="column center"> </div>
|
<div class="column center"> </div>
|
||||||
<div class="column ctrl right" data-x="10" data-y="0">
|
<div class="column ctrl right" data-x="10" data-y="0">
|
||||||
right
|
<%= fa 'chevron-circle-right' %>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row bottom-row">
|
<div class="row bottom-row">
|
||||||
<div class="column ctrl left" data-x="-10" data-y="-10">
|
<div class="column ctrl diag left" data-x="-10" data-y="-10">
|
||||||
diag down left
|
<%= fa 'chevron-circle-down' %>
|
||||||
</div>
|
</div>
|
||||||
<div class="column ctrl center" data-x="0" data-y="-10">
|
<div class="column ctrl center" data-x="0" data-y="-10">
|
||||||
down
|
<%= fa 'chevron-circle-down' %>
|
||||||
</div>
|
</div>
|
||||||
<div class="column ctrl right" data-x="10" data-y="-10">
|
<div class="column ctrl diag right" data-x="10" data-y="-10">
|
||||||
diag down right
|
<%= fa 'chevron-circle-right' %>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue