Вилучено вміст Додано вміст
Немає опису редагування |
Немає опису редагування |
||
| Рядок 1: | Рядок 1: | ||
.char-ver-nav-wrap { |
.char-ver-nav-wrap { |
||
display: flex; |
display: flex; |
||
justify-content: |
justify-content: right; |
||
gap: 8px; |
gap: 8px; |
||
flex-wrap: wrap; |
flex-wrap: wrap; |
||
| Рядок 12: | Рядок 12: | ||
} |
} |
||
/* Базовий стиль для всіх кнопок */ |
|||
.char-ver-nav-link { |
.char-ver-nav-link { |
||
position: relative; |
|||
display: inline-flex; |
|||
| ⚫ | |||
justify-content: center; |
|||
padding: 8px 16px; |
padding: 8px 16px; |
||
border-radius: |
border-radius: 10px; |
||
font-weight: 600; |
font-weight: 600; |
||
overflow: hidden; |
|||
| ⚫ | |||
transition: all 0.2s ease; |
transition: all 0.2s ease; |
||
background: transparent; |
|||
} |
} |
||
| ⚫ | |||
/* Власний колір рамки для кожної кнопки */ |
|||
position: absolute; |
|||
| ⚫ | |||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
object-fit: cover; |
|||
z-index: 0; |
|||
} |
} |
||
| ⚫ | |||
.char-ver-nav-text { |
|||
| ⚫ | |||
position: relative; |
|||
z-index: 1; |
|||
| ⚫ | |||
} |
} |
||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
.char-ver-nav-spinoff { |
.char-ver-nav-spinoff { |
||
border: |
border: 2px solid #3498db; |
||
color: #3498db; |
color: #3498db; |
||
} |
} |
||
| ⚫ | |||
background: rgba(52, 152, 219, 0.15); |
|||
| ⚫ | |||
.char-ver-nav-webnovel { |
.char-ver-nav-webnovel { |
||
border: 1.5px solid #e67e22; |
border: 1.5px solid #e67e22; |
||
color: #e67e22; |
color: #e67e22; |
||
} |
} |
||
.char-ver-nav- |
.char-ver-nav-link:hover .char-ver-nav-bg { |
||
background: rgba(230, 126, 34, 0.15); |
|||
filter: brightness(1.2); |
|||
} |
} |
||
/* Спільний стиль для активної вкладки — перебиває власний колір рамки */ |
|||
.char-ver-nav-current { |
.char-ver-nav-current { |
||
| ⚫ | |||
| ⚫ | |||
border-color: #2ecc71; |
border-color: #2ecc71; |
||
} |
} |
||
Версія за 19:56, 2 липня 2026
.char-ver-nav-wrap {
display: flex;
justify-content: right;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.char-ver-nav-wrap a {
text-decoration: none;
color: inherit;
}
.char-ver-nav-link {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 16px;
border-radius: 10px;
font-weight: 600;
overflow: hidden;
transition: all 0.2s ease;
}
.char-ver-nav-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
.char-ver-nav-text {
position: relative;
z-index: 1;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
.char-ver-nav-ranobe {
border: 2px solid #2ecc71;
color: #2ecc71;
}
.char-ver-nav-spinoff {
border: 2px solid #3498db;
color: #3498db;
}
.char-ver-nav-webnovel {
border: 1.5px solid #e67e22;
color: #e67e22;
}
.char-ver-nav-link:hover .char-ver-nav-bg {
filter: brightness(1.2);
}
.char-ver-nav-current {
border-color: #2ecc71;
}