Шаблон:LinkCard/styles.css: различия между версиями
Материал из Space Station 14 Вики
|
|
| Строка 1: |
Строка 1: |
| .link-card {
| |
| --background-color: color-mix(in srgb, var(--bg-color) var(--alpha), rgb(var(--theme-color-darkened--rgb)));
| |
|
| |
|
| display: inline-block;
| |
| position: relative;
| |
| min-width: 110px;
| |
| text-align: center;
| |
| border: var(--border-outset);
| |
| border-radius: 0.3em;
| |
| box-shadow: var(--box-shadow-medium);
| |
| background: var(--background-color);
| |
| transition: all 0.15s ease;
| |
| min-height: calc(32px + 4px);
| |
| }
| |
|
| |
| .link-card__image {
| |
| position: relative;
| |
| text-align: center;
| |
| align-content: center;
| |
| padding: 6px;
| |
| }
| |
|
| |
| .link-card__name {
| |
| position: relative;
| |
| width: 100%;
| |
| padding: 2px 4px;
| |
| font-size: 0.8em;
| |
| box-sizing: border-box;
| |
| background: rgba(0, 0, 0, 0.2);
| |
| font-weight: bold;
| |
| }
| |
|
| |
| .link-card.brightness-overlay::before {
| |
| border-radius: 0.3em;
| |
| }
| |
|
| |
| .link-card__pin {
| |
| top: 0;
| |
| right: 4px;
| |
| }
| |
|
| |
| @media (min-width: 800px) {
| |
| .link-card-hover:not(.link-card__side):hover {
| |
| box-shadow: var(--box-shadow-high);
| |
| transform: translateY(-4px);
| |
| }
| |
| }
| |
|
| |
| @media (max-width: 800px) {
| |
| .link-card {
| |
| display: flex;
| |
| width: 100%;
| |
| text-align: left;
| |
| justify-content: center;
| |
| box-shadow: var(--box-shadow);
| |
| min-width: 0;
| |
| }
| |
|
| |
| .link-card__name {
| |
| background: rgba(0, 0, 0, 0.15);
| |
| padding: 4px 8px;
| |
| font-size: 0.9em;
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: space-between;
| |
| flex-wrap: nowrap;
| |
| }
| |
|
| |
| .link-card__image {
| |
| padding: 4px;
| |
| min-width: calc(30px - 4px);
| |
| }
| |
| }
| |
|
| |
| .link-card__side {
| |
| display: flex ;
| |
| width: 100%;
| |
| text-align: left;
| |
| justify-content: center;
| |
| box-shadow: var(--box-shadow);
| |
| }
| |
|
| |
| .link-card__side .link-card__name {
| |
| background: rgba(0, 0, 0, 0.15);
| |
| padding: 4px 8px;
| |
| font-size: 0.9em;
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: space-between;
| |
| flex-wrap: nowrap;
| |
| }
| |
|
| |
| .link-card__side .link-card__image {
| |
| padding: 4px;
| |
| min-width: calc(30px - 4px);
| |
| }
| |
Версия от 04:37, 4 апреля 2025
