713 lines
19 KiB
SCSS
713 lines
19 KiB
SCSS
// main menu wrapper
|
|
|
|
#icon-menu {
|
|
background-color: rgba(255,255,255,0.7);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 30;
|
|
--webkit-backdrop-filter: blur(12px);
|
|
backdrop-filter: blur(12px);
|
|
}
|
|
:root[data-mode="dark"] {
|
|
#icon-menu {
|
|
background-color: rgba(30,31,32,0.7);
|
|
}
|
|
}
|
|
|
|
//
|
|
// icon menu buttons
|
|
|
|
menu {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
li {
|
|
display: flex;
|
|
margin: 0;
|
|
}
|
|
|
|
input[type="radio"],
|
|
input[type="checkbox"] {
|
|
height: 0;
|
|
width: 0;
|
|
visibility: hidden;
|
|
position: absolute;
|
|
}
|
|
|
|
label {
|
|
align-items: center;
|
|
cursor: pointer;
|
|
display: flex;
|
|
height: 3rem;
|
|
justify-content: center;
|
|
margin: 0 0.25rem;
|
|
width: 3.25rem;
|
|
background: var(--bg-button);
|
|
border: 1px solid #{map.get($keyrune-ui, "black", "900")};
|
|
border-radius: 0.625rem;
|
|
box-shadow: 2px 2px 0 0 #{map.get($keyrune-ui, "black", "900")};
|
|
position: relative;
|
|
|
|
&.small {
|
|
height: 2.5rem;
|
|
width: 2.75rem;
|
|
}
|
|
|
|
&:hover:not(.disabled) {
|
|
background: var(--bg-hover);
|
|
}
|
|
|
|
&.disabled,
|
|
&[disabled="disabled"] {
|
|
cursor: not-allowed;
|
|
opacity: 0.33;
|
|
}
|
|
|
|
svg {
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
}
|
|
}
|
|
|
|
input[type="radio"]:checked + label,
|
|
input[type="checkbox"]:checked + label,
|
|
label.checked {
|
|
background: var(--bg-active);
|
|
box-shadow: none;
|
|
color: #{map.get($keyrune-ui, "black", "900")};
|
|
top: 2px;
|
|
left: 2px;
|
|
}
|
|
|
|
&.group {
|
|
|
|
&#icon-rarity {
|
|
margin: 0 auto;
|
|
}
|
|
|
|
label {
|
|
margin: 0;
|
|
|
|
&.left {
|
|
border-radius: 0.625rem 0 0 0.625rem;
|
|
}
|
|
&.center {
|
|
border-radius: 0;
|
|
}
|
|
&.right {
|
|
border-radius: 0 0.625rem 0.625rem 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
:root[data-mode="dark"] {
|
|
menu input#rarity_foil:checked + label svg,
|
|
menu label.checked svg.foil {
|
|
fill: #{map.get($keyrune-ui, "black", "900")};
|
|
}
|
|
menu input#rarity_common:not(:checked) + label svg {
|
|
fill: #{map.get($keyrune-ui, "white")};
|
|
}
|
|
}
|
|
@media only screen and (min-width: 1025px) {
|
|
menu.group#icon-rarity {
|
|
margin: 0 1rem 0 0;
|
|
}
|
|
}
|
|
|
|
//
|
|
// icon grid
|
|
|
|
#icons {
|
|
// container
|
|
.set {
|
|
&-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
&-info {
|
|
background-color: var(--bg-content);
|
|
height: 0%;
|
|
position: sticky;
|
|
top: 6.625rem;
|
|
z-index: 20;
|
|
}
|
|
|
|
&-grid {
|
|
gap: 1rem;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
&.hidden {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
// icon cards
|
|
figure {
|
|
align-items: center;
|
|
background-color: var(--bg-card);
|
|
border-radius: 1rem;
|
|
cursor: pointer;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
|
|
&:hover {
|
|
background-color: var(--bg-card-hover);
|
|
animation: hover 200ms;
|
|
}
|
|
|
|
figcaption {
|
|
filter: drop-shadow(0 0 1.2rem var(--ss-icon-shadow));
|
|
margin: 1rem 0 0.75rem;
|
|
|
|
> .ss {
|
|
--ss-base-size: 3rem;
|
|
|
|
&.ss-rarity-common:not(.ss-inner)::before {
|
|
--ss-rarity: var(--text-default) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
> span {
|
|
margin: 0 0.5rem 1.25rem;
|
|
|
|
&.icon-code {
|
|
display: none;
|
|
}
|
|
|
|
&.icon-name {
|
|
line-height: 1.33rem;
|
|
}
|
|
}
|
|
|
|
&.hidden {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&[data-density="roomy"] {
|
|
figure > span.icon-name {
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
&[data-density="normal"] {
|
|
div.grid {
|
|
gap: 1.5rem;
|
|
margin-bottom: 3rem;
|
|
}
|
|
div.sticky {
|
|
padding-bottom: 2rem;
|
|
}
|
|
figure {
|
|
figcaption > .ss {
|
|
--ss-base-size: 2.25rem;
|
|
margin: 1rem 0 0.5rem;
|
|
}
|
|
> span.icon-name {
|
|
display: none;
|
|
}
|
|
> span.icon-code {
|
|
display: inline;
|
|
margin: 0 0.5rem 1rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
&[data-density="dense"] {
|
|
div.grid {
|
|
gap: 1rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
div.sticky {
|
|
padding-bottom: 1rem;
|
|
}
|
|
figure {
|
|
flex-direction: row;
|
|
figcaption > .ss {
|
|
--ss-base-size: 1.5rem;
|
|
margin: 1rem;
|
|
}
|
|
> span.icon-name {
|
|
display: none;
|
|
}
|
|
> span.icon-code {
|
|
display: inline;
|
|
margin: 1rem 1rem 1rem 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
&[data-density="icon"] {
|
|
div.grid {
|
|
gap: 1rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
div.sticky {
|
|
padding-bottom: 1rem;
|
|
}
|
|
figure {
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
border-radius: 0.75rem;
|
|
figcaption > .ss {
|
|
--ss-base-size: 2rem;
|
|
margin: 1rem;
|
|
}
|
|
> span.icon-name,
|
|
> span.icon-code {
|
|
display: none;
|
|
}
|
|
}
|
|
.set-group-grid {
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
}
|
|
}
|
|
}
|
|
@keyframes hover {
|
|
0% {
|
|
background-color: var(--bg-card);
|
|
}
|
|
100% {
|
|
background-color: var(--bg-card-hover);
|
|
}
|
|
}
|
|
@media only screen and (min-width: 1025px) {
|
|
#icons {
|
|
.set {
|
|
&-group {
|
|
flex-direction: row;
|
|
|
|
&-info {
|
|
width: 20%;
|
|
padding-bottom: 3rem;
|
|
}
|
|
&-icons {
|
|
width: 80%;
|
|
}
|
|
&-grid {
|
|
grid-template-columns: repeat(6, minmax(0, 1fr));
|
|
gap: 2rem;
|
|
margin-bottom: 4rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
&[data-density="icon"] {
|
|
.set-group-grid {
|
|
grid-template-columns: repeat(8, minmax(0, 1fr));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@media only screen and (min-width: 1281px) {
|
|
#icons[data-density="icon"] {
|
|
.set-group-grid {
|
|
grid-template-columns: repeat(12, minmax(0, 1fr));
|
|
}
|
|
}
|
|
}
|
|
// dark mode alterations on figure cards
|
|
:root[data-mode="dark"] {
|
|
// common dark mode needs to swap white/black depending on inner status
|
|
#icons figure .ss.ss-rarity-common.ss-inner,
|
|
object details .details .icon i.ss.ss-rarity-common.ss-inner {
|
|
--ss-rarity: #000 !important;
|
|
}
|
|
#icons figure .ss.ss-rarity-common:not(.ss-inner),
|
|
object details .details .icon i.ss.ss-rarity-common:not(.ss-inner) {
|
|
--ss-rarity: #fff !important;
|
|
--ss-border: #000 !important;
|
|
}
|
|
}
|
|
|
|
//
|
|
// search box
|
|
|
|
form {
|
|
|
|
.input-wrapper {
|
|
svg {
|
|
position: absolute;
|
|
top: 1.25rem;
|
|
|
|
&.search {
|
|
left: 1.5rem;
|
|
}
|
|
|
|
&.clear {
|
|
cursor: pointer;
|
|
right: 8.5rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="text"] {
|
|
align-self: stretch;
|
|
background: var(--bg-body);
|
|
border: 0.15rem solid var(--bg-border);
|
|
box-shadow: inset 0 0.25rem 0 0 var(--bg-hover);
|
|
height: 3.6rem;
|
|
border-radius: 2rem;
|
|
color: var(--text-default);
|
|
font-size: 1.25rem;
|
|
padding: 0 2rem 0 3.5rem;
|
|
width: calc(100% - 5.5rem);
|
|
|
|
&::placeholder {
|
|
color: var(--text-accent);
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
&:focus {
|
|
outline: none;
|
|
box-shadow: inset 0 0.25rem 0 0 var(--bg-hover),
|
|
0 0 0 1px var(--bg-body),
|
|
0 0 0 0.25rem #{map.get($keyrune-ui, "blue", "300")};
|
|
}
|
|
}
|
|
|
|
button.button {
|
|
border-color: var(--bg-border);
|
|
border-radius: 0 2rem 2rem 0;
|
|
box-shadow: inset 0 0.25rem 0 0 var(--bg-hover);
|
|
cursor: pointer;
|
|
height:100%;
|
|
padding-right: 1.75rem;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
|
|
&:active,
|
|
&:focus {
|
|
left: auto;
|
|
top: 0;
|
|
right: 0;
|
|
box-shadow: inset 0 0.25rem 0 0 var(--bg-content);
|
|
}
|
|
}
|
|
|
|
.search-left {
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
}
|
|
@media only screen and (min-width: 769px) {
|
|
form .search-left {
|
|
width: auto;
|
|
text-align: left;
|
|
padding-left: 2rem;
|
|
}
|
|
}
|
|
|
|
//
|
|
// icon details modal
|
|
|
|
object {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
padding: 0;
|
|
margin: 0;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
background: var(--rgba-modal);
|
|
backdrop-filter: blur(0.5rem);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
visibility: hidden;
|
|
transition: visibility 200ms ease-in-out;
|
|
z-index: 100;
|
|
|
|
details {
|
|
background: var(--rgba-fg);
|
|
box-shadow: 0 0 12rem 0 var(--bg-shadow);
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-radius: 1.5rem;
|
|
position: relative;
|
|
opacity: 0;
|
|
transform: scale(1.1) translateY(0);
|
|
transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;
|
|
overflow: hidden;
|
|
width: 91.66667vw;
|
|
|
|
summary {
|
|
//background: var(--bg-body);
|
|
//border-bottom: 1px solid var(--bg-accent);
|
|
display: none;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.details {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.close {
|
|
position: absolute;
|
|
top: 1.5rem;
|
|
right: 1.2rem;
|
|
z-index: 10;
|
|
}
|
|
|
|
.icon {
|
|
background-color: var(--bg-body);
|
|
//border-left: 1px solid var(--text-accent);
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 2.5rem 0.5rem 1.5rem;
|
|
|
|
i.ss {
|
|
//color: var(--text-default);
|
|
--ss-base-size: 8rem;
|
|
line-height: 1;
|
|
padding-bottom: 1rem;
|
|
|
|
&.ss-rarity-common:not(.ss-inner)::before {
|
|
//color: var(--text-default) !important;
|
|
}
|
|
}
|
|
|
|
&-controls {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
h3 {
|
|
background: #f4d4e9;
|
|
color: #df3ea2;
|
|
border: 1px solid #ed73be;
|
|
display: inline-flex;
|
|
align-self: flex-start;
|
|
padding: 2px 5px;
|
|
border-radius: 0.33rem;
|
|
}
|
|
|
|
.table {
|
|
justify-content: space-between;
|
|
font-size: 1.1rem;
|
|
|
|
label {
|
|
font-size: 1rem;
|
|
font-weight: bold;
|
|
margin-bottom: 0.25rem;
|
|
text-transform: uppercase;
|
|
|
|
&.aliases {
|
|
margin-bottom: 0.1rem;
|
|
}
|
|
}
|
|
|
|
.class,
|
|
.rarity,
|
|
.border,
|
|
.inner,
|
|
.aliases > span {
|
|
font-family: monospace;
|
|
}
|
|
|
|
.official {
|
|
background-repeat: no-repeat;
|
|
background-position: 0 50%;
|
|
padding-left: 1.75rem;
|
|
margin-left: -0.25rem;
|
|
|
|
&[data-official=true] {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c-1.2 0-2.4.6-3 1.7A3.6 3.6 0 0 0 4.6 9c-1 .6-1.7 1.8-1.7 3s.7 2.4 1.7 3c-.3 1.2 0 2.5 1 3.4.8.8 2.1 1.2 3.3 1 .6 1 1.8 1.6 3 1.6s2.4-.6 3-1.7c1.2.3 2.5 0 3.4-1 .8-.8 1.2-2 1-3.3 1-.6 1.6-1.8 1.6-3s-.6-2.4-1.7-3c.3-1.2 0-2.5-1-3.4a3.7 3.7 0 0 0-3.3-1c-.6-1-1.8-1.6-3-1.6Z'%3E%3C/path%3E%3Cpath d='m9 12 2 2 4-4'%3E%3C/path%3E%3C/svg%3E");
|
|
}
|
|
&[data-official=false] {
|
|
color: #{map.get($keyrune-ui, "pink", "300")};
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ed73be' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6v12'%3E%3C/path%3E%3Cpath d='M17.196 9 6.804 15'%3E%3C/path%3E%3Cpath d='m6.804 9 10.392 6'%3E%3C/path%3E%3C/svg%3E");
|
|
}
|
|
}
|
|
|
|
ul.glyphs {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
li {
|
|
align-items: center;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
|
|
i {
|
|
font-family: keyrune;
|
|
font-style: normal;
|
|
text-align: center;
|
|
width: 1.75em;
|
|
}
|
|
|
|
&.false {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
i {
|
|
font-size: 1.2rem;
|
|
|
|
&::before,
|
|
&::after,
|
|
&::marker {
|
|
color: var(--text-default);
|
|
}
|
|
}
|
|
}
|
|
|
|
table.aliases {
|
|
border-spacing: 0;
|
|
width: 100%;
|
|
|
|
td.code {
|
|
font-family: monospace;
|
|
font-size: 1rem;
|
|
padding-right: 0.5rem;
|
|
}
|
|
|
|
td.set {
|
|
font-size: 1rem;
|
|
position: relative;
|
|
width: 100%;
|
|
|
|
&::before {
|
|
content: ' ';
|
|
visibility: hidden;
|
|
}
|
|
|
|
span {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.actions {
|
|
display: none;
|
|
|
|
a.action-button {
|
|
position: relative;
|
|
|
|
span {
|
|
text-decoration: underline transparent;
|
|
transition: text-decoration 150ms ease-in-out;
|
|
-webkit-text-underline-position: from-font;
|
|
text-underline-position: under-font;
|
|
}
|
|
|
|
&:hover span {
|
|
text-decoration-color: var(--text-default);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.tags {
|
|
display: flex;
|
|
font-size: 0.9rem;
|
|
margin-left: -2px;
|
|
padding: 0.5rem 0 0;
|
|
|
|
a {
|
|
background: var(--text-default);
|
|
border-radius: 2rem;
|
|
color: var(--bg-body);
|
|
margin: 0 0.5rem 0 0;
|
|
padding: 0.25rem 1rem 0.3rem;
|
|
|
|
&.card {
|
|
position: relative;
|
|
padding-left: 40px;
|
|
|
|
&::before {
|
|
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0' y='0' width='25.2' height='36' viewBox='0 0 70 100'%3E%3Cg id='Layer_1'%3E%3Cpath d='M10 0 L60 0 C65.523 0 70 4.477 70 10 L70 90 C70 95.523 65.523 100 60 100 L10 100 C4.477 100 0 95.523 0 90 L0 10 C0 4.477 4.477 0 10 0 z' fill='%23191511'/%3E%3Cpath d='M9.638 5.533 L60.362 5.533 C62.572 5.533 64.362 7.375 64.362 9.648 L64.362 90.353 C64.362 92.625 62.572 94.467 60.362 94.467 L9.638 94.467 C7.428 94.467 5.638 92.625 5.638 90.353 L5.638 9.648 C5.638 7.375 7.428 5.533 9.638 5.533 z' fill='%2351765C'/%3E%3Cpath d='M11.5 57.388 L58.5 57.388 L58.5 88.388 L11.5 88.388 L11.5 57.388 z' fill='%23B89A82'/%3E%3Cpath d='M11.5 23.798 L58.5 23.798 L58.5 50.464 L11.5 50.464 L11.5 23.798 z' fill='%2362A5C0'/%3E%3Cpath d='M23.002 37.274 C22.158 35.902 19.11 32.575 19.693 29.21 C25.668 37.92 34.696 38.018 44.438 37.62 C41.357 38.74 37.543 40.962 33.44 40.532 C31.004 44.713 28.025 42.796 23.736 42.796 C21.054 43.974 17.834 43.413 14.841 43.605 C16.593 43.381 17.422 41.732 18.853 41.107 C20.734 40.285 23.163 40.39 25.191 39.399' fill='%23B54048'/%3E%3Cpath d='M31.826 38.669 C30.084 38.669 28.672 37.656 28.672 36.407 C28.672 35.159 30.084 34.146 31.826 34.146 C33.568 34.146 34.98 35.159 34.98 36.407 C34.98 37.656 33.568 38.669 31.826 38.669 z' fill='%23B54048'/%3E%3Cpath d='M11.5 10.798 L58.5 10.798 L58.5 23.798 L11.5 23.798 L11.5 10.798 z' fill='%2380C2DD'/%3E%3Cpath d='M44.78 18.389 C-26.121 27.703 92.917 29.765 45.03 18.389' fill='%2335666C'/%3E%3C/g%3E%3C/svg%3E");
|
|
content: '';
|
|
display: block;
|
|
width: 25.2px;
|
|
height: 36px;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
transition: transform 150ms ease-in-out;
|
|
transform: rotate(-20deg) translateY(-3px) translateX(6px);
|
|
}
|
|
|
|
&:hover::before {
|
|
transform: rotate(-30deg) translateY(-3px) translateX(6px) scale(1.05);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
&.active {
|
|
visibility: visible;
|
|
|
|
details {
|
|
opacity: 1;
|
|
transform: scale(1) translateY(-3rem);
|
|
}
|
|
}
|
|
}
|
|
@keyframes fadeup {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(-50%) translateY(-50%);
|
|
}
|
|
30%, 70% {
|
|
opacity: 1;
|
|
transform: translateX(-50%) translateY(-75%);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateX(-50%) translateY(-120%);
|
|
}
|
|
}
|
|
@media only screen and (min-width: 1025px) {
|
|
object details {
|
|
width: calc(16 * 2 * 16px * 1.75 + 2rem);
|
|
|
|
.details {
|
|
flex-direction: row;
|
|
min-width: 50%;
|
|
}
|
|
|
|
.icon {
|
|
width: calc(16 * 16px * 1.75);
|
|
|
|
i.ss {
|
|
--ss-base-size: 16rem;
|
|
}
|
|
|
|
&-controls {
|
|
display: flex;
|
|
padding: 0 0 2rem;
|
|
}
|
|
}
|
|
|
|
.table {
|
|
.actions {
|
|
display: flex;
|
|
}
|
|
}
|
|
}
|
|
}
|