b38dea0597
Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
158 lines
2.4 KiB
CSS
Executable file
158 lines
2.4 KiB
CSS
Executable file
|
|
/** Focus Ring
|
|
---------------------------------------------------------*/
|
|
|
|
.focus {
|
|
position: absolute;
|
|
width: 10rem;
|
|
height: 10rem;
|
|
margin-top: -5rem;
|
|
margin-left: -5rem;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
transform-origin: 50% 50%;
|
|
transform: rotate(0deg) scale(1);
|
|
transition: transform 0.2s ease-in;
|
|
text-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
|
|
color: #fff;
|
|
}
|
|
|
|
/**
|
|
* [mode=fixed]
|
|
* [mode=none]
|
|
*/
|
|
|
|
.focus[mode="fixed"],
|
|
.focus[mode="none"] {
|
|
opacity: 0;
|
|
}
|
|
|
|
/**
|
|
* [state=focusing]
|
|
* [state=focused]
|
|
* [state=fail]
|
|
*/
|
|
|
|
.focus[state="focusing"],
|
|
.focus[state="focused"],
|
|
.focus[state="fail"] {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/**
|
|
* [state=focusing]
|
|
*/
|
|
|
|
.focus[state="focusing"] {
|
|
animation: 0.1s ring-animation 1 ease-in forwards;
|
|
}
|
|
|
|
/**
|
|
* [state=focused]
|
|
*/
|
|
|
|
.focus[state="focused"] {
|
|
color: #afff3d;
|
|
|
|
transition: transform 0.1s ease-in;
|
|
animation: 0.15s focuslocked ease-in forwards;
|
|
}
|
|
|
|
/**
|
|
* [state=fail]
|
|
*/
|
|
|
|
.focus[state="fail"] {
|
|
color: #ff0000;
|
|
transform: rotate(45deg);
|
|
transition: transform 0.1s ease-in;
|
|
}
|
|
|
|
/** Icon Wrappers
|
|
---------------------------------------------------------*/
|
|
|
|
.focus_locking,
|
|
.focus_locked {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
/** Icons
|
|
---------------------------------------------------------*/
|
|
|
|
.focus_locking:before,
|
|
.focus_locked:before {
|
|
font-size: 10rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
/** Locking
|
|
---------------------------------------------------------*/
|
|
|
|
/**
|
|
* [state=focusing]
|
|
*/
|
|
|
|
.focus[state="focusing"] .focus_locking {
|
|
opacity: 1;
|
|
}
|
|
|
|
/**
|
|
* [state=focused]
|
|
*/
|
|
|
|
.focus[state="focused"] .focus_locking {
|
|
opacity: 0;
|
|
}
|
|
|
|
/**
|
|
* [state=fail]
|
|
*/
|
|
|
|
.focus[state="fail"] .focus_locking {
|
|
opacity: 0;
|
|
}
|
|
|
|
/** Locked
|
|
---------------------------------------------------------*/
|
|
|
|
/**
|
|
* [state=focusing]
|
|
*/
|
|
|
|
.focus[state="focusing"] .focus_locked {
|
|
opacity: 0;
|
|
}
|
|
|
|
/**
|
|
* [state=focused]
|
|
*/
|
|
|
|
.focus[state="focused"] .focus_locked {
|
|
opacity: 1;
|
|
}
|
|
|
|
/**
|
|
* [state=fail]
|
|
*/
|
|
|
|
.focus[state="fail"] .focus_locked {
|
|
opacity: 1;
|
|
}
|
|
|
|
/** Animation
|
|
---------------------------------------------------------*/
|
|
|
|
@keyframes ring-animation {
|
|
0% { transform: rotate(0deg) scale(1); }
|
|
100% { transform: rotate(45deg) scale(1); }
|
|
}
|
|
|
|
@keyframes focuslocked {
|
|
0% { transform: rotate(45deg) scale(1); }
|
|
50% { transform: rotate(45deg) scale(0.8478); }
|
|
100% { transform: rotate(45deg) scale(0.95); }
|
|
}
|