diff --git a/styles/globals.scss b/styles/globals.scss index 02b079ad..91ec6462 100644 --- a/styles/globals.scss +++ b/styles/globals.scss @@ -303,7 +303,70 @@ h5 { } .LinkItem { - width: 100%; + $diameter: $unit-6x; + align-items: center; + background: var(--dialog-bg); + border: 1px solid var(--link-item-bg); + border-radius: $card-corner; + display: flex; + min-height: 82px; + transition: background $duration-zoom ease-in, + transform $duration-zoom ease-in; + + &:hover { + background: var(--link-item-bg); + color: var(--text-primary); + + .shareIcon { + fill: var(--text-primary); + transform: translate($unit-half, calc(($unit * -1) / 2)); + } + } + + .Left { + align-items: center; + display: flex; + gap: $unit; + + h3 { + font-weight: 600; + max-width: 70%; + line-height: 1.3; + } + } + + a { + display: flex; + justify-content: space-between; + padding: $unit-2x; + width: 100%; + + &:hover { + text-decoration: none; + } + + .left { + align-items: center; + display: flex; + gap: $unit-2x; + flex-grow: 1; + + h3 { + font-weight: 600; + } + } + } + + svg { + fill: var(--link-item-image-color); + width: $diameter; + height: auto; + transition: fill $duration-zoom ease-in; + + &.shareIcon { + width: $unit-4x; + } + } } } }