153 lines
3.0 KiB
SCSS
153 lines
3.0 KiB
SCSS
/** Rings **/
|
|
|
|
.rings {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
color: $white;
|
|
// All
|
|
#earth,
|
|
#air,
|
|
#water,
|
|
#fire,
|
|
#void {
|
|
position: relative;
|
|
flex: 1 1 50%;
|
|
text-align: center;
|
|
|
|
i.i_earth,
|
|
i.i_water,
|
|
i.i_fire,
|
|
i.i_air,
|
|
i.i_void {
|
|
font-size: 5rem;
|
|
line-height: 4.75rem;
|
|
}
|
|
|
|
label {
|
|
position: relative;
|
|
width: 5rem;
|
|
line-height: 0;
|
|
float: right;
|
|
}
|
|
|
|
input {
|
|
position: absolute;
|
|
height: 2rem;
|
|
width: 2rem;
|
|
border-radius: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
border: 2px solid $l5r5e-title;
|
|
color: $white;
|
|
&:hover {
|
|
border: 2px solid $red;
|
|
text-shadow: 0 0 6px $red;
|
|
box-shadow: 0 0 6px inset $red;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Earth
|
|
#earth {
|
|
float: right;
|
|
color: $l5r5e-earth;
|
|
input {
|
|
top: auto;
|
|
right: 0;
|
|
bottom: -1rem;
|
|
left: auto;
|
|
background: $l5r5e-earth;
|
|
}
|
|
label {
|
|
strong {
|
|
position: absolute;
|
|
bottom: 0.75rem;
|
|
left: -1.75rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Air
|
|
#air {
|
|
color: $l5r5e-air;
|
|
input {
|
|
top: auto;
|
|
right: auto;
|
|
bottom: -1rem;
|
|
left: 0;
|
|
background: $l5r5e-air;
|
|
}
|
|
label {
|
|
float: left;
|
|
strong {
|
|
position: absolute;
|
|
bottom: 0.75rem;
|
|
right: -1rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Water
|
|
#water {
|
|
float: right;
|
|
color: $l5r5e-water;
|
|
padding-right: 2rem;
|
|
input {
|
|
top: 17%;
|
|
right: -1.25rem;
|
|
bottom: auto;
|
|
left: auto;
|
|
background: $l5r5e-water;
|
|
}
|
|
label {
|
|
strong {
|
|
position: absolute;
|
|
bottom: -0.75rem;
|
|
right: 2rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Fire
|
|
#fire {
|
|
color: $l5r5e-fire;
|
|
padding-left: 2rem;
|
|
input {
|
|
top: 17%;
|
|
right: auto;
|
|
bottom: auto;
|
|
left: -1.25rem;
|
|
background: $l5r5e-fire;
|
|
}
|
|
label {
|
|
float: left;
|
|
strong {
|
|
position: absolute;
|
|
bottom: -0.75rem;
|
|
right: 2rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Void
|
|
#void {
|
|
top: -2rem;
|
|
margin: 0 calc(50% - 2.5rem);
|
|
color: $l5r5e-void;
|
|
input {
|
|
top: -1rem;
|
|
right: auto;
|
|
bottom: auto;
|
|
left: 30%;
|
|
background: $l5r5e-void;
|
|
}
|
|
label {
|
|
strong {
|
|
position: absolute;
|
|
bottom: -0.75rem;
|
|
left: 1.75rem;
|
|
}
|
|
}
|
|
}
|
|
}
|