/*
* Sngine compatibility hooks for the original Vikinger stylesheet.
*
* Vikinger's styles.min.css remains the source for the design. The small
* compatibility layer below only bridges Sngine's existing wrappers and
* editor with the original Vikinger components and dimensions.
*/
body.vikinger-theme .svg-container {
display: inline-block;
line-height: 0;
vertical-align: middle;
}
/*
* Vikinger comments
*
* Diamond_pro styles .comment as a floated, speech-bubble component. The
* default theme uses Vikinger's post-comment geometry instead: the avatar is
* anchored to the card, the body occupies the remaining column, and actions
* stay in a compact metadata row. Keep these rules below the base Vikinger
* sheet and scope them to the Vikinger comment root so the shared Sngine
* handlers and the other theme components are untouched.
*/
body.vikinger-theme .vikinger-post-comments,
body.vikinger-theme .vikinger-comments {
overflow: visible;
background-color: #fff;
color: #3e3f5e;
}
body.vikinger-theme .vikinger-comments {
padding: 0;
}
body.vikinger-theme .vikinger-comments .vikinger-comments-filter {
display: flex;
align-items: center;
justify-content: flex-end;
min-height: 44px;
margin: 0;
padding: 8px 28px;
border-bottom: 1px solid #eaeaf5;
}
body.vikinger-theme .vikinger-comments .vikinger-comments-filter .btn-group .btn {
min-height: 28px;
padding: 4px 0;
border: 0;
background: transparent;
box-shadow: none;
color: #8f91ac;
font-size: .75rem;
font-weight: 700;
}
body.vikinger-theme .vikinger-comments .vikinger-comments-filter .btn-group .btn:hover,
body.vikinger-theme .vikinger-comments .vikinger-comments-filter .btn-group .btn:focus {
color: #615dfa;
}
body.vikinger-theme .vikinger-comments .vikinger-comments-filter .dropdown-menu {
min-width: 190px;
padding: 6px 0;
border: 1px solid #eaeaf5;
border-radius: 10px;
box-shadow: 0 8px 24px rgba(62, 63, 94, .14);
}
body.vikinger-theme .vikinger-comments .vikinger-comments-filter .dropdown-item {
padding: 9px 14px;
color: #3e3f5e;
font-size: .8125rem;
line-height: 1.2;
}
body.vikinger-theme .vikinger-comments .vikinger-comments-filter .dropdown-item:hover,
body.vikinger-theme .vikinger-comments .vikinger-comments-filter .dropdown-item:focus {
background-color: #f5f4ff;
color: #615dfa;
}
body.vikinger-theme .vikinger-comments .vikinger-comment-form {
min-height: 92px;
padding: 20px 28px 16px 84px;
border-top: 1px solid #eaeaf5;
border-bottom: 1px solid #eaeaf5;
border-radius: 0;
background-color: #fff;
position: relative;
}
body.vikinger-theme .vikinger-comments .vikinger-comment-avatar {
display: block;
width: 40px !important;
height: 44px;
margin: 0;
float: none;
position: absolute;
top: 22px;
left: 28px;
z-index: 2;
}
body.vikinger-theme .vikinger-comments .vikinger-comment-avatar-picture {
display: block;
width: 40px;
height: 44px;
min-width: 0;
min-height: 0;
padding: 0;
border-radius: 0;
background: transparent;
}
body.vikinger-theme .vikinger-comments .vikinger-comment-avatar .user-avatar {
display: block;
width: 40px;
height: 44px;
margin: 0;
position: static;
top: auto;
right: auto;
bottom: auto;
left: auto;
}
body.vikinger-theme .vikinger-comments .vikinger-comment-data {
width: 100%;
min-width: 0;
margin: 0;
}
body.vikinger-theme .vikinger-comments .vikinger-comment-form-inner {
width: 100%;
margin: 0;
padding: 0;
}
body.vikinger-theme .vikinger-comments .vikinger-comment-form-inner .form-row,
body.vikinger-theme .vikinger-comments .vikinger-comment-form-inner .form-item,
body.vikinger-theme .vikinger-comments .vikinger-comment-form-inner .form-input {
width: 100%;
margin: 0;
}
body.vikinger-theme .vikinger-comments .vikinger-comment-form-inner .form-input.small textarea {
width: 100%;
height: 48px;
min-height: 48px;
max-height: 160px;
padding: 12px 14px;
border: 1px solid #dedeea;
border-radius: 12px;
background-color: #fcfcfd;
color: #3e3f5e;
font-size: .875rem;
font-weight: 500;
line-height: 1.45;
overflow-y: auto;
resize: none;
transition: border-color .2s ease-in-out, box-shadow .2s ease-in-out, background-color .2s ease-in-out;
}
body.vikinger-theme .vikinger-comments .vikinger-comment-form-inner .form-input.small textarea:focus {
border-color: rgba(97, 93, 250, .55);
background-color: #fff;
box-shadow: 0 0 0 3px rgba(97, 93, 250, .1);
}
body.vikinger-theme .vikinger-comments .vikinger-comment-form-inner .form-input.small textarea::placeholder {
color: #adafca;
font-size: .875rem;
font-weight: 500;
}
body.vikinger-theme .vikinger-comments .vikinger-comment-form-inner > .x-form-tools,
body.vikinger-theme .vikinger-comments .js_reply-form > .post-comment-form .x-form-tools {
display: flex;
align-items: center;
justify-content: flex-end;
width: 100%;
height: 36px;
margin: 6px 0 0;
padding: 0;
gap: 4px;
position: static;
}
body.vikinger-theme .vikinger-comments .vikinger-comment-tools {
flex-wrap: nowrap;
list-style: none;
margin-inline-start: auto;
}
body.vikinger-theme .vikinger-comments .vikinger-comment-form-inner > .x-form-tools::before,
body.vikinger-theme .vikinger-comments .vikinger-comment-form-inner > .x-form-tools::after,
body.vikinger-theme .vikinger-comments .js_reply-form > .post-comment-form .x-form-tools::before,
body.vikinger-theme .vikinger-comments .js_reply-form > .post-comment-form .x-form-tools::after {
display: none;
}
body.vikinger-theme .vikinger-comments .x-form-tools > .action-list-item,
body.vikinger-theme .vikinger-comments .js_reply-form .x-form-tools > li {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 34px;
width: 34px;
height: 34px;
margin: 0;
padding: 0;
border-radius: 10px;
color: #adafca;
cursor: pointer;
transition: color .2s ease-in-out, background-color .2s ease-in-out, transform .2s ease-in-out;
}
body.vikinger-theme .vikinger-comments .x-form-tools > .action-list-item:hover,
body.vikinger-theme .vikinger-comments .x-form-tools > .action-list-item:focus-within,
body.vikinger-theme .vikinger-comments .js_reply-form .x-form-tools > li:hover,
body.vikinger-theme .vikinger-comments .js_reply-form .x-form-tools > li:focus-within {
background-color: #f0efff;
color: #615dfa;
transform: translateY(-1px);
}
body.vikinger-theme .vikinger-comments .x-form-tools .action-list-item-icon,
body.vikinger-theme .vikinger-comments .x-form-tools .js_x-uploader,
body.vikinger-theme .vikinger-comments .x-form-tools i {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
margin: 0;
color: currentColor;
fill: currentColor;
font-size: 16px;
line-height: 1;
}
body.vikinger-theme .vikinger-comments .x-form-tools .x-form-tools-post {
background-color: #615dfa;
color: #fff;
box-shadow: 0 4px 10px rgba(97, 93, 250, .2);
}
body.vikinger-theme .vikinger-comments .x-form-tools .x-form-tools-post:hover,
body.vikinger-theme .vikinger-comments .x-form-tools .x-form-tools-post:focus-within {
background-color: #4c48cc;
color: #fff;
}
body.vikinger-theme .vikinger-comments .x-form-tools .x-uploader {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
margin: 0;
}
/* Match Diamond_pro/Vikinger uploader behavior. The browser file control
* must remain available to receive a native picker click; x-hidden sets
* display:none and prevents that behavior in the default theme. */
body.vikinger-theme .x-uploader {
position: relative;
overflow: hidden;
}
body.vikinger-theme .x-uploader input.vikinger-uploader-input[type="file"] {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
font-size: 100px;
text-align: left;
opacity: 0;
outline: none;
background: #fff;
cursor: pointer;
display: block;
z-index: 2;
}
body.vikinger-theme .x-uploader .js_x-uploader {
position: relative;
z-index: 1;
}
body.vikinger-theme .vikinger-comments .post-comment-list {
width: 100%;
margin: 0;
padding: 0;
background-color: #fff;
}
body.vikinger-theme .vikinger-comments .post-comment-list > .post-comment {
display: block;
min-width: 0;
margin: 0;
padding: 22px 52px 22px 84px;
border-top: 1px solid #eaeaf5;
background-color: #fff;
position: relative;
}
body.vikinger-theme .vikinger-comments .post-comment-list > .post-comment:first-child {
border-top: 0;
}
body.vikinger-theme .vikinger-comments .vikinger-comment {
min-width: 0;
margin: 0;
padding: 0;
position: static;
background: transparent;
}
body.vikinger-theme .vikinger-comments .vikinger-comment .vikinger-comment-avatar {
top: 22px;
left: 28px;
}
body.vikinger-theme .vikinger-comments .vikinger-comment-inner-wrapper {
display: block;
width: 100%;
margin: 0;
}
body.vikinger-theme .vikinger-comments .vikinger-comment-inner {
display: block;
width: 100%;
padding: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
position: static;
}
body.vikinger-theme .vikinger-comments .vikinger-comment-inner::before {
display: none;
}
body.vikinger-theme .vikinger-comments .vikinger-comment-author {
display: flex;
align-items: center;
flex-wrap: wrap;
min-height: 20px;
color: #3e3f5e;
font-size: .875rem;
font-weight: 700;
line-height: 1.4;
}
body.vikinger-theme .vikinger-comments .vikinger-comment-author a {
color: #3e3f5e;
font-weight: 700;
}
body.vikinger-theme .vikinger-comments .vikinger-comment-author a:hover {
color: #615dfa;
}
body.vikinger-theme .vikinger-comments .vikinger-comment-author .verified-badge,
body.vikinger-theme .vikinger-comments .vikinger-comment-author .pro-badge {
display: inline-flex;
align-items: center;
width: 18px;
height: 18px;
margin-inline-start: 5px;
}
body.vikinger-theme .vikinger-comments .vikinger-comment-author .verified-badge svg,
body.vikinger-theme .vikinger-comments .vikinger-comment-author .pro-badge svg {
width: 18px;
height: 18px;
}
body.vikinger-theme .vikinger-comments .vikinger-comment-text {
display: block;
margin: 5px 0 0;
color: #3e3f5e;
font-size: .875rem;
font-weight: 500;
line-height: 1.7;
overflow-wrap: anywhere;
word-break: break-word;
}
body.vikinger-theme .vikinger-comments .vikinger-comment-text a {
color: #615dfa;
font-weight: 600;
}
body.vikinger-theme .vikinger-comments .vikinger-comment-text img {
display: block;
max-width: min(100%, 280px);
max-height: 240px;
margin-top: 10px;
border-radius: 10px;
object-fit: cover;
}
body.vikinger-theme .vikinger-comments .vikinger-comment-text > img.sticker {
max-width: min(100%, 220px);
margin: 6px 0 0;
object-fit: contain;
}
body.vikinger-theme .vikinger-comments .vikinger-comment-text audio {
display: block;
width: 100%;
max-width: 360px;
margin-top: 10px;
}
body.vikinger-theme .vikinger-comments .vikinger-comment-menu {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 8px;
color: #adafca;
position: absolute;
top: 18px;
right: 20px;
z-index: 4;
}
body.vikinger-theme .vikinger-comments .vikinger-comment-menu .dropdown-toggle-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
border-radius: 8px;
color: #adafca;
cursor: pointer;
font-size: 14px;
}
body.vikinger-theme .vikinger-comments .vikinger-comment-menu .dropdown-toggle-icon:hover,
body.vikinger-theme .vikinger-comments .vikinger-comment-menu .dropdown-toggle-icon:focus {
background-color: #f0efff;
color: #615dfa;
}
body.vikinger-theme .vikinger-comments .vikinger-comment-menu .dropdown-menu {
min-width: 170px;
margin-top: 6px;
padding: 6px 0;
border: 1px solid #eaeaf5;
border-radius: 10px;
box-shadow: 0 8px 24px rgba(62, 63, 94, .14);
}
body.vikinger-theme .vikinger-comments .vikinger-comment-menu .dropdown-item {
padding: 9px 14px;
color: #3e3f5e;
font-size: .8125rem;
line-height: 1.2;
}
body.vikinger-theme .vikinger-comments .vikinger-comment-menu .dropdown-item:hover,
body.vikinger-theme .vikinger-comments .vikinger-comment-menu .dropdown-item:focus {
background-color: #f5f4ff;
color: #615dfa;
}
body.vikinger-theme .vikinger-comments .vikinger-comment-actions {
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
min-height: 20px;
height: auto;
margin: 10px 0 0;
padding: 0;
gap: 14px;
}
body.vikinger-theme .vikinger-comments .vikinger-comment-has-sticker .vikinger-comment-actions {
margin-top: 18px;
}
body.vikinger-theme .vikinger-comments .vikinger-comment-actions > li {
display: inline-flex;
align-items: center;
min-height: 20px;
margin: 0;
padding: 0;
float: none;
}
body.vikinger-theme .vikinger-comments .vikinger-comment-actions .text-link,
body.vikinger-theme .vikinger-comments .vikinger-comment-actions .text-muted,
body.vikinger-theme .vikinger-comments .vikinger-comment-actions small {
color: #8f91ac;
font-size: .75rem;
font-weight: 700;
line-height: 20px;
text-decoration: none;
}
body.vikinger-theme .vikinger-comments .vikinger-comment-actions .text-link:hover,
body.vikinger-theme .vikinger-comments .vikinger-comment-actions .text-link:focus {
color: #615dfa;
text-decoration: none;
}
body.vikinger-theme .vikinger-comments .vikinger-comment-actions .reaction-btn {
display: inline-flex;
align-items: center;
width: auto;
min-width: 0;
height: 20px;
margin: 0;
}
body.vikinger-theme .vikinger-comments .vikinger-comment-actions .reaction-btn-name {
color: #8f91ac;
font-size: .75rem;
font-weight: 700;
line-height: 20px;
white-space: nowrap;
}
body.vikinger-theme .vikinger-comments .vikinger-comment-actions .reaction-btn-name:hover {
color: #615dfa;
}
body.vikinger-theme .vikinger-comments .vikinger-comment-actions .reactions-wrapper {
position: relative;
}
body.vikinger-theme .vikinger-comments .vikinger-comment-actions .reactions-container {
z-index: 99999;
}
body.vikinger-theme .vikinger-comments .reactions-stats {
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
}
body.vikinger-theme .vikinger-comments .reactions-stats .reaction-item-list {
display: inline-flex;
align-items: center;
}
body.vikinger-theme .vikinger-comments .reactions-stats .reaction-item,
body.vikinger-theme .vikinger-comments .reactions-stats-item {
display: inline-flex;
width: 18px;
height: 18px;
margin: 0;
position: relative;
}
body.vikinger-theme .vikinger-comments .reactions-stats .reaction-image {
display: block;
width: 18px;
height: 18px;
object-fit: contain;
}
body.vikinger-theme .vikinger-comments .reactions-stats .meta-line-text {
color: #8f91ac;
font-size: .75rem;
font-weight: 700;
}
body.vikinger-theme .vikinger-comments .js_replies-toggle {
margin: 10px 0 0;
padding: 0;
}
body.vikinger-theme .vikinger-comments .comment-replies {
margin: 12px 0 0;
padding: 0 0 0 16px;
border-left: 2px solid #eaeaf5;
}
body.vikinger-theme .vikinger-comments .comment-replies > .post-comment-list {
background: transparent;
}
body.vikinger-theme .vikinger-comments .comment-replies .post-comment-list > .post-comment {
padding: 16px 28px 16px 56px;
border-top: 1px solid #f0eff7;
background: transparent;
}
body.vikinger-theme .vikinger-comments .comment-replies .post-comment-list > .post-comment:first-child {
border-top: 0;
}
body.vikinger-theme .vikinger-comments .comment-replies .vikinger-comment-avatar {
top: 16px;
left: 0;
}
body.vikinger-theme .vikinger-comments .js_reply-form {
margin: 12px 0 0;
}
body.vikinger-theme .vikinger-comments .js_reply-form .post-comment-form {
min-height: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
}
body.vikinger-theme .vikinger-comments .js_reply-form .post-comment-form .form-input.small textarea {
height: 44px;
min-height: 44px;
max-height: 140px;
}
body.vikinger-theme .vikinger-comments .comment-voice-notes,
body.vikinger-theme .vikinger-comments .comment-attachments {
margin-top: 8px;
padding: 10px 12px 8px;
border: 1px solid #eaeaf5;
border-radius: 12px;
background-color: #fcfcfd;
color: #3e3f5e;
}
body.vikinger-theme .vikinger-comments .comment-voice-notes {
display: none;
}
body.vikinger-theme .vikinger-comments .voice-recording-wrapper {
color: #8f91ac;
font-size: .8125rem;
font-weight: 600;
}
body.vikinger-theme .vikinger-comments .btn-voice-start,
body.vikinger-theme .vikinger-comments .btn-voice-stop {
display: inline-flex;
align-items: center;
min-height: 32px;
padding: 6px 10px;
border-radius: 8px;
background-color: #f0efff;
color: #615dfa;
cursor: pointer;
font-size: .75rem;
font-weight: 700;
}
body.vikinger-theme .vikinger-comments .comment-attachments ul {
margin: 0;
padding: 0;
}
body.vikinger-theme .vikinger-comments .comment-attachments .progress {
height: 6px;
margin: 2px 0;
overflow: hidden;
border-radius: 200px;
background-color: #eaeaf5;
}
body.vikinger-theme .vikinger-comments .comment-attachments .progress-bar {
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #615dfa, #41efff);
}
/* Comment editing ---------------------------------------------------------
* Sngine inserts .comment-edit after hiding .comment-data. Give that
* dynamically inserted form the same Vikinger geometry in the feed and in
* the image lightbox, while preserving Sngine's existing edit controls. */
body.vikinger-theme .vikinger-comments .vikinger-comment-edit {
display: block;
width: 100%;
min-width: 0;
margin: 0;
padding: 0;
}
body.vikinger-theme .vikinger-comments .vikinger-comment-edit-form {
position: relative;
width: 100%;
min-width: 0;
margin: 0;
padding: 0;
background: transparent;
}
body.vikinger-theme .vikinger-comments .vikinger-comment-edit-form .js_update-comment-textarea {
display: block;
width: 100%;
min-height: 48px;
max-height: 160px;
box-sizing: border-box;
margin: 0;
padding: 12px 14px;
overflow-y: auto;
border: 1px solid #eaeaf5;
border-radius: 12px;
outline: 0;
background: #fcfcfd;
color: #3e3f5e;
font-size: .875rem;
font-weight: 500;
line-height: 1.45;
resize: none;
transition: border-color .2s ease-in-out, box-shadow .2s ease-in-out, background-color .2s ease-in-out;
}
body.vikinger-theme .vikinger-comments .vikinger-comment-edit-form .js_update-comment-textarea:focus {
border-color: rgba(97, 93, 250, .55);
background: #fff;
box-shadow: 0 0 0 3px rgba(97, 93, 250, .1);
}
body.vikinger-theme .vikinger-comments .vikinger-comment-edit-tools {
display: flex;
align-items: center;
justify-content: flex-end;
width: 100%;
height: 36px;
min-height: 36px;
margin: 6px 0 0;
padding: 0;
gap: 4px;
position: static;
list-style: none;
}
body.vikinger-theme .vikinger-comments .vikinger-comment-edit-tools::before,
body.vikinger-theme .vikinger-comments .vikinger-comment-edit-tools::after {
display: none;
}
body.vikinger-theme .vikinger-comments .vikinger-comment-edit-tools > li {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 34px;
width: 34px;
height: 34px;
margin: 0;
padding: 0;
float: none;
overflow: visible;
border-radius: 10px;
color: #adafca;
cursor: pointer;
transition: color .2s ease-in-out, background-color .2s ease-in-out, transform .2s ease-in-out;
}
body.vikinger-theme .vikinger-comments .vikinger-comment-edit-tools > li:hover,
body.vikinger-theme .vikinger-comments .vikinger-comment-edit-tools > li:focus-within {
background: #f0efff;
color: #615dfa;
transform: translateY(-1px);
}
body.vikinger-theme .vikinger-comments .vikinger-comment-edit-tools .js_x-uploader,
body.vikinger-theme .vikinger-comments .vikinger-comment-edit-tools i {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
margin: 0;
color: currentColor;
fill: currentColor;
font-size: 16px;
line-height: 1;
}
body.vikinger-theme .vikinger-comments .vikinger-comment-edit-tools .x-uploader {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
margin: 0;
}
body.vikinger-theme .vikinger-comments .vikinger-comment-edit > .text-end {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
margin-top: 8px !important;
}
body.vikinger-theme .vikinger-comments .vikinger-comment-edit > .text-end .btn {
min-height: 32px;
margin: 0 !important;
padding: 6px 14px;
border-radius: 9px;
font-size: .75rem;
font-weight: 700;
line-height: 18px;
}
body.vikinger-theme .vikinger-comments .vikinger-comment-edit > .text-end .js_unedit-comment {
border: 1px solid #eaeaf5;
background: #fff;
color: #8f91ac;
}
body.vikinger-theme .vikinger-comments .vikinger-comment-edit > .text-end .js_unedit-comment:hover,
body.vikinger-theme .vikinger-comments .vikinger-comment-edit > .text-end .js_unedit-comment:focus-visible {
border-color: #d9d7f3;
background: #f5f4ff;
color: #615dfa;
}
body.vikinger-theme .vikinger-comments .vikinger-comment-edit > .text-end .js_update-comment {
border-color: #615dfa;
background: #615dfa;
color: #fff;
box-shadow: 0 4px 10px rgba(97, 93, 250, .2);
}
body.vikinger-theme .vikinger-comments .vikinger-comment-edit > .text-end .js_update-comment:hover,
body.vikinger-theme .vikinger-comments .vikinger-comment-edit > .text-end .js_update-comment:focus-visible {
border-color: #4c48cc;
background: #4c48cc;
color: #fff;
}
body.vikinger-theme .vikinger-comments .js_comments-filter-loader {
min-height: 54px;
padding: 16px 0;
}
body.vikinger-theme .vikinger-comments .js_comments-filter-loader .loader,
body.vikinger-theme .vikinger-comments .js_see-more .loader {
display: inline-block;
width: 20px;
height: 20px;
padding: 0;
border: 3px solid #eaeaf5;
border-top-color: #615dfa;
border-radius: 50%;
animation: vikinger-comment-spin .7s linear infinite;
}
body.vikinger-theme .vikinger-comments .js_see-more {
margin: 0;
padding: 14px 0 18px;
border-top: 1px solid #eaeaf5;
}
body.vikinger-theme .vikinger-comments .js_see-more .text-link {
color: #615dfa;
font-size: .75rem;
font-weight: 700;
}
@keyframes vikinger-comment-spin {
to {
transform: rotate(360deg);
}
}
@media screen and (max-width: 680px) {
body.vikinger-theme .vikinger-comments .vikinger-comment-form {
min-height: 82px;
padding: 14px 16px 12px 68px;
}
body.vikinger-theme .vikinger-comments .vikinger-comment-avatar {
top: 16px;
left: 16px;
}
body.vikinger-theme .vikinger-comments .post-comment-list > .post-comment {
padding: 16px 44px 16px 68px;
}
body.vikinger-theme .vikinger-comments .vikinger-comment .vikinger-comment-avatar {
top: 16px;
left: 16px;
}
body.vikinger-theme .vikinger-comments .vikinger-comment-menu {
top: 12px;
right: 10px;
}
body.vikinger-theme .vikinger-comments .comment-replies {
padding-left: 10px;
}
body.vikinger-theme .vikinger-comments .comment-replies .post-comment-list > .post-comment {
padding: 14px 10px 14px 48px;
}
body.vikinger-theme .vikinger-comments .comment-replies .vikinger-comment-avatar {
top: 14px;
left: 0;
}
body.vikinger-theme .vikinger-comments .vikinger-comment-actions {
gap: 10px;
}
body.vikinger-theme .vikinger-comments .vikinger-comments-filter {
padding-inline: 16px;
}
}
/*
* Paid chat publisher modal.
*
* chat/publisher.php uses the legacy textarea publisher and does not receive
* the Vikinger post-modal marker classes. Keep this fallback scoped to that
* exact publisher so the normal post modal and every other Bootstrap modal
* keep their existing layout.
*/
body.vikinger-theme #modal:has(#publisher-wapper-modal:not(.vikinger-post-modal-publisher)) {
z-index: 10001;
overflow-x: hidden;
overflow-y: auto;
padding-right: 0 !important;
}
body.vikinger-theme #modal:has(#publisher-wapper-modal:not(.vikinger-post-modal-publisher)) > .modal-dialog {
display: flex;
align-items: center;
width: min(94vw, 720px);
max-width: 720px;
min-height: calc(100% - 32px);
margin: 16px auto;
}
body.vikinger-theme #modal:has(#publisher-wapper-modal:not(.vikinger-post-modal-publisher)) > .modal-dialog > .modal-content {
--vikinger-modal-text: #3e3f5e;
--vikinger-modal-muted: #adafca;
--vikinger-modal-primary: #615dfa;
--vikinger-modal-primary-dark: #4c48cc;
--vikinger-modal-accent: #23d2e2;
--vikinger-modal-border: #eaeaf5;
--vikinger-modal-surface: #fcfcfd;
display: flex;
flex-direction: column;
width: 100%;
max-height: calc(100vh - 32px);
overflow: hidden;
border: 1px solid var(--vikinger-modal-border);
border-radius: 16px;
background: #fff;
color: var(--vikinger-modal-text);
box-shadow: 0 18px 52px rgba(62, 63, 94, .22);
}
body.vikinger-theme #modal:has(#publisher-wapper-modal:not(.vikinger-post-modal-publisher)) > .modal-dialog > .modal-content > .modal-body {
display: flex;
flex: 1 1 auto;
min-height: 0;
padding: 0 !important;
overflow: hidden;
background: #fff;
}
body.vikinger-theme #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-height: 0;
max-height: 100%;
overflow: hidden;
background: #fff;
}
body.vikinger-theme #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) > .publisher-overlay {
display: none !important;
}
body.vikinger-theme #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) > .publisher[data-modal-mode="true"] {
display: flex;
flex: 1 1 auto;
flex-direction: column;
width: 100%;
min-height: 0;
margin: 0 !important;
padding: 0;
overflow: hidden;
border: 0;
border-radius: 0 !important;
background: #fff;
box-shadow: none;
position: relative;
}
body.vikinger-theme #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) .publisher-loader {
z-index: 5;
border-radius: inherit;
}
body.vikinger-theme #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) .publisher-close {
display: block;
position: absolute;
top: 12px;
right: 12px;
z-index: 4;
margin: 0;
}
body.vikinger-theme #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) .publisher-close .btn-close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
margin: 0;
padding: 0;
border-radius: 50%;
background-color: #f0efff;
background-size: 12px;
opacity: 1;
box-shadow: none;
transition: background-color .2s ease, transform .2s ease;
}
body.vikinger-theme #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) .publisher-close .btn-close:hover,
body.vikinger-theme #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) .publisher-close .btn-close:focus-visible {
background-color: #e4e2ff;
opacity: 1;
outline: 0;
transform: rotate(6deg);
}
body.vikinger-theme #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) .publisher-message {
display: flex !important;
align-items: flex-start;
flex: 0 0 auto;
gap: 14px;
min-height: 0;
margin: 0 !important;
padding: 22px 58px 18px 20px !important;
overflow: visible !important;
background: #fff;
}
body.vikinger-theme #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) .publisher-message > .publisher-avatar {
display: block;
flex: 0 0 44px;
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
margin: 0;
border: 3px solid rgba(97, 93, 250, .2);
border-radius: 50%;
object-fit: cover;
background: #f0efff;
box-shadow: 0 0 0 3px #fff;
}
body.vikinger-theme #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) .publisher-message > .colored-text-wrapper {
display: block;
flex: 1 1 auto;
width: auto;
min-width: 0;
margin: 0;
padding: 0;
}
body.vikinger-theme #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) .publisher-message textarea.js_autosize {
display: block;
width: 100%;
min-height: 86px;
max-height: 190px;
margin: 0;
padding: 14px 16px;
border: 1px solid var(--vikinger-modal-border);
border-radius: 14px;
background: var(--vikinger-modal-surface);
color: var(--vikinger-modal-text);
font-family: Rajdhani, sans-serif;
font-size: .9375rem;
font-weight: 500;
line-height: 1.55;
overflow-y: auto;
resize: none;
text-align: left;
transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
body.vikinger-theme #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) .publisher-message textarea.js_autosize:focus {
border-color: rgba(97, 93, 250, .55);
background: #fff;
box-shadow: 0 0 0 3px rgba(97, 93, 250, .1);
outline: 0;
}
body.vikinger-theme #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) .publisher-message textarea.js_autosize::placeholder {
color: var(--vikinger-modal-muted);
font-size: .9375rem;
font-weight: 500;
opacity: 1;
}
body.vikinger-theme #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) .publisher-slider {
display: flex !important;
flex: 1 1 auto;
flex-direction: column;
min-height: 0;
overflow-y: auto;
border-top: 1px solid var(--vikinger-modal-border);
scrollbar-color: #c8c6ef transparent;
scrollbar-width: thin;
}
body.vikinger-theme #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) .publisher-slider::-webkit-scrollbar {
width: 6px;
}
body.vikinger-theme #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) .publisher-slider::-webkit-scrollbar-thumb {
border-radius: 200px;
background: #c8c6ef;
}
body.vikinger-theme #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) .publisher-attachments {
width: 100%;
margin: 0;
padding: 12px 20px 0;
}
body.vikinger-theme #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) .publisher-meta {
display: none;
align-items: center;
min-height: 36px;
margin: 0;
padding: 8px 20px;
border-bottom: 1px solid var(--vikinger-modal-border);
background: var(--vikinger-modal-surface);
color: var(--vikinger-modal-text);
font-size: .8125rem;
font-weight: 600;
line-height: 1.3;
}
body.vikinger-theme #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) .publisher-meta .main-icon {
flex: 0 0 auto;
width: 16px !important;
height: 16px !important;
margin-inline-end: 6px !important;
color: var(--vikinger-modal-primary);
fill: currentColor;
}
body.vikinger-theme #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) .publisher-meta .float-end {
margin-inline-start: auto;
}
body.vikinger-theme #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) .publisher-meta .btn-close {
width: 24px;
height: 24px;
padding: 0;
background-size: 10px;
opacity: .65;
}
body.vikinger-theme #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) .publisher-tools-tabs {
flex: 0 0 auto;
margin: 0;
padding: 14px 20px 10px;
border-top: 1px solid var(--vikinger-modal-border);
background: #fff;
}
body.vikinger-theme #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) .publisher-tools-tabs > ul.row {
display: flex;
flex-wrap: wrap;
width: auto;
margin: 0 -4px;
padding: 0;
list-style: none;
}
body.vikinger-theme #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) .publisher-tools-tabs > ul.row > li {
flex: 0 0 50%;
width: 50%;
max-width: 50%;
margin: 0 0 8px;
padding: 0 4px;
list-style: none;
}
body.vikinger-theme #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) .publisher-tools-tab {
display: flex !important;
align-items: center;
justify-content: flex-start;
width: 100%;
min-height: 44px;
margin: 0;
padding: 10px 12px;
border: 1px solid transparent;
border-radius: 12px;
background: #f5f4ff;
color: var(--vikinger-modal-text);
font-size: .875rem;
font-weight: 700;
line-height: 1.2;
cursor: pointer;
transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
body.vikinger-theme #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) .publisher-tools-tab:hover,
body.vikinger-theme #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) .publisher-tools-tab:focus-within {
border-color: rgba(97, 93, 250, .2);
background: #e9e7ff;
color: var(--vikinger-modal-primary-dark);
outline: 0;
transform: translateY(-1px);
}
body.vikinger-theme #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) .publisher-tools-tab .main-icon,
body.vikinger-theme #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) .publisher-tools-tab .main-icon * {
flex: 0 0 auto;
width: 20px !important;
height: 20px !important;
margin-inline-end: 8px !important;
color: var(--vikinger-modal-primary);
fill: currentColor;
}
body.vikinger-theme #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) .publisher-tools-tab .js_x-uploader {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
}
body.vikinger-theme #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) .publisher-footer {
flex: 0 0 auto;
margin: 0;
padding: 16px 20px 20px;
border-top: 1px solid var(--vikinger-modal-border);
background: #fff;
}
body.vikinger-theme #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) .publisher-footer-options {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
}
body.vikinger-theme #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) #adult-toggle-wrapper {
display: flex;
align-items: center;
gap: 10px;
min-height: 48px;
margin: 0;
padding: 10px 12px;
border: 1px solid var(--vikinger-modal-border);
border-radius: 12px;
background: var(--vikinger-modal-surface);
}
body.vikinger-theme #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) #adult-toggle-wrapper > .avatar {
display: flex;
flex: 0 0 24px;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
margin: 0;
}
body.vikinger-theme #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) #adult-toggle-wrapper > div:nth-child(2) {
flex: 1 1 auto;
min-width: 0;
}
body.vikinger-theme #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) #adult-toggle-wrapper .form-label {
color: var(--vikinger-modal-text);
font-size: .875rem;
font-weight: 700;
line-height: 1.25;
}
body.vikinger-theme #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) #adult-toggle-wrapper .form-text {
color: var(--vikinger-modal-muted);
font-size: .75rem;
line-height: 1.3;
}
body.vikinger-theme #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) .publisher-footer-options .form-group {
width: 100%;
margin: 0;
}
body.vikinger-theme #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) .publisher-footer-options input.form-control,
body.vikinger-theme #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) .publisher-footer-options textarea.form-control {
width: 100%;
border: 1px solid var(--vikinger-modal-border);
border-radius: 12px;
background: var(--vikinger-modal-surface);
color: var(--vikinger-modal-text);
font-size: .875rem;
font-weight: 500;
}
body.vikinger-theme #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) .publisher-footer-options input.form-control {
height: 46px;
padding: 0 14px;
}
body.vikinger-theme #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) .publisher-footer-options textarea.form-control {
min-height: 86px;
padding: 12px 14px;
resize: vertical;
}
body.vikinger-theme #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) .publisher-footer-options input.form-control:focus,
body.vikinger-theme #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) .publisher-footer-options textarea.form-control:focus {
border-color: rgba(97, 93, 250, .55);
background: #fff;
box-shadow: 0 0 0 3px rgba(97, 93, 250, .1);
outline: 0;
}
body.vikinger-theme #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) #paid-image-wrapper .x-image {
min-height: 84px;
padding: 16px;
border: 1px dashed #c8c6ef;
border-radius: 12px;
background: var(--vikinger-modal-surface);
}
body.vikinger-theme #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) #paid-image-wrapper .form-text {
margin-top: 8px;
color: var(--vikinger-modal-muted);
font-size: .75rem;
line-height: 1.35;
}
body.vikinger-theme #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) .publisher-footer-buttons {
display: block;
width: 100%;
margin: 14px 0 0;
padding: 0;
}
body.vikinger-theme #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) .publisher-footer-buttons .d-grid {
display: block;
width: 100%;
}
body.vikinger-theme #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) .publisher-footer-buttons .btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 44px;
margin: 0 !important;
padding: 10px 18px;
border: 0;
border-radius: 12px;
background: var(--vikinger-modal-primary);
color: #fff;
font-size: .9375rem;
font-weight: 700;
box-shadow: 0 6px 16px rgba(97, 93, 250, .2);
transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
body.vikinger-theme #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) .publisher-footer-buttons .btn-primary:hover,
body.vikinger-theme #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) .publisher-footer-buttons .btn-primary:focus-visible {
background: var(--vikinger-modal-primary-dark);
box-shadow: 0 8px 20px rgba(97, 93, 250, .28);
outline: 0;
transform: translateY(-1px);
}
body.vikinger-theme.night-mode #modal:has(#publisher-wapper-modal:not(.vikinger-post-modal-publisher)) > .modal-dialog > .modal-content,
body.vikinger-theme.night-mode #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) > .publisher[data-modal-mode="true"],
body.vikinger-theme.night-mode #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) .publisher-message,
body.vikinger-theme.night-mode #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) .publisher-tools-tabs,
body.vikinger-theme.night-mode #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) .publisher-footer {
border-color: #34424d;
background: #26323b;
color: #d2e0eb;
}
body.vikinger-theme.night-mode #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) .publisher-message textarea.js_autosize,
body.vikinger-theme.night-mode #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) .publisher-footer-options input.form-control,
body.vikinger-theme.night-mode #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) .publisher-footer-options textarea.form-control {
border-color: #34424d;
background: #2f3d47;
color: #d2e0eb;
}
body.vikinger-theme.night-mode #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) .publisher-tools-tab,
body.vikinger-theme.night-mode #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) #adult-toggle-wrapper {
border-color: #34424d;
background: #2f3d47;
color: #d2e0eb;
}
@media screen and (max-width: 680px) {
body.vikinger-theme #modal:has(#publisher-wapper-modal:not(.vikinger-post-modal-publisher)) > .modal-dialog {
width: calc(100vw - 24px);
max-width: none;
min-height: calc(100% - 24px);
margin: 12px auto;
}
body.vikinger-theme #modal:has(#publisher-wapper-modal:not(.vikinger-post-modal-publisher)) > .modal-dialog > .modal-content {
max-height: calc(100vh - 24px);
border-radius: 14px;
}
body.vikinger-theme #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) .publisher-message {
gap: 10px;
padding: 20px 54px 14px 14px !important;
}
body.vikinger-theme #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) .publisher-message > .publisher-avatar {
flex-basis: 40px;
width: 40px;
height: 40px;
min-width: 40px;
min-height: 40px;
}
body.vikinger-theme #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) .publisher-message textarea.js_autosize {
min-height: 78px;
padding: 12px 14px;
font-size: .875rem;
}
body.vikinger-theme #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) .publisher-tools-tabs,
body.vikinger-theme #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) .publisher-footer {
padding-right: 14px;
padding-left: 14px;
}
body.vikinger-theme #modal #publisher-wapper-modal:not(.vikinger-post-modal-publisher) .publisher-tools-tabs > ul.row > li {
flex-basis: 100%;
width: 100%;
max-width: 100%;
}
}
/* Keep the Quill publisher input left aligned in every default-theme context. */
body.vikinger-theme .publisher .publisher-message .ql-editor {
text-align: left !important;
}
body.vikinger-theme .publisher .publisher-message .ql-editor > * {
text-align: left !important;
}
body.vikinger-theme .publisher .publisher-message .ql-editor.ql-blank::before {
left: 16px;
right: 16px;
inset-inline-start: 16px;
inset-inline-end: 16px;
text-align: left !important;
}
/*
* Reaction users modal
*
* The default Vikinger bundle does not include the Sngine reaction-list
* component. Keep this block scoped to the reaction modal classes so it
* cannot alter the post publisher or the other Bootstrap modals.
*/
body.vikinger-theme:has(#modal > .modal-dialog > .modal-content > .vikinger-reactions-modal-header) > .modal-backdrop {
z-index: 100050;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .vikinger-reactions-modal-header) {
z-index: 100100;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .vikinger-reactions-modal-header) > .modal-dialog {
width: min(94vw, 520px);
max-width: 520px;
margin: 1.75rem auto;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .vikinger-reactions-modal-header) > .modal-dialog > .modal-content {
overflow: hidden;
border: 1px solid #eaeaf5;
border-radius: 16px;
background: #fff;
box-shadow: 0 18px 46px rgba(32, 33, 66, .16);
}
body.vikinger-theme #modal .vikinger-reactions-modal-header {
position: relative;
display: flex;
align-items: center;
min-height: 64px;
padding: 0 58px 0 16px;
border: 0;
border-bottom: 1px solid #eaeaf5;
background: #fff;
}
body.vikinger-theme #modal .vikinger-reactions-modal-header .modal-title {
flex: 1 1 auto;
min-width: 0;
margin: 0;
}
body.vikinger-theme #modal .vikinger-reactions-modal-header .nav-tabs {
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: 4px;
max-width: 100%;
margin: 0;
padding: 0;
overflow-x: auto;
border: 0;
scrollbar-width: none;
}
body.vikinger-theme #modal .vikinger-reactions-modal-header .nav-tabs::-webkit-scrollbar {
display: none;
}
body.vikinger-theme #modal .vikinger-reactions-modal-header .nav-item {
flex: 0 0 auto;
margin: 0;
}
body.vikinger-theme #modal .vikinger-reactions-modal-header .nav-link {
display: flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 42px;
padding: 8px 12px;
border: 0;
border-bottom: 3px solid transparent;
border-radius: 10px 10px 0 0;
color: #8f91ac;
font-family: Rajdhani, sans-serif;
font-size: .8125rem;
font-weight: 700;
line-height: 1;
text-decoration: none;
transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
body.vikinger-theme #modal .vikinger-reactions-modal-header .nav-link:hover,
body.vikinger-theme #modal .vikinger-reactions-modal-header .nav-link:focus-visible {
color: #615dfa;
background: #f7f7ff;
outline: 0;
}
body.vikinger-theme #modal .vikinger-reactions-modal-header .nav-link.active {
border-bottom-color: #615dfa;
color: #615dfa;
background: #f3f2ff;
}
body.vikinger-theme #modal .vikinger-reactions-modal-header .nav-link > div,
body.vikinger-theme #modal .vikinger-reactions-modal-header .inline-emoji.no_animation {
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
margin: 0;
transform: none;
}
body.vikinger-theme #modal .vikinger-reactions-modal-header img.reaction-image.reaction-option-image {
display: block;
width: 20px !important;
height: 20px !important;
max-width: none;
object-fit: contain;
transform: none !important;
}
body.vikinger-theme #modal .vikinger-reactions-modal-header .btn-close {
position: absolute;
top: 14px;
right: 14px;
z-index: 1;
width: 36px;
height: 36px;
margin: 0;
padding: 0;
border: 0;
border-radius: 10px;
background-color: #f3f2ff;
background-size: 12px;
opacity: 1;
transition: background-color .2s ease, transform .2s ease;
}
body.vikinger-theme #modal .vikinger-reactions-modal-header .btn-close:hover,
body.vikinger-theme #modal .vikinger-reactions-modal-header .btn-close:focus-visible {
background-color: #e9e8ff;
box-shadow: none;
outline: 0;
transform: scale(1.04);
}
body.vikinger-theme #modal .vikinger-reactions-modal-body {
max-height: min(62vh, 560px);
padding: 0 !important;
overflow-y: auto;
background: #fff;
scrollbar-color: #cfd0e7 transparent;
scrollbar-width: thin;
}
body.vikinger-theme #modal .vikinger-reactions-modal-body::-webkit-scrollbar {
width: 8px;
}
body.vikinger-theme #modal .vikinger-reactions-modal-body::-webkit-scrollbar-track {
background: transparent;
}
body.vikinger-theme #modal .vikinger-reactions-modal-body::-webkit-scrollbar-thumb {
border: 2px solid #fff;
border-radius: 8px;
background: #cfd0e7;
}
body.vikinger-theme #modal .vikinger-reactions-modal-body > ul {
margin: 0;
padding: 0;
list-style: none;
}
body.vikinger-theme #modal .vikinger-reactions-modal-body .feeds-item {
border-bottom: 1px solid #eeeef6;
}
body.vikinger-theme #modal .vikinger-reactions-modal-body .feeds-item:last-child {
border-bottom: 0;
}
body.vikinger-theme #modal .vikinger-reactions-modal-body .data-container {
display: flex;
align-items: center;
width: 100%;
min-height: 64px;
box-sizing: border-box;
gap: 12px;
padding: 10px 18px;
color: #3e3f5e;
text-decoration: none;
transition: background-color .2s ease;
}
body.vikinger-theme #modal .vikinger-reactions-modal-body a.data-container:hover,
body.vikinger-theme #modal .vikinger-reactions-modal-body .data-container.clickable:hover {
background: #f8f8fc;
text-decoration: none;
}
body.vikinger-theme #modal .vikinger-reactions-modal-body .data-avatar {
position: relative;
display: block;
flex: 0 0 40px;
width: 40px;
height: 40px;
float: none;
line-height: 0;
}
body.vikinger-theme #modal .vikinger-reactions-modal-body .data-avatar > img {
display: block;
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
}
body.vikinger-theme #modal .vikinger-reactions-modal-body .data-reaction {
position: absolute;
right: -6px;
bottom: -4px;
left: auto;
display: flex;
align-items: center;
justify-content: center;
width: 21px;
height: 21px;
border: 2px solid #fff;
border-radius: 50%;
background: #fff;
box-shadow: 0 2px 6px rgba(32, 33, 66, .16);
}
body.vikinger-theme #modal .vikinger-reactions-modal-body .data-reaction .inline-emoji.no_animation {
display: flex;
align-items: center;
justify-content: center;
width: 17px;
height: 17px;
margin: 0;
transform: none;
}
body.vikinger-theme #modal .vikinger-reactions-modal-body .data-reaction img.reaction-image {
display: block;
width: 17px !important;
height: 17px !important;
max-width: none;
object-fit: contain;
transform: none !important;
}
body.vikinger-theme #modal .vikinger-reactions-modal-body .data-content {
flex: 1 1 auto;
min-width: 0;
padding: 0;
color: #3e3f5e;
font-size: .8125rem;
line-height: 1.25;
}
body.vikinger-theme #modal .vikinger-reactions-modal-body .data-content .float-end {
float: none !important;
margin-inline-start: 12px;
}
body.vikinger-theme #modal .vikinger-reactions-modal-body .data-content .mt5 {
margin-top: 0 !important;
}
body.vikinger-theme #modal .vikinger-reactions-modal-body .data-content .name,
body.vikinger-theme #modal .vikinger-reactions-modal-body .data-content .name a {
color: #3e3f5e;
font-weight: 700;
text-decoration: none;
}
body.vikinger-theme #modal .vikinger-reactions-modal-body .data-content .name a:hover,
body.vikinger-theme #modal .vikinger-reactions-modal-body .data-content .name a:focus-visible {
color: #615dfa;
text-decoration: underline;
}
body.vikinger-theme #modal .vikinger-reactions-modal-body > p.text-center {
margin: 0;
padding: 42px 18px;
color: #8f91ac !important;
font-size: .875rem;
}
body.vikinger-theme #modal .vikinger-reactions-modal-body .js_see-more {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 48px;
margin: 0;
padding: 12px 18px;
border: 0;
border-top: 1px solid #eeeef6;
border-radius: 0;
background: #fcfcfe;
color: #615dfa;
font-size: .8125rem;
font-weight: 700;
text-align: center;
cursor: pointer;
transition: background-color .2s ease;
}
body.vikinger-theme #modal .vikinger-reactions-modal-body .js_see-more:hover {
background: #f4f3ff;
text-decoration: none;
}
body.vikinger-theme #modal .vikinger-reactions-modal-body .js_see-more .loader.loader_small {
width: 18px;
height: 18px;
margin: 0;
padding: 0;
border: 3px solid #e7e7f5;
border-top-color: #615dfa;
border-radius: 50%;
animation: vikinger-reactions-modal-spin .75s linear infinite;
}
@keyframes vikinger-reactions-modal-spin {
to {
transform: rotate(360deg);
}
}
body.vikinger-theme.night-mode #modal .vikinger-reactions-modal-header,
body.vikinger-theme.night-mode #modal .vikinger-reactions-modal-body,
body.vikinger-theme.night-mode #modal:has(> .modal-dialog > .modal-content > .vikinger-reactions-modal-header) > .modal-dialog > .modal-content {
border-color: #34424d;
background: #26323b;
}
body.vikinger-theme.night-mode #modal .vikinger-reactions-modal-header .nav-link {
color: #9daebb;
}
body.vikinger-theme.night-mode #modal .vikinger-reactions-modal-header .nav-link:hover,
body.vikinger-theme.night-mode #modal .vikinger-reactions-modal-header .nav-link:focus-visible,
body.vikinger-theme.night-mode #modal .vikinger-reactions-modal-header .nav-link.active {
color: #83caff;
background: #31414d;
}
body.vikinger-theme.night-mode #modal .vikinger-reactions-modal-header .nav-link.active {
border-bottom-color: #3bc0ff;
}
body.vikinger-theme.night-mode #modal .vikinger-reactions-modal-header .btn-close {
background-color: #34424d;
filter: invert(1) grayscale(1) brightness(1.8);
}
body.vikinger-theme.night-mode #modal .vikinger-reactions-modal-body .feeds-item,
body.vikinger-theme.night-mode #modal .vikinger-reactions-modal-body .js_see-more {
border-color: #34424d;
}
body.vikinger-theme.night-mode #modal .vikinger-reactions-modal-body a.data-container:hover,
body.vikinger-theme.night-mode #modal .vikinger-reactions-modal-body .data-container.clickable:hover,
body.vikinger-theme.night-mode #modal .vikinger-reactions-modal-body .js_see-more:hover {
background: #2d3b45;
}
body.vikinger-theme.night-mode #modal .vikinger-reactions-modal-body .data-content,
body.vikinger-theme.night-mode #modal .vikinger-reactions-modal-body .data-content .name,
body.vikinger-theme.night-mode #modal .vikinger-reactions-modal-body .data-content .name a {
color: #d2e0eb;
}
body.vikinger-theme.night-mode #modal .vikinger-reactions-modal-body .data-content .name a:hover,
body.vikinger-theme.night-mode #modal .vikinger-reactions-modal-body .data-content .name a:focus-visible,
body.vikinger-theme.night-mode #modal .vikinger-reactions-modal-body .js_see-more {
color: #83caff;
}
body.vikinger-theme.night-mode #modal .vikinger-reactions-modal-body .data-reaction {
border-color: #26323b;
background: #26323b;
}
body.vikinger-theme.night-mode #modal .vikinger-reactions-modal-body::-webkit-scrollbar-thumb {
border-color: #26323b;
background: #526674;
}
@media screen and (max-width: 575px) {
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .vikinger-reactions-modal-header) > .modal-dialog {
width: calc(100vw - 24px);
max-width: none;
margin: 12px auto;
}
body.vikinger-theme #modal .vikinger-reactions-modal-header {
min-height: 58px;
padding-right: 54px;
padding-left: 10px;
}
body.vikinger-theme #modal .vikinger-reactions-modal-header .nav-link {
min-width: 40px;
min-height: 38px;
padding-right: 9px;
padding-left: 9px;
}
body.vikinger-theme #modal .vikinger-reactions-modal-header .btn-close {
top: 11px;
right: 10px;
}
body.vikinger-theme #modal .vikinger-reactions-modal-body {
max-height: calc(100vh - 108px);
}
body.vikinger-theme #modal .vikinger-reactions-modal-body .data-container {
min-height: 58px;
padding: 9px 12px;
}
body.vikinger-theme #modal .vikinger-reactions-modal-body .data-avatar {
flex-basis: 36px;
width: 36px !important;
height: 36px;
}
body.vikinger-theme #modal .vikinger-reactions-modal-body .data-avatar > img {
width: 36px;
height: 36px;
}
}
/* -------------------------------------------------------------------------- */
/* Vikinger chat translation trigger */
/* -------------------------------------------------------------------------- */
body.vikinger-theme .chat-widget-speaker-body .translate {
display: block;
width: max-content;
max-width: 100%;
margin-top: 8px;
padding: 2px 0;
color: #adafca;
font-family: Rajdhani, sans-serif;
font-size: 12px;
font-weight: 700;
line-height: 1.35;
letter-spacing: .01em;
cursor: pointer;
user-select: none;
touch-action: manipulation;
transition: color .2s ease, opacity .2s ease;
}
body.vikinger-theme .chat-widget-speaker-body .translate:hover {
color: #615dfa;
text-decoration: underline;
}
body.vikinger-theme .chat-widget-speaker-body .translate:focus-visible {
outline: 2px solid rgba(97, 93, 250, .35);
outline-offset: 3px;
border-radius: 4px;
}
body.vikinger-theme .chat-widget-speaker.right .chat-widget-speaker-body .translate {
margin-right: 0;
margin-left: auto;
text-align: right;
}
body.vikinger-theme.night-mode .chat-widget-speaker-body .translate {
color: #8f9bb5;
}
body.vikinger-theme.night-mode .chat-widget-speaker-body .translate:hover {
color: #fff;
}
@media screen and (max-width: 767px) {
body.vikinger-theme .chat-widget-speaker-body .translate {
margin-top: 7px;
font-size: 11px;
}
}
html[dir="RTL"] body.vikinger-theme .vikinger-comments .vikinger-comment-form {
padding-right: 84px;
padding-left: 28px;
}
html[dir="RTL"] body.vikinger-theme .vikinger-comments .vikinger-comment-avatar {
right: 28px;
left: auto;
}
html[dir="RTL"] body.vikinger-theme .vikinger-comments .post-comment-list > .post-comment {
padding-right: 84px;
padding-left: 52px;
}
html[dir="RTL"] body.vikinger-theme .vikinger-comments .vikinger-comment .vikinger-comment-avatar {
right: 28px;
left: auto;
}
html[dir="RTL"] body.vikinger-theme .vikinger-comments .vikinger-comment-menu {
right: auto;
left: 20px;
}
html[dir="RTL"] body.vikinger-theme .vikinger-comments .comment-replies {
padding-right: 16px;
padding-left: 0;
border-right: 2px solid #eaeaf5;
border-left: 0;
}
html[dir="RTL"] body.vikinger-theme .vikinger-comments .comment-replies .post-comment-list > .post-comment {
padding-right: 56px;
padding-left: 28px;
}
html[dir="RTL"] body.vikinger-theme .vikinger-comments .comment-replies .vikinger-comment-avatar {
right: 0;
left: auto;
}
@media screen and (max-width: 680px) {
html[dir="RTL"] body.vikinger-theme .vikinger-comments .vikinger-comment-form {
padding-right: 68px;
padding-left: 16px;
}
html[dir="RTL"] body.vikinger-theme .vikinger-comments .vikinger-comment-avatar {
right: 16px;
}
html[dir="RTL"] body.vikinger-theme .vikinger-comments .post-comment-list > .post-comment {
padding-right: 68px;
padding-left: 44px;
}
html[dir="RTL"] body.vikinger-theme .vikinger-comments .vikinger-comment .vikinger-comment-avatar {
right: 16px;
}
html[dir="RTL"] body.vikinger-theme .vikinger-comments .vikinger-comment-menu {
right: auto;
left: 10px;
}
html[dir="RTL"] body.vikinger-theme .vikinger-comments .comment-replies {
padding-right: 10px;
}
html[dir="RTL"] body.vikinger-theme .vikinger-comments .comment-replies .post-comment-list > .post-comment {
padding-right: 48px;
padding-left: 10px;
}
}
body.vikinger-theme .svg-container > svg {
display: block;
width: 100%;
height: 100%;
}
body.vikinger-theme .x-hidden {
display: none;
}
body.vikinger-theme .pointer {
cursor: pointer;
}
/* Diamond_pro uses a compact publisher trigger in the newsfeed and loads the
* complete editor only after the user activates it. Keep the same interaction
* in the Vikinger shell while using Vikinger's card, spacing, and palette. */
body.vikinger-theme .dummy-publisher-trigger {
display: block;
width: 100%;
min-width: 0;
margin: 0 0 20px;
cursor: pointer;
outline: 0;
}
body.vikinger-theme .dummy-publisher-trigger:focus-visible {
border-radius: 12px;
box-shadow: 0 0 0 3px rgba(97, 93, 250, .18);
}
body.vikinger-theme .dummy-publisher-card {
display: block;
width: 100%;
min-width: 0;
margin: 0;
padding: 0 !important;
overflow: hidden;
border: 1px solid #eaeaf5;
border-radius: 12px;
background: #fff;
box-shadow: 0 8px 24px rgba(62, 63, 94, .06);
}
body.vikinger-theme .dummy-publisher-top {
display: flex;
align-items: center;
gap: 14px;
min-height: 76px;
min-width: 0;
padding: 14px 18px;
}
body.vikinger-theme .dummy-pub-avatar {
display: block;
width: 44px;
height: 44px;
flex: 0 0 44px;
border: 3px solid #fff;
border-radius: 50%;
background: #eaeaf5;
box-shadow: 0 0 0 1px #eaeaf5;
object-fit: cover;
}
body.vikinger-theme .dummy-publisher-input {
display: flex;
align-items: center;
width: 100%;
min-width: 0;
min-height: 42px;
box-sizing: border-box;
padding: 9px 16px;
overflow: hidden;
border: 1px solid #eaeaf5;
border-radius: 22px;
background: #fcfcfd;
color: #adafca;
font-size: .875rem;
line-height: 1.45;
text-overflow: ellipsis;
white-space: nowrap;
}
body.vikinger-theme .dummy-publisher-actions {
display: flex;
align-items: center;
gap: 6px;
min-height: 58px;
padding: 8px 12px;
border-top: 1px solid #eaeaf5;
}
body.vikinger-theme .dummy-publisher-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-width: 0;
flex: 1 1 0;
padding: 9px 12px;
border-radius: 8px;
color: #8f91ac;
font-size: .8125rem;
font-weight: 700;
line-height: 1.2;
transition: background-color .2s ease, color .2s ease;
}
body.vikinger-theme .dummy-publisher-trigger:hover .dummy-publisher-btn,
body.vikinger-theme .dummy-publisher-trigger:focus-visible .dummy-publisher-btn {
background: #f5f4ff;
color: #615dfa;
}
body.vikinger-theme .dummy-publisher-btn .dummy-pub-icon,
body.vikinger-theme .dummy-publisher-btn .dummy-pub-icon * {
width: 22px;
height: 22px;
flex: 0 0 22px;
color: #615dfa !important;
fill: #615dfa !important;
}
/* The staging action is only useful when the heartbeat has found new posts. */
body.vikinger-theme .posts-staging-btn {
display: block;
width: max-content;
max-width: 100%;
margin: 0 auto 20px;
}
body.vikinger-theme .posts-staging-btn.x-hidden {
display: none;
}
/* Hashtags are shown once in Vikinger's dedicated tag row, not inside the
* post text where Sngine's parser originally renders their links. */
body.vikinger-theme .post-body.vikinger-post-status .vikinger-post-text a[href*="/search/hashtag/"] {
display: none;
}
/* Promoted posts keep the complete Vikinger feed layout. This frame is the
* only visual distinction added for sponsored content. */
body.vikinger-theme .post.boosted {
border: 2px solid #ffa412;
}
/* Diamond_pro renders the promotion marker as a small gold badge attached to
* the card corner. Vikinger has no native rule for this Sngine class, so keep
* the marker out of the post flow and inherit the icon color from the badge. */
body.vikinger-theme .post.boosted,
body.vikinger-theme .product.boosted {
position: relative;
}
body.vikinger-theme .post.boosted > .boosted-icon,
body.vikinger-theme .product.boosted > .boosted-icon {
position: absolute;
top: -15px;
right: -5px;
z-index: 3;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
border-radius: 50%;
background-color: #ffa412;
color: #fff;
font-size: 16px;
line-height: 1;
text-align: center;
transform: rotate(-20deg);
cursor: help;
box-shadow: 0 3px 8px rgba(62, 63, 94, .16);
}
body.vikinger-theme .post.boosted > .boosted-icon i,
body.vikinger-theme .product.boosted > .boosted-icon i {
display: block;
margin: 0;
color: inherit;
font-size: 1em;
line-height: 1;
}
/* Diamond_pro uses the lighter gold for marketplace-style cards. */
body.vikinger-theme .product.boosted {
border: 2px solid #f9b340;
}
body.vikinger-theme .product.boosted > .boosted-icon {
right: -15px;
background-color: #f9b340;
z-index: 4;
}
html[dir="RTL"] body.vikinger-theme .post.boosted > .boosted-icon,
html[dir="RTL"] body.vikinger-theme .product.boosted > .boosted-icon {
right: auto;
left: -5px;
}
html[dir="RTL"] body.vikinger-theme .product.boosted > .boosted-icon {
right: auto;
left: -15px;
}
/* Diamond_pro gives promoted sections a compact posts-filter divider. Keep
* that same spacing model in the Vikinger shell and use the sponsored gold as
* a short accent so the heading belongs visually to the promoted post below. */
body.vikinger-theme .vikinger-promoted-posts-filter {
display: flex;
align-items: center;
width: 100%;
min-height: 42px;
margin: 0 0 20px;
padding: 0 0 8px;
border-bottom: 1px solid #eaeaf5;
color: #3e3f5e;
font-family: Rajdhani, sans-serif;
font-size: .875rem;
font-weight: 700;
line-height: 34px;
position: relative;
}
body.vikinger-theme .vikinger-promoted-posts-filter::after {
content: "";
width: 44px;
height: 2px;
border-radius: 200px;
background-color: #ffa412;
position: absolute;
right: auto;
bottom: -1px;
left: 0;
}
body.vikinger-theme .vikinger-promoted-posts-filter > span {
display: inline-flex;
align-items: center;
min-height: 34px;
color: inherit;
}
html[dir="RTL"] body.vikinger-theme .vikinger-promoted-posts-filter::after {
right: 0;
left: auto;
}
/* Header panels must start closed at first paint. vikinger.js opens them only
* after the corresponding trigger is clicked, so the page never flashes the
* create, notification, message, settings, or search panel while loading. */
body.vikinger-theme .header .header-dropdown,
body.vikinger-theme .header .header-settings-dropdown,
body.vikinger-theme .header .header-search-dropdown {
opacity: 0;
visibility: hidden;
transform: translate(0, -40px);
}
/* The native search fallback is injected by #search-for after the AJAX
* request returns no matches. It does not use Vikinger's normal
* dropdown-box-list-item markup, so give this state the same spacing,
* typography and hover surface as the original dropdown. */
body.vikinger-theme .header .header-search-dropdown {
overflow: hidden;
border-radius: 10px;
background-color: #fff;
box-shadow: 3px 5px 40px 0 rgba(94, 92, 154, .06);
transition: transform .4s ease-in-out, opacity .4s ease-in-out, visibility .4s ease-in-out;
will-change: transform, opacity;
}
/* The live Sngine results use the same Vikinger dropdown markup, but add the
* "See All Results" footer. The original dropdown reserves 60px for its
* absolute footer; padding-bottom-small would otherwise let the footer cover
* the last result. */
body.vikinger-theme .header .header-search-dropdown#search-results {
padding-bottom: 60px;
}
/* Search result content (members, pages, groups and events). Keep these
* rules scoped to the header search so the generic dropdown components used by
* the rest of Sngine are not changed. */
body.vikinger-theme .header .header-search-dropdown .vikinger-search-category {
padding: 28px 28px 4px;
}
body.vikinger-theme .header .header-search-dropdown .vikinger-search-category-title,
body.vikinger-theme .header .header-search-dropdown .dropdown-box-category-title {
color: #adafca;
font-family: Rajdhani, sans-serif;
font-size: .75rem;
font-weight: 700;
line-height: 1em;
text-transform: uppercase;
}
body.vikinger-theme .header .header-search-dropdown .vikinger-search-list {
height: auto;
max-height: 420px;
overflow-y: auto;
}
body.vikinger-theme .header .header-search-dropdown .vikinger-search-list > .dropdown-box-list-item {
display: block;
padding: 10px 28px;
color: #3e3f5e;
text-decoration: none;
transition: background-color .2s ease-in-out;
}
body.vikinger-theme .header .header-search-dropdown .vikinger-search-list > .dropdown-box-list-item:hover,
body.vikinger-theme .header .header-search-dropdown .vikinger-search-list > .dropdown-box-list-item:focus-visible {
background-color: #eaeaf5;
outline: 0;
}
body.vikinger-theme .header .header-search-dropdown .user-status.notification {
min-height: 44px;
padding: 2px 60px 0 52px;
position: relative;
}
body.vikinger-theme .header .header-search-dropdown .user-status.notification .user-status-avatar {
position: absolute;
top: 0;
left: 0;
}
body.vikinger-theme .header .header-search-dropdown .user-status.notification .user-status-title {
color: #3e3f5e;
font-family: Rajdhani, sans-serif;
font-size: .875rem;
font-weight: 500;
line-height: 1.4285714286em;
}
body.vikinger-theme .header .header-search-dropdown .user-status.notification .user-status-title .bold {
color: #3e3f5e;
font-weight: 700;
}
body.vikinger-theme .header .header-search-dropdown .user-status.notification .user-status-text {
margin-top: 4px;
color: #3e3f5e;
font-family: Rajdhani, sans-serif;
font-size: .875rem;
font-weight: 500;
line-height: 1em;
}
body.vikinger-theme .header .header-search-dropdown .user-status.notification .user-status-icon {
width: 20px;
height: 20px;
opacity: .4;
position: absolute;
top: 10px;
right: 0;
}
body.vikinger-theme .header .header-search-dropdown .user-status.notification .user-status-icon svg {
display: block;
width: 20px;
height: 20px;
fill: #3e3f5e;
}
body.vikinger-theme .header .header-search-dropdown#search-results .dropdown-widget-footer {
display: block;
width: 100%;
height: 60px;
line-height: 60px;
box-sizing: border-box;
}
body.vikinger-theme.night-mode .header .header-search-dropdown .vikinger-search-list > .dropdown-box-list-item:hover,
body.vikinger-theme.night-mode .header .header-search-dropdown .vikinger-search-list > .dropdown-box-list-item:focus-visible {
background-color: #2d3b45;
}
body.vikinger-theme.night-mode .header .header-search-dropdown .user-status.notification .user-status-title,
body.vikinger-theme.night-mode .header .header-search-dropdown .user-status.notification .user-status-title .bold,
body.vikinger-theme.night-mode .header .header-search-dropdown .user-status.notification .user-status-text,
body.vikinger-theme.night-mode .header .header-search-dropdown .user-status.notification .user-status-icon svg {
color: #c1d4e3;
fill: #c1d4e3;
}
body.vikinger-theme .header .header-search-dropdown .dropdown-widget-body {
width: 100%;
max-width: 100%;
min-width: 0;
height: auto;
max-height: 420px;
overflow-y: auto;
box-sizing: border-box;
}
body.vikinger-theme .header .header-search-dropdown .vikinger-search-fallback {
width: 100%;
min-height: 44px;
padding: 10px !important;
box-sizing: border-box;
}
body.vikinger-theme .header .header-search-dropdown .vikinger-search-fallback > a {
display: flex;
align-items: center;
width: 100%;
min-height: 40px;
padding: 0 14px;
border-radius: 8px;
color: #3e3f5e;
font-family: Rajdhani, sans-serif;
font-size: .875rem;
font-weight: 700;
line-height: 1.2;
box-sizing: border-box;
transition: color .2s ease-in-out, background-color .2s ease-in-out;
}
body.vikinger-theme .header .header-search-dropdown .vikinger-search-fallback > a > i {
flex: 0 0 auto;
margin-right: 8px;
color: #615dfa;
font-size: .875rem;
}
body.vikinger-theme .header .header-search-dropdown .vikinger-search-fallback > a:hover,
body.vikinger-theme .header .header-search-dropdown .vikinger-search-fallback > a:focus-visible {
background-color: #eaeaf5;
color: #615dfa;
text-decoration: none;
outline: 0;
}
body.vikinger-theme .header .header-search-dropdown .dropdown-widget-footer {
display: block;
width: 100%;
box-sizing: border-box;
}
/* Live header counters are emitted by the legacy header templates as a
* `.counter.red` span. Vikinger supplies the action icon, but the default
* theme did not include the badge layer, so an unread count was displayed as
* ordinary inline text next to the icon. Keep the rule scoped to live header
* actions so Bootstrap counters elsewhere are not affected. */
body.vikinger-theme .header .action-list-item-wrap > .action-list-item {
position: relative;
}
body.vikinger-theme .header .action-list-item-wrap > .action-list-item > .counter.red {
position: absolute;
top: 13px;
right: 4px;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 16px;
height: 16px;
padding: 0 4px;
border: 2px solid #615dfa;
border-radius: 999px;
background-color: #ff3d65;
color: #fff;
box-sizing: border-box;
font-family: Rajdhani, sans-serif;
font-size: 10px;
font-weight: 700;
line-height: 1;
letter-spacing: .01em;
text-align: center;
white-space: nowrap;
pointer-events: none;
}
/* The badge rule above is intentionally more specific than the legacy
* utility class, so preserve the utility's hidden state explicitly. */
body.vikinger-theme .header .action-list-item-wrap > .action-list-item > .counter.red.x-hidden {
display: none !important;
}
body.vikinger-theme.night-mode .header .action-list-item-wrap > .action-list-item > .counter.red {
border-color: #262d34;
}
body.vikinger-theme.night-mode .header .header-search-dropdown {
background-color: #262d34;
box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
}
body.vikinger-theme.night-mode .header .header-search-dropdown .vikinger-search-fallback > a {
color: #c1d4e3;
}
body.vikinger-theme.night-mode .header .header-search-dropdown .vikinger-search-fallback > a:hover,
body.vikinger-theme.night-mode .header .header-search-dropdown .vikinger-search-fallback > a:focus-visible {
background-color: #2d3b45;
color: #fff;
}
/* Feed overlays must start closed before the JavaScript bindings run. The
* native handlers reopen them with an inline display value on hover/click, so
* this only removes the first-paint flash and does not change interactions. */
body.vikinger-theme .reactions-container,
body.vikinger-theme [data-vikinger-filter-menu] {
display: none;
}
/* A lazy reaction image has no src until hover/focus hydration. Hide that
* empty image node so the browser's broken-image glyph cannot flash. */
body.vikinger-theme .reactions-container img[data-vikinger-reaction-src] {
visibility: hidden;
}
body.vikinger-theme .reactions-wrapper img.reaction-image,
body.vikinger-theme .reactions-container img.reaction-image {
display: block;
object-fit: contain;
}
/* Reaction labels must remain visible above the picker and outside the action
* row's clipping context. The original Vikinger picker uses the same XM
* tooltip component for these labels. */
body.vikinger-theme .post-actions .reactions-wrapper,
body.vikinger-theme .reel-action-btn .reactions-wrapper,
body.vikinger-theme .vikinger-comments .reactions-wrapper,
body.vikinger-theme .reactions-container {
overflow: visible;
}
body.vikinger-theme .reactions-container .xm-tooltip {
display: block;
width: max-content;
max-width: none;
pointer-events: none;
white-space: nowrap;
}
body.vikinger-theme .reactions-container .xm-tooltip-text {
margin: 0;
white-space: nowrap;
}
/* The original Vikinger tabs stay on one line; Sngine keeps the extra post
* types in the existing More dropdown so the feed controls keep that layout. */
body.vikinger-theme .vikinger-post-filter-tabs > .simple-tab-item {
flex: 0 0 auto;
font-family: Rajdhani, sans-serif;
line-height: 1em;
white-space: nowrap;
}
/* The extra Sngine controls use a wrapper for their dropdown. Keep the
* wrapper typography identical to Vikinger's original tab elements. */
body.vikinger-theme .vikinger-post-filter-tabs {
position: relative;
z-index: 10;
}
body.vikinger-theme .vikinger-post-filter-tabs > [data-vikinger-filter-menu-wrap] {
position: relative;
z-index: 1;
display: block;
flex: 0 0 auto;
opacity: 1;
overflow: visible;
}
body.vikinger-theme .vikinger-post-filter-tabs > [data-vikinger-filter-menu-wrap]:focus-within,
body.vikinger-theme .vikinger-post-filter-tabs > [data-vikinger-filter-menu-wrap].active {
z-index: 10000;
}
body.vikinger-theme .vikinger-post-filter-tabs [data-vikinger-filter-menu-toggle] {
color: inherit;
font: inherit;
line-height: inherit;
}
/* Sngine's native menu remains in the DOM as the AJAX source of truth, but
* must never render as a second filter dropdown beside the Vikinger controls. */
body.vikinger-theme .vikinger-native-posts-filter {
display: none !important;
}
/* Keep the Vikinger dropdowns usable when the country list is long. */
body.vikinger-theme .vikinger-post-filter-more [data-vikinger-filter-menu],
body.vikinger-theme .vikinger-post-filter-country [data-vikinger-filter-menu],
body.vikinger-theme .vikinger-filter-menu-portal {
color: #3e3f5e;
opacity: 1;
background-color: #fff;
max-height: min(360px, calc(100vh - 160px));
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
}
body.vikinger-theme .vikinger-post-filter-more [data-vikinger-filter-menu] {
width: 220px;
max-width: calc(100vw - 24px);
}
body.vikinger-theme .vikinger-filter-menu-portal.vikinger-filter-menu-more {
width: 220px;
max-width: calc(100vw - 24px);
}
body.vikinger-theme .vikinger-post-filter-country [data-vikinger-filter-menu] {
width: 280px;
max-width: calc(100vw - 24px);
}
body.vikinger-theme .vikinger-filter-menu-portal.vikinger-filter-menu-country {
width: 280px;
max-width: calc(100vw - 24px);
}
body.vikinger-theme .vikinger-post-filter-more [data-vikinger-filter-menu] .simple-dropdown-link,
body.vikinger-theme .vikinger-post-filter-country [data-vikinger-filter-menu] .simple-dropdown-link,
body.vikinger-theme .vikinger-filter-menu-portal .simple-dropdown-link {
display: block;
width: 100%;
box-sizing: border-box;
color: #3e3f5e;
opacity: 1;
line-height: 1.3;
white-space: normal;
overflow-wrap: anywhere;
}
body.vikinger-theme .vikinger-post-filter-more [data-vikinger-filter-menu] .simple-dropdown-link:hover,
body.vikinger-theme .vikinger-post-filter-more [data-vikinger-filter-menu] .simple-dropdown-link:focus-visible,
body.vikinger-theme .vikinger-post-filter-country [data-vikinger-filter-menu] .simple-dropdown-link:hover,
body.vikinger-theme .vikinger-post-filter-country [data-vikinger-filter-menu] .simple-dropdown-link:focus-visible {
color: #00c7d9;
background-color: #f4f4fb;
}
/* Keep the reaction icon and label on the same horizontal axis. */
body.vikinger-theme .post-actions .reaction-btn {
display: flex;
align-items: center;
flex-direction: row;
width: auto;
min-width: 0;
height: 100%;
}
body.vikinger-theme .post-actions .reaction-btn .reaction-btn-icon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}
body.vikinger-theme .post-actions .reaction-btn .reaction-btn-name {
width: auto;
margin: 0;
white-space: nowrap;
}
/* The original 140px Vikinger menu is too narrow for Sngine's Italian labels. */
body.vikinger-theme .widget-box-post-settings-dropdown.simple-dropdown {
width: 250px;
min-width: 250px;
max-width: calc(100vw - 24px);
}
body.vikinger-theme .widget-box-post-settings-dropdown .simple-dropdown-link {
display: block;
width: 100%;
box-sizing: border-box;
}
body.vikinger-theme .widget-box-post-settings-dropdown .simple-dropdown-link .action.no-desc {
display: flex;
align-items: center;
flex-wrap: nowrap;
width: 100%;
white-space: nowrap;
}
body.vikinger-theme .widget-box-post-settings-dropdown .simple-dropdown-link .action.no-desc .svg-container {
flex: 0 0 20px;
margin-right: 10px;
}
body.vikinger-theme .widget-box-post-settings-dropdown .simple-dropdown-link .action.no-desc > span {
display: block;
min-width: 0;
white-space: nowrap;
}
/*
* Quill replaces Vikinger's original textarea with a contenteditable div.
* Reuse the exact quick-post dimensions from styles.min.css for that bridge
* so the native Sngine editor keeps its mentions and formatting support.
*/
body.vikinger-theme .quick-post .quick-post-body .form-textarea .quill-editor,
body.vikinger-theme .quick-post .quick-post-body .form-textarea .ql-editor {
height: 120px;
min-height: 120px;
padding: 26px 28px 0;
border: none;
border-radius: 0;
background-color: #fcfcfd;
color: #3e3f5e;
font-size: .875rem;
font-weight: 500;
line-height: 1.4;
overflow-y: auto;
}
body.vikinger-theme .quick-post .quick-post-body .form-textarea .ql-editor.ql-blank::before {
top: 26px;
color: #adafca;
font-size: .875rem;
font-style: normal;
font-weight: 500;
left: 28px;
right: 28px;
transform: none;
}
/* Vikinger feed columns and widgets. */
body.vikinger-theme .vikinger-newsfeed-grid {
display: grid;
grid-template-columns: 23.9864864865% 49.3243243243% 23.9864864865%;
grid-template-areas: "sidebar1 content sidebar2";
grid-gap: 16px;
align-items: start;
}
body.vikinger-theme .vikinger-newsfeed-grid > .grid-column {
display: grid;
grid-template-columns: 100%;
grid-gap: 16px;
align-self: start;
min-width: 0;
}
body.vikinger-theme .vikinger-newsfeed-grid > .vikinger-newsfeed-sidebar {
grid-area: sidebar1;
}
body.vikinger-theme .vikinger-newsfeed-grid > .vikinger-newsfeed-content {
grid-area: content;
}
body.vikinger-theme .vikinger-newsfeed-grid > .vikinger-newsfeed-aside {
grid-area: sidebar2;
}
/* Keep the merit-category carousel in its compact card shell. The balance
* summary is rendered separately with the Nova-style balance component. */
body.vikinger-theme .vikinger-newsfeed-aside > .vikinger-merits-widget {
width: 100%;
min-width: 0;
padding: 0;
overflow: hidden;
}
/* Trending widget: keep Diamond_pro's red palette while using the compact
* card geometry of the Vikinger right column. */
body.vikinger-theme .vikinger-newsfeed-aside > .vikinger-trending-widget {
min-width: 0;
overflow: hidden;
border: 0;
border-radius: 14px;
color: #fff;
background: linear-gradient(135deg, #e94b3f 0%, #d83229 100%);
box-shadow: none;
}
body.vikinger-theme .vikinger-newsfeed-aside > .vikinger-trending-widget .card-header {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 14px 8px;
background: transparent;
border: 0;
}
body.vikinger-theme .vikinger-newsfeed-aside > .vikinger-trending-widget .card-header h6 {
display: flex;
align-items: center;
min-width: 0;
margin: 0;
color: #fff;
font-size: .875rem;
font-weight: 800;
line-height: 1.2;
}
body.vikinger-theme .vikinger-newsfeed-aside > .vikinger-trending-widget .card-header .svg-container {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
margin-right: 5px;
color: #ffd83d;
fill: #ffd83d;
flex: 0 0 auto;
}
body.vikinger-theme .vikinger-newsfeed-aside > .vikinger-trending-widget .card-header .svg-container svg,
body.vikinger-theme .vikinger-newsfeed-aside > .vikinger-trending-widget .card-header .svg-container path {
width: 100%;
height: 100%;
fill: #ffd83d;
}
body.vikinger-theme .vikinger-newsfeed-aside > .vikinger-trending-widget .card-body {
padding: 6px 12px 14px;
}
body.vikinger-theme .vikinger-newsfeed-aside > .vikinger-trending-widget .trending-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 37px;
margin-bottom: 8px;
padding: 9px 14px;
border-radius: 9px;
color: #fff;
background: rgba(255, 255, 255, .18);
transition: background .15s ease, transform .15s ease;
}
body.vikinger-theme .vikinger-newsfeed-aside > .vikinger-trending-widget .trending-item:hover,
body.vikinger-theme .vikinger-newsfeed-aside > .vikinger-trending-widget .trending-item:focus-visible {
color: #fff;
background: rgba(255, 255, 255, .24);
transform: translateY(-1px);
}
body.vikinger-theme .vikinger-newsfeed-aside > .vikinger-trending-widget .trending-item:last-child {
margin-bottom: 0;
}
body.vikinger-theme .vikinger-newsfeed-aside > .vikinger-trending-widget .trending-item .hash {
min-width: 0;
overflow: hidden;
color: #fff;
font-size: .8125rem;
font-weight: 800;
line-height: 1.2;
text-overflow: ellipsis;
white-space: nowrap;
}
body.vikinger-theme .vikinger-newsfeed-aside > .vikinger-trending-widget .trending-item .frequency {
flex: 0 0 auto;
padding: 0;
border-radius: 0;
color: #fff;
background: transparent;
font-size: .6875rem;
font-weight: 800;
line-height: 1.2;
white-space: nowrap;
}
/* Mini footer: the legacy Sngine markup is reused by the Vikinger shell, but
* its original helper classes are not part of the Vikinger stylesheet. */
body.vikinger-theme .mini-footer {
margin-top: 25px;
margin-bottom: 25px;
padding-right: 10px;
padding-left: 10px;
color: #8f91ac;
font-size: .75rem;
}
body.vikinger-theme .mini-footer .copyrights {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
min-width: 0;
padding-bottom: 5px;
margin-bottom: 5px;
border-bottom: 1px solid #eaeaf5;
color: #8f91ac;
font-weight: 500;
line-height: 1.4;
}
body.vikinger-theme .mini-footer .copyrights > span {
min-width: 0;
white-space: nowrap;
}
body.vikinger-theme .mini-footer .language-dropdown {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
gap: 10px;
padding: 8px 12px;
border-radius: 4px;
color: #8f91ac;
text-decoration: none;
transition: color .2s ease-in-out, background-color .2s ease-in-out;
}
body.vikinger-theme .mini-footer .language-dropdown img,
body.vikinger-theme .mini-footer .dropdown-item img {
display: block;
width: 16px;
height: 16px;
flex: 0 0 16px;
margin: 0;
object-fit: contain;
}
body.vikinger-theme .mini-footer .language-dropdown:hover,
body.vikinger-theme .mini-footer .language-dropdown:focus-visible {
color: #3e3f5e;
background-color: #f3f6f9;
text-decoration: none;
}
body.vikinger-theme .mini-footer .copyrights > .dropdown-menu {
min-width: 180px;
max-width: min(240px, calc(100vw - 32px));
padding: 8px 0;
border: 0;
border-radius: 12px;
background-color: #fff;
box-shadow: 0 8px 24px rgba(94, 92, 154, .16);
z-index: 10000;
}
body.vikinger-theme .mini-footer .copyrights > .dropdown-menu .js_scroller {
max-height: 280px;
overflow-x: hidden;
overflow-y: auto;
padding: 0;
}
body.vikinger-theme .mini-footer .copyrights > .dropdown-menu .dropdown-item {
display: flex;
align-items: center;
gap: 10px;
min-height: 36px;
padding: 8px 16px;
color: #8f91ac;
font-size: .75rem;
font-weight: 500;
line-height: 1.3;
white-space: nowrap;
}
body.vikinger-theme .mini-footer .copyrights > .dropdown-menu .dropdown-item:hover,
body.vikinger-theme .mini-footer .copyrights > .dropdown-menu .dropdown-item:focus-visible {
color: #3e3f5e;
background-color: #f3f6f9;
}
body.vikinger-theme .mini-footer .links {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 4px 0;
margin: 0 -5px;
padding: 0;
list-style: none;
}
body.vikinger-theme .mini-footer .links li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}
body.vikinger-theme .mini-footer .links a {
color: #8f91ac;
font-size: .75rem;
font-weight: 500;
line-height: 1.4;
text-decoration: none;
transition: color .2s ease-in-out;
}
body.vikinger-theme .mini-footer .links a:hover,
body.vikinger-theme .mini-footer .links a:focus-visible {
color: #615dfa;
text-decoration: none;
}
body.vikinger-theme.night-mode .mini-footer .copyrights {
border-bottom-color: #2e3f4d;
}
body.vikinger-theme.night-mode .mini-footer .language-dropdown,
body.vikinger-theme.night-mode .mini-footer .links a {
color: #c1d4e3;
}
body.vikinger-theme.night-mode .mini-footer .language-dropdown:hover,
body.vikinger-theme.night-mode .mini-footer .language-dropdown:focus-visible,
body.vikinger-theme.night-mode .mini-footer .links a:hover,
body.vikinger-theme.night-mode .mini-footer .links a:focus-visible {
color: #fff;
}
body.vikinger-theme.night-mode .mini-footer .copyrights > .dropdown-menu {
background-color: #262d34;
box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
}
body.vikinger-theme.night-mode .mini-footer .copyrights > .dropdown-menu .dropdown-item {
color: #c1d4e3;
}
body.vikinger-theme.night-mode .mini-footer .copyrights > .dropdown-menu .dropdown-item:hover,
body.vikinger-theme.night-mode .mini-footer .copyrights > .dropdown-menu .dropdown-item:focus-visible {
color: #fff;
background-color: #2b3843;
}
@media screen and (max-width: 768px) {
body.vikinger-theme .mini-footer {
margin-bottom: 85px;
}
}
@media screen and (max-width: 479px) {
body.vikinger-theme .mini-footer .copyrights {
align-items: flex-start;
flex-direction: column;
}
body.vikinger-theme .mini-footer .language-dropdown {
margin-left: -12px;
}
body.vikinger-theme .mini-footer .links {
justify-content: flex-start;
}
}
/* Legacy footer: give the shared Sngine markup Vikinger spacing and controls. */
body.vikinger-theme .row.footer {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: nowrap;
gap: 16px 24px;
margin: 24px 0 0;
padding: 24px 0 32px;
border-top: 1px solid #eaeaf5;
color: #8f91ac;
font-family: Rajdhani, sans-serif;
font-size: .8125rem;
line-height: 1.4;
}
body.vikinger-theme .row.footer.border-top-0 {
border-top: 0;
}
body.vikinger-theme .row.footer > .col-sm-6 {
flex: 1 1 50%;
width: auto;
max-width: none;
padding: 0;
}
body.vikinger-theme .row.footer > .dropdown {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px 12px;
position: relative;
}
body.vikinger-theme .row.footer > .dropdown > span {
margin-right: 0 !important;
color: #8f91ac;
font-weight: 600;
white-space: nowrap;
}
body.vikinger-theme .row.footer .language-dropdown {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 32px;
padding: 6px 10px;
border-radius: 10px;
color: #8f91ac;
font-weight: 600;
text-decoration: none;
transition: color .2s ease-in-out, background-color .2s ease-in-out;
}
body.vikinger-theme .row.footer .language-dropdown img,
body.vikinger-theme .row.footer .dropdown-item img {
display: block;
width: 16px;
height: 16px;
flex: 0 0 16px;
margin: 0 !important;
object-fit: contain;
}
body.vikinger-theme .row.footer .language-dropdown:hover,
body.vikinger-theme .row.footer .language-dropdown:focus-visible {
color: #615dfa;
background: #f4f3ff;
text-decoration: none;
}
body.vikinger-theme .row.footer > .dropdown > .dropdown-menu {
min-width: 200px;
max-width: min(260px, calc(100vw - 32px));
margin-top: 8px;
padding: 8px;
border: 0;
border-radius: 12px;
background: #fff;
box-shadow: 0 10px 30px rgba(94, 92, 154, .16);
z-index: 10000;
}
body.vikinger-theme .row.footer > .dropdown > .dropdown-menu .js_scroller {
max-height: 280px;
overflow-x: hidden !important;
overflow-y: auto !important;
padding: 0;
}
body.vikinger-theme .row.footer > .dropdown > .dropdown-menu .dropdown-item {
display: flex;
align-items: center;
gap: 8px;
min-height: 36px;
padding: 8px 10px;
border-radius: 8px;
color: #8f91ac;
font-size: .8125rem;
font-weight: 600;
line-height: 1.3;
white-space: nowrap;
}
body.vikinger-theme .row.footer > .dropdown > .dropdown-menu .dropdown-item:hover,
body.vikinger-theme .row.footer > .dropdown > .dropdown-menu .dropdown-item:focus-visible {
color: #3e3f5e;
background: #f4f3ff;
}
body.vikinger-theme .row.footer > .links {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: 8px 18px;
margin: 0;
padding: 0;
text-align: right;
}
body.vikinger-theme .row.footer > .links a {
margin: 0 !important;
padding: 0 !important;
color: #8f91ac;
font-size: .8125rem;
font-weight: 600;
line-height: 1.4;
text-decoration: none;
transition: color .2s ease-in-out;
}
body.vikinger-theme .row.footer > .links a:hover,
body.vikinger-theme .row.footer > .links a:focus-visible {
color: #615dfa;
text-decoration: none;
}
body.vikinger-theme.night-mode .row.footer {
border-top-color: #2e3f4d;
color: #c1d4e3;
}
body.vikinger-theme.night-mode .row.footer > .dropdown > span,
body.vikinger-theme.night-mode .row.footer .language-dropdown,
body.vikinger-theme.night-mode .row.footer > .links a {
color: #c1d4e3;
}
body.vikinger-theme.night-mode .row.footer .language-dropdown:hover,
body.vikinger-theme.night-mode .row.footer .language-dropdown:focus-visible {
color: #fff;
background: #2b3843;
}
body.vikinger-theme.night-mode .row.footer > .dropdown > .dropdown-menu {
background: #262d34;
box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
}
body.vikinger-theme.night-mode .row.footer > .dropdown > .dropdown-menu .dropdown-item {
color: #c1d4e3;
}
body.vikinger-theme.night-mode .row.footer > .dropdown > .dropdown-menu .dropdown-item:hover,
body.vikinger-theme.night-mode .row.footer > .dropdown > .dropdown-menu .dropdown-item:focus-visible {
color: #fff;
background: #2b3843;
}
@media screen and (max-width: 767px) {
body.vikinger-theme .row.footer {
align-items: flex-start;
flex-direction: column;
gap: 14px;
margin-top: 16px;
padding: 20px 0 96px;
}
body.vikinger-theme .row.footer > .col-sm-6 {
flex: 0 0 100%;
width: 100%;
}
body.vikinger-theme .row.footer > .links {
justify-content: flex-start;
text-align: left;
}
}
body.vikinger-theme .vikinger-merits-balance-section {
padding: 32px 28px;
}
body.vikinger-theme .vikinger-merits-balance-section .widget-box-title,
body.vikinger-theme .vikinger-merits-categories .widget-box-title {
margin: 0;
}
body.vikinger-theme .vikinger-merits-balance {
margin-top: 12px;
color: #8f91ac;
font-size: .875rem;
line-height: 1.4;
font-weight: 500;
}
body.vikinger-theme .vikinger-merits-balance > span {
color: #615dfa;
font-size: 1.25rem;
font-weight: 700;
}
body.vikinger-theme .vikinger-merits-balance-section > .button {
margin-top: 20px;
}
body.vikinger-theme .vikinger-merits-divider {
width: auto;
height: 1px;
margin: 0 28px;
background-color: #eaeaf5;
}
body.vikinger-theme .vikinger-merits-categories {
min-width: 0;
padding: 28px 28px 32px;
}
body.vikinger-theme .vikinger-merits-categories .vikinger-widget-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-width: 0;
}
body.vikinger-theme .vikinger-merits-categories .vikinger-widget-heading > a {
flex: 0 0 auto;
color: #adafca;
font-size: .75rem;
font-weight: 700;
line-height: 1.4;
white-space: nowrap;
}
body.vikinger-theme .vikinger-merits-categories .vikinger-widget-heading > a:hover,
body.vikinger-theme .vikinger-merits-categories .vikinger-widget-heading > a:focus-visible {
color: #615dfa;
}
body.vikinger-theme .vikinger-merits-list {
width: 100%;
min-width: 0;
margin-top: 24px;
padding: 0 8px;
}
body.vikinger-theme .vikinger-merits-list .slick-track {
display: flex;
align-items: flex-start;
}
body.vikinger-theme .vikinger-merit-box {
width: 100px;
margin: 0 5px;
color: #3e3f5e;
text-align: center;
cursor: pointer;
transition: transform .2s ease-in-out;
}
body.vikinger-theme .vikinger-merit-box:hover,
body.vikinger-theme .vikinger-merit-box:focus-visible {
color: #615dfa;
transform: translateY(-3px);
}
body.vikinger-theme .vikinger-merit-box img {
display: block;
width: 64px;
height: 64px;
margin: 0 auto;
object-fit: contain;
}
body.vikinger-theme .vikinger-merit-box .name {
display: block;
margin-top: 8px;
overflow: hidden;
color: inherit;
font-size: .75rem;
font-weight: 700;
line-height: 1.2;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Merit widget refinement */
body.vikinger-theme .vikinger-merits-widget {
overflow: hidden;
border: 1px solid #e7e8f4;
box-shadow: 0 12px 30px rgba(53, 55, 101, .08);
}
body.vikinger-theme .vikinger-merits-balance-section {
position: relative;
padding: 26px 28px 24px;
background: linear-gradient(135deg, #615dfa 0%, #7a70f7 100%);
}
body.vikinger-theme .vikinger-merits-balance-section::after {
position: absolute;
right: -28px;
bottom: -44px;
width: 138px;
height: 138px;
border: 22px solid rgba(255, 255, 255, .12);
border-radius: 50%;
content: "";
}
body.vikinger-theme .vikinger-merits-balance-section .widget-box-title,
body.vikinger-theme .vikinger-merits-balance-section .vikinger-merits-balance {
position: relative;
z-index: 1;
color: #fff;
}
body.vikinger-theme .vikinger-merits-balance-section .widget-box-title {
font-size: .8rem;
font-weight: 700;
letter-spacing: .02em;
}
body.vikinger-theme .vikinger-merits-balance {
margin-top: 10px;
color: rgba(255, 255, 255, .78);
}
body.vikinger-theme .vikinger-merits-balance > span {
color: #fff;
font-size: 1.8rem;
line-height: 1;
}
body.vikinger-theme .vikinger-merits-balance-section > .button {
position: relative;
z-index: 1;
margin-top: 18px;
border: 0;
border-radius: 8px;
background: #fff;
box-shadow: 0 6px 14px rgba(37, 35, 104, .18);
color: #5149dc;
font-weight: 700;
transition: transform .18s ease, box-shadow .18s ease;
}
body.vikinger-theme .vikinger-merits-balance-section > .button:hover,
body.vikinger-theme .vikinger-merits-balance-section > .button:focus-visible {
background: #fff;
color: #4037c7;
transform: translateY(-2px);
box-shadow: 0 9px 18px rgba(37, 35, 104, .24);
}
body.vikinger-theme .vikinger-merits-divider {
margin: 0;
background: #e7e8f4;
}
body.vikinger-theme .vikinger-merits-categories {
padding: 24px 28px 26px;
}
body.vikinger-theme .vikinger-merits-categories .widget-box-title {
color: #3e3f5e;
font-size: .95rem;
}
body.vikinger-theme .vikinger-merits-list {
margin-top: 20px;
padding: 0 4px;
}
body.vikinger-theme .vikinger-merit-box {
width: 92px;
margin: 0 6px;
padding: 10px 7px 12px;
border: 1px solid transparent;
border-radius: 12px;
background: #fafaff;
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
body.vikinger-theme .vikinger-merit-box:hover,
body.vikinger-theme .vikinger-merit-box:focus-visible {
border-color: #dcdafe;
background: #fff;
transform: translateY(-3px);
box-shadow: 0 8px 18px rgba(53, 55, 101, .1);
}
body.vikinger-theme .vikinger-merit-box img {
width: 58px;
height: 58px;
}
body.vikinger-theme .vikinger-merit-box .name {
margin-top: 9px;
font-size: .72rem;
}
@media (prefers-reduced-motion: reduce) {
body.vikinger-theme .vikinger-merit-box,
body.vikinger-theme .vikinger-merits-balance-section > .button {
transition: none;
}
}
body.vikinger-theme .vikinger-merits-list .slick-prev.slick-arrow,
body.vikinger-theme .vikinger-merits-list .slick-next.slick-arrow {
z-index: 2;
display: flex !important;
align-items: center;
justify-content: center;
width: 32px !important;
height: 32px !important;
padding: 0 !important;
border: 1px solid #e4e4f0 !important;
border-radius: 50%;
background: #fff !important;
box-shadow: 0 4px 14px rgba(94, 92, 154, .18);
color: transparent !important;
font-size: 0 !important;
line-height: 0 !important;
opacity: 1;
transform: translate(0, -50%);
transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
body.vikinger-theme .vikinger-merits-list .slick-prev.slick-arrow {
left: -14px;
}
body.vikinger-theme .vikinger-merits-list .slick-next.slick-arrow {
right: -14px;
}
body.vikinger-theme .vikinger-merits-list .slick-prev.slick-arrow::before,
body.vikinger-theme .vikinger-merits-list .slick-next.slick-arrow::before {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: #615dfa !important;
font-family: Arial, sans-serif !important;
font-size: 18px !important;
font-weight: 700;
line-height: 1 !important;
opacity: 1 !important;
text-align: center;
-webkit-font-smoothing: antialiased;
}
body.vikinger-theme .vikinger-merits-list .slick-prev.slick-arrow::before {
content: "←" !important;
}
body.vikinger-theme .vikinger-merits-list .slick-next.slick-arrow::before {
content: "→" !important;
}
body.vikinger-theme .vikinger-merits-list .slick-prev.slick-arrow:hover,
body.vikinger-theme .vikinger-merits-list .slick-prev.slick-arrow:focus-visible,
body.vikinger-theme .vikinger-merits-list .slick-next.slick-arrow:hover,
body.vikinger-theme .vikinger-merits-list .slick-next.slick-arrow:focus-visible {
border-color: #615dfa !important;
background: #615dfa !important;
box-shadow: 0 5px 16px rgba(97, 93, 250, .28);
outline: 0;
transform: translate(0, -50%) scale(1.06);
}
body.vikinger-theme .vikinger-merits-list .slick-prev.slick-arrow:hover::before,
body.vikinger-theme .vikinger-merits-list .slick-prev.slick-arrow:focus-visible::before,
body.vikinger-theme .vikinger-merits-list .slick-next.slick-arrow:hover::before,
body.vikinger-theme .vikinger-merits-list .slick-next.slick-arrow:focus-visible::before {
color: #fff !important;
}
body.vikinger-theme .vikinger-merits-list .slick-prev.slick-disabled,
body.vikinger-theme .vikinger-merits-list .slick-next.slick-disabled {
opacity: .45;
pointer-events: none;
}
html[dir="rtl"] body.vikinger-theme .vikinger-merits-list .slick-prev.slick-arrow,
html[dir="RTL"] body.vikinger-theme .vikinger-merits-list .slick-prev.slick-arrow {
right: -14px;
left: auto;
}
html[dir="rtl"] body.vikinger-theme .vikinger-merits-list .slick-next.slick-arrow,
html[dir="RTL"] body.vikinger-theme .vikinger-merits-list .slick-next.slick-arrow {
right: auto;
left: -14px;
}
html[dir="rtl"] body.vikinger-theme .vikinger-merits-list .slick-prev.slick-arrow::before,
html[dir="RTL"] body.vikinger-theme .vikinger-merits-list .slick-prev.slick-arrow::before {
content: "→" !important;
}
html[dir="rtl"] body.vikinger-theme .vikinger-merits-list .slick-next.slick-arrow::before,
html[dir="RTL"] body.vikinger-theme .vikinger-merits-list .slick-next.slick-arrow::before {
content: "←" !important;
}
@media screen and (max-width: 1070px) {
body.vikinger-theme .vikinger-newsfeed-grid {
grid-template-columns: 100%;
grid-template-areas: "content" "sidebar1" "sidebar2";
}
body.vikinger-theme .vikinger-newsfeed-grid.mobile-prefer-content > .vikinger-newsfeed-sidebar,
body.vikinger-theme .vikinger-newsfeed-grid.mobile-prefer-content > .vikinger-newsfeed-aside {
display: none;
}
}
@media screen and (max-width: 680px) {
body.vikinger-theme .vikinger-newsfeed {
width: 95%;
padding: 92px 0 200px;
}
body.vikinger-theme .vikinger-merits-balance-section,
body.vikinger-theme .vikinger-merits-categories {
padding-right: 20px;
padding-left: 20px;
}
body.vikinger-theme .vikinger-merits-divider {
margin-right: 20px;
margin-left: 20px;
}
}
/* Do not let an empty announcements slot create a phantom grid row before Stories. */
body.vikinger-theme .vikinger-newsfeed-content > .vikinger-announcements {
width: 100%;
min-width: 0;
margin: 0;
padding: 0;
box-sizing: border-box;
}
body.vikinger-theme .vikinger-newsfeed-content > .vikinger-announcements:empty {
display: none;
}
body.vikinger-theme .vikinger-newsfeed-grid .vikinger-profile-completion-widget,
body.vikinger-theme .vikinger-newsfeed-grid .vikinger-stories-widget {
width: 100%;
min-width: 0;
margin-top: 0;
box-sizing: border-box;
}
body.vikinger-theme .vikinger-stories-widget > .widget-box-title,
body.vikinger-theme .vikinger-stories-widget > .vikinger-stories-content {
box-sizing: border-box;
}
body.vikinger-theme .vikinger-stories-widget > .vikinger-stories-content {
width: 100%;
min-width: 0;
}
@media screen and (max-width: 680px) {
body.vikinger-theme .dummy-publisher-trigger {
margin-bottom: 16px;
}
body.vikinger-theme .dummy-publisher-top {
gap: 10px;
min-height: 68px;
padding: 12px;
}
body.vikinger-theme .dummy-pub-avatar {
width: 38px;
height: 38px;
flex-basis: 38px;
}
body.vikinger-theme .dummy-publisher-input {
min-height: 38px;
padding: 8px 12px;
font-size: .8125rem;
}
body.vikinger-theme .dummy-publisher-actions {
gap: 4px;
padding: 6px;
}
body.vikinger-theme .dummy-publisher-btn {
gap: 5px;
padding: 8px 5px;
font-size: .75rem;
}
body.vikinger-theme .dummy-publisher-btn .dummy-pub-icon,
body.vikinger-theme .dummy-publisher-btn .dummy-pub-icon * {
width: 19px;
height: 19px;
flex-basis: 19px;
}
}
/* Keep post copy compact and readable without changing the saved post HTML. */
body.vikinger-theme .widget-box .widget-box-status .widget-box-status-text.vikinger-post-text {
color: #3e3f5e;
font-size: .875rem;
line-height: 1.7142857143em;
font-weight: 500;
}
/* Keep the normalized post breaks inline. The companion theme script removes
* only the third and subsequent
elements in one consecutive run, while
* preserving the two breaks used by the Vikinger paragraph spacing. */
body.vikinger-theme .vikinger-post-text br {
display: inline;
width: auto;
height: auto;
content: normal;
vertical-align: baseline;
}
/* Read-more links use the native Vikinger meta-line component, but the
* default Sngine rules make them too small and low-contrast. Keep the
* original text-link treatment while giving the control a readable size,
* clear focus state and enough hit area on touch screens. */
body.vikinger-theme .vikinger-post-replace > .meta-line {
display: flex;
align-items: center;
width: 100%;
min-height: 28px;
margin-top: 10px;
}
body.vikinger-theme .vikinger-post-replace > .meta-line > .meta-line-link[data-readmore-toggle],
body.vikinger-theme .vikinger-post-standalone .vikinger-post-replace > .meta-line > .meta-line-link[data-readmore-toggle] {
display: inline-flex;
align-items: center;
min-width: 0;
max-width: 100%;
min-height: 26px;
padding: 4px 0;
color: #615dfa;
font-family: Rajdhani, sans-serif;
font-size: .8125rem;
font-weight: 700;
line-height: 1.4;
letter-spacing: .01em;
text-decoration: none;
white-space: normal;
opacity: 1;
visibility: visible;
cursor: pointer;
transition: color .2s ease-in-out, text-decoration-color .2s ease-in-out;
}
body.vikinger-theme .vikinger-post-replace > .meta-line > .meta-line-link[data-readmore-toggle]:hover,
body.vikinger-theme .vikinger-post-replace > .meta-line > .meta-line-link[data-readmore-toggle]:focus-visible,
body.vikinger-theme .vikinger-post-standalone .vikinger-post-replace > .meta-line > .meta-line-link[data-readmore-toggle]:hover,
body.vikinger-theme .vikinger-post-standalone .vikinger-post-replace > .meta-line > .meta-line-link[data-readmore-toggle]:focus-visible {
color: #23d2e2;
text-decoration: underline;
text-underline-offset: 3px;
}
body.vikinger-theme .vikinger-post-replace > .meta-line > .meta-line-link[data-readmore-toggle]:focus-visible,
body.vikinger-theme .vikinger-post-standalone .vikinger-post-replace > .meta-line > .meta-line-link[data-readmore-toggle]:focus-visible {
outline: 2px solid rgba(97, 93, 250, .35);
outline-offset: 3px;
border-radius: 4px;
}
/* Photo posts place the read-more control immediately before the image.
* Avoid stacking the meta-line margin with the link margin, and leave a
* deliberate gap before the media so the control remains visually distinct. */
body.vikinger-theme .vikinger-post-content[data-vikinger-post-type="photos"] .vikinger-post-replace > .meta-line {
min-height: 28px;
margin-top: 8px;
margin-bottom: 10px;
}
body.vikinger-theme .vikinger-post-content[data-vikinger-post-type="photos"] .vikinger-post-replace > .meta-line > .meta-line-link[data-readmore-toggle] {
display: inline-flex;
align-items: center;
min-height: 26px;
margin-top: 0;
padding: 4px 0;
color: #615dfa;
font-size: .8125rem;
font-weight: 700;
line-height: 1.4;
text-decoration: none;
}
body.vikinger-theme .vikinger-post-content[data-vikinger-post-type="photos"] .vikinger-post-replace > .meta-line > .meta-line-link[data-readmore-toggle]:hover,
body.vikinger-theme .vikinger-post-content[data-vikinger-post-type="photos"] .vikinger-post-replace > .meta-line > .meta-line-link[data-readmore-toggle]:focus-visible {
color: #23d2e2;
text-decoration: underline;
text-underline-offset: 3px;
}
/* Keep the feed cards visually separated, as in Diamond_pro. The feed
* template wraps every non-standalone post in a direct list item, so the
* spacing stays outside the card and never changes its internal layout. */
body.vikinger-theme .js_posts_stream > ul > li {
margin-bottom: 20px;
}
body.vikinger-theme .js_posts_stream > ul > li:last-child {
margin-bottom: 0;
}
@media screen and (max-width: 767.98px) {
body.vikinger-theme .js_posts_stream > ul > li {
margin-bottom: 16px;
}
body.vikinger-theme .js_posts_stream > ul > li:last-child {
margin-bottom: 0;
}
}
/* Link previews keep Vikinger's card structure, but the original meta color
* is too pale on the light card background. Increase contrast while keeping
* the same typography hierarchy used by the rest of the post. */
body.vikinger-theme .video-status .video-status-meta {
color: #615dfa;
font-size: .75rem;
font-weight: 700;
line-height: 1.4;
letter-spacing: .04em;
opacity: 1;
}
body.vikinger-theme .video-status .video-status-title {
color: #3e3f5e;
font-size: 1.0625rem;
font-weight: 700;
line-height: 1.4;
overflow-wrap: anywhere;
}
body.vikinger-theme .video-status .video-status-text {
color: #6b6d8a;
font-size: .875rem;
line-height: 1.6;
overflow-wrap: anywhere;
}
body.vikinger-theme .video-status:hover .video-status-meta,
body.vikinger-theme .video-status:focus-visible .video-status-meta {
color: #23d2e2;
}
body.vikinger-theme .video-status:focus-visible {
outline: 2px solid rgba(97, 93, 250, .35);
outline-offset: 3px;
border-radius: 12px;
}
/*
* Standalone post page
*
* The feed already receives Vikinger's native .widget-box/.widget-box-status
* wrappers. /posts/{id} intentionally keeps Sngine's standalone markup, so
* bridge that markup to the same card geometry here instead of duplicating or
* replacing the post templates. The selectors are limited to the new
* standalone marker and therefore leave the feed, lightbox and native Sngine
* handlers untouched.
*/
body.vikinger-theme .vikinger-post-standalone {
display: block;
width: 100%;
max-width: 100%;
min-width: 0;
margin: 0 0 20px;
border-radius: 12px;
background-color: #fff;
box-shadow: 0 0 40px 0 rgba(94, 92, 154, .06);
color: #3e3f5e;
position: relative;
overflow: visible;
}
body.vikinger-theme .vikinger-post-standalone > .post-body {
width: 100%;
min-width: 0;
padding: 24px 0 0;
border-radius: 12px;
background-color: #fff;
box-sizing: border-box;
overflow: visible;
}
/* Hashtag search uses the existing search grid and Vikinger standalone post
* card. Remove the browser list inset so cards line up with the tab content. */
body.vikinger-theme .vikinger-hashtag-search-page .vikinger-hashtag-result-list {
width: 100%;
max-width: 100%;
min-width: 0;
margin: 0;
padding: 0;
list-style: none;
}
body.vikinger-theme .vikinger-hashtag-search-page .vikinger-hashtag-result-list > li {
width: 100%;
max-width: 100%;
min-width: 0;
margin: 0;
padding: 0;
list-style: none;
}
body.vikinger-theme .vikinger-hashtag-search-page .vikinger-hashtag-result-list > li > .vikinger-post-standalone {
width: 100%;
max-width: 100%;
min-width: 0;
}
@media (max-width: 991.98px) {
body.vikinger-theme .vikinger-hashtag-search-page .sg-offcanvas-mainbar > .row > .col-lg-8,
body.vikinger-theme .vikinger-hashtag-search-page .sg-offcanvas-mainbar > .row > .col-lg-4 {
flex: 0 0 100%;
width: 100%;
max-width: 100%;
min-width: 0;
}
}
body.vikinger-theme .vikinger-post-standalone .vikinger-post-user-status {
display: block;
width: auto;
min-width: 0;
min-height: 46px;
margin: 0 28px;
padding: 2px 64px 0 58px;
font-family: Rajdhani, sans-serif;
position: relative;
box-sizing: border-box;
}
body.vikinger-theme .vikinger-post-standalone .vikinger-post-avatar-link {
display: block;
width: 46px;
height: 46px;
min-width: 46px;
min-height: 46px;
padding: 0;
border-radius: 50%;
background-color: #e4e6eb;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
clip-path: none;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
z-index: 1;
}
body.vikinger-theme .vikinger-post-standalone .vikinger-post-avatar-link:hover,
body.vikinger-theme .vikinger-post-standalone .vikinger-post-avatar-link:focus-visible {
text-decoration: none;
filter: brightness(.96);
}
/* Feed/profile posts use the same small Vikinger avatar as the static post
* header. The old Sngine link had no child with intrinsic dimensions, so it
* collapsed to 0x0 and the avatar was not visible. */
body.vikinger-theme .post .vikinger-post-user-status > .vikinger-post-avatar-link {
display: block;
width: 40px;
height: 44px;
min-width: 40px;
min-height: 44px;
padding: 0;
margin: 0;
border-radius: 0;
background-color: transparent;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
clip-path: none;
position: absolute;
top: 0;
left: 0;
overflow: visible;
z-index: 1;
}
body.vikinger-theme .post .vikinger-post-avatar-link > .user-avatar.small {
display: block;
width: 40px;
height: 44px;
min-width: 40px;
min-height: 44px;
margin: 0;
}
body.vikinger-theme .post .vikinger-post-avatar-link .user-avatar-content {
top: 6px;
left: 5px;
}
body.vikinger-theme .post .vikinger-post-avatar-link .user-avatar-progress,
body.vikinger-theme .post .vikinger-post-avatar-link .user-avatar-progress-border {
top: 0;
left: 0;
}
body.vikinger-theme .post .vikinger-post-avatar-link:hover,
body.vikinger-theme .post .vikinger-post-avatar-link:focus-visible {
text-decoration: none;
filter: brightness(.96);
}
/* Legacy Sngine media/reel cards use a bare avatar image, so they need their
own status marker. Standard Vikinger post avatars already render this state. */
body.vikinger-theme .post-avatar {
position: relative;
}
body.vikinger-theme .post-avatar > .online-dot {
display: block;
position: absolute;
right: 0;
bottom: 0;
z-index: 2;
width: 12px;
height: 12px;
border: 3px solid #fff;
border-radius: 50%;
background: #1df377;
box-sizing: border-box;
color: transparent;
font-size: 0;
line-height: 0;
pointer-events: none;
}
@media screen and (max-width: 767.98px) {
body.vikinger-theme .vikinger-post-standalone .vikinger-post-avatar-link {
width: 42px;
height: 42px;
min-width: 42px;
min-height: 42px;
}
}
@media screen and (max-width: 479px) {
body.vikinger-theme .vikinger-post-standalone .vikinger-post-avatar-link {
width: 38px;
height: 38px;
min-width: 38px;
min-height: 38px;
}
}
body.vikinger-theme .vikinger-post-standalone .vikinger-post-title {
min-width: 0;
margin: 0;
color: #3e3f5e;
font-size: 1rem;
font-weight: 500;
line-height: 1.4285714286em;
overflow-wrap: anywhere;
}
body.vikinger-theme .vikinger-post-standalone .vikinger-post-title .post-author,
body.vikinger-theme .vikinger-post-standalone .vikinger-post-title a.post-author {
color: #3e3f5e;
font-weight: 700;
}
body.vikinger-theme .vikinger-post-standalone .vikinger-post-title .post-author:hover,
body.vikinger-theme .vikinger-post-standalone .vikinger-post-title .post-author:focus-visible {
color: #00c7d9;
text-decoration: none;
}
body.vikinger-theme .vikinger-post-title .vikinger-post-group-context {
display: inline-flex;
align-items: center;
vertical-align: middle;
max-width: 100%;
min-width: 0;
}
body.vikinger-theme .vikinger-post-title .vikinger-post-group-context > .fa-chevron-right {
flex: 0 0 auto;
color: #8f91ac;
font-size: .72em;
}
body.vikinger-theme .vikinger-post-title .vikinger-post-group-link {
display: inline-flex;
align-items: center;
gap: 6px;
min-width: 0;
color: #3e3f5e;
font-weight: 700;
text-decoration: none;
}
body.vikinger-theme .vikinger-post-title .vikinger-post-group-link:hover,
body.vikinger-theme .vikinger-post-title .vikinger-post-group-link:focus-visible {
color: #00c7d9;
text-decoration: none;
}
body.vikinger-theme .vikinger-post-title .vikinger-post-group-avatar {
display: block;
flex: 0 0 20px;
width: 20px;
height: 20px;
border-radius: 50%;
object-fit: cover;
}
body.vikinger-theme .vikinger-post-title .vikinger-post-group-link > span {
min-width: 0;
overflow-wrap: anywhere;
}
body.vikinger-theme.night-mode .vikinger-post-title .vikinger-post-group-link,
body.vikinger-theme[data-bs-theme="dark"] .vikinger-post-title .vikinger-post-group-link {
color: #c1d4e3;
}
body.vikinger-theme.night-mode .vikinger-post-title .vikinger-post-group-link:hover,
body.vikinger-theme.night-mode .vikinger-post-title .vikinger-post-group-link:focus-visible,
body.vikinger-theme[data-bs-theme="dark"] .vikinger-post-title .vikinger-post-group-link:hover,
body.vikinger-theme[data-bs-theme="dark"] .vikinger-post-title .vikinger-post-group-link:focus-visible {
color: #00c7d9;
}
body.vikinger-theme .vikinger-post-standalone .post-time {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
min-width: 0;
margin-top: 4px;
color: #8f91ac;
font-size: .75rem;
font-weight: 500;
line-height: 1.35;
overflow-wrap: anywhere;
}
body.vikinger-theme .vikinger-post-standalone .post-time a,
body.vikinger-theme .vikinger-post-standalone .post-time i,
body.vikinger-theme .vikinger-post-standalone .post-time span {
color: inherit;
}
body.vikinger-theme .vikinger-post-standalone .post-time a:hover,
body.vikinger-theme .vikinger-post-standalone .post-time a:focus-visible {
color: #00c7d9;
text-decoration: none;
}
body.vikinger-theme .vikinger-post-standalone > .post-body > .float-end.dropdown {
float: none !important;
margin: 0;
position: absolute;
top: 22px;
right: 10px;
z-index: 20;
}
body.vikinger-theme .vikinger-post-standalone > .post-body > .float-end.dropdown > .dropdown-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 30px;
padding: 0;
border: 0;
border-radius: 8px;
background-color: transparent;
color: #adafca;
box-shadow: none;
cursor: pointer;
}
body.vikinger-theme .vikinger-post-standalone > .post-body > .float-end.dropdown > .dropdown-toggle::after {
display: none;
}
body.vikinger-theme .vikinger-post-standalone > .post-body > .float-end.dropdown > .dropdown-toggle:hover,
body.vikinger-theme .vikinger-post-standalone > .post-body > .float-end.dropdown > .dropdown-toggle:focus-visible,
body.vikinger-theme .vikinger-post-standalone > .post-body > .float-end.dropdown > .dropdown-toggle[aria-expanded="true"] {
background-color: #f5f4ff;
color: #615dfa;
outline: 0;
}
body.vikinger-theme .vikinger-post-standalone > .post-body > .float-end.dropdown > .dropdown-toggle i {
color: inherit;
font-size: .75rem;
}
/*
* Non-newsfeed posts render the Sngine settings wrapper inside the post
* header. Keep the trigger anchored to the card edge instead of the header
* text column, while retaining the header's right padding for long titles.
*/
body.vikinger-theme .post .vikinger-post-user-status > .float-end.dropdown {
float: none !important;
margin: 0;
position: absolute;
top: 2px;
right: -18px;
z-index: 20;
}
body.vikinger-theme .post .vikinger-post-user-status > .float-end.dropdown > .dropdown-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 30px;
padding: 0;
border: 0;
border-radius: 8px;
background-color: transparent;
color: #adafca;
box-shadow: none;
cursor: pointer;
}
body.vikinger-theme .post .vikinger-post-user-status > .float-end.dropdown > .dropdown-toggle::after {
display: none;
}
body.vikinger-theme .post .vikinger-post-user-status > .float-end.dropdown > .dropdown-toggle:hover,
body.vikinger-theme .post .vikinger-post-user-status > .float-end.dropdown > .dropdown-toggle:focus-visible,
body.vikinger-theme .post .vikinger-post-user-status > .float-end.dropdown > .dropdown-toggle[aria-expanded="true"] {
background-color: #f5f4ff;
color: #615dfa;
outline: 0;
}
body.vikinger-theme .post .vikinger-post-user-status > .float-end.dropdown > .dropdown-toggle i {
color: inherit;
font-size: .75rem;
}
/* Keep author and post metadata visually grouped in the shared Sngine header. */
body.vikinger-theme .post .vikinger-post-user-status > .vikinger-post-title {
margin: 0 !important;
line-height: 1.2;
}
body.vikinger-theme .post .vikinger-post-user-status > .post-time.user-status-text {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 3px;
min-height: 16px;
margin: 2px 0 0 !important;
line-height: 1.2;
}
body.vikinger-theme .post .vikinger-post-user-status > .post-time.user-status-text .btn-group {
display: inline-flex;
align-items: center;
margin: 0;
vertical-align: middle;
}
body.vikinger-theme .post .action-dropdown-menu {
min-width: 250px;
max-width: calc(100vw - 24px);
padding: 10px 0;
border: 0;
border-radius: 12px;
background-color: #fff;
box-shadow: 0 0 40px 0 rgba(94, 92, 154, .14);
z-index: 1060;
}
body.vikinger-theme .post .action-dropdown-menu .dropdown-item {
display: block;
padding: 8px 16px;
color: #3e3f5e;
font-size: .75rem;
font-weight: 700;
line-height: 1.3;
white-space: normal;
}
body.vikinger-theme .post .action-dropdown-menu .dropdown-item:hover,
body.vikinger-theme .post .action-dropdown-menu .dropdown-item:focus {
color: #00c7d9;
background-color: #f5f4ff;
}
/*
* Shared action menus
*
* Chat settings, profile actions and the other Sngine action menus use
* Bootstrap's `.dropdown-menu` markup, while Vikinger's visual language is
* the compact floating card used by `.simple-dropdown`. Keep Popper's
* position/transform untouched and style only the surface and its action
* rows. Profile upload menus have their own more specific component rules.
*/
body.vikinger-theme .dropdown-menu.action-dropdown-menu:not(.vikinger-profile-action-dropdown) {
width: 250px;
min-width: 250px;
max-width: calc(100vw - 24px);
padding: 10px 0;
overflow: hidden;
border: 0;
border-radius: 12px;
background-color: #fff;
box-shadow: 0 0 40px 0 rgba(94, 92, 154, .14);
z-index: 1060;
}
body.vikinger-theme .dropdown-menu.action-dropdown-menu:not(.vikinger-profile-action-dropdown) > .dropdown-item {
display: block;
width: 100%;
box-sizing: border-box;
padding: 10px 16px;
border: 0;
border-radius: 0;
background: transparent;
color: #3e3f5e;
font-family: Rajdhani, sans-serif;
font-size: .8125rem;
font-weight: 700;
line-height: 1.25;
text-align: left;
text-decoration: none;
white-space: normal;
cursor: pointer;
transition: color .2s ease-in-out, background-color .2s ease-in-out;
}
body.vikinger-theme .dropdown-menu.action-dropdown-menu:not(.vikinger-profile-action-dropdown) > .dropdown-item:hover,
body.vikinger-theme .dropdown-menu.action-dropdown-menu:not(.vikinger-profile-action-dropdown) > .dropdown-item:focus-visible {
background-color: #f5f4ff;
color: #615dfa;
outline: 0;
}
body.vikinger-theme .dropdown-menu.action-dropdown-menu:not(.vikinger-profile-action-dropdown) > .dropdown-item > .action {
display: flex;
align-items: center;
gap: 10px;
min-height: 20px;
color: inherit;
font: inherit;
}
body.vikinger-theme .dropdown-menu.action-dropdown-menu:not(.vikinger-profile-action-dropdown) > .dropdown-item > .action > .svg-container {
display: inline-flex;
flex: 0 0 20px;
align-items: center;
justify-content: center;
width: 20px !important;
height: 20px !important;
margin-right: 0 !important;
color: #615dfa;
fill: currentColor;
line-height: 0;
}
body.vikinger-theme .dropdown-menu.action-dropdown-menu:not(.vikinger-profile-action-dropdown) > .dropdown-item > .action > .svg-container > svg {
display: block;
width: 20px !important;
height: 20px !important;
max-width: 100%;
fill: currentColor;
}
body.vikinger-theme .dropdown-menu.action-dropdown-menu:not(.vikinger-profile-action-dropdown) > .dropdown-item > .action > .svg-container > svg * {
fill: currentColor;
}
body.vikinger-theme .dropdown-menu.action-dropdown-menu:not(.vikinger-profile-action-dropdown) > .dropdown-item > .action > span {
display: block;
min-width: 0;
}
body.vikinger-theme .dropdown-menu.action-dropdown-menu:not(.vikinger-profile-action-dropdown) > .dropdown-item > .action-desc {
margin: 4px 0 0 30px;
color: #8f91ac;
font-family: Rajdhani, sans-serif;
font-size: .75rem;
font-weight: 500;
line-height: 1.25;
white-space: normal;
}
body.vikinger-theme .dropdown-menu.action-dropdown-menu:not(.vikinger-profile-action-dropdown) > .dropdown-divider {
margin: 8px 16px;
border-top: 1px solid #eaeaf5;
opacity: 1;
}
body.vikinger-theme.night-mode .dropdown-menu.action-dropdown-menu:not(.vikinger-profile-action-dropdown) {
border-color: #34424d;
background-color: #262d34;
box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
}
body.vikinger-theme.night-mode .dropdown-menu.action-dropdown-menu:not(.vikinger-profile-action-dropdown) > .dropdown-item {
color: #c1d4e3;
}
body.vikinger-theme.night-mode .dropdown-menu.action-dropdown-menu:not(.vikinger-profile-action-dropdown) > .dropdown-item:hover,
body.vikinger-theme.night-mode .dropdown-menu.action-dropdown-menu:not(.vikinger-profile-action-dropdown) > .dropdown-item:focus-visible {
background-color: #2b3843;
color: #fff;
}
body.vikinger-theme.night-mode .dropdown-menu.action-dropdown-menu:not(.vikinger-profile-action-dropdown) > .dropdown-item > .action-desc {
color: #7890a3;
}
body.vikinger-theme.night-mode .dropdown-menu.action-dropdown-menu:not(.vikinger-profile-action-dropdown) > .dropdown-divider {
border-top-color: #34424d;
}
@media screen and (max-width: 480px) {
body.vikinger-theme .dropdown-menu.action-dropdown-menu:not(.vikinger-profile-action-dropdown) {
width: 220px;
min-width: 220px;
max-width: calc(100vw - 20px);
}
}
/*
* The profile composer is fetched through the existing Sngine modal endpoint.
* Keep the first click immediate while the real publisher markup is arriving;
* the loading template remains functional but does not flash a spinner or
* expose an empty-looking page behind the modal.
*/
body.vikinger-theme.vikinger-publisher-pending #modal .modal-content {
min-height: 220px;
border-radius: 22px;
overflow: hidden;
}
body.vikinger-theme.vikinger-publisher-pending #modal .modal-content > .modal-body {
min-height: 220px;
display: grid;
place-items: center;
background: linear-gradient(135deg, #ffffff 0%, #f8f8ff 100%);
}
body.vikinger-theme.vikinger-publisher-pending #modal .modal-content > .modal-body .spinner-border {
display: none !important;
}
body.vikinger-theme.vikinger-publisher-pending #modal .modal-content > .modal-body::after {
content: "";
width: 44px;
height: 44px;
border: 3px solid rgba(97, 93, 250, .14);
border-top-color: #615dfa;
border-radius: 50%;
animation: vikinger-publisher-shell-spin .72s linear infinite;
}
@keyframes vikinger-publisher-shell-spin {
to { transform: rotate(360deg); }
}
/*
* Final controls pass for the public utility pages. Bootstrap's legacy
* button and input rules are intentionally overridden only inside these
* page scopes so the Vikinger controls remain consistent without changing
* the rest of the platform.
*/
body.vikinger-theme .vikinger-info-banner .section-banner-title,
body.vikinger-theme .vikinger-info-banner .section-banner-text {
color: #fff;
}
body.vikinger-theme .vikinger-info-banner .section-banner-title {
margin: 0;
font-size: 2.25rem;
font-weight: 700;
line-height: 1.15;
}
body.vikinger-theme .vikinger-info-banner .section-banner-text {
margin: 10px 0 0;
font-size: 1rem;
font-weight: 500;
line-height: 1.4;
}
body.vikinger-theme .vikinger-support-page .btn,
body.vikinger-theme .vikinger-directory-detail-page .btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: auto;
min-height: 46px;
padding: 0 18px;
border: 0;
border-radius: 12px;
font-size: .875rem;
font-weight: 700;
line-height: 1;
box-shadow: none;
transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}
body.vikinger-theme .vikinger-support-page .btn-primary,
body.vikinger-theme .vikinger-directory-detail-page .btn-primary {
background: #615dfa;
color: #fff;
box-shadow: 4px 7px 12px rgba(97, 93, 250, .2);
}
body.vikinger-theme .vikinger-support-page .btn-secondary,
body.vikinger-theme .vikinger-directory-detail-page .btn-secondary {
background: #eaeaf5;
color: #3e3f5e;
}
body.vikinger-theme .vikinger-support-page .btn-light,
body.vikinger-theme .vikinger-directory-detail-page .btn-light {
border: 1px solid #dedeea;
background: #f0efff;
color: #615dfa;
}
body.vikinger-theme .vikinger-support-page .btn-danger {
background: #fff0f3;
color: #e54862;
}
body.vikinger-theme .vikinger-support-page .btn:hover,
body.vikinger-theme .vikinger-support-page .btn:focus-visible,
body.vikinger-theme .vikinger-directory-detail-page .btn:hover,
body.vikinger-theme .vikinger-directory-detail-page .btn:focus-visible {
box-shadow: 0 7px 16px rgba(94, 92, 154, .16);
outline: 0;
transform: translateY(-1px);
}
body.vikinger-theme .vikinger-support-page .input-group {
display: flex;
align-items: stretch;
width: 100%;
max-width: 620px;
}
body.vikinger-theme .vikinger-support-page .input-group > .form-control {
width: auto;
min-width: 0;
flex: 1 1 auto;
min-height: 54px;
border: 1px solid #dedeea;
border-right: 0;
border-radius: 12px 0 0 12px;
background: #fff;
box-shadow: none;
}
body.vikinger-theme .vikinger-support-page .input-group > .btn {
flex: 0 0 auto;
min-height: 54px;
border: 1px solid #dedeea;
border-left: 0;
border-radius: 0 12px 12px 0;
}
body.vikinger-theme .vikinger-support-page .form-text {
margin-top: 8px;
color: #8f91ac;
font-size: .8125rem;
font-weight: 500;
}
body.vikinger-theme .vikinger-support-page .badge,
body.vikinger-theme .vikinger-directory-detail-page .badge {
display: inline-flex;
align-items: center;
min-height: 26px;
padding: 4px 10px;
border-radius: 999px;
font-size: .6875rem;
font-weight: 700;
line-height: 1;
}
body.vikinger-theme .vikinger-support-page .forum-thread {
margin-bottom: 16px;
padding: 24px;
border-radius: 12px;
background: #fff;
box-shadow: 0 0 40px 0 rgba(94, 92, 154, .06);
}
body.vikinger-theme .vikinger-support-page .forum-thread .avatar,
body.vikinger-theme .vikinger-support-page .tbl-image,
body.vikinger-theme .vikinger-directory-detail-page .tbl-image {
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover;
}
body.vikinger-theme .vikinger-support-page .forum-thread h6 {
margin-top: 10px;
color: #3e3f5e;
font-size: .9375rem;
font-weight: 700;
}
body.vikinger-theme .vikinger-support-page .forum-thread .time {
padding-bottom: 12px;
border-bottom: 1px solid #eaeaf5;
color: #8f91ac;
font-size: .75rem;
}
body.vikinger-theme .vikinger-support-page .forum-thread .text {
padding-top: 16px;
color: #3e3f5e;
font-size: .9375rem;
font-weight: 500;
line-height: 1.65;
overflow-wrap: anywhere;
}
body.vikinger-theme .vikinger-support-page .posts-filter {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 48px;
margin-bottom: 16px;
color: #3e3f5e;
font-size: 1rem;
font-weight: 700;
}
body.vikinger-theme .vikinger-support-page .posts-filter .float-end {
float: none !important;
}
body.vikinger-theme .vikinger-support-page .divider,
body.vikinger-directory-detail-page .divider {
height: 1px;
margin: 16px 0;
background: #eaeaf5;
}
body.vikinger-theme .vikinger-support-page .form-control,
body.vikinger-theme .vikinger-directory-detail-page .form-control {
border-color: #dedeea;
border-radius: 12px;
color: #3e3f5e;
box-shadow: none;
transition: border-color .2s ease, box-shadow .2s ease;
}
body.vikinger-theme .vikinger-support-page .form-control:focus,
body.vikinger-theme .vikinger-directory-detail-page .form-control:focus {
border-color: #615dfa;
box-shadow: 0 0 0 3px rgba(97, 93, 250, .1);
outline: 0;
}
body.vikinger-theme .vikinger-directory-detail-page .card {
overflow: hidden;
border: 0;
border-radius: 12px;
box-shadow: 0 0 40px 0 rgba(94, 92, 154, .06);
}
body.vikinger-theme .vikinger-directory-detail-page .card-body {
padding: 24px;
}
/* Directory navigation: keep the category card compact and let each label
* follow its icon instead of distributing the two ends across the whole row. */
body.vikinger-theme .vikinger-directory-detail-page > .row > .sg-offcanvas-sidebar .card {
width: 100%;
max-width: 260px;
margin-right: auto;
}
body.vikinger-theme .vikinger-directory-detail-page > .row > .sg-offcanvas-sidebar .card-body.with-nav {
padding: 16px 12px;
}
body.vikinger-theme .vikinger-directory-detail-page > .row > .sg-offcanvas-sidebar .side-nav li a {
justify-content: flex-start !important;
gap: 8px;
padding-right: 10px;
padding-left: 10px;
}
body.vikinger-theme .vikinger-directory-detail-page > .row > .sg-offcanvas-sidebar .side-nav li a .svg-container {
flex: 0 0 24px;
margin-right: 0 !important;
}
/* The right chat sidebar already positions its 40x44 avatar layers at the
* origin of the avatar shell; preserve that original chat alignment. */
body.vikinger-theme .chat-widget .user-avatar-progress > .hexagon-progress-40-44.vikinger-hexagon-rendered,
body.vikinger-theme .chat-widget .user-avatar-progress-border > .hexagon-border-40-44.vikinger-hexagon-rendered {
top: 0 !important;
left: 0 !important;
transform: none;
}
/* Match Vikinger's small-avatar layer origin in posts, navigation and chat. */
body.vikinger-theme .user-avatar.small .user-avatar-progress,
body.vikinger-theme .user-avatar.small .user-avatar-progress-border {
top: 0 !important;
left: 0 !important;
transform: none !important;
}
/*
* Give every supported hexagon its final box from the beginning. The DOM/CSS
* adapter paints the avatar layers immediately, so an empty data-src element
* never collapses for one frame in profiles, pages, chat or navigation.
*/
body.vikinger-theme .hexagon-148-164 {
width: 148px;
height: 164px;
}
body.vikinger-theme .hexagon-image-124-136,
body.vikinger-theme .hexagon-progress-124-136,
body.vikinger-theme .hexagon-border-124-136 {
width: 124px;
height: 136px;
}
body.vikinger-theme .hexagon-image-100-110,
body.vikinger-theme .hexagon-progress-100-110,
body.vikinger-theme .hexagon-border-100-110 {
width: 100px;
height: 110px;
}
body.vikinger-theme .hexagon-image-82-90 {
width: 82px;
height: 90px;
}
body.vikinger-theme .hexagon-120-130,
body.vikinger-theme .hexagon-120-132 {
width: 120px;
}
body.vikinger-theme .hexagon-120-130 {
height: 130px;
}
body.vikinger-theme .hexagon-120-132 {
height: 132px;
}
body.vikinger-theme .hexagon-image-24-26 {
width: 24px;
height: 26px;
}
body.vikinger-theme .hexagon-image-30-32 {
width: 30px;
height: 32px;
}
body.vikinger-theme .hexagon-image-18-20 {
width: 18px;
height: 20px;
}
body.vikinger-theme .hexagon-progress-40-44,
body.vikinger-theme .hexagon-border-40-44 {
width: 40px;
height: 44px;
}
body.vikinger-theme .hexagon-22-24 {
width: 22px;
height: 24px;
}
body.vikinger-theme .hexagon-34-36 {
width: 34px;
height: 36px;
}
body.vikinger-theme .hexagon-overlay-30-32 {
width: 30px;
height: 32px;
}
body.vikinger-theme .hexagon-dark-16-18 {
width: 16px;
height: 18px;
}
body.vikinger-theme .hexagon-32-36 {
width: 32px;
height: 36px;
}
body.vikinger-theme .hexagon-dark-26-28 {
width: 26px;
height: 28px;
}
/* Paint the avatar layers directly in CSS.
* The pseudo-elements stay in place: avatar decoration is CSS-painted from
* the first frame and no delayed canvas is needed. */
body.vikinger-theme .hexagon-120-130::before,
body.vikinger-theme .hexagon-120-132::before {
content: "";
position: absolute;
inset: 0;
display: block;
background: #fff;
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
pointer-events: none;
}
/* Prepaint the larger profile/page avatar layers. These formats are used by
* page.tpl and profile.tpl, and otherwise become visible only when the
* the first frame. */
body.vikinger-theme .hexagon-148-164::before {
content: "";
position: absolute;
inset: 0;
display: block;
background: #fff;
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
pointer-events: none;
}
body.vikinger-theme .hexagon-22-24::before,
body.vikinger-theme .hexagon-32-36::before,
body.vikinger-theme .hexagon-34-36::before,
body.vikinger-theme .hexagon-overlay-30-32::before {
content: "";
position: absolute;
inset: 0;
display: block;
background: #fff;
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
pointer-events: none;
}
body.vikinger-theme .hexagon-dark-16-18::before,
body.vikinger-theme .hexagon-dark-26-28::before {
content: "";
position: absolute;
inset: 0;
display: block;
background: #45437f;
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
pointer-events: none;
}
body.vikinger-theme .hexagon-progress-124-136::before,
body.vikinger-theme .hexagon-border-124-136::before {
content: "";
position: absolute;
inset: 2px;
display: block;
border: 7px solid #e7e8ee;
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
pointer-events: none;
}
body.vikinger-theme .hexagon-progress-124-136::before {
border-color: #615dfa;
border-top-color: #41efff;
}
body.vikinger-theme .hexagon-progress-40-44::before,
body.vikinger-theme .hexagon-border-40-44::before,
body.vikinger-theme .hexagon-progress-100-110::before,
body.vikinger-theme .hexagon-border-100-110::before {
content: "";
position: absolute;
inset: 1px;
display: block;
border: 3px solid #615dfa;
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
pointer-events: none;
}
body.vikinger-theme .hexagon-progress-100-110::before,
body.vikinger-theme .hexagon-border-100-110::before {
border-width: 5px;
border-color: #e7e8ee;
}
/* Image layers are clipped by CSS from the first paint. */
body.vikinger-theme .hexagon-image-124-136,
body.vikinger-theme .hexagon-image-100-110,
body.vikinger-theme .hexagon-image-82-90,
body.vikinger-theme .hexagon-image-24-26,
body.vikinger-theme .hexagon-image-30-32,
body.vikinger-theme .hexagon-image-18-20 {
overflow: hidden;
/* Match Vikinger's full-width hexagon points; the sides must reach the
* container edges instead of being inset by the old 7% fallback. */
clip-path: polygon(50% 0%, 100% 24%, 100% 76%, 50% 100%, 0% 76%, 0% 24%);
}
body.vikinger-theme .vikinger-hexagon-image-element {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: center;
clip-path: polygon(50% 0%, 100% 24%, 100% 76%, 50% 100%, 0% 76%, 0% 24%);
pointer-events: none;
}
/* Vikinger's original XM_Hexagon renderer uses roundedCorners=true. Keep the
* same curved vertices in the immediate CSS fallback, without recreating a
* delayed canvas on the first paint. */
body.vikinger-theme .hexagon-148-164::before {
clip-path: path("M 66.591 4 Q 74 0 81.409 4 L 140.591 35.952 Q 148 39.952 148 47.361 L 148 116.639 Q 148 124.048 140.591 128.048 L 81.409 160 Q 74 164 66.591 160 L 7.409 128.048 Q 0 124.048 0 116.639 L 0 47.361 Q 0 39.952 7.409 35.952 L 66.591 4");
}
body.vikinger-theme .hexagon-image-124-136,
body.vikinger-theme .hexagon-image-124-136 .vikinger-hexagon-image-element {
clip-path: path("M 54.463 4 Q 62 0 69.537 4 L 116.463 28.905 Q 124 32.905 124 40.442 L 124 95.558 Q 124 103.095 116.463 107.095 L 69.537 132 Q 62 136 54.463 132 L 7.537 107.095 Q 0 103.095 0 95.558 L 0 40.442 Q 0 32.905 7.537 28.905 L 54.463 4");
}
body.vikinger-theme .hexagon-120-130::before {
clip-path: path("M 52.305 4 Q 60 0 67.695 4 L 112.305 27.189 Q 120 31.189 120 38.884 L 120 91.116 Q 120 98.811 112.305 102.811 L 67.695 126 Q 60 130 52.305 126 L 7.695 102.811 Q 0 98.811 0 91.116 L 0 38.884 Q 0 31.189 7.695 27.189 L 52.305 4");
}
body.vikinger-theme .hexagon-image-100-110,
body.vikinger-theme .hexagon-image-100-110 .vikinger-hexagon-image-element {
clip-path: path("M 42.5 4 Q 50 0 57.5 4 L 92.5 22.667 Q 100 26.667 100 34.167 L 100 75.833 Q 100 83.333 92.5 87.333 L 57.5 106 Q 50 110 42.5 106 L 7.5 87.333 Q 0 83.333 0 75.833 L 0 34.167 Q 0 26.667 7.5 22.667 L 42.5 4");
}
body.vikinger-theme .hexagon-34-36::before {
clip-path: path("M 14.999 1 Q 17 0 19.001 1 L 31.999 7.497 Q 34 8.497 34 10.498 L 34 25.502 Q 34 27.503 31.999 28.503 L 19.001 35 Q 17 36 14.999 35 L 2.001 28.503 Q 0 27.503 0 25.502 L 0 10.498 Q 0 8.497 2.001 7.497 L 14.999 1");
}
body.vikinger-theme .hexagon-overlay-30-32::before {
clip-path: path("M 13.025 1 Q 15 0 16.975 1 L 28.025 6.594 Q 30 7.594 30 9.569 L 30 22.431 Q 30 24.406 28.025 25.406 L 16.975 31 Q 15 32 13.025 31 L 1.975 25.406 Q 0 24.406 0 22.431 L 0 9.569 Q 0 7.594 1.975 6.594 L 13.025 1");
}
body.vikinger-theme .hexagon-image-30-32,
body.vikinger-theme .hexagon-image-30-32 .vikinger-hexagon-image-element {
clip-path: path("M 13.025 1 Q 15 0 16.975 1 L 28.025 6.594 Q 30 7.594 30 9.569 L 30 22.431 Q 30 24.406 28.025 25.406 L 16.975 31 Q 15 32 13.025 31 L 1.975 25.406 Q 0 24.406 0 22.431 L 0 9.569 Q 0 7.594 1.975 6.594 L 13.025 1");
}
body.vikinger-theme .hexagon-148-164,
body.vikinger-theme .hexagon-image-124-136,
body.vikinger-theme .hexagon-image-100-110,
body.vikinger-theme .hexagon-image-82-90,
body.vikinger-theme .hexagon-image-24-26,
body.vikinger-theme .hexagon-image-30-32,
body.vikinger-theme .hexagon-image-18-20,
body.vikinger-theme .hexagon-120-130,
body.vikinger-theme .hexagon-120-132,
body.vikinger-theme .hexagon-progress-124-136,
body.vikinger-theme .hexagon-border-124-136,
body.vikinger-theme .hexagon-progress-100-110,
body.vikinger-theme .hexagon-border-100-110,
body.vikinger-theme .hexagon-progress-40-44,
body.vikinger-theme .hexagon-border-40-44,
body.vikinger-theme .hexagon-22-24,
body.vikinger-theme .hexagon-dark-16-18,
body.vikinger-theme .hexagon-32-36,
body.vikinger-theme .hexagon-34-36,
body.vikinger-theme .hexagon-overlay-30-32,
body.vikinger-theme .hexagon-dark-26-28 {
display: block;
position: relative;
flex: 0 0 auto;
}
/* Keep image avatars stable while the browser decodes the first frame. */
body.vikinger-theme .hexagon-image-124-136.vikinger-hexagon-css-image,
body.vikinger-theme .hexagon-image-100-110.vikinger-hexagon-css-image,
body.vikinger-theme .hexagon-image-82-90.vikinger-hexagon-css-image,
body.vikinger-theme .hexagon-image-24-26.vikinger-hexagon-css-image,
body.vikinger-theme .hexagon-image-30-32.vikinger-hexagon-css-image,
body.vikinger-theme .hexagon-image-18-20.vikinger-hexagon-css-image {
min-width: 0;
min-height: 0;
background-color: transparent;
}
/* Retain the loading class rules for dynamically inserted legacy nodes. */
body.vikinger-theme .hexagon-image-124-136.vikinger-hexagon-image-loading,
body.vikinger-theme .hexagon-image-100-110.vikinger-hexagon-image-loading,
body.vikinger-theme .hexagon-image-82-90.vikinger-hexagon-image-loading,
body.vikinger-theme .hexagon-image-24-26.vikinger-hexagon-image-loading,
body.vikinger-theme .hexagon-image-30-32.vikinger-hexagon-image-loading,
body.vikinger-theme .hexagon-image-18-20.vikinger-hexagon-image-loading {
overflow: hidden;
clip-path: polygon(50% 0%, 100% 24%, 100% 76%, 50% 100%, 0% 76%, 0% 24%);
}
/* A legacy canvas, if supplied by another template, stays hidden while the
* direct DOM image is decoding. The Vikinger adapter itself creates none. */
body.vikinger-theme .hexagon-image-124-136.vikinger-hexagon-image-loading canvas,
body.vikinger-theme .hexagon-image-100-110.vikinger-hexagon-image-loading canvas,
body.vikinger-theme .hexagon-image-82-90.vikinger-hexagon-image-loading canvas,
body.vikinger-theme .hexagon-image-24-26.vikinger-hexagon-image-loading canvas,
body.vikinger-theme .hexagon-image-30-32.vikinger-hexagon-image-loading canvas,
body.vikinger-theme .hexagon-image-18-20.vikinger-hexagon-image-loading canvas {
opacity: 0;
}
/* Keep the same transparent image layer used by the static template. */
body.vikinger-theme .profile-avatar-wrapper .hexagon-image-124-136,
body.vikinger-theme .profile-avatar-wrapper .hexagon-image-100-110,
body.vikinger-theme .profile-avatar-wrapper .hexagon-image-82-90 {
background-color: transparent;
}
/* Match Vikinger's stable avatar layer order. */
body.vikinger-theme .profile-avatar-wrapper .user-avatar-content {
z-index: 4;
}
body.vikinger-theme .profile-avatar-wrapper .vikinger-profile-avatar-image {
z-index: 5 !important;
}
body.vikinger-theme .profile-avatar-wrapper .user-avatar-progress,
body.vikinger-theme .profile-avatar-wrapper .user-avatar-progress-border {
pointer-events: none;
}
/* Directory posts: use the same Vikinger post frame and width as the main feed. */
body.vikinger-theme .vikinger-directory-posts-page > .row {
align-items: flex-start;
}
body.vikinger-theme .vikinger-directory-posts-page > .row > .sg-offcanvas-mainbar {
min-width: 0;
}
body.vikinger-theme .vikinger-directory-posts-page > .row > .sg-offcanvas-mainbar > .row {
margin-right: 0;
margin-left: 0;
}
body.vikinger-theme .vikinger-directory-posts-page > .row > .sg-offcanvas-mainbar > .row > .col-lg-8 {
flex: 0 0 100%;
width: 100%;
max-width: 100%;
padding-right: 0;
padding-left: 0;
}
body.vikinger-theme .vikinger-directory-posts-feed {
display: flex;
flex-direction: column;
gap: 24px;
width: min(100%, 820px);
margin: 0 auto;
}
body.vikinger-theme .vikinger-directory-posts-feed > .vikinger-post {
width: 100%;
margin: 0;
}
body.vikinger-theme .vikinger-directory-posts-page .pager,
body.vikinger-theme .vikinger-directory-posts-page .pagination {
justify-content: center;
margin-top: 24px;
}
@media screen and (max-width: 767.98px) {
body.vikinger-theme .vikinger-directory-posts-page {
width: calc(100% - 32px);
}
body.vikinger-theme .vikinger-directory-posts-page > .row > .sg-offcanvas-sidebar {
margin-bottom: 20px;
}
body.vikinger-theme .vikinger-directory-posts-feed {
gap: 16px;
}
body.vikinger-theme .vikinger-directory-detail-page > .row > .sg-offcanvas-sidebar .card {
max-width: none;
}
}
@media screen and (max-width: 960px) {
body.vikinger-theme .vikinger-info-banner .section-banner-title {
font-size: 1.5rem;
}
body.vikinger-theme .vikinger-info-banner .section-banner-text {
margin-top: 6px;
font-size: .75rem;
}
}
@media screen and (max-width: 1365px) {
body.vikinger-theme section.section-banner + .section-filters-bar.vikinger-groups-filters {
display: flex;
align-items: stretch;
padding: 32px 28px;
}
body.vikinger-theme .vikinger-groups-filters > .section-filters-bar-actions:first-child {
width: 100%;
padding-right: 0;
}
body.vikinger-theme .vikinger-groups-filters > .section-filters-bar-actions:last-child {
width: 100% !important;
height: auto;
margin-top: 24px;
position: static;
justify-content: center;
}
}
@media screen and (max-width: 575.98px) {
body.vikinger-theme .vikinger-info-banner .section-banner-title {
font-size: 1.25rem;
}
body.vikinger-theme .vikinger-support-page .input-group {
max-width: none;
}
body.vikinger-theme .vikinger-support-page .input-group > .btn {
padding-right: 12px;
padding-left: 12px;
}
body.vikinger-theme .vikinger-support-page .forum-thread {
padding: 18px;
}
body.vikinger-theme .vikinger-support-page .posts-filter {
align-items: flex-start;
flex-direction: column;
gap: 10px;
}
}
/*
* Header create menu
*
* The original Vikinger dropdown-box uses its own list-item geometry. The
* legacy header added Bootstrap's `.dropdown-item` class to these rows,
* which changes the font, line-height, color and whitespace rules. Keep the
* native Vikinger box/list and scope the bridge to the Create menu only.
*/
body.vikinger-theme .header .vikinger-create-dropdown-wrap > .dropdown-box.header-dropdown {
width: 384px;
max-width: calc(100vw - 24px);
padding-bottom: 0;
border-radius: 10px;
background-color: #fff;
box-shadow: 3px 5px 40px 0 rgba(94, 92, 154, .06);
}
body.vikinger-theme .header .vikinger-create-dropdown-wrap > .dropdown-box.header-dropdown > .dropdown-box-list {
height: auto;
overflow: visible;
}
body.vikinger-theme .header .vikinger-create-dropdown-wrap > .dropdown-box.header-dropdown .dropdown-box-list-item {
display: block;
width: 100%;
box-sizing: border-box;
padding: 16px 28px;
border: 0;
border-radius: 0;
background-color: transparent;
color: #3e3f5e;
font-family: Rajdhani, sans-serif;
font-size: 1rem;
font-weight: 500;
line-height: 1em;
text-align: left;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: background-color .2s ease-in-out, color .2s ease-in-out;
}
body.vikinger-theme .header .vikinger-create-dropdown-wrap > .dropdown-box.header-dropdown .dropdown-box-list-item:hover,
body.vikinger-theme .header .vikinger-create-dropdown-wrap > .dropdown-box.header-dropdown .dropdown-box-list-item:focus-visible {
background-color: #eaeaf5;
color: #3e3f5e;
outline: 0;
}
body.vikinger-theme .header .vikinger-create-dropdown-wrap > .dropdown-box.header-dropdown .dropdown-box-list-item .main-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px !important;
height: 20px !important;
margin-right: 10px !important;
color: #adafca;
fill: currentColor;
line-height: 0;
vertical-align: middle;
}
body.vikinger-theme .header .vikinger-create-dropdown-wrap > .dropdown-box.header-dropdown .dropdown-box-list-item .main-icon > svg {
display: block;
width: 20px !important;
height: 20px !important;
max-width: 100%;
fill: currentColor !important;
}
body.vikinger-theme .header .vikinger-create-dropdown-wrap > .dropdown-box.header-dropdown .dropdown-box-list-item .main-icon > svg * {
fill: currentColor !important;
}
body.vikinger-theme .header .vikinger-create-dropdown-wrap > .dropdown-box.header-dropdown .dropdown-box-list-item:hover .main-icon,
body.vikinger-theme .header .vikinger-create-dropdown-wrap > .dropdown-box.header-dropdown .dropdown-box-list-item:focus-visible .main-icon {
color: #615dfa;
}
body.vikinger-theme.night-mode .header .vikinger-create-dropdown-wrap > .dropdown-box.header-dropdown {
background-color: #262d34;
box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
}
body.vikinger-theme.night-mode .header .vikinger-create-dropdown-wrap > .dropdown-box.header-dropdown .dropdown-box-list-item {
color: #c1d4e3;
}
body.vikinger-theme.night-mode .header .vikinger-create-dropdown-wrap > .dropdown-box.header-dropdown .dropdown-box-list-item:hover,
body.vikinger-theme.night-mode .header .vikinger-create-dropdown-wrap > .dropdown-box.header-dropdown .dropdown-box-list-item:focus-visible {
background-color: #2d3b45;
color: #fff;
}
body.vikinger-theme.night-mode .header .vikinger-create-dropdown-wrap > .dropdown-box.header-dropdown .dropdown-box-list-item .main-icon {
color: #83caff;
}
body.vikinger-theme .vikinger-post-standalone .vikinger-post-content {
width: auto;
min-width: 0;
margin: 20px 28px 0;
overflow: visible;
}
body.vikinger-theme .vikinger-post-standalone .vikinger-post-replace,
body.vikinger-theme .vikinger-post-standalone .vikinger-post-content > * {
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
/*
* A single photo is rendered directly inside .vikinger-post-content. That
* content column keeps the 28px text gutter used by the standalone header,
* while Vikinger's post media is meant to run from card edge to card edge.
* Bleed only this direct photo figure so text, collages and lightbox markup
* keep their existing layout and behavior.
*/
body.vikinger-theme .vikinger-post-standalone .vikinger-post-content > figure.widget-box-picture.popup-picture-trigger {
width: calc(100% + 56px);
max-width: none;
margin-right: -28px;
margin-left: -28px;
box-sizing: border-box;
}
body.vikinger-theme .vikinger-post-standalone .vikinger-post-content > figure.widget-box-picture.popup-picture-trigger > img {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
body.vikinger-theme .vikinger-post-standalone .vikinger-post-text {
margin: 0;
color: #3e3f5e;
font-size: .875rem;
font-weight: 500;
line-height: 1.7142857143em;
overflow-wrap: anywhere;
}
body.vikinger-theme .vikinger-post-standalone .vikinger-post-text[data-readmore] {
overflow: hidden;
}
body.vikinger-theme .vikinger-post-standalone .vikinger-post-replace > [data-readmore-toggle],
body.vikinger-theme .vikinger-post-standalone .vikinger-post-replace > .meta-line [data-readmore-toggle] {
display: block;
width: max-content;
max-width: 100%;
margin-top: 8px;
color: #615dfa;
font-size: .75rem;
font-weight: 700;
line-height: 1.35;
}
body.vikinger-theme .vikinger-post-standalone .vikinger-post-replace > [data-readmore-toggle]:hover,
body.vikinger-theme .vikinger-post-standalone .vikinger-post-replace > [data-readmore-toggle]:focus-visible,
body.vikinger-theme .vikinger-post-standalone .vikinger-post-replace > .meta-line [data-readmore-toggle]:hover,
body.vikinger-theme .vikinger-post-standalone .vikinger-post-replace > .meta-line [data-readmore-toggle]:focus-visible {
color: #00c7d9;
text-decoration: none;
}
body.vikinger-theme .vikinger-post-standalone .vikinger-post-text a:not([href*="/search/hashtag/"]) {
color: #615dfa;
}
body.vikinger-theme .vikinger-post-standalone .vikinger-post-text a:not([href*="/search/hashtag/"]):hover,
body.vikinger-theme .vikinger-post-standalone .vikinger-post-text a:not([href*="/search/hashtag/"]):focus-visible {
color: #00c7d9;
}
body.vikinger-theme .vikinger-post-standalone .vikinger-post-replace > .meta-line {
margin-top: 10px;
}
body.vikinger-theme .vikinger-post-standalone .video-status,
body.vikinger-theme .vikinger-post-standalone .post-media,
body.vikinger-theme .vikinger-post-standalone .picture-collage,
body.vikinger-theme .vikinger-post-standalone .iframe-wrap,
body.vikinger-theme .vikinger-post-standalone .poll-box,
body.vikinger-theme .vikinger-post-standalone .pg_wrapper {
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
body.vikinger-theme .vikinger-post-standalone .video-status {
margin-top: 24px;
overflow: hidden;
}
body.vikinger-theme .vikinger-post-standalone .video-status-image,
body.vikinger-theme .vikinger-post-standalone .post-media img,
body.vikinger-theme .vikinger-post-standalone .pg_wrapper img,
body.vikinger-theme .vikinger-post-standalone .picture-collage img,
body.vikinger-theme .vikinger-post-standalone video,
body.vikinger-theme .vikinger-post-standalone iframe {
display: block;
width: 100%;
max-width: 100%;
min-width: 0;
height: auto;
}
body.vikinger-theme .vikinger-post-standalone .vikinger-post-content-actions {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
width: auto;
min-width: 0;
min-height: 52px;
height: auto;
margin: 28px 28px 0;
padding: 0;
border-top: 1px solid #eaeaf5;
color: #3e3f5e;
box-sizing: border-box;
}
body.vikinger-theme .vikinger-post-standalone .post-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
width: 100%;
min-height: 65px;
height: 65px;
margin: 0;
padding: 0 28px;
border-top: 0;
border-bottom: 1px solid #eaeaf5;
border-bottom-right-radius: 12px;
border-bottom-left-radius: 12px;
background-color: #fcfcfd;
box-sizing: border-box;
}
body.vikinger-theme .vikinger-post-standalone .post-actions > .post-option-wrap,
body.vikinger-theme .vikinger-post-standalone .post-actions > .post-option {
display: flex;
align-items: center;
justify-content: center;
flex: 1 1 0;
width: auto;
min-width: 0;
}
body.vikinger-theme .vikinger-post-standalone .post-actions > .post-option-wrap > .post-option {
width: 100%;
}
body.vikinger-theme .vikinger-post-standalone .post-actions .post-option {
min-width: 0;
margin: 0;
}
body.vikinger-theme .vikinger-post-standalone .post-footer {
width: 100%;
margin: 0;
padding: 0;
background-color: #fff;
box-sizing: border-box;
}
body.vikinger-theme .vikinger-post-standalone .post-footer > .vikinger-comments > .pb10 {
margin: 0;
padding: 18px 28px 20px !important;
border-top: 1px solid #eaeaf5;
border-bottom-right-radius: 12px;
border-bottom-left-radius: 12px;
color: #8f91ac;
font-size: .875rem;
line-height: 1.5;
}
body.vikinger-theme .vikinger-post-standalone .post-footer > .vikinger-comments > .pb10 a {
color: #615dfa;
font-weight: 700;
}
body.vikinger-theme .vikinger-post-standalone .post-footer > .vikinger-comments > .pb10 a:hover,
body.vikinger-theme .vikinger-post-standalone .post-footer > .vikinger-comments > .pb10 a:focus-visible {
color: #00c7d9;
text-decoration: none;
}
body.vikinger-theme .content-grid[data-vikinger-scope="page"] .sg-offcanvas-mainbar,
body.vikinger-theme .content-grid[data-vikinger-scope="page"] .sg-offcanvas-mainbar > .row,
body.vikinger-theme .content-grid[data-vikinger-scope="page"] .sg-offcanvas-mainbar > .row > .col-lg-8,
body.vikinger-theme .vikinger-post-standalone .post-body,
body.vikinger-theme .vikinger-post-standalone .vikinger-post-content {
min-width: 0;
}
@media screen and (max-width: 767.98px) {
body.vikinger-theme .vikinger-post-standalone {
width: calc(100vw - 24px);
max-width: calc(100vw - 24px);
margin-bottom: 16px;
border-radius: 0;
}
body.vikinger-theme .vikinger-post-standalone > .post-body {
padding-top: 20px;
border-radius: 0;
overflow-x: hidden;
}
body.vikinger-theme .vikinger-post-standalone .vikinger-post-user-status {
margin-right: 18px;
margin-left: 18px;
padding-right: 48px;
padding-left: 52px;
}
body.vikinger-theme .vikinger-post-standalone .vikinger-post-content {
margin-right: 18px;
margin-left: 18px;
}
body.vikinger-theme .vikinger-post-standalone .vikinger-post-content > figure.widget-box-picture.popup-picture-trigger {
width: calc(100% + 36px);
margin-right: -18px;
margin-left: -18px;
}
body.vikinger-theme .vikinger-post-standalone > .post-body > .float-end.dropdown {
top: 18px;
right: 8px;
}
body.vikinger-theme .post .vikinger-post-user-status > .float-end.dropdown {
top: 2px;
right: -10px;
}
body.vikinger-theme .vikinger-post-standalone .vikinger-post-content-actions {
margin-right: 18px;
margin-left: 18px;
padding: 12px 0;
}
body.vikinger-theme .vikinger-post-standalone .vikinger-post-reactions-summary,
body.vikinger-theme .vikinger-post-standalone .vikinger-post-engagement-summary {
width: 100%;
flex: 1 1 100%;
}
body.vikinger-theme .vikinger-post-standalone .vikinger-post-engagement-summary {
justify-content: center;
gap: 8px 18px;
margin-top: 6px;
}
body.vikinger-theme .vikinger-post-standalone .post-actions {
gap: 4px;
padding-right: 18px;
padding-left: 18px;
}
body.vikinger-theme .vikinger-post-standalone .post-footer > .vikinger-comments > .pb10 {
padding-right: 18px !important;
padding-left: 18px !important;
}
}
@media screen and (max-width: 479px) {
body.vikinger-theme .vikinger-post-standalone .vikinger-post-user-status {
padding-right: 42px;
}
body.vikinger-theme .vikinger-post-standalone .vikinger-post-title {
font-size: .9375rem;
}
body.vikinger-theme .vikinger-post-standalone .vikinger-post-text {
font-size: .875rem;
}
body.vikinger-theme .vikinger-post-standalone .post-actions {
min-height: 58px;
height: 58px;
}
}
html[dir="RTL"] body.vikinger-theme .vikinger-post-standalone .vikinger-post-avatar-link {
right: 0;
left: auto;
}
html[dir="RTL"] body.vikinger-theme .vikinger-post-standalone .vikinger-post-user-status {
padding-right: 52px;
padding-left: 64px;
}
html[dir="RTL"] body.vikinger-theme .vikinger-post-standalone > .post-body > .float-end.dropdown {
right: auto;
left: 10px;
}
html[dir="RTL"] body.vikinger-theme .post .vikinger-post-user-status > .float-end.dropdown {
right: auto;
left: -18px;
}
@media screen and (max-width: 767.98px) {
html[dir="RTL"] body.vikinger-theme .post .vikinger-post-user-status > .float-end.dropdown {
left: -10px;
}
}
/*
* Legacy Vikinger post publisher modal
*
* The outer shell is shared with V5. Content rules are scoped to the older
* publisher structure; the Nova-derived V5 markup keeps its own utilities.
*/
body.vikinger-theme.vikinger-post-modal-active {
overflow: hidden;
}
body.vikinger-theme.vikinger-post-modal-active > .modal-backdrop {
z-index: 10000;
background: #3e3f5e;
opacity: .48;
}
body.vikinger-theme #modal.vikinger-post-modal-open {
z-index: 10001;
overflow-x: hidden;
/* Keep scrolling inside the composer body rather than on Bootstrap's
* outer modal, avoiding competing scroll areas. */
overflow-y: hidden;
padding-right: 0 !important;
}
body.vikinger-theme #modal.vikinger-post-modal-open .modal-dialog {
display: flex;
align-items: center;
width: min(92vw, 960px);
max-width: 960px;
height: auto;
min-height: 0;
max-height: calc(100vh - 32px);
margin: 16px auto;
}
body.vikinger-theme #modal.vikinger-post-modal-open .modal-content {
--vikinger-modal-text: #3e3f5e;
--vikinger-modal-muted: #adafca;
--vikinger-modal-primary: #615dfa;
--vikinger-modal-primary-dark: #4c48cc;
--vikinger-modal-accent: #23d2e2;
--vikinger-modal-border: #eaeaf5;
--vikinger-modal-surface: #fcfcfd;
--vikinger-modal-soft: #f5f4ff;
display: flex;
flex-direction: column;
width: 100%;
height: auto;
min-height: 0;
max-height: calc(100vh - 32px);
overflow: hidden;
border: 1px solid var(--vikinger-modal-border);
border-radius: 16px;
background: #fff;
color: var(--vikinger-modal-text);
box-shadow: 0 18px 52px rgba(62, 63, 94, .22);
}
body.vikinger-theme #modal.vikinger-post-modal-open .vikinger-post-modal-header {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
min-height: 62px;
padding: 12px 56px;
border-bottom: 1px solid var(--vikinger-modal-border);
background: #fff;
}
body.vikinger-theme #modal.vikinger-post-modal-open .vikinger-post-modal-header .modal-title {
max-width: 100%;
margin: 0;
overflow: hidden;
color: var(--vikinger-modal-text);
font-size: 18px;
font-weight: 700;
line-height: 1.35;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
}
body.vikinger-theme #modal.vikinger-post-modal-open .vikinger-post-modal-header .btn-close {
position: absolute;
inset-inline-end: 14px;
top: 13px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
margin: 0;
padding: 0;
border: 0;
border-radius: 10px;
background-color: #f0efff;
background-size: 12px;
opacity: 1;
box-shadow: none;
transition: background-color .2s ease, transform .2s ease;
}
body.vikinger-theme #modal.vikinger-post-modal-open .vikinger-post-modal-header .btn-close:hover,
body.vikinger-theme #modal.vikinger-post-modal-open .vikinger-post-modal-header .btn-close:focus {
background-color: #e4e2ff;
opacity: 1;
outline: 0;
transform: rotate(6deg);
}
body.vikinger-theme #modal.vikinger-post-modal-open .vikinger-post-modal-body {
display: block;
flex: 1 1 auto;
min-height: 0;
padding: 0 !important;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
background: #fff;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) {
display: flex;
flex: 0 0 auto;
flex-direction: column;
width: 100%;
min-height: 0;
max-height: none;
overflow: visible;
background: #fff;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) > .publisher-overlay,
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-close {
display: none !important;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) #publisher-box.vikinger-modal-publisher {
display: flex;
flex: 0 0 auto;
flex-direction: column;
min-height: 0;
margin: 0;
overflow: visible;
border: 0;
border-radius: 0;
background: #fff;
box-shadow: none;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-loader {
z-index: 5;
border-radius: inherit;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-message.vikinger-post-modal-message {
display: flex !important;
align-items: flex-start;
gap: 14px;
position: relative !important;
flex: 0 0 auto !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 18px !important;
overflow: visible !important;
background: #fff;
}
/* Keep the avatar and editor in one shared row before and after linking a game. */
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) #publisher-box.vikinger-modal-publisher.games-library-post-link-mode .publisher-message.vikinger-post-modal-message {
display: flex !important;
align-items: flex-start;
gap: 14px;
padding: 18px !important;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) #publisher-box.vikinger-modal-publisher.games-library-post-link-mode .publisher-message.vikinger-post-modal-message > .publisher-avatar {
position: static !important;
flex: 0 0 44px;
inset: auto;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) #publisher-box.vikinger-modal-publisher.games-library-post-link-mode .publisher-message.vikinger-post-modal-message > .form-item {
flex: 1 1 0%;
width: auto !important;
}
@media screen and (max-width: 767px) {
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-message.vikinger-post-modal-message {
gap: 10px;
padding: 14px 12px !important;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) #publisher-box.vikinger-modal-publisher.games-library-post-link-mode .publisher-message.vikinger-post-modal-message {
gap: 10px;
padding: 14px 12px !important;
}
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-message.vikinger-post-modal-message > .publisher-avatar {
display: block;
position: static !important;
inset: auto;
flex: 0 0 44px;
width: 44px;
height: 44px;
margin: 0;
border: 3px solid rgba(97, 93, 250, .2);
border-radius: 50%;
object-fit: cover;
background: #f0efff;
box-shadow: 0 0 0 3px #fff;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-message.vikinger-post-modal-message > .form-item,
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-message.vikinger-post-modal-message .form-textarea,
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-message.vikinger-post-modal-message .colored-text-wrapper {
display: block;
width: auto !important;
min-width: 0;
margin: 0;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-message.vikinger-post-modal-message > .form-item {
flex: 1 1 0%;
}
/* Diamond keeps one native textarea visible in the modal. Quill remains in
* the DOM for Sngine's submit contract, but showing both editors at once
* creates overlapping carets, mention layers and input handlers. */
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-message.vikinger-post-modal-message .quill-editor,
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-message.vikinger-post-modal-message .ql-container {
display: none !important;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-message.vikinger-post-modal-message textarea.js_publisher-scraper {
display: block !important;
width: 100%;
min-height: 128px !important;
max-height: 230px;
padding: 17px 18px;
border: 1px solid var(--vikinger-modal-border);
border-radius: 14px;
background: var(--vikinger-modal-surface);
box-sizing: border-box;
overflow-y: auto;
color: var(--vikinger-modal-text);
font-size: 15px;
line-height: 1.65;
outline: 0;
resize: none;
text-align: left;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-message.vikinger-post-modal-message textarea.js_publisher-scraper:focus {
border-color: rgba(97, 93, 250, .55);
box-shadow: 0 0 0 3px rgba(97, 93, 250, .1);
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-message.vikinger-post-modal-message textarea.js_publisher-scraper::placeholder {
color: var(--vikinger-modal-muted);
font-size: 15px;
font-style: normal;
line-height: 1.65;
text-align: left !important;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-message.vikinger-post-modal-message .form-textarea-limit-text {
display: none;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .vikinger-post-modal-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
flex: 0 0 auto;
gap: 14px;
min-height: 64px;
padding: 10px 18px;
border-top: 1px solid var(--vikinger-modal-border);
border-bottom: 1px solid var(--vikinger-modal-border);
background: #fff;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .vikinger-post-modal-privacy-slot {
position: relative;
flex: 0 0 auto;
min-width: 0;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .vikinger-post-modal-toolbar .js_publisher-privacy,
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-footer-buttons .js_publisher-privacy {
position: relative;
display: block;
margin: 0;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .vikinger-post-modal-toolbar .js_publisher-privacy > .btn,
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-footer-buttons .js_publisher-privacy > .btn {
display: inline-flex;
align-items: center;
min-height: 38px;
max-width: 220px;
margin: 0;
padding: 8px 12px;
overflow: hidden;
border: 0;
border-radius: 10px;
background: var(--vikinger-modal-soft);
color: var(--vikinger-modal-primary);
font-size: 13px;
font-weight: 700;
line-height: 20px;
text-overflow: ellipsis;
white-space: nowrap;
transition: background-color .2s ease, color .2s ease;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .vikinger-post-modal-toolbar .js_publisher-privacy > .btn:hover,
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-footer-buttons .js_publisher-privacy > .btn:hover,
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .vikinger-post-modal-toolbar .js_publisher-privacy > .btn:focus,
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-footer-buttons .js_publisher-privacy > .btn:focus {
background: #e7e5ff;
color: var(--vikinger-modal-primary-dark);
outline: 0;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .vikinger-post-modal-toolbar .js_publisher-privacy .btn-group-icon,
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-footer-buttons .js_publisher-privacy .btn-group-icon {
flex: 0 0 auto;
margin-inline-end: 8px;
color: var(--vikinger-modal-primary);
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .js_publisher-privacy .dropdown-menu {
z-index: 1065;
min-width: 220px;
max-width: min(280px, calc(100vw - 32px));
margin-top: 8px;
padding: 6px 0;
overflow: visible;
border: 1px solid var(--vikinger-modal-border);
border-radius: 12px;
background: #fff;
box-shadow: 0 12px 30px rgba(62, 63, 94, .18);
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .js_publisher-privacy .dropdown-item {
display: block;
width: 100%;
padding: 10px 14px;
overflow-wrap: anywhere;
color: var(--vikinger-modal-text);
font-size: 14px;
line-height: 20px;
white-space: normal;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .js_publisher-privacy .dropdown-item:hover,
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .js_publisher-privacy .dropdown-item:focus {
background: var(--vikinger-modal-soft);
color: var(--vikinger-modal-primary);
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-toolbar-icons {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
min-width: 0;
margin-inline-start: auto;
overflow-x: auto;
scrollbar-width: none;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-toolbar-icons::-webkit-scrollbar {
display: none;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-toolbar-icons .pub-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 38px;
width: 38px;
height: 38px;
padding: 0;
border: 1px solid transparent;
border-radius: 10px;
background: #f5f4ff;
color: var(--vikinger-modal-primary);
font-size: 20px;
font-weight: 700;
line-height: 1;
cursor: pointer;
transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-toolbar-icons .pub-icon-btn:hover,
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-toolbar-icons .pub-icon-btn:focus {
border-color: rgba(97, 93, 250, .22);
background: #e9e7ff;
color: var(--vikinger-modal-primary-dark);
outline: 0;
transform: translateY(-1px);
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-toolbar-icons .pub-icon-btn .main-icon,
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-toolbar-icons .pub-icon-btn .main-icon * {
width: 20px !important;
height: 20px !important;
margin: 0 !important;
color: currentColor !important;
fill: currentColor !important;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-slider {
display: flex !important;
flex: 0 0 auto;
flex-direction: column;
min-height: 0;
max-height: none;
overflow-x: hidden;
overflow-y: visible;
background: #fff;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-scraper {
display: none;
position: relative;
flex: 0 0 auto;
min-width: 0;
margin: 0 18px 14px;
padding: 0;
overflow: hidden;
border: 1px solid var(--vikinger-modal-border);
border-radius: 12px;
background: var(--vikinger-modal-surface);
color: var(--vikinger-modal-text);
box-shadow: 0 6px 18px rgba(62, 63, 94, .08);
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-scraper > .post-media {
display: block;
min-width: 0;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-scraper .post-media-image {
display: block;
position: relative;
width: 100%;
height: clamp(160px, 24vw, 240px);
min-height: 160px;
overflow: hidden;
background: var(--vikinger-modal-soft);
text-decoration: none;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-scraper .post-media-image:focus-visible {
outline: 3px solid rgba(97, 93, 250, .35);
outline-offset: -3px;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-scraper .post-media-image img,
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-scraper .post-media-image .image {
display: block;
width: 100%;
max-width: 100%;
height: 100%;
min-height: 160px;
border-radius: 0;
background-color: #eeedff;
object-fit: cover;
}
/* Diamond_pro keeps scraper images at their natural aspect ratio. Do the
* same for the real ![]()
previews so the remote artwork is never cropped;
* background-image cards (GIFs and other media) keep the fixed card geometry. */
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-scraper .post-media-image.vikinger-scraper-natural-image {
height: auto;
min-height: 0;
overflow: hidden;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-scraper .post-media-image.vikinger-scraper-natural-image img {
height: auto;
min-height: 0;
object-fit: initial;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-scraper .post-media-image .source {
position: absolute;
right: auto;
bottom: 12px;
inset-inline-end: 12px;
max-width: calc(100% - 24px);
padding: 6px 10px;
overflow: hidden;
border-radius: 8px;
background: rgba(31, 31, 52, .78);
color: #fff;
font-size: 10px;
font-weight: 700;
line-height: 14px;
text-overflow: ellipsis;
text-transform: uppercase;
white-space: nowrap;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-scraper .post-media-meta {
width: 100%;
min-width: 0;
padding: 16px 18px 18px;
background: #fff;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-scraper .post-media-meta .title {
display: block;
margin: 0 0 6px;
overflow-wrap: anywhere;
color: var(--vikinger-modal-text);
font-size: 15px;
font-weight: 700;
line-height: 21px;
text-decoration: none;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-scraper .post-media-meta .title:hover,
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-scraper .post-media-meta .title:focus-visible {
color: var(--vikinger-modal-primary);
text-decoration: none;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-scraper .post-media-meta .text {
max-height: 76px;
margin: 0;
overflow: hidden;
color: var(--vikinger-modal-muted);
font-size: 13px;
font-weight: 500;
line-height: 19px;
overflow-wrap: anywhere;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-scraper .post-media-meta .source {
display: block;
margin-top: 8px;
overflow-wrap: anywhere;
color: var(--vikinger-modal-muted);
font-size: 11px;
font-weight: 700;
line-height: 15px;
text-transform: uppercase;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-scraper > div:not(.publisher-scraper-remover) > video,
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-scraper > div:not(.publisher-scraper-remover) iframe {
display: block;
width: 100%;
max-width: 100%;
border: 0;
border-radius: 12px;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-scraper-remover {
display: flex;
position: absolute;
top: 10px;
right: auto;
inset-inline-end: 10px;
z-index: 3;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: 1px solid rgba(234, 234, 245, .95);
border-radius: 50%;
background: rgba(255, 255, 255, .94);
box-shadow: 0 4px 12px rgba(62, 63, 94, .14);
transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-scraper-remover:hover,
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-scraper-remover:focus-within {
border-color: rgba(97, 93, 250, .35);
background: #fff;
transform: translateY(-1px);
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-scraper-remover .btn-close {
width: 14px;
height: 14px;
margin: 0;
padding: 0;
opacity: .65;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-scraper-remover .btn-close:hover,
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-scraper-remover .btn-close:focus-visible {
opacity: 1;
outline: 0;
}
@media screen and (max-width: 575px) {
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-scraper {
margin-right: 12px;
margin-left: 12px;
border-radius: 11px;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-scraper .post-media-image,
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-scraper .post-media-image img,
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-scraper .post-media-image .image {
height: 180px;
min-height: 180px;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-scraper .post-media-meta {
padding: 14px 15px 16px;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-scraper .post-media-image.vikinger-scraper-natural-image,
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-scraper .post-media-image.vikinger-scraper-natural-image img {
height: auto;
min-height: 0;
}
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-attachments {
flex: 0 0 auto;
margin: 0;
padding: 12px 18px 4px;
background: #fff;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-meta,
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-custom-thumbnail {
position: relative;
display: none;
flex: 0 0 auto;
margin: 0 18px 12px;
padding: 14px;
border: 1px solid var(--vikinger-modal-border);
border-radius: 12px;
background: var(--vikinger-modal-surface);
color: var(--vikinger-modal-text);
font-weight: 600;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-meta input,
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-meta select,
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-meta textarea,
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-custom-thumbnail input,
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-custom-thumbnail select,
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-custom-thumbnail textarea {
width: 100%;
min-width: 0;
min-height: 42px;
padding: 10px 12px;
border: 1px solid var(--vikinger-modal-border);
border-radius: 10px;
background: #fff;
color: var(--vikinger-modal-text);
font-size: 14px;
font-weight: 500;
line-height: 20px;
outline: 0;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-meta input:focus,
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-meta select:focus,
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-meta textarea:focus {
border-color: rgba(97, 93, 250, .55);
box-shadow: 0 0 0 3px rgba(97, 93, 250, .1);
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-meta .main-icon {
color: var(--vikinger-modal-primary) !important;
fill: var(--vikinger-modal-primary) !important;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-meta[data-meta="feelings"] {
display: none;
flex: 0 0 auto;
width: calc(100% - 36px);
max-width: none;
min-width: 0;
margin: 0 18px 12px;
padding: 12px;
box-sizing: border-box;
overflow: visible;
clear: both;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-meta[data-meta="feelings"].vikinger-feelings-open {
display: block !important;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-meta[data-meta="feelings"] #feelings-menu-toggle {
display: flex;
align-items: center;
width: 100%;
min-width: 0;
min-height: 42px;
margin: 0;
padding: 10px 12px;
border: 1px solid var(--vikinger-modal-border);
border-radius: 10px;
background: #fff;
color: var(--vikinger-modal-text);
cursor: pointer;
font-size: 14px;
font-weight: 600;
line-height: 20px;
overflow-wrap: anywhere;
text-align: left;
transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-meta[data-meta="feelings"] #feelings-menu-toggle:hover,
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-meta[data-meta="feelings"] #feelings-menu-toggle.active {
border-color: rgba(97, 93, 250, .55);
background: #fff;
box-shadow: 0 0 0 3px rgba(97, 93, 250, .1);
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-meta[data-meta="feelings"] #feelings-data {
display: block;
width: 100%;
min-width: 0;
margin: 10px 0 0;
padding: 0;
clear: both;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-meta[data-meta="feelings"] #feelings-data input {
display: block;
width: 100%;
min-width: 0;
box-sizing: border-box;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-meta[data-meta="feelings"] #feelings-data span {
display: block;
min-width: 0;
color: var(--vikinger-modal-text);
line-height: 20px;
overflow-wrap: anywhere;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-meta[data-meta="feelings"] > .dropdown-menu {
position: relative !important;
inset: auto !important;
width: 100%;
min-width: 0;
max-width: 100%;
margin: 10px 0 0;
transform: none !important;
overflow: hidden;
border: 1px solid var(--vikinger-modal-border);
border-radius: 12px;
background: #fff;
box-shadow: 0 8px 22px rgba(62, 63, 94, .12);
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-meta[data-meta="feelings"] > .dropdown-menu .js_scroller {
max-height: 220px;
overflow-y: auto;
}
/* Normalize both Sngine feeling menus across feed, profile, page, group, and
* modal publishers without changing their markup or click handlers. */
body.vikinger-theme .publisher-meta[data-meta="feelings"] .feelings-list {
display: flex;
flex-direction: column;
gap: 6px;
margin: 0;
padding: 8px;
}
body.vikinger-theme .publisher-meta[data-meta="feelings"] .feeling-item {
display: flex;
align-items: center;
gap: 12px;
min-height: 44px;
margin: 0;
padding: 8px 12px;
box-sizing: border-box;
border-radius: 10px;
cursor: pointer;
transition: background-color .18s ease, color .18s ease;
}
body.vikinger-theme .publisher-meta[data-meta="feelings"] .feeling-item:hover,
body.vikinger-theme .publisher-meta[data-meta="feelings"] .feeling-item:focus-within {
background: rgba(97, 93, 250, .09);
}
body.vikinger-theme .publisher-meta[data-meta="feelings"] .feeling-item .icon {
display: flex;
flex: 0 0 30px;
align-items: center;
justify-content: center;
width: 30px;
min-width: 30px;
height: 30px;
margin: 0;
}
/* Sngine marks these Twemoji icons as twa-3x, whose width and height are also
* tripled. Constrain the actual icon box as well as its font size. */
body.vikinger-theme .publisher-meta[data-meta="feelings"] .feeling-item .icon .twa {
display: block;
flex: 0 0 22px;
width: 22px !important;
min-width: 22px;
max-width: 22px;
height: 22px !important;
min-height: 22px;
max-height: 22px;
margin: 0;
padding: 0;
background-position: center;
background-size: contain !important;
font-size: 22px !important;
line-height: 22px !important;
vertical-align: middle;
}
body.vikinger-theme .publisher-meta[data-meta="feelings"] .feeling-item .data {
flex: 1 1 auto;
min-width: 0;
margin: 0;
line-height: 1.35;
overflow-wrap: anywhere;
}
body.vikinger-theme.night-mode .publisher-meta[data-meta="feelings"] .feeling-item:hover,
body.vikinger-theme.night-mode .publisher-meta[data-meta="feelings"] .feeling-item:focus-within {
background: rgba(170, 184, 255, .14);
}
body.vikinger-theme .publisher-meta[data-meta="feelings"] #feelings-menu .js_scroller,
body.vikinger-theme .publisher-meta[data-meta="feelings"] #feelings-types .js_scroller {
max-height: 220px;
overflow-x: hidden;
overflow-y: auto;
}
@media (max-width: 600px) {
body.vikinger-theme .publisher-meta[data-meta="feelings"] #feelings-menu .js_scroller,
body.vikinger-theme .publisher-meta[data-meta="feelings"] #feelings-types .js_scroller {
max-height: 42vh;
}
body.vikinger-theme .publisher-meta[data-meta="feelings"] .feeling-item {
gap: 10px;
padding-inline: 10px;
}
}
body.vikinger-theme.night-mode #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-meta[data-meta="feelings"] #feelings-menu-toggle,
body.vikinger-theme.night-mode #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-meta[data-meta="feelings"] #feelings-data input {
border-color: #34424d;
background: #2d3b45;
color: #fff;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-meta[data-meta="colored"] {
overflow: hidden;
padding: 12px;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-meta[data-meta="colored"] .colored-pattern-item {
display: inline-block;
width: 54px;
height: 54px;
margin: 4px;
border: 3px solid transparent;
border-radius: 12px;
cursor: pointer;
vertical-align: top;
transition: border-color .2s ease, transform .2s ease;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-meta[data-meta="colored"] .colored-pattern-item:hover,
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-meta[data-meta="colored"] .colored-pattern-item:focus {
border-color: var(--vikinger-modal-primary);
transform: translateY(-1px);
}
/* Match Nova's colored-post swatches in the V5 publisher. These unlayered
rules keep Bootstrap's button defaults from overriding the Tailwind look. */
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher.vikinger-post-modal-v5 .publisher-meta[data-meta="colored"] > .flex {
display: flex;
width: 100%;
flex-wrap: wrap;
align-items: center;
gap: .375rem;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher.vikinger-post-modal-v5 .publisher-meta[data-meta="colored"] .colored-pattern-item {
display: block;
flex: 0 0 36px;
width: 36px;
min-width: 36px;
max-width: 36px;
height: 36px;
min-height: 36px;
max-height: 36px;
margin: 0;
padding: 0;
border: 2px solid var(--color-base-100, var(--vikinger-surface));
border-radius: .5rem;
background-color: transparent;
background-position: center;
background-size: cover;
box-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1) !important;
cursor: pointer;
scale: none;
transition: scale .15s cubic-bezier(.4, 0, .2, 1), box-shadow .15s cubic-bezier(.4, 0, .2, 1);
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher.vikinger-post-modal-v5 .publisher-meta[data-meta="colored"] .colored-pattern-item:hover {
scale: 1.05;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher.vikinger-post-modal-v5 .publisher-meta[data-meta="colored"] .colored-pattern-item.active,
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher.vikinger-post-modal-v5 .publisher-meta[data-meta="colored"] .colored-pattern-item:focus-visible {
--tw-ring-offset-color: var(--color-base-100, var(--vikinger-surface));
outline: 0;
box-shadow: 0 0 0 2px var(--color-base-100, var(--vikinger-surface)), 0 0 0 4px var(--color-primary, #615dfa), 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1) !important;
}
/* Restore Nova's V5 publisher field and switch styles over Bootstrap resets. */
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher.vikinger-post-modal-v5 #schedule-toggle-wrapper input.input.js_publisher-schedule-date {
display: inline-block;
box-sizing: border-box;
width: 100%;
height: calc(var(--size-field, .25rem) * 9.5);
padding-inline: .75rem;
border: 1px solid color-mix(in oklab, var(--color-base-content, var(--vikinger-ink)) 40%, transparent);
border-radius: var(--radius-field, 12px);
background-color: var(--color-base-100, var(--vikinger-surface));
color: var(--color-base-content, var(--vikinger-ink));
font-size: var(--text-base, 1rem);
line-height: 1.5;
outline: none;
box-shadow: none;
transition: border-color .2s ease, box-shadow .2s ease;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher.vikinger-post-modal-v5 #schedule-toggle-wrapper input.input.js_publisher-schedule-date:hover:not(:focus, :focus-within) {
border-color: color-mix(in oklab, var(--color-base-content, var(--vikinger-ink)) 60%, transparent);
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher.vikinger-post-modal-v5 #schedule-toggle-wrapper input.input.js_publisher-schedule-date:focus {
--input-color: var(--color-primary, #615dfa);
border-color: var(--input-color);
outline: 1px solid var(--input-color);
outline-offset: 0;
isolation: isolate;
box-shadow: 0 1px 2px 0 color-mix(in oklab, var(--input-color) 30%, transparent);
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher.vikinger-post-modal-v5 input.switch {
box-sizing: border-box;
width: 40px;
min-width: 40px;
max-width: 40px;
height: 24px;
padding: .1875rem !important;
border: 1px solid transparent !important;
border-radius: 9999px;
background-color: var(--input-color);
color: var(--color-base-100, var(--vikinger-surface));
box-shadow: inset 0 1px color-mix(in oklab, currentColor calc(var(--depth, 1) * 10%), transparent) !important;
transition: color .3s ease, grid-template-columns .2s ease;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher.vikinger-post-modal-v5 input.switch::before {
box-shadow: 0 -1px oklch(59.99% 0 0 / calc(var(--depth, 1) * .08)) inset, 0 8px 0 -4px oklch(59.99% 0 0 / calc(var(--depth, 1) * .08)) inset, 0 1px 2px 0 rgb(0 0 0 / .2) !important;
transition: background-color .1s ease, translate .2s ease, inset-inline-start .2s ease;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher.vikinger-post-modal-v5 input.switch:focus-visible {
outline: 2px solid color-mix(in oklab, var(--input-color, var(--color-neutral)) 30%, transparent);
outline-offset: 0;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-custom-thumbnail {
color: var(--vikinger-modal-muted);
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-custom-thumbnail .x-image {
min-height: 84px;
margin-top: 10px;
border: 1px dashed rgba(97, 93, 250, .35);
border-radius: 12px;
background: var(--vikinger-modal-soft);
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-tools-tabs {
flex: 0 0 auto;
margin: 0;
padding: 16px 14px 8px;
border: 0;
background: #fff;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-tools-tabs > ul.row {
display: flex;
flex-wrap: wrap;
margin: 0 -5px;
padding: 0;
list-style: none;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-tools-tabs > ul.row > li {
display: block;
flex: 0 0 50%;
max-width: 50%;
margin: 0 0 10px;
padding: 0 5px;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-tools-tabs > ul.row > li.vikinger-modal-tool-hidden {
display: none !important;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-tools-tab {
display: flex;
align-items: center;
width: 100%;
min-height: 62px;
padding: 12px 13px;
border: 1px solid var(--vikinger-modal-border);
border-radius: 12px;
background: var(--vikinger-modal-surface);
color: var(--vikinger-modal-text);
font-size: 13px;
font-weight: 600;
line-height: 18px;
text-decoration: none;
cursor: pointer;
transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-tools-tab:hover,
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-tools-tab:focus,
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-tools-tab.active {
border-color: rgba(97, 93, 250, .32);
background: var(--vikinger-modal-soft);
color: var(--vikinger-modal-primary);
text-decoration: none;
box-shadow: none;
outline: 0;
transform: none;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-tools-tab.disabled {
opacity: .45;
pointer-events: none;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-tools-tab .main-icon,
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-tools-tab .main-icon * {
flex: 0 0 24px;
width: 24px !important;
height: 24px !important;
margin-inline-end: 11px !important;
color: var(--vikinger-modal-primary) !important;
fill: currentColor !important;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-tools-tab:hover .main-icon,
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-tools-tab.active .main-icon {
color: var(--vikinger-modal-accent) !important;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-tools-tab .badge {
margin-inline-start: auto;
padding: 4px 8px;
border-radius: 999px;
background: var(--vikinger-modal-primary) !important;
color: #fff;
font-size: 10px;
line-height: 14px;
white-space: nowrap;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .vikinger-post-modal-load-more {
display: block;
width: calc(100% - 28px);
margin: 2px 14px 8px;
padding: 10px 14px;
border: 1px solid var(--vikinger-modal-border);
border-radius: 10px;
background: var(--vikinger-modal-soft);
color: var(--vikinger-modal-primary);
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: background-color .2s ease, color .2s ease;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .vikinger-post-modal-load-more:hover,
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .vikinger-post-modal-load-more:focus {
background: #e7e5ff;
color: var(--vikinger-modal-primary-dark);
outline: 0;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-footer {
flex: 0 0 auto;
margin: 0;
padding: 0 18px;
border-top: 1px solid var(--vikinger-modal-border);
background: #fff;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-footer-options {
padding: 14px 0 2px;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-footer-options .form-table-row {
display: grid;
grid-template-columns: 34px minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
min-height: 48px;
margin: 0 0 8px;
padding: 8px 0;
border-bottom: 1px solid var(--vikinger-modal-border);
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-footer-options .form-table-row:last-child {
border-bottom: 0;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-footer-options .form-table-row > .avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--vikinger-modal-soft);
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-footer-options .form-table-row > .avatar .main-icon,
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-footer-options .form-table-row > .avatar .main-icon * {
width: 20px !important;
height: 20px !important;
margin: 0 !important;
color: var(--vikinger-modal-primary) !important;
fill: currentColor !important;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-footer-options .form-label {
margin: 0;
color: var(--vikinger-modal-text);
font-size: 13px;
font-weight: 700;
line-height: 18px;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-footer-options .form-text {
color: var(--vikinger-modal-muted);
font-size: 12px;
line-height: 17px;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-footer-options .form-group {
margin-bottom: 10px;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-footer-options .form-control,
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-footer-options .tagify {
min-height: 42px;
border: 1px solid var(--vikinger-modal-border);
border-radius: 10px;
background: #fff;
color: var(--vikinger-modal-text);
box-shadow: none;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-footer-options .form-control:focus,
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-footer-options .tagify:focus-within {
border-color: rgba(97, 93, 250, .55);
box-shadow: 0 0 0 3px rgba(97, 93, 250, .1);
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .switch {
position: relative;
display: inline-block;
width: 42px;
height: 24px;
margin: 0;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .switch input {
width: 1px;
height: 1px;
opacity: 0;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .switch .slider {
position: absolute;
inset: 0;
border-radius: 999px;
background: #d9d9eb;
cursor: pointer;
transition: background-color .2s ease;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .switch .slider::before {
position: absolute;
bottom: 3px;
inset-inline-start: 3px;
width: 18px;
height: 18px;
border-radius: 50%;
background: #fff;
box-shadow: 0 2px 5px rgba(62, 63, 94, .18);
content: "";
transition: transform .2s ease;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .switch input:checked + .slider {
background: var(--vikinger-modal-primary);
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .switch input:checked + .slider::before {
transform: translateX(18px);
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .alert {
margin: 0 0 12px !important;
padding: 10px 12px;
border: 1px solid #ffd8e0;
border-radius: 10px;
background: #fff4f6;
color: #b4234a;
font-size: 13px;
line-height: 18px;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-footer-buttons {
display: flex;
align-items: center;
gap: 12px;
min-height: 70px;
margin: 0 -18px;
padding: 12px 18px;
border-top: 1px solid var(--vikinger-modal-border);
background: rgba(255, 255, 255, .98);
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-footer-buttons .d-grid {
flex: 1 1 auto;
min-width: 0;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-footer-buttons .js_publisher-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 46px;
margin: 0 !important;
padding: 11px 18px;
border: 0;
border-radius: 12px;
background: var(--vikinger-modal-primary);
color: #fff;
font-size: 14px;
font-weight: 700;
line-height: 22px;
box-shadow: 0 6px 14px rgba(97, 93, 250, .2);
transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-footer-buttons .js_publisher-btn:hover,
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-footer-buttons .js_publisher-btn:focus {
background: var(--vikinger-modal-primary-dark);
color: #fff;
box-shadow: 0 8px 18px rgba(97, 93, 250, .28);
outline: 0;
transform: translateY(-1px);
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-footer-buttons .js_publisher-btn .fa-paper-plane {
display: none !important;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-footer-buttons .js_publisher-btn span.d-none.d-xl-inline-block {
display: inline-block !important;
margin: 0 !important;
}
@media screen and (max-width: 767px) {
body.vikinger-theme #modal.vikinger-post-modal-open .modal-dialog {
width: min(92vw, 960px);
max-width: 960px;
height: auto;
min-height: 0;
max-height: calc(100vh - 16px);
max-height: calc(100dvh - 16px);
margin: 8px auto;
}
body.vikinger-theme #modal.vikinger-post-modal-open .modal-content {
min-height: 0;
height: auto;
max-height: calc(100vh - 16px);
max-height: calc(100dvh - 16px);
border-radius: 16px;
}
body.vikinger-theme #modal.vikinger-post-modal-open .vikinger-post-modal-header {
min-height: 56px;
padding: 10px 52px 10px 16px;
}
body.vikinger-theme #modal.vikinger-post-modal-open .vikinger-post-modal-header .btn-close {
inset-inline-end: 10px;
top: 10px;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-message.vikinger-post-modal-message {
gap: 10px;
padding: 14px 12px !important;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-message.vikinger-post-modal-message > .publisher-avatar {
position: static !important;
inset: auto;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .vikinger-post-modal-toolbar {
gap: 8px;
min-height: 60px;
padding: 8px 12px;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .vikinger-post-modal-privacy-slot {
max-width: 42%;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .vikinger-post-modal-toolbar .js_publisher-privacy > .btn {
max-width: 100%;
padding-inline: 9px;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-toolbar-icons {
max-width: 58%;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-toolbar-icons .pub-icon-btn {
flex-basis: 34px;
width: 34px;
height: 34px;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-slider {
max-height: none;
overflow-y: visible;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-tools-tabs {
padding: 12px 8px 5px;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-tools-tabs > ul.row {
margin: 0 -3px;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-tools-tabs > ul.row > li {
flex-basis: 100%;
max-width: 100%;
margin-bottom: 8px;
padding: 0 3px;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-tools-tab {
min-height: 62px;
justify-content: flex-start;
padding: 12px 14px;
font-size: 13px;
line-height: 18px;
text-align: start;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-tools-tab .main-icon {
flex: 0 0 24px;
margin: 0 11px 0 0 !important;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-tools-tab .badge {
margin: 0 0 0 auto;
padding: 4px 8px;
font-size: 9px;
line-height: 14px;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-meta,
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-custom-thumbnail {
margin-inline: 12px;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-footer {
padding-inline: 12px;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-footer-buttons {
margin-inline: -12px;
padding-inline: 12px;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-footer-options .form-table-row {
grid-template-columns: 32px minmax(0, 1fr) auto;
gap: 8px;
}
body.vikinger-theme #modal.vikinger-post-modal-open #publisher-wapper-modal.vikinger-post-modal-publisher:not(.vikinger-post-modal-v5) .publisher-footer-options .form-text {
display: none;
}
}
/* Vikinger picture popup --------------------------------------------------
* Sngine still supplies the lightbox data and navigation through the
* .lightbox selectors. These rules give that existing flow Vikinger's
* popup-picture presentation and keep the hidden state deterministic until
* vikinger.js adds .active.visible after the popup is inserted. */
body.vikinger-theme.lightbox-open,
body.vikinger-theme.vikinger-picture-popup-open {
overflow: hidden;
}
body.vikinger-theme .lightbox.popup-picture {
display: flex !important;
align-items: center;
justify-content: center;
position: fixed;
inset: 0;
z-index: 100000;
width: 100%;
height: 100%;
max-width: none;
padding: 0;
border-radius: 0;
background: rgba(21, 21, 31, .93);
overflow: hidden;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .3s ease-in-out, visibility .3s ease-in-out;
}
body.vikinger-theme .lightbox.popup-picture.active.visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
body.vikinger-theme .lightbox.popup-picture .popup-close-button {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
top: 24px;
inset-inline-end: 24px;
z-index: 100003;
width: 44px;
height: 44px;
border-radius: 10px;
background-color: #45437f;
color: #fff;
cursor: pointer;
transition: background-color .2s ease-in-out, transform .2s ease-in-out;
}
body.vikinger-theme .lightbox.popup-picture .popup-close-button:hover,
body.vikinger-theme .lightbox.popup-picture .popup-close-button:focus-visible {
background-color: #23d2e2;
outline: 0;
transform: translateY(-1px);
}
body.vikinger-theme .lightbox.popup-picture .popup-close-button-icon {
display: block;
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 2;
pointer-events: none;
}
body.vikinger-theme .lightbox.popup-picture .lightbox-container {
display: flex;
flex-direction: row;
align-items: stretch;
width: 100vw;
height: 100vh;
min-height: 0;
max-width: none;
max-height: none;
margin: 0;
border-radius: 0;
background-color: #15151f;
box-shadow: none;
overflow: hidden;
}
body.vikinger-theme .lightbox.popup-picture .lightbox-data {
display: block;
flex: 0 0 min(400px, 32vw);
order: 0;
width: min(400px, 32vw);
min-width: 0;
height: 100%;
max-height: 100%;
background-color: #fff;
overflow: hidden;
}
body.vikinger-theme .lightbox.popup-picture .lightbox-post {
display: flex;
flex-direction: column;
min-width: 0;
min-height: 0;
width: 100%;
height: 100%;
max-height: 100%;
padding: 0;
overflow: hidden;
}
body.vikinger-theme .lightbox.popup-picture .lightbox-post > .js_scroller {
display: flex;
flex: 1 1 auto;
flex-direction: column;
width: 100%;
min-width: 0;
min-height: 0;
height: 100% !important;
max-height: 100%;
overflow-x: hidden;
overflow-y: auto;
}
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post {
display: flex;
flex: 0 0 auto;
flex-direction: column;
width: 100%;
min-width: 0;
min-height: 0;
padding: 0;
border-radius: 0;
background-color: #fff;
box-shadow: none;
color: #3e3f5e;
}
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-body {
display: block;
flex: 0 0 auto;
width: 100%;
min-width: 0;
min-height: 0;
max-width: 100%;
padding: 0;
background-color: #fff;
overflow-wrap: anywhere;
word-break: break-word;
}
/* Keep the comment stream directly after the reaction/action row. */
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-footer {
display: block;
flex: 0 0 auto;
width: 100%;
min-width: 0;
min-height: 0;
margin: 0;
padding: 0;
background-color: #fff;
}
/* Keep the lightbox description and the tag row in the same reading order as Vikinger's feed. */
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-description {
display: block;
width: 100%;
max-width: 100%;
min-width: 0;
margin: 0;
padding: 20px 28px 0;
color: #3e3f5e;
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
}
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-description .vikinger-post-text {
display: block;
width: 100%;
max-width: 100%;
min-width: 0;
height: auto !important;
max-height: none !important;
margin: 0;
color: #3e3f5e;
font-size: 1rem;
line-height: 1.75rem;
font-weight: 600;
white-space: normal !important;
overflow: visible !important;
overflow-wrap: anywhere;
word-break: break-word;
}
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-description .post-text-translation,
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-body .post-text-translation,
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-body .post-media,
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-body .post-media-meta,
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-body .post-media-meta .title,
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-body .post-media-meta .text {
width: 100%;
max-width: 100%;
min-width: 0;
overflow-wrap: anywhere;
word-break: break-word;
}
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-body img,
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-body video,
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-body iframe {
max-width: 100%;
}
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-description .vikinger-post-text a,
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-body .post-media-meta a {
max-width: 100%;
overflow-wrap: anywhere;
word-break: break-word;
}
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-description .vikinger-post-text a[href*="/search/hashtag/"] {
display: none;
}
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-description .vikinger-post-text a:not([href*="/search/hashtag/"]) {
color: #615dfa;
}
/* Reuse Vikinger's feed tag-list/tag-item components in the lightbox. */
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-body > .tag-list {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 8px;
width: auto;
max-width: calc(100% - 56px);
margin: 12px 28px 16px;
}
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-body > .tag-list .tag-item {
display: inline-flex;
align-items: center;
min-width: 0;
max-width: 100%;
height: auto;
min-height: 24px;
margin: 0;
padding: 3px 12px;
border-radius: 200px;
background-color: #615dfa;
color: #fff;
font-size: .75rem;
font-weight: 700;
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
line-height: 1.25;
text-decoration: none;
transition: background-color .2s ease-in-out, color .2s ease-in-out;
}
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-body > .tag-list .tag-item:hover,
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-body > .tag-list .tag-item:focus-visible {
background-color: #23d2e2;
color: #fff;
text-decoration: none;
}
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-header {
display: block;
min-height: 44px;
margin: 0;
padding: 24px 28px 20px 80px;
border-bottom: 1px solid #eaeaf5;
background-color: #fff;
position: relative;
}
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-avatar {
top: 24px;
left: 28px;
width: 40px;
height: 44px;
}
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-avatar-link,
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-avatar-anonymous {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 44px;
}
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-avatar-link:hover,
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-avatar-link:focus-visible {
text-decoration: none;
}
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-meta {
min-width: 0;
overflow-wrap: anywhere;
}
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-title,
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-time {
margin: 0;
}
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-title {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
line-height: 1.35;
}
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-title .post-author {
color: #3e3f5e;
}
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-title .post-author:hover,
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-title .post-author:focus-visible {
color: #615dfa;
text-decoration: none;
}
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-title .verified-badge,
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-title .pro-badge {
display: inline-flex;
align-items: center;
width: 20px;
height: 20px;
vertical-align: middle;
}
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-time {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
margin-top: 5px;
color: #8f91ac;
line-height: 1.35;
}
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-time a,
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-time i,
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-time span {
color: inherit;
}
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-time a:hover,
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-time a:focus-visible {
color: #615dfa;
text-decoration: none;
}
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-meta-separator {
color: #adafca;
}
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-stats {
min-height: 56px;
height: auto;
margin: 0;
padding: 12px 28px;
border-bottom: 1px solid #eaeaf5;
background-color: #fcfcfd;
}
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-stats .content-action {
min-width: 0;
}
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-stats .js_post-reactions-stats,
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-engagement {
display: flex;
align-items: center;
}
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-engagement {
flex-wrap: wrap;
justify-content: flex-end;
gap: 18px;
}
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-engagement .meta-line {
margin: 0;
}
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-engagement .meta-line-link,
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-engagement .meta-line-text {
color: #8f91ac;
font-size: .75rem;
font-weight: 700;
white-space: nowrap;
}
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-engagement .meta-line-link:hover,
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-engagement .meta-line-link:focus-visible,
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-engagement .meta-line-text:hover,
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-engagement .meta-line-text:focus-visible {
color: #615dfa;
text-decoration: none;
}
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-actions {
display: flex;
align-items: center;
gap: 8px;
min-height: 56px;
margin: 0;
padding: 0 28px;
border-bottom: 1px solid #eaeaf5;
background-color: #fff;
}
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-actions .action-btn {
display: inline-flex;
align-items: center;
min-height: 34px;
margin: 0;
padding: 7px 10px;
border-radius: 8px;
color: #8f91ac;
font-size: .75rem;
font-weight: 700;
line-height: 1.2;
cursor: pointer;
transition: color .2s ease-in-out, background-color .2s ease-in-out;
}
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-actions .action-btn:hover,
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-actions .action-btn:focus-visible {
background-color: #f5f4ff;
color: #615dfa;
text-decoration: none;
}
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-actions .action-icon {
flex: 0 0 auto;
color: inherit;
fill: currentColor;
}
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-actions .reactions-wrapper {
position: relative;
z-index: 100001;
}
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-actions .reaction-btn {
min-height: 20px;
padding: 0;
}
/* The lightbox post body scrolls independently from the viewport. Keep the
* Vikinger picker fixed while it is hovered so the scrollbar cannot clip it. */
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-actions .reactions-container {
z-index: 100002;
max-width: calc(100vw - 16px);
white-space: nowrap;
}
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-actions .reaction-option {
flex: 0 0 40px;
}
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-footer {
margin: 0;
padding: 0;
background-color: #fff;
}
body.vikinger-theme .lightbox.popup-picture .popup-picture-image-wrap {
display: flex;
align-items: center;
justify-content: center;
flex: 1 1 auto;
order: 1;
width: auto;
min-width: 0;
height: 100%;
min-height: 0;
border-radius: 0;
background-color: #15151f;
position: relative;
overflow: hidden;
}
body.vikinger-theme .lightbox.popup-picture .popup-picture-image-wrap::before {
content: '';
width: 34px;
height: 34px;
border: 3px solid rgba(255, 255, 255, .28);
border-top-color: #23d2e2;
border-radius: 50%;
position: absolute;
inset: 50% auto auto 50%;
z-index: 1;
opacity: 0;
pointer-events: none;
transform: translate(-50%, -50%);
}
body.vikinger-theme .lightbox.popup-picture .popup-picture-image-wrap.vikinger-lightbox-image-loading::before {
opacity: 1;
animation: vikinger-lightbox-image-spin .75s linear infinite;
}
body.vikinger-theme .lightbox.popup-picture .popup-picture-image-wrap.vikinger-lightbox-image-loading .popup-picture-image img,
body.vikinger-theme .lightbox.popup-picture .popup-picture-image-wrap.vikinger-lightbox-image-loading .lightbox-preview > img {
opacity: .72;
}
body.vikinger-theme .lightbox.popup-picture .popup-picture-image-wrap.vikinger-lightbox-image-ready .popup-picture-image img,
body.vikinger-theme .lightbox.popup-picture .popup-picture-image-wrap.vikinger-lightbox-image-ready .lightbox-preview > img {
opacity: 1;
}
@keyframes vikinger-lightbox-image-spin {
to { transform: translate(-50%, -50%) rotate(360deg); }
}
body.vikinger-theme .lightbox.popup-picture .popup-picture-image {
display: flex;
align-items: center;
justify-content: center;
width: 100% !important;
max-width: 100%;
height: 100%;
max-height: 100%;
margin: 0;
}
body.vikinger-theme .lightbox.popup-picture .popup-picture-image img,
body.vikinger-theme .lightbox.popup-picture .lightbox-preview > img {
display: block;
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
margin: 0 auto;
object-fit: contain;
}
body.vikinger-theme .lightbox.popup-picture .lightbox-next,
body.vikinger-theme .lightbox.popup-picture .lightbox-prev {
display: block;
position: absolute;
top: 50%;
z-index: 3;
margin-top: -24px;
color: #fff;
opacity: .72;
cursor: pointer;
transition: opacity .2s ease-in-out, transform .2s ease-in-out;
}
body.vikinger-theme .lightbox.popup-picture .lightbox-next:hover,
body.vikinger-theme .lightbox.popup-picture .lightbox-prev:hover,
body.vikinger-theme .lightbox.popup-picture .lightbox-next:focus-visible,
body.vikinger-theme .lightbox.popup-picture .lightbox-prev:focus-visible {
opacity: 1;
outline: 0;
}
body.vikinger-theme .lightbox.popup-picture .lightbox-next {
inset-inline-end: 18px;
}
body.vikinger-theme .lightbox.popup-picture .lightbox-prev {
inset-inline-start: 18px;
}
body.vikinger-theme .lightbox.popup-picture .lightbox-download {
position: absolute;
right: 20px;
bottom: 18px;
z-index: 3;
color: #fff;
font-size: 12px;
font-weight: 700;
text-shadow: 0 1px 3px rgba(0, 0, 0, .65);
}
body.vikinger-theme .lightbox.popup-picture .lightbox-download a {
color: #fff;
opacity: .78;
transition: opacity .2s ease-in-out;
}
body.vikinger-theme .lightbox.popup-picture .lightbox-download a:hover,
body.vikinger-theme .lightbox.popup-picture .lightbox-download a:focus-visible {
color: #fff;
opacity: 1;
}
body.vikinger-theme .lightbox.popup-picture.popup-live .popup-picture-image-wrap {
padding: 24px;
}
body.vikinger-theme .lightbox.popup-picture.popup-live .live-stream-video {
width: 100%;
height: 100%;
}
@media screen and (max-width: 900px) {
body.vikinger-theme .lightbox.popup-picture {
align-items: flex-start;
padding: 0;
}
body.vikinger-theme .lightbox.popup-picture .lightbox-container {
flex-direction: column;
width: 100vw;
height: 100vh;
max-height: none;
overflow: hidden;
}
body.vikinger-theme .lightbox.popup-picture .popup-picture-image-wrap {
flex: 1 1 auto;
order: 0;
width: 100%;
min-height: 0;
height: auto;
}
body.vikinger-theme .lightbox.popup-picture .lightbox-data {
flex: 0 0 min(36vh, 360px);
order: 1;
width: 100%;
height: min(36vh, 360px);
max-height: min(36vh, 360px);
}
body.vikinger-theme .lightbox.popup-picture .lightbox-post {
height: 100%;
max-height: 100%;
}
body.vikinger-theme .lightbox.popup-picture .popup-picture-image {
max-height: 100%;
}
body.vikinger-theme .lightbox.popup-picture .popup-picture-image img,
body.vikinger-theme .lightbox.popup-picture .lightbox-preview > img {
max-height: 100%;
}
body.vikinger-theme .lightbox.popup-picture .popup-close-button {
top: 12px;
inset-inline-end: 12px;
}
}
@media screen and (max-width: 575px) {
body.vikinger-theme .lightbox.popup-picture {
padding: 0;
}
body.vikinger-theme .lightbox.popup-picture .lightbox-container {
max-height: none;
}
body.vikinger-theme .lightbox.popup-picture .popup-picture-image-wrap {
min-height: 0;
}
body.vikinger-theme .lightbox.popup-picture .lightbox-data {
flex-basis: min(40vh, 340px);
height: min(40vh, 340px);
max-height: min(40vh, 340px);
}
body.vikinger-theme .lightbox.popup-picture .popup-picture-image,
body.vikinger-theme .lightbox.popup-picture .popup-picture-image img,
body.vikinger-theme .lightbox.popup-picture .lightbox-preview > img {
max-height: 100%;
}
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-header {
padding: 18px 18px 16px 70px;
}
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-avatar {
top: 18px;
left: 18px;
}
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-stats,
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-actions {
padding-right: 18px;
padding-left: 18px;
}
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-description {
padding: 16px 18px 0;
}
body.vikinger-theme .lightbox.popup-picture .vikinger-lightbox-post-body > .tag-list {
margin-right: 18px;
margin-left: 18px;
}
}
/* Nova photo viewer layout, while retaining the Vikinger popup hooks above. */
body.vikinger-theme .lightbox.popup-picture {
padding: 8px;
background: rgba(0, 0, 0, .85);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
body.vikinger-theme .lightbox.popup-picture .lightbox-container {
flex-direction: row;
width: 100%;
height: 100%;
max-width: 120rem;
max-height: 100%;
margin: 0;
border-radius: var(--radius-box, .75rem);
background-color: var(--color-base-100, #fff);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
}
body.vikinger-theme .lightbox.popup-picture .lightbox-data {
display: flex;
flex: 0 0 26rem;
flex-direction: column;
order: 1;
width: 26rem;
height: 100%;
max-height: 100%;
background-color: var(--color-base-100, #fff);
}
body.vikinger-theme .lightbox.popup-picture .popup-picture-image-wrap {
flex: 1 1 auto;
order: 0;
width: auto;
height: 100%;
min-height: 0;
background-color: #000;
}
body.vikinger-theme .lightbox.popup-picture .lightbox-preview > img.lightbox-ambient {
object-fit: cover;
}
body.vikinger-theme .lightbox.popup-picture .lightbox-toolbar {
display: flex;
align-items: center;
gap: 8px;
}
body.vikinger-theme .lightbox.popup-picture .lightbox-toolbar > button,
body.vikinger-theme .lightbox.popup-picture .lightbox-toolbar > a {
display: inline-flex;
flex: 0 0 44px;
align-items: center;
justify-content: center;
width: 44px;
min-width: 44px;
max-width: 44px;
height: 44px;
min-height: 44px;
max-height: 44px;
padding: 0;
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 50%;
background-color: rgba(255, 255, 255, .15);
color: #fff;
box-shadow: none;
text-shadow: none;
}
body.vikinger-theme .lightbox.popup-picture .lightbox-toolbar > button:hover,
body.vikinger-theme .lightbox.popup-picture .lightbox-toolbar > button:enabled:hover,
body.vikinger-theme .lightbox.popup-picture .lightbox-toolbar > a:hover {
background-color: rgba(255, 255, 255, .25);
color: #fff;
}
body.vikinger-theme .lightbox.popup-picture .lightbox-toolbar > button:focus-visible,
body.vikinger-theme .lightbox.popup-picture .lightbox-toolbar > a:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
body.vikinger-theme .lightbox.popup-picture .popup-close-button {
position: absolute;
top: 12px;
inset-inline-end: 12px;
z-index: 20;
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 50%;
background-color: var(--color-base-200, #f4f4f5);
color: var(--color-base-content, #27272a);
-webkit-backdrop-filter: none;
backdrop-filter: none;
transition: background-color .2s ease, transform .2s ease;
}
body.vikinger-theme .lightbox.popup-picture .popup-close-button:hover,
body.vikinger-theme .lightbox.popup-picture .popup-close-button:focus-visible {
background-color: var(--color-base-300, #e4e4e7);
color: var(--color-base-content, #27272a);
outline: 2px solid var(--color-primary, #6d5dfc);
outline-offset: 2px;
transform: scale(.96);
}
body.vikinger-theme .lightbox.popup-picture .popup-close-button-icon {
width: 20px;
height: 20px;
}
body.vikinger-theme .lightbox.popup-picture .lightbox-next,
body.vikinger-theme .lightbox.popup-picture .lightbox-prev {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 44px;
width: 44px;
min-width: 44px;
max-width: 44px;
height: 44px;
min-height: 44px;
max-height: 44px;
margin-top: -22px;
padding: 0;
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 50%;
background-color: rgba(255, 255, 255, .15);
opacity: 1;
}
body.vikinger-theme .lightbox.popup-picture .lightbox-next {
inset-inline-end: 12px;
}
body.vikinger-theme .lightbox.popup-picture .lightbox-prev {
inset-inline-start: 12px;
}
body.vikinger-theme .lightbox.popup-picture .lightbox-next:hover,
body.vikinger-theme .lightbox.popup-picture .lightbox-prev:hover {
background-color: rgba(255, 255, 255, .25);
}
body.vikinger-theme .lightbox.popup-picture .lightbox-next:focus-visible,
body.vikinger-theme .lightbox.popup-picture .lightbox-prev:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
body.vikinger-theme .lightbox.popup-picture .lightbox-download {
position: static;
inset: auto;
z-index: auto;
display: flex;
flex: 0 0 44px;
width: 44px;
height: 44px;
align-items: center;
justify-content: center;
color: #fff;
font-size: inherit;
font-weight: inherit;
text-shadow: none;
}
@media screen and (min-width: 640px) {
body.vikinger-theme .lightbox.popup-picture {
padding: 16px !important;
}
body.vikinger-theme .lightbox.popup-picture .lightbox-next {
inset-inline-end: 20px;
}
body.vikinger-theme .lightbox.popup-picture .lightbox-prev {
inset-inline-start: 20px;
}
}
@media screen and (max-width: 1023.98px) {
body.vikinger-theme .lightbox.popup-picture .lightbox-container {
flex-direction: column;
width: 100%;
height: 100%;
max-height: none;
}
body.vikinger-theme .lightbox.popup-picture .popup-picture-image-wrap {
flex: 1 1 0;
order: 0;
width: 100%;
height: auto;
}
body.vikinger-theme .lightbox.popup-picture .lightbox-data {
flex: 0 0 auto;
order: 1;
width: 100%;
height: auto;
max-height: 45%;
}
}
@media screen and (max-width: 575px) {
body.vikinger-theme .lightbox.popup-picture {
padding: 8px;
}
body.vikinger-theme .lightbox.popup-picture .lightbox-data {
max-height: 45%;
}
}
/*
* Post editor controls
*
* Diamond_pro positions .x-form-tools over the textarea and gives the
* outline-light button a very low-contrast color. The Vikinger post editor
* keeps that compact toolbar layout, but scopes it to the edit template so
* comment/chat/publisher controls continue to use their own handlers.
*/
body.vikinger-theme .vikinger-post-edit {
display: block !important;
width: 100%;
margin: 0;
padding: 20px 28px 18px;
border-top: 1px solid #eaeaf5;
border-bottom: 1px solid #eaeaf5;
border-radius: 0;
background-color: #fff;
color: #3e3f5e;
box-sizing: border-box;
}
body.vikinger-theme .vikinger-post-edit-form {
width: 100%;
min-width: 0;
min-height: 0;
padding: 0 0 44px;
position: relative;
}
body.vikinger-theme .vikinger-post-edit-form textarea.js_update-post-textarea {
display: block !important;
width: 100% !important;
min-width: 0;
min-height: 78px;
height: 78px;
padding: 14px 16px 42px;
border: 1px solid #dedeea;
border-radius: 12px;
background-color: #fcfcfd;
color: #3e3f5e;
font-family: Rajdhani, sans-serif;
font-size: .875rem;
font-weight: 600;
line-height: 1.45;
overflow-y: auto;
resize: none;
box-sizing: border-box;
}
body.vikinger-theme .vikinger-post-edit-form textarea.js_update-post-textarea:focus {
border-color: rgba(97, 93, 250, .55);
background-color: #fff;
box-shadow: 0 0 0 3px rgba(97, 93, 250, .1);
}
body.vikinger-theme .vikinger-post-edit-form textarea.js_update-post-textarea::placeholder {
color: #adafca;
font-weight: 500;
}
body.vikinger-theme .vikinger-post-edit-tools {
display: flex !important;
align-items: center;
justify-content: flex-end;
width: auto !important;
height: 36px;
margin: 0 !important;
padding: 0 !important;
gap: 4px;
list-style: none;
position: absolute !important;
right: 10px !important;
bottom: 8px !important;
left: auto !important;
z-index: 2;
}
body.vikinger-theme .vikinger-post-edit-tools > li {
display: inline-flex !important;
align-items: center;
justify-content: center;
flex: 0 0 34px;
float: none !important;
width: 34px;
height: 34px;
margin: 0 !important;
padding: 0 !important;
border-radius: 10px;
color: #adafca !important;
cursor: pointer;
opacity: 1 !important;
visibility: visible !important;
transition: color .2s ease-in-out, background-color .2s ease-in-out, transform .2s ease-in-out;
}
body.vikinger-theme .vikinger-post-edit-tools > li:hover,
body.vikinger-theme .vikinger-post-edit-tools > li:focus-visible,
body.vikinger-theme .vikinger-post-edit-tools > li:focus-within {
background-color: #f0efff;
color: #615dfa !important;
transform: translateY(-1px);
}
body.vikinger-theme .vikinger-post-edit-tools .x-form-tools-emoji {
overflow: visible;
}
body.vikinger-theme .vikinger-post-edit-tools .x-form-tools-emoji i {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 20px !important;
height: 20px !important;
margin: 0 !important;
color: #615dfa !important;
font-size: 20px !important;
line-height: 1 !important;
opacity: 1 !important;
visibility: visible !important;
}
body.vikinger-theme .vikinger-post-edit-actions {
display: flex !important;
align-items: center;
justify-content: flex-end;
width: 100%;
min-height: 38px;
margin-top: 12px !important;
padding: 0;
gap: 8px;
clear: both;
}
body.vikinger-theme .vikinger-post-edit-actions .js_unedit-post,
body.vikinger-theme .vikinger-post-edit-actions .js_update-post {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: auto !important;
min-width: 84px;
min-height: 38px;
margin: 0 !important;
padding: 0 16px !important;
border-width: 1px !important;
border-style: solid !important;
border-radius: 200px !important;
box-shadow: none !important;
font-family: Rajdhani, sans-serif;
font-size: .8125rem;
font-weight: 700;
line-height: 1;
opacity: 1 !important;
visibility: visible !important;
white-space: nowrap;
cursor: pointer;
}
body.vikinger-theme .vikinger-post-edit-actions .js_unedit-post {
border-color: #dedeea !important;
background-color: #fff !important;
color: #8f91ac !important;
}
body.vikinger-theme .vikinger-post-edit-actions .js_unedit-post:hover,
body.vikinger-theme .vikinger-post-edit-actions .js_unedit-post:focus-visible {
border-color: #adafca !important;
background-color: #f7f7fb !important;
color: #3e3f5e !important;
}
body.vikinger-theme .vikinger-post-edit-actions .js_update-post {
border-color: #615dfa !important;
background-color: #615dfa !important;
color: #fff !important;
box-shadow: 0 4px 10px rgba(97, 93, 250, .2) !important;
}
body.vikinger-theme .vikinger-post-edit-actions .js_update-post:hover,
body.vikinger-theme .vikinger-post-edit-actions .js_update-post:focus-visible {
border-color: #4c48cc !important;
background-color: #4c48cc !important;
color: #fff !important;
}
/* Gold accent for a pinned post rendered in the profile's standalone slot. */
body.vikinger-theme .post.is-pinned-post {
position: relative;
border: 1px solid rgba(222, 169, 49, .72) !important;
box-shadow: 0 0 0 1px rgba(222, 169, 49, .12), 0 8px 26px rgba(176, 127, 24, .14) !important;
}
body.vikinger-theme .post.is-pinned-post::before {
position: absolute;
top: -1px;
right: -1px;
left: -1px;
z-index: 2;
height: 5px;
border-radius: inherit;
background: linear-gradient(90deg, #dca52b 0%, #f2cf72 52%, #dca52b 100%);
content: "";
pointer-events: none;
}
body.vikinger-theme .post.is-pinned-post > .pin-icon {
z-index: 3;
color: #b37a0b;
filter: drop-shadow(0 1px 2px rgba(89, 60, 8, .22));
}
/*
* Settings dropdowns start closed before the binding runs. Inline styles
* written by showDropdown still win when the user explicitly opens a menu.
* During a filter AJAX replacement the transition class wins over any
* server/native inline visibility value, eliminating the short flash.
*/
body.vikinger-theme .post-settings-wrap > .widget-box-post-settings-dropdown {
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translate(0, -20px);
}
body.vikinger-theme.vikinger-post-filter-transition .widget-box-post-settings-dropdown,
body.vikinger-theme.vikinger-post-filter-transition .post-settings-wrap > .widget-box-post-settings-dropdown {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transform: translate(0, -20px) !important;
}
@media screen and (max-width: 680px) {
body.vikinger-theme .vikinger-post-edit {
padding: 16px 18px 16px;
}
body.vikinger-theme .vikinger-post-edit-actions {
gap: 6px;
}
body.vikinger-theme .vikinger-post-edit-actions .js_unedit-post,
body.vikinger-theme .vikinger-post-edit-actions .js_update-post {
min-width: 78px;
padding-right: 14px !important;
padding-left: 14px !important;
}
}
/*
* Diamond Pro share/story modal integration.
* Keep these rules scoped to the default Vikinger theme so other modal types
* and other themes retain their own layout.
*/
body.vikinger-theme:has(#modal > .modal-dialog > .modal-content > .share-v2) > .modal-backdrop,
body.vikinger-theme:has(#modal > .modal-dialog > .modal-content > .sng-story-header) > .modal-backdrop {
z-index: 100050 !important;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .share-v2),
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .sng-story-header) {
z-index: 100100 !important;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .share-v2) > .modal-dialog,
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .sng-story-header) > .modal-dialog {
width: calc(100% - 2rem);
max-width: 500px;
margin: 1.75rem auto;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .share-v2) > .modal-dialog > .modal-content,
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .sng-story-header) > .modal-dialog > .modal-content {
width: 100%;
max-height: calc(100vh - 3.5rem);
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .share-v2) .share-v2 {
max-height: calc(100vh - 3.5rem);
overflow-y: auto;
scrollbar-width: thin;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .sng-story-header) .sng-story-header,
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .sng-story-header) .sng-story-footer {
flex-shrink: 0;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .sng-story-header) .sng-story-body {
max-height: calc(100vh - 11rem);
overflow-y: auto;
scrollbar-width: thin;
}
@media screen and (max-width: 600px) {
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .share-v2) > .modal-dialog,
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .sng-story-header) > .modal-dialog {
width: calc(100% - 1rem);
margin: .5rem auto;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .share-v2) > .modal-dialog > .modal-content,
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .sng-story-header) > .modal-dialog > .modal-content {
max-height: calc(100vh - 1rem);
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .share-v2) .share-v2 {
max-height: calc(100vh - 1rem);
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .sng-story-header) .sng-story-body {
max-height: calc(100vh - 8rem);
}
}
/*
* Post copy readability: align feed and standalone posts with the
* already-readable lightbox typography.
*/
body.vikinger-theme .widget-box .widget-box-status .widget-box-status-text.vikinger-post-text,
body.vikinger-theme .vikinger-post-standalone .vikinger-post-text {
color: #30314c;
font-size: 1rem;
font-weight: 600;
line-height: 1.65;
}
/* Keep every feed level as wide as the central newsfeed column. */
body.vikinger-theme .vikinger-newsfeed-content .js_posts_stream,
body.vikinger-theme .vikinger-newsfeed-content .js_posts_stream > ul,
body.vikinger-theme .vikinger-newsfeed-content .js_posts_stream > ul > li,
body.vikinger-theme .vikinger-newsfeed-content .js_posts_stream > ul > li > .post,
body.vikinger-theme .vikinger-newsfeed-content .js_posts_stream > ul > li > .post > .post-body,
body.vikinger-theme .vikinger-newsfeed-content > .dummy-publisher-trigger {
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
/* Bootstrap adds 2rem of start padding to dynamically returned lists. That
* padding is not present on the native feed markup and makes filtered cards
* 32px narrower after the AJAX replacement. */
body.vikinger-theme .vikinger-newsfeed-content .js_posts_stream > ul {
padding: 0 !important;
list-style: none;
}
/*
* Standalone post pages use the same full-width content area as Diamond Pro.
* The default Vikinger page wrapper is capped at 1184px and the old template
* placed the post in col-lg-8, which left the post visibly narrow. Scope the
* wider wrapper to this page only so the feed and all other pages keep their
* existing three-column layout.
*/
body.vikinger-theme .content-grid[data-vikinger-scope="page"]:has(.vikinger-standalone-post-page) {
width: 100%;
max-width: 1320px;
margin-right: auto;
margin-left: auto;
}
/* Blog detail page — adapt Sngine's blog markup to Vikinger's post-open layout. */
@media screen and (min-width: 768px) {
body.vikinger-theme main.content-grid[data-vikinger-scope="page"]:has(> .vikinger-blog-detail-page) {
width: calc(100% - 140px);
max-width: 1184px;
margin-inline: auto;
}
}
body.vikinger-theme .vikinger-blog-detail-page {
margin-top: 24px !important;
margin-bottom: 48px;
color: #3e3f5e;
}
body.vikinger-theme .vikinger-blog-detail-page > .row > .sg-offcanvas-mainbar > .row {
align-items: flex-start;
}
body.vikinger-theme .vikinger-blog-detail-page > .row > .sg-offcanvas-mainbar > .row > .col-md-8,
body.vikinger-theme .vikinger-blog-detail-page > .row > .sg-offcanvas-mainbar > .row > .col-md-4 {
min-width: 0;
}
@media screen and (min-width: 768px) and (max-width: 991.98px) {
body.vikinger-theme .vikinger-blog-detail-page > .row > .sg-offcanvas-mainbar > .row > .col-md-8,
body.vikinger-theme .vikinger-blog-detail-page > .row > .sg-offcanvas-mainbar > .row > .col-md-4 {
width: 100%;
max-width: 100%;
flex: 0 0 100%;
}
}
body.vikinger-theme .vikinger-blog-detail-page .blog {
position: relative;
margin: 0 0 24px !important;
border: 1px solid #eaeaf5;
border-radius: 12px;
background: #fff;
color: #3e3f5e;
box-shadow: 0 0 40px 0 rgba(94, 92, 154, .06);
}
body.vikinger-theme .vikinger-blog-detail-page .blog > .blog-wrapper {
padding: clamp(22px, 3vw, 36px) !important;
border-radius: 12px;
background: transparent;
}
body.vikinger-theme .vikinger-blog-detail-page > .row > .sg-offcanvas-mainbar > .row > .col-md-8 > .blog-wrapper.no-footer {
padding: clamp(22px, 3vw, 36px) !important;
border: 1px solid #eaeaf5;
border-radius: 12px;
background: #fff;
box-shadow: 0 0 40px 0 rgba(94, 92, 154, .06);
}
body.vikinger-theme .vikinger-blog-detail-page .blog > .games-library-game-blog-origin {
margin: 22px 28px 0;
padding: 10px 14px;
border-color: #eaeaf5;
border-radius: 10px;
background: #f8f8fc;
}
body.vikinger-theme .vikinger-blog-detail-page .games-library-game-blog-origin a {
gap: 8px;
line-height: 1.45;
}
body.vikinger-theme .vikinger-blog-detail-page .games-library-game-blog-origin a span:last-of-type {
font-size: .75rem;
font-weight: 700;
}
body.vikinger-theme .vikinger-blog-detail-page .blog-wrapper > .text-end {
margin-bottom: 16px !important;
}
body.vikinger-theme .vikinger-blog-detail-page .blog-wrapper > .text-end .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 36px;
padding: 7px 14px;
border: 1px solid #e3e3f0;
border-radius: 10px;
background: #fcfcfd;
color: #5d5f7b;
font-size: .8125rem;
font-weight: 700;
}
body.vikinger-theme .vikinger-blog-detail-page .blog-wrapper > .text-end .btn:hover,
body.vikinger-theme .vikinger-blog-detail-page .blog-wrapper > .text-end .btn:focus-visible {
border-color: rgba(97, 93, 250, .35);
background: #f5f4ff;
color: #615dfa;
}
body.vikinger-theme .vikinger-blog-detail-page .blog-wrapper > .text-end .btn i {
margin: 0 !important;
}
body.vikinger-theme .vikinger-blog-detail-page .vikinger-blog-detail-title {
margin: 0 0 18px !important;
color: #3e3f5e;
font-size: clamp(1.75rem, 2.8vw, 2.375rem);
font-weight: 700;
line-height: 1.12;
letter-spacing: -.025em;
overflow-wrap: anywhere;
}
body.vikinger-theme .vikinger-blog-detail-page .vikinger-blog-detail-categories {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 0 0 20px !important;
}
body.vikinger-theme .vikinger-blog-detail-page .vikinger-blog-detail-categories > i {
margin: 0 !important;
color: #adafca;
font-size: .7rem;
}
body.vikinger-theme .vikinger-blog-detail-page .vikinger-blog-detail-categories > .badge {
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 5px 11px;
border: 1px solid #eaeaf5;
border-radius: 999px;
background: #f7f7fc !important;
color: #615dfa !important;
font-size: .75rem;
font-weight: 700;
line-height: 1.2;
text-decoration: none;
}
body.vikinger-theme .vikinger-blog-detail-page .vikinger-blog-detail-categories > .badge:hover,
body.vikinger-theme .vikinger-blog-detail-page .vikinger-blog-detail-categories > .badge:focus-visible {
border-color: rgba(97, 93, 250, .35);
background: #f0efff !important;
}
body.vikinger-theme .vikinger-blog-detail-page .vikinger-blog-detail-meta {
align-items: center;
row-gap: 12px;
margin: 0 0 22px;
}
body.vikinger-theme .vikinger-blog-detail-page .vikinger-blog-detail-meta > [class*="col-"] {
min-width: 0;
margin-bottom: 0 !important;
}
body.vikinger-theme .vikinger-blog-detail-page .vikinger-blog-detail-meta > .col-lg-6:first-child {
display: flex;
align-items: center;
gap: 12px;
}
body.vikinger-theme .vikinger-blog-detail-page .post-avatar {
display: block;
flex: 0 0 48px;
width: 48px;
height: 48px;
margin: 0;
}
body.vikinger-theme .vikinger-blog-detail-page .post-avatar-picture {
display: block;
width: 48px;
height: 48px;
border: 2px solid #fff;
border-radius: 50%;
background-color: #f0f1f8;
background-position: center;
background-size: cover;
box-shadow: 0 0 0 1px #eaeaf5;
}
body.vikinger-theme .vikinger-blog-detail-page .post-meta {
min-width: 0;
color: #3e3f5e;
font-size: .875rem;
line-height: 1.45;
}
body.vikinger-theme .vikinger-blog-detail-page .post-meta > div:first-child {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
}
body.vikinger-theme .vikinger-blog-detail-page .post-meta > div:first-child a {
color: #3e3f5e;
font-weight: 700;
text-decoration: none;
}
body.vikinger-theme .vikinger-blog-detail-page .post-meta > div:first-child a:hover,
body.vikinger-theme .vikinger-blog-detail-page .post-meta > div:first-child a:focus-visible {
color: #615dfa;
}
body.vikinger-theme .vikinger-blog-detail-page .post-meta .verified-badge,
body.vikinger-theme .vikinger-blog-detail-page .post-meta .pro-badge {
display: inline-flex;
align-items: center;
width: 18px;
height: 18px;
margin-inline-start: 3px;
}
body.vikinger-theme .vikinger-blog-detail-page .post-meta .verified-badge svg,
body.vikinger-theme .vikinger-blog-detail-page .post-meta .pro-badge svg {
width: 18px;
height: 18px;
}
body.vikinger-theme .vikinger-blog-detail-page .post-time {
margin-top: 3px;
color: #8f91ac;
font-size: .75rem;
font-weight: 500;
}
body.vikinger-theme .vikinger-blog-detail-page .post-time .badge {
display: inline-flex;
align-items: center;
padding: 3px 7px;
border: 1px solid #eaeaf5;
border-radius: 999px;
background: #f7f7fc !important;
color: #615dfa !important;
font-size: .625rem;
line-height: 1.2;
}
body.vikinger-theme .vikinger-blog-detail-page .vikinger-blog-detail-meta > .col-lg-6:last-child {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: 8px;
}
body.vikinger-theme .vikinger-blog-detail-page .blog-meta-counter {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-height: 34px;
margin: 0;
padding: 6px 10px;
border: 1px solid #eaeaf5;
border-radius: 10px;
background: #fcfcfd;
color: #8f91ac;
font-size: .8125rem;
font-weight: 700;
line-height: 1.25;
text-decoration: none;
}
body.vikinger-theme .vikinger-blog-detail-page a.blog-meta-counter:hover,
body.vikinger-theme .vikinger-blog-detail-page a.blog-meta-counter:focus-visible {
border-color: rgba(97, 93, 250, .3);
background: #f5f4ff;
color: #615dfa;
}
body.vikinger-theme .vikinger-blog-detail-page .collaborative-users {
margin: 0 0 20px;
color: #8f91ac;
font-size: .75rem;
}
body.vikinger-theme .vikinger-blog-detail-page .collaborative-users__label {
margin-bottom: 8px;
font-weight: 700;
}
body.vikinger-theme .vikinger-blog-detail-page .collaborative-users__list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
body.vikinger-theme .vikinger-blog-detail-page .collaborative-users__tag {
display: inline-flex;
}
body.vikinger-theme .vikinger-blog-detail-page .collaborative-users__link {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 4px 9px 4px 4px;
border: 1px solid #eaeaf5;
border-radius: 999px;
background: #fcfcfd;
color: #3e3f5e;
text-decoration: none;
}
body.vikinger-theme .vikinger-blog-detail-page .collaborative-users__avatar {
width: 26px;
height: 26px;
border-radius: 50%;
object-fit: cover;
}
body.vikinger-theme .vikinger-blog-detail-page .vikinger-blog-cover-wrap {
margin: 0 0 28px !important;
}
body.vikinger-theme .vikinger-blog-detail-page .vikinger-blog-cover-wrap > img {
display: block;
width: 100%;
max-width: 100%;
max-height: 560px;
height: auto;
border: 1px solid rgba(62, 63, 94, .06);
border-radius: 12px;
object-fit: cover;
}
body.vikinger-theme .vikinger-blog-detail-page .vikinger-blog-detail-text {
min-width: 0;
color: #3e3f5e;
font-size: 1rem;
font-weight: 500;
line-height: 1.8;
overflow-wrap: anywhere;
word-break: normal;
}
body.vikinger-theme .vikinger-blog-detail-page .vikinger-blog-detail-text > p {
margin: 0 0 1.15rem !important;
line-height: 1.8 !important;
}
body.vikinger-theme .vikinger-blog-detail-page .vikinger-blog-detail-text > p:last-child {
margin-bottom: 0 !important;
}
body.vikinger-theme .vikinger-blog-detail-page .vikinger-blog-detail-text :is(h1, h2, h3, h4, h5, h6) {
margin: 1.6em 0 .65em;
color: #3e3f5e;
font-weight: 700;
line-height: 1.2;
overflow-wrap: anywhere;
}
body.vikinger-theme .vikinger-blog-detail-page .vikinger-blog-detail-text :is(h1, h2):first-child {
margin-top: 0;
}
body.vikinger-theme .vikinger-blog-detail-page .vikinger-blog-detail-text :is(ul, ol) {
margin: 0 0 1.15rem;
padding-inline-start: 1.5rem;
}
body.vikinger-theme .vikinger-blog-detail-page .vikinger-blog-detail-text li + li {
margin-top: .35rem;
}
body.vikinger-theme .vikinger-blog-detail-page .vikinger-blog-detail-text a {
color: #615dfa;
font-weight: 600;
text-decoration: underline;
text-underline-offset: .15em;
}
body.vikinger-theme .vikinger-blog-detail-page .vikinger-blog-detail-text a:hover,
body.vikinger-theme .vikinger-blog-detail-page .vikinger-blog-detail-text a:focus-visible {
color: #4c48d7;
}
body.vikinger-theme .vikinger-blog-detail-page .vikinger-blog-detail-text img,
body.vikinger-theme .vikinger-blog-detail-page .vikinger-blog-detail-text video {
display: block;
max-width: 100% !important;
height: auto !important;
margin: 22px auto;
border-radius: 10px;
}
body.vikinger-theme .vikinger-blog-detail-page .vikinger-blog-detail-text figure {
max-width: 100%;
margin: 24px 0;
}
body.vikinger-theme .vikinger-blog-detail-page .vikinger-blog-detail-text figcaption {
margin-top: 8px;
color: #8f91ac;
font-size: .8125rem;
line-height: 1.55;
text-align: center;
}
body.vikinger-theme .vikinger-blog-detail-page .vikinger-blog-detail-text iframe {
display: block;
width: 100% !important;
min-height: 280px;
margin: 22px 0;
border: 0;
border-radius: 10px;
aspect-ratio: 16 / 9;
}
body.vikinger-theme .vikinger-blog-detail-page .vikinger-blog-detail-text blockquote {
margin: 24px 0;
padding: 14px 18px;
border-inline-start: 3px solid #615dfa;
border-radius: 0 10px 10px 0;
background: #f8f8fc;
color: #626581;
}
body.vikinger-theme .vikinger-blog-detail-page .vikinger-blog-detail-text :is(pre, table) {
max-width: 100%;
overflow: auto;
}
body.vikinger-theme .vikinger-blog-detail-page .vikinger-blog-detail-text pre {
padding: 14px;
border: 1px solid #eaeaf5;
border-radius: 10px;
background: #f8f8fc;
white-space: pre-wrap;
}
body.vikinger-theme .vikinger-blog-detail-page .blog-tags {
margin-top: 28px;
}
body.vikinger-theme .vikinger-blog-detail-page .blog-tags > ul {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
body.vikinger-theme .vikinger-blog-detail-page .blog-tags > ul > li {
margin: 0;
padding: 0;
}
body.vikinger-theme .vikinger-blog-detail-page .blog-tags > ul > li > a {
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 5px 11px;
border: 1px solid #eaeaf5;
border-radius: 999px;
background: #f7f7fc;
color: #626581;
font-size: .75rem;
font-weight: 700;
line-height: 1.2;
text-decoration: none;
overflow-wrap: anywhere;
}
body.vikinger-theme .vikinger-blog-detail-page .blog-tags > ul > li > a:hover,
body.vikinger-theme .vikinger-blog-detail-page .blog-tags > ul > li > a:focus-visible {
border-color: rgba(97, 93, 250, .3);
background: #f0efff;
color: #615dfa;
}
body.vikinger-theme .vikinger-blog-detail-page .blog-references-section {
margin-top: 28px;
padding: 18px 20px;
border: 1px solid #eaeaf5;
border-radius: 12px;
background: #fcfcfd;
}
body.vikinger-theme .vikinger-blog-detail-page .blog-references-heading {
display: flex;
align-items: center;
gap: 9px;
margin: 0 0 12px;
color: #3e3f5e;
font-size: 1rem;
font-weight: 700;
}
body.vikinger-theme .vikinger-blog-detail-page .blog-references-heading > i {
color: #615dfa;
}
body.vikinger-theme .vikinger-blog-detail-page .blog-references-list {
margin: 0;
padding-inline-start: 20px;
color: #8f91ac;
}
body.vikinger-theme .vikinger-blog-detail-page .blog-references-item + .blog-references-item {
margin-top: 8px;
}
body.vikinger-theme .vikinger-blog-detail-page .blog-references-link {
color: #615dfa;
font-size: .875rem;
font-weight: 600;
line-height: 1.5;
overflow-wrap: anywhere;
}
body.vikinger-theme .vikinger-blog-detail-page .blog-references-external {
margin-inline-start: 5px;
color: #8f91ac;
font-size: .75rem;
}
body.vikinger-theme .vikinger-blog-detail-page .vikinger-post-content-actions {
display: flex;
align-items: center;
min-height: 42px;
height: auto;
margin: 26px 0 0;
padding: 12px 0;
border-top: 1px solid #eaeaf5;
}
body.vikinger-theme .vikinger-blog-detail-page .vikinger-post-content-actions:empty {
display: none;
}
body.vikinger-theme .vikinger-blog-detail-page .vikinger-post-reactions-summary,
body.vikinger-theme .vikinger-blog-detail-page .vikinger-post-reactions-summary .reactions-stats {
display: flex;
align-items: center;
gap: 6px;
color: #8f91ac;
font-size: .8125rem;
font-weight: 600;
}
body.vikinger-theme .vikinger-blog-detail-page .vikinger-post-reactions-summary {
cursor: pointer;
}
body.vikinger-theme .vikinger-blog-detail-page .vikinger-post-reactions-summary:hover {
color: #615dfa;
}
body.vikinger-theme .vikinger-blog-detail-page .vikinger-post-reactions-summary .reactions-stats-item {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
margin: 0;
border: 2px solid #fff;
border-radius: 50%;
background: #fff;
}
body.vikinger-theme .vikinger-blog-detail-page .vikinger-post-reactions-summary .reaction-image {
width: 18px;
height: 18px;
}
body.vikinger-theme .vikinger-blog-detail-page .post-actions {
display: flex;
align-items: center;
gap: 6px;
margin: 14px 0 0;
padding: 8px 0 0;
border-top: 1px solid #eaeaf5;
}
body.vikinger-theme .vikinger-blog-detail-page .post-actions > .action-btn {
display: flex;
align-items: center;
justify-content: center;
flex: 1 1 0;
gap: 8px;
min-width: 0;
min-height: 44px;
margin: 0;
padding: 8px 10px;
border-radius: 10px;
color: #8f91ac;
font-size: .8125rem;
font-weight: 700;
line-height: 1.25;
text-align: center;
cursor: pointer;
transition: background-color .16s ease, color .16s ease;
}
body.vikinger-theme .vikinger-blog-detail-page .post-actions > .action-btn:hover,
body.vikinger-theme .vikinger-blog-detail-page .post-actions > .action-btn:focus-visible {
background: #f5f4ff;
color: #615dfa;
}
body.vikinger-theme .vikinger-blog-detail-page .post-actions .action-icon,
body.vikinger-theme .vikinger-blog-detail-page .post-actions .action-icon svg {
flex: 0 0 20px;
width: 20px;
height: 20px;
margin: 0 !important;
color: currentColor;
fill: currentColor;
}
body.vikinger-theme .vikinger-blog-detail-page .post-actions .action-icon svg path {
fill: currentColor;
}
body.vikinger-theme .vikinger-blog-detail-page .reaction-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-width: 0;
}
body.vikinger-theme .vikinger-blog-detail-page .reaction-btn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
color: currentColor;
}
body.vikinger-theme .vikinger-blog-detail-page .reaction-btn-name {
color: currentColor;
font-size: inherit;
font-weight: inherit;
text-transform: none;
}
body.vikinger-theme .vikinger-blog-detail-page .reactions-wrapper {
position: relative;
}
body.vikinger-theme .vikinger-blog-detail-page .reactions-container.reaction-options-dropdown {
z-index: 100100;
max-width: calc(100vw - 24px);
gap: 8px;
padding: 10px 14px;
border: 1px solid #eaeaf5;
background: #fff;
box-shadow: 0 10px 28px rgba(62, 63, 94, .16);
}
body.vikinger-theme .vikinger-blog-detail-page .reaction-options-dropdown .reaction-option {
flex: 0 0 40px;
width: 40px;
height: 40px;
margin: 0;
}
body.vikinger-theme .vikinger-blog-detail-page .reaction-options-dropdown .reaction-option-image,
body.vikinger-theme .vikinger-blog-detail-page .reaction-options-dropdown .reaction-image {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
body.vikinger-theme .vikinger-blog-detail-page .post-footer {
margin: 0;
padding: 0;
border-top: 1px solid #eaeaf5;
border-radius: 0 0 12px 12px;
background: #fff;
}
body.vikinger-theme .vikinger-blog-detail-page .post-comments.vikinger-comments {
border-radius: 0 0 12px 12px;
background: transparent;
}
body.vikinger-theme .vikinger-blog-detail-page .vikinger-comments .post-comment-list:empty {
display: none;
}
body.vikinger-theme .vikinger-blog-detail-page .vikinger-comments .js_comments-filter-loader {
padding: 18px;
}
body.vikinger-theme .vikinger-blog-detail-page .vikinger-comments .comment-voice-notes {
margin-top: 10px;
}
body.vikinger-theme .vikinger-blog-detail-page .vikinger-comments .btn-voice-start,
body.vikinger-theme .vikinger-blog-detail-page .vikinger-comments .btn-voice-stop {
display: inline-flex;
align-items: center;
min-height: 36px;
margin-top: 8px;
padding: 8px 12px;
border: 1px solid #eaeaf5;
border-radius: 9px;
background: #fcfcfd;
color: #5d5f7b;
font-size: .8125rem;
font-weight: 700;
cursor: pointer;
}
body.vikinger-theme .vikinger-blog-detail-page .comment-attachments {
width: 100%;
margin-top: 12px;
}
body.vikinger-theme .vikinger-blog-detail-page .comment-attachments > ul {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
body.vikinger-theme .vikinger-blog-detail-page .comment-attachments > ul > li {
min-width: 0;
list-style: none;
}
body.vikinger-theme .vikinger-blog-detail-page .comment-attachments > ul > li.loading {
flex: 1 1 100%;
}
body.vikinger-theme .vikinger-blog-detail-page .js_comments-filter-loader .loader_large {
display: inline-block;
width: 34px;
height: 34px;
border: 3px solid #eaeaf5;
border-top-color: #615dfa;
border-radius: 50%;
animation: vikinger-blog-spinner .75s linear infinite;
}
body.vikinger-theme .vikinger-blog-detail-page .loading-dots::after {
content: "…";
display: inline-block;
min-width: 1.2em;
overflow: hidden;
vertical-align: bottom;
animation: vikinger-blog-loading-dots 1.1s steps(4, end) infinite;
}
@keyframes vikinger-blog-spinner {
to { transform: rotate(360deg); }
}
@keyframes vikinger-blog-loading-dots {
from { width: 0; }
to { width: 1.2em; }
}
body.vikinger-theme .vikinger-blog-detail-page .js_comment-disabled-msg,
body.vikinger-theme .vikinger-blog-detail-page .post-footer > .ptb10 {
margin: 0;
padding: 18px 24px;
color: #8f91ac;
font-size: .875rem;
line-height: 1.5;
}
body.vikinger-theme .vikinger-blog-detail-page .post-footer > .ptb10 a {
color: #615dfa;
font-weight: 600;
}
/* Blog detail sidebar: searchable categories and compact related articles. */
body.vikinger-theme .vikinger-blog-detail-page .sg-offcanvas-mainbar > .row > .col-md-4 > .mb10:first-child .btn-success {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 46px;
border: 1px solid #615dfa;
border-radius: 12px;
background: #615dfa;
color: #fff;
font-size: .875rem;
font-weight: 700;
box-shadow: 0 6px 16px rgba(97, 93, 250, .18);
}
body.vikinger-theme .vikinger-blog-detail-page .sg-offcanvas-mainbar > .row > .col-md-4 > .mb10:first-child .btn-success:hover,
body.vikinger-theme .vikinger-blog-detail-page .sg-offcanvas-mainbar > .row > .col-md-4 > .mb10:first-child .btn-success:focus-visible {
border-color: #4c48d7;
background: #4c48d7;
}
body.vikinger-theme .vikinger-blog-detail-page .blogs-widget-header {
margin: 22px 0 12px;
border-bottom: 1px solid #eaeaf5;
}
body.vikinger-theme .vikinger-blog-detail-page .blogs-widget-title {
display: inline-block;
margin: 0 0 -1px;
padding: 0 0 9px;
border-bottom: 2px solid #615dfa;
color: #3e3f5e;
font-size: 1rem;
font-weight: 700;
line-height: 1.35;
text-transform: none;
}
body.vikinger-theme .vikinger-blog-detail-page .blogs-widget-header + .mb10 form .input-group {
display: flex;
gap: 8px;
}
body.vikinger-theme .vikinger-blog-detail-page .blogs-widget-header + .mb10 form .form-control {
min-width: 0;
min-height: 42px;
border: 1px solid #e3e3f0;
border-radius: 10px;
background: #fff;
color: #3e3f5e;
box-shadow: none;
}
body.vikinger-theme .vikinger-blog-detail-page .blogs-widget-header + .mb10 form .form-control:focus {
border-color: rgba(97, 93, 250, .55);
box-shadow: 0 0 0 3px rgba(97, 93, 250, .1);
}
body.vikinger-theme .vikinger-blog-detail-page .blogs-widget-header + .mb10 form .btn-secondary {
flex: 0 0 auto;
min-height: 42px;
padding-inline: 14px;
border: 1px solid #615dfa;
border-radius: 10px;
background: #615dfa;
color: #fff;
font-size: .8125rem;
font-weight: 700;
}
body.vikinger-theme .vikinger-blog-detail-page .blog-categories {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
body.vikinger-theme .vikinger-blog-detail-page .blog-categories > li {
margin: 0;
padding: 0;
list-style: none;
}
body.vikinger-theme .vikinger-blog-detail-page .blog-categories .blog-category {
display: inline-flex;
align-items: center;
min-height: 32px;
margin: 0;
padding: 6px 12px;
border: 1px solid #eaeaf5;
border-radius: 999px;
background: #f7f7fc;
color: #626581;
font-size: .75rem;
font-weight: 700;
line-height: 1.2;
text-decoration: none;
}
body.vikinger-theme .vikinger-blog-detail-page .blog-categories .blog-category:hover,
body.vikinger-theme .vikinger-blog-detail-page .blog-categories .blog-category:focus-visible {
border-color: rgba(97, 93, 250, .3);
background: #f0efff;
color: #615dfa;
}
body.vikinger-theme .vikinger-blog-detail-page .post-media.list {
display: grid;
grid-template-columns: minmax(92px, 116px) minmax(0, 1fr);
align-items: start;
gap: 14px;
min-width: 0;
margin: 0 0 14px;
padding: 0 0 14px;
border-bottom: 1px solid #eaeaf5;
}
body.vikinger-theme .vikinger-blog-detail-page .post-media.list:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: 0;
}
body.vikinger-theme .vikinger-blog-detail-page .post-media-image-wrapper {
min-width: 0;
position: relative;
}
body.vikinger-theme .vikinger-blog-detail-page .post-media-image {
display: block;
position: relative;
overflow: hidden;
aspect-ratio: 16 / 10;
border-radius: 10px;
background: #f0f1f8;
}
body.vikinger-theme .vikinger-blog-detail-page .post-media-image > div {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
padding-top: 0 !important;
background-position: center;
background-size: cover;
}
body.vikinger-theme .vikinger-blog-detail-page .post-media-image-meta {
position: absolute;
right: 6px;
bottom: 6px;
left: 6px;
pointer-events: none;
}
body.vikinger-theme .vikinger-blog-detail-page .post-media-image-meta .blog-category {
max-width: 100%;
min-height: 24px;
padding: 4px 8px;
border: 0;
background: rgba(255, 255, 255, .94);
color: #4b4e6a;
font-size: .625rem;
}
body.vikinger-theme .vikinger-blog-detail-page .post-media-meta {
min-width: 0;
color: #8f91ac;
font-size: .75rem;
line-height: 1.5;
}
body.vikinger-theme .vikinger-blog-detail-page .post-media-meta > .title {
display: -webkit-box;
overflow: hidden;
margin: 0 0 5px !important;
color: #3e3f5e;
font-size: .875rem;
font-weight: 700;
line-height: 1.35;
text-decoration: none;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
body.vikinger-theme .vikinger-blog-detail-page .post-media-meta > .title:hover,
body.vikinger-theme .vikinger-blog-detail-page .post-media-meta > .title:focus-visible {
color: #615dfa;
}
body.vikinger-theme .vikinger-blog-detail-page .post-media-meta > .games-library-game-blog-badge {
margin: 0 0 6px;
font-size: .625rem;
}
body.vikinger-theme .vikinger-blog-detail-page .post-media-meta > .text {
display: -webkit-box;
overflow: hidden;
margin: 0 0 6px !important;
color: #626581;
font-size: .75rem;
line-height: 1.45;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
body.vikinger-theme .vikinger-blog-detail-page .post-media-meta .info {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 7px;
color: #8f91ac;
font-size: .6875rem;
line-height: 1.4;
}
body.vikinger-theme .vikinger-blog-detail-page .post-media-meta .info a {
color: #626581;
font-weight: 600;
}
body.vikinger-theme.night-mode .vikinger-blog-detail-page {
color: #d5d9e8;
}
body.vikinger-theme.night-mode .vikinger-blog-detail-page .blog,
body.vikinger-theme.night-mode .vikinger-blog-detail-page .blog > .blog-wrapper,
body.vikinger-theme.night-mode .vikinger-blog-detail-page .post-footer,
body.vikinger-theme.night-mode .vikinger-blog-detail-page .post-comments.vikinger-comments,
body.vikinger-theme.night-mode .vikinger-blog-detail-page > .row > .sg-offcanvas-mainbar > .row > .col-md-8 > .blog-wrapper.no-footer {
border-color: #292e46;
background: #171b2d;
color: #d5d9e8;
}
body.vikinger-theme.night-mode .vikinger-blog-detail-page .vikinger-blog-detail-title,
body.vikinger-theme.night-mode .vikinger-blog-detail-page .post-meta,
body.vikinger-theme.night-mode .vikinger-blog-detail-page .post-meta > div:first-child a,
body.vikinger-theme.night-mode .vikinger-blog-detail-page .blog-references-heading,
body.vikinger-theme.night-mode .vikinger-blog-detail-page .blogs-widget-title,
body.vikinger-theme.night-mode .vikinger-blog-detail-page .post-media-meta > .title {
color: #e2e8f0;
}
body.vikinger-theme.night-mode .vikinger-blog-detail-page .vikinger-blog-detail-categories > .badge,
body.vikinger-theme.night-mode .vikinger-blog-detail-page .post-time .badge,
body.vikinger-theme.night-mode .vikinger-blog-detail-page .blog-tags > ul > li > a,
body.vikinger-theme.night-mode .vikinger-blog-detail-page .blog-categories .blog-category,
body.vikinger-theme.night-mode .vikinger-blog-detail-page .blog-meta-counter,
body.vikinger-theme.night-mode .vikinger-blog-detail-page .collaborative-users__link,
body.vikinger-theme.night-mode .vikinger-blog-detail-page .blog-references-section,
body.vikinger-theme.night-mode .vikinger-blog-detail-page .vikinger-blog-detail-text blockquote,
body.vikinger-theme.night-mode .vikinger-blog-detail-page .vikinger-blog-detail-text pre,
body.vikinger-theme.night-mode .vikinger-blog-detail-page .blogs-widget-header + .mb10 form .form-control {
border-color: #292e46;
background: #1c2033 !important;
color: #cbd5e1;
}
body.vikinger-theme.night-mode .vikinger-blog-detail-page .games-library-game-blog-origin {
border-color: #292e46;
background: #1c2033;
}
body.vikinger-theme.night-mode .vikinger-blog-detail-page .games-library-game-blog-origin a span:first-of-type {
color: #e2e8f0;
}
body.vikinger-theme.night-mode .vikinger-blog-detail-page .vikinger-blog-detail-text {
color: #d5d9e8;
}
body.vikinger-theme.night-mode .vikinger-blog-detail-page .vikinger-blog-detail-text :is(h1, h2, h3, h4, h5, h6) {
color: #e2e8f0;
}
body.vikinger-theme.night-mode .vikinger-blog-detail-page .post-actions,
body.vikinger-theme.night-mode .vikinger-blog-detail-page .vikinger-post-content-actions,
body.vikinger-theme.night-mode .vikinger-blog-detail-page .post-footer,
body.vikinger-theme.night-mode .vikinger-blog-detail-page .blogs-widget-header,
body.vikinger-theme.night-mode .vikinger-blog-detail-page .post-media.list {
border-color: #292e46;
}
body.vikinger-theme.night-mode .vikinger-blog-detail-page .post-actions > .action-btn:hover,
body.vikinger-theme.night-mode .vikinger-blog-detail-page .post-actions > .action-btn:focus-visible {
background: #282f4c !important;
color: #aaa7ff;
}
body.vikinger-theme.night-mode .vikinger-blog-detail-page .post-actions > .action-btn {
background: transparent;
color: #aeb8c7;
}
body.vikinger-theme.night-mode .vikinger-blog-detail-page .reactions-container.reaction-options-dropdown {
border-color: #292e46;
background: #1c2033;
}
body.vikinger-theme.night-mode .vikinger-blog-detail-page .blogs-widget-header + .mb10 form .form-control::placeholder {
color: #94a3b8;
}
body.vikinger-theme.night-mode .vikinger-blog-detail-page .vikinger-comments .vikinger-comment-form,
body.vikinger-theme.night-mode .vikinger-blog-detail-page .vikinger-comments .post-comment-list,
body.vikinger-theme.night-mode .vikinger-blog-detail-page .vikinger-comments .post-comment-list > .post-comment {
border-color: #292e46;
background: #171b2d;
}
body.vikinger-theme.night-mode .vikinger-blog-detail-page .vikinger-comments .vikinger-comment-author,
body.vikinger-theme.night-mode .vikinger-blog-detail-page .vikinger-comments .vikinger-comment-author a,
body.vikinger-theme.night-mode .vikinger-blog-detail-page .vikinger-comments .vikinger-comment-text {
color: #d5d9e8;
}
body.vikinger-theme.night-mode .vikinger-blog-detail-page .vikinger-comments .vikinger-comment-form-inner .form-input.small textarea {
border-color: #343a55;
background: #1c2033;
color: #e2e8f0;
}
body.vikinger-theme.night-mode .vikinger-blog-detail-page .vikinger-comments .vikinger-comment-form-inner .form-input.small textarea::placeholder {
color: #94a3b8;
}
body.vikinger-theme.night-mode .vikinger-blog-detail-page .js_comments-filter-loader .loader_large {
border-color: #343a55;
border-top-color: #aaa7ff;
}
body.vikinger-theme.night-mode .vikinger-blog-detail-page .post-media-meta > .text {
color: #aeb8c7;
}
@media screen and (max-width: 767.98px) {
body.vikinger-theme main.content-grid[data-vikinger-scope="page"]:has(> .vikinger-blog-detail-page) {
width: 100%;
max-width: 100%;
margin-inline: 0;
}
/* The article uses Bootstrap's legacy nested rows inside Vikinger's grid.
* Keep every level fluid on phones so the blog card cannot retain its old
* desktop column width and create horizontal scrolling. */
body.vikinger-theme .vikinger-blog-detail-page,
body.vikinger-theme .vikinger-blog-detail-page > .row,
body.vikinger-theme .vikinger-blog-detail-page > .row > .sg-offcanvas-mainbar,
body.vikinger-theme .vikinger-blog-detail-page > .row > .sg-offcanvas-mainbar > .row,
body.vikinger-theme .vikinger-blog-detail-page > .row > .sg-offcanvas-mainbar > .row > .col-md-8,
body.vikinger-theme .vikinger-blog-detail-page > .row > .sg-offcanvas-mainbar > .row > .col-md-4,
body.vikinger-theme .vikinger-blog-detail-page .blog,
body.vikinger-theme .vikinger-blog-detail-page .blog > .blog-wrapper,
body.vikinger-theme .vikinger-blog-detail-page .post-footer,
body.vikinger-theme .vikinger-blog-detail-page .vikinger-comments,
body.vikinger-theme .vikinger-blog-detail-page .post-comment-list {
box-sizing: border-box;
width: 100%;
max-width: 100%;
min-width: 0;
}
body.vikinger-theme .vikinger-blog-detail-page > .row,
body.vikinger-theme .vikinger-blog-detail-page > .row > .sg-offcanvas-mainbar > .row {
margin-right: 0;
margin-left: 0;
}
body.vikinger-theme .vikinger-blog-detail-page > .row > .sg-offcanvas-mainbar > .row > .col-md-8,
body.vikinger-theme .vikinger-blog-detail-page > .row > .sg-offcanvas-mainbar > .row > .col-md-4 {
flex: 0 0 100%;
padding-right: 0;
padding-left: 0;
}
body.vikinger-theme .vikinger-blog-detail-page {
margin-top: 14px !important;
margin-bottom: 32px;
}
body.vikinger-theme .vikinger-blog-detail-page .blog > .blog-wrapper {
padding: 20px !important;
}
body.vikinger-theme .vikinger-blog-detail-page .blog > .games-library-game-blog-origin {
margin: 16px 20px 0;
}
body.vikinger-theme .vikinger-blog-detail-page .vikinger-blog-detail-title {
font-size: clamp(1.55rem, 6vw, 2rem);
line-height: 1.16;
}
body.vikinger-theme .vikinger-blog-detail-page .vikinger-blog-detail-meta > .col-lg-6:last-child {
justify-content: flex-start;
}
body.vikinger-theme .vikinger-blog-detail-page .vikinger-blog-cover-wrap > img {
display: block;
width: 100%;
max-width: 100%;
max-height: 400px;
object-fit: cover;
}
body.vikinger-theme .vikinger-blog-detail-page .vikinger-blog-detail-text,
body.vikinger-theme .vikinger-blog-detail-page .vikinger-blog-detail-text > *,
body.vikinger-theme .vikinger-blog-detail-page .blog-tags,
body.vikinger-theme .vikinger-blog-detail-page .blog-references-section {
min-width: 0;
max-width: 100%;
overflow-wrap: anywhere;
}
body.vikinger-theme .vikinger-blog-detail-page .post-footer > .ptb10,
body.vikinger-theme .vikinger-blog-detail-page .js_comment-disabled-msg {
padding: 16px 20px;
}
}
@media (prefers-reduced-motion: reduce) {
body.vikinger-theme .vikinger-blog-detail-page .js_comments-filter-loader .loader_large,
body.vikinger-theme .vikinger-blog-detail-page .loading-dots::after {
animation: none;
}
}
@media screen and (max-width: 575.98px) {
body.vikinger-theme .vikinger-blog-detail-page .blog > .blog-wrapper {
padding: 17px !important;
}
body.vikinger-theme .vikinger-blog-detail-page .blog > .games-library-game-blog-origin {
margin: 14px 17px 0;
padding: 9px 11px;
}
body.vikinger-theme .vikinger-blog-detail-page .vikinger-blog-detail-meta > .col-lg-6:first-child {
gap: 10px;
}
body.vikinger-theme .vikinger-blog-detail-page .post-avatar,
body.vikinger-theme .vikinger-blog-detail-page .post-avatar-picture {
flex-basis: 42px;
width: 42px;
height: 42px;
}
body.vikinger-theme .vikinger-blog-detail-page .post-actions {
gap: 2px;
}
body.vikinger-theme .vikinger-blog-detail-page .post-actions > .action-btn {
min-height: 42px;
padding: 7px 4px;
}
body.vikinger-theme .vikinger-blog-detail-page .post-actions .action-icon,
body.vikinger-theme .vikinger-blog-detail-page .post-actions .action-icon svg {
flex-basis: 19px;
width: 19px;
height: 19px;
}
body.vikinger-theme .vikinger-blog-detail-page .reactions-container.reaction-options-dropdown {
gap: 5px;
padding: 8px;
}
body.vikinger-theme .vikinger-blog-detail-page .reaction-options-dropdown .reaction-option {
flex-basis: 32px;
width: 32px;
height: 32px;
}
body.vikinger-theme .vikinger-blog-detail-page .vikinger-comments .vikinger-comment-form {
padding: 16px 16px 14px 68px;
}
body.vikinger-theme .vikinger-blog-detail-page .vikinger-comments .vikinger-comment-avatar {
top: 18px;
left: 16px;
}
body.vikinger-theme .vikinger-blog-detail-page .vikinger-comments .post-comment-list > .post-comment {
padding: 18px 16px 18px 68px;
}
body.vikinger-theme .vikinger-blog-detail-page .vikinger-comments .vikinger-comment .vikinger-comment-avatar {
top: 18px;
left: 16px;
}
body.vikinger-theme .vikinger-blog-detail-page .post-media.list {
grid-template-columns: 92px minmax(0, 1fr);
gap: 10px;
}
body.vikinger-theme .vikinger-blog-detail-page .post-media-meta > .text {
-webkit-line-clamp: 2;
}
}
@media (prefers-reduced-motion: reduce) {
body.vikinger-theme .vikinger-blog-detail-page .post-actions > .action-btn {
transition: none;
}
}
body.vikinger-theme .vikinger-standalone-post-page,
body.vikinger-theme .vikinger-standalone-post-page > .row,
body.vikinger-theme .vikinger-standalone-post-page .sg-offcanvas-mainbar,
body.vikinger-theme .vikinger-standalone-post-page .sg-offcanvas-mainbar > .row,
body.vikinger-theme .vikinger-standalone-post-page .sg-offcanvas-mainbar > .row > .col-lg-12 {
min-width: 0;
}
/* The standalone page has no rendered content in the legacy left column.
* Remove that empty grid column and center the Diamond Pro-sized post in the
* complete content area instead of centering it only inside the right column. */
@media screen and (min-width: 768px) {
body.vikinger-theme .vikinger-standalone-post-page > .row > .sg-offcanvas-sidebar {
display: none;
}
body.vikinger-theme .vikinger-standalone-post-page > .row > .sg-offcanvas-mainbar {
width: 100%;
max-width: 100%;
flex: 0 0 100%;
}
body.vikinger-theme .vikinger-standalone-post-page .post.vikinger-post-standalone {
width: 100%;
max-width: 966px;
margin-right: auto;
margin-left: auto;
}
}
@media screen and (max-width: 767.98px) {
body.vikinger-theme .content-grid[data-vikinger-scope="page"]:has(.vikinger-standalone-post-page) {
width: 100%;
max-width: 100%;
}
}
/* The standalone post menu already contains its own Font Awesome chevron.
* Bootstrap's dropdown-toggle adds a second caret through ::after, so hide
* only that generated caret and keep the dropdown trigger functional. */
body.vikinger-theme .vikinger-post-standalone .float-end.dropdown > .dropdown-toggle::after {
display: none;
}
/* Diamond Pro's share modal is rendered from the same share-v2 template, but
* the default Vikinger globals otherwise change its font metrics and force
* every button to width: 100%. Normalize only this modal so both themes have
* the same dimensions and visual hierarchy. */
body.vikinger-theme .share-v2,
body.vikinger-theme .share-v2 button,
body.vikinger-theme .share-v2 a,
body.vikinger-theme .share-v2 h2,
body.vikinger-theme .share-v2 h3,
body.vikinger-theme .share-v2 p,
body.vikinger-theme .share-v2 span {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
body.vikinger-theme .share-v2 {
font-size: 15px;
line-height: 1.5;
}
body.vikinger-theme .share-v2-title {
color: #212529;
}
body.vikinger-theme .share-v2-sub {
margin-bottom: 16px;
line-height: 1.5;
}
body.vikinger-theme .share-v2-copy {
width: auto;
min-width: 0;
}
body.vikinger-theme .share-v2-submit {
width: 100%;
}
body.vikinger-theme .share-v2-social {
line-height: 1.5;
}
body.vikinger-theme .share-v2-timeline-info h3 {
line-height: 1.2;
}
body.vikinger-theme .share-v2-timeline-info p {
line-height: 1.5;
}
/* The default theme's global button and textarea rules otherwise make the
* emoji button consume the whole message row and collapse the textarea to
* zero width. Match Diamond Pro's 28px emoji control plus flexible 44px
* message field. */
body.vikinger-theme .share-v2-msg-btn {
display: flex;
flex: 0 0 auto;
width: 28px;
min-width: 28px;
height: 28px;
padding: 2px;
border: 0;
border-radius: 0;
background: none;
font-weight: 400;
cursor: pointer;
align-items: center;
justify-content: center;
}
body.vikinger-theme .share-v2-msg-btn svg {
display: block;
width: 24px;
height: 24px;
stroke: #aaa;
fill: none;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
body.vikinger-theme .share-v2-msg > textarea {
flex: 1 1 0%;
width: auto;
min-width: 0;
height: 44px;
min-height: 44px;
padding: 0;
margin: 0;
border: 0;
border-radius: 0;
outline: 0;
background: transparent;
color: #333;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 21px;
resize: none;
}
body.vikinger-theme .share-v2-msg > textarea::placeholder {
color: #bbb;
opacity: 1;
}
/*
* AJAX post-stat modals
*
* The fixed Vikinger header sits above Bootstrap's default modal layer. The
* response is loaded correctly, but the header can cover the dialog and make
* shares/reviews look broken. Raise the shared default-theme modal layer and
* give the post-stat responses the same compact Vikinger card treatment.
*/
body.vikinger-theme > .modal-backdrop {
z-index: 100050 !important;
}
body.vikinger-theme > #modal {
z-index: 100100 !important;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .vikinger-post-stats-modal-header) > .modal-dialog {
width: min(94vw, 600px);
max-width: 600px;
margin: 1.75rem auto;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .vikinger-post-stats-modal-header) > .modal-dialog > .modal-content {
overflow: hidden;
border: 1px solid #eaeaf5;
border-radius: 16px;
background: #fff;
box-shadow: 0 18px 46px rgba(32, 33, 66, .16);
}
body.vikinger-theme #modal .vikinger-post-stats-modal-header {
position: relative;
display: flex;
align-items: center;
min-height: 64px;
padding: 0 58px 0 20px;
border: 0;
border-bottom: 1px solid #eaeaf5;
background: #fff;
}
body.vikinger-theme #modal .vikinger-post-stats-modal-header .modal-title {
min-width: 0;
margin: 0;
color: #3e3f5e;
font-family: Rajdhani, sans-serif;
font-size: 1rem;
font-weight: 700;
line-height: 1.5;
}
body.vikinger-theme #modal .vikinger-post-stats-modal-header .btn-close {
position: absolute;
top: 14px;
right: 14px;
z-index: 1;
width: 36px;
height: 36px;
margin: 0;
padding: 0;
border: 0;
border-radius: 10px;
background-color: #f3f2ff;
background-size: 12px;
opacity: 1;
transition: background-color .2s ease, transform .2s ease;
}
body.vikinger-theme #modal .vikinger-post-stats-modal-header .btn-close:hover,
body.vikinger-theme #modal .vikinger-post-stats-modal-header .btn-close:focus-visible {
background-color: #e9e8ff;
box-shadow: none;
outline: 0;
transform: scale(1.04);
}
body.vikinger-theme #modal .vikinger-post-stats-modal-body {
max-height: min(62vh, 560px);
padding: 0 !important;
overflow-y: auto;
background: #f8f8fc;
color: #3e3f5e;
scrollbar-color: #cfd0e7 transparent;
scrollbar-width: thin;
}
body.vikinger-theme #modal .vikinger-post-stats-modal-body::-webkit-scrollbar {
width: 8px;
}
body.vikinger-theme #modal .vikinger-post-stats-modal-body::-webkit-scrollbar-track {
background: transparent;
}
body.vikinger-theme #modal .vikinger-post-stats-modal-body::-webkit-scrollbar-thumb {
border: 2px solid #fff;
border-radius: 8px;
background: #cfd0e7;
}
body.vikinger-theme #modal .vikinger-post-stats-modal-body > ul {
margin: 0;
padding: 16px;
list-style: none;
}
body.vikinger-theme #modal .vikinger-post-stats-modal-body > ul.row {
display: block;
}
body.vikinger-theme #modal .vikinger-post-stats-modal-body > ul.row > [class*="col-"] {
width: 100%;
max-width: 100%;
padding: 0;
}
body.vikinger-theme #modal .vikinger-post-stats-modal-body > p.text-center {
margin: 0;
padding: 42px 18px;
color: #8f91ac !important;
font-size: .875rem;
line-height: 1.5;
}
body.vikinger-theme #modal .vikinger-post-stats-modal-body .ui-box,
body.vikinger-theme #modal .vikinger-post-stats-modal-body .post {
border-radius: 0;
box-shadow: none;
}
body.vikinger-theme #modal .vikinger-post-stats-modal-body.who-shares > ul > li,
body.vikinger-theme #modal .vikinger-post-stats-modal-body > ul.row > [class*="col-"] {
border-bottom: 0;
}
body.vikinger-theme #modal .vikinger-post-stats-modal-body.who-shares > ul > li:last-child,
body.vikinger-theme #modal .vikinger-post-stats-modal-body > ul.row > [class*="col-"]:last-child {
border-bottom: 0;
}
/*
* Shared posts returned by posts/who_shares.php use the same feed template,
* but they are not inside the feed's .widget-box wrapper. The template adds
* the Vikinger standalone marker only for this snippet, so the original post
* geometry (avatar, header, text, media, stats and actions) is reused without
* changing the AJAX response or any Sngine interaction.
*/
body.vikinger-theme #modal .vikinger-post-stats-modal-body.who-shares > ul > li {
margin: 0 0 16px;
padding: 0;
}
body.vikinger-theme #modal .vikinger-post-stats-modal-body.who-shares > ul > li:last-child {
margin-bottom: 0;
}
body.vikinger-theme #modal .vikinger-post-stats-modal-body.who-shares .vikinger-post-stats-item {
width: 100%;
max-width: 100%;
margin: 0;
border-radius: 12px;
background: #fff;
box-shadow: 0 0 40px 0 rgba(94, 92, 154, .06);
overflow: visible;
}
body.vikinger-theme #modal .vikinger-post-stats-modal-body.who-shares .vikinger-post-stats-item > .post-body {
border-radius: 12px;
background: #fff;
}
body.vikinger-theme #modal .vikinger-post-stats-modal-body.who-shares .vikinger-post-stats-item .post-footer {
border-radius: 0 0 12px 12px;
}
body.vikinger-theme #modal .vikinger-post-stats-modal-body.who-shares .vikinger-post-stats-item > .post-body {
overflow: visible;
}
/* A short comment belongs close to the author row in the shares modal. Keep
* this adjustment on the outer shared-post content only, so the nested
* original post keeps its own Vikinger spacing. */
body.vikinger-theme #modal .vikinger-post-stats-modal-body.who-shares .vikinger-post-stats-item > .post-body > .vikinger-post-content {
margin-top: 8px;
}
body.vikinger-theme #modal .vikinger-post-stats-modal-body.who-shares .vikinger-post-stats-item > .post-body > .vikinger-post-content > .vikinger-post-replace {
margin-bottom: 8px;
}
body.vikinger-theme #modal .vikinger-post-stats-modal-body.who-shares .vikinger-post-stats-item .post-actions {
border-bottom-right-radius: 12px;
border-bottom-left-radius: 12px;
}
/*
* Shared-post content is injected into the modal through AJAX. readmore-js
* adds its inline collapsed height immediately afterwards, so keep the text
* collapsed during that short initialization window as well. Once the
* plugin adds data-readmore this guard no longer applies and the native
* "Leggi di più" toggle can expand the text normally.
*/
body.vikinger-theme #modal .vikinger-post-stats-modal-body.who-shares:not(.vikinger-readmore-initializing) .js_readmore:not([data-readmore]) {
max-height: 110px !important;
overflow: hidden !important;
}
/* In the shares modal the collapsed shared post must show only its title;
* the description starts after the first two line breaks and belongs behind
* the read-more control. */
body.vikinger-theme #modal .vikinger-post-stats-modal-body.who-shares:not(.vikinger-readmore-initializing) .vikinger-shared-post-content .js_readmore:not([data-readmore]) {
max-height: 48px !important;
}
/* Keep the toggle below the nested shared-post copy while readmore-js
* changes the block between its collapsed and expanded heights. The modal
* body is scrollable, so the control must remain a normal block in the same
* flow as the paragraph; otherwise the replacement link can be painted over
* the last lines while readmore-js is swapping "Leggi di piu/Meno". */
body.vikinger-theme #modal .vikinger-post-stats-modal-body.who-shares .vikinger-post-stats-item .vikinger-shared-post-content .vikinger-post-content > .meta-line {
display: block;
width: 100%;
min-height: 26px;
height: auto;
clear: both;
margin-top: 18px;
margin-bottom: 8px;
padding: 0;
position: static;
overflow: visible;
z-index: 1;
}
body.vikinger-theme #modal .vikinger-post-stats-modal-body.who-shares .vikinger-post-stats-item .vikinger-shared-post-content .vikinger-post-content > .meta-line > [data-readmore-toggle] {
display: inline-flex;
position: static;
float: none;
margin: 0;
transform: none;
}
/* Keep the shared-post copy typographically stable while readmore-js swaps
* the control. Only the height is animated; the text must not briefly use
* the heavier global post-copy weight. */
body.vikinger-theme #modal .vikinger-post-stats-modal-body.who-shares .vikinger-post-stats-item .vikinger-post-text {
font-family: Rajdhani, sans-serif;
font-style: normal;
font-size: .875rem;
font-weight: 500;
line-height: 1.5;
font-synthesis: none;
}
body.vikinger-theme #modal .vikinger-post-stats-modal-body.who-shares .vikinger-post-stats-item .vikinger-post-text[data-readmore] {
transition: height 100ms ease;
}
body.vikinger-theme #modal .vikinger-post-stats-modal-body.who-shares .js_see-more {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 48px;
margin: 0;
padding: 12px 16px;
border: 0;
border-top: 1px solid #eeeef6;
border-radius: 0;
background: #fcfcfe;
color: #615dfa;
font-size: .8125rem;
font-weight: 700;
text-align: center;
cursor: pointer;
transition: background-color .2s ease;
}
body.vikinger-theme #modal .vikinger-post-stats-modal-body.who-shares .js_see-more:hover,
body.vikinger-theme #modal .vikinger-post-stats-modal-body.who-shares .js_see-more:focus-visible {
background: #f4f3ff;
outline: 0;
}
body.vikinger-theme #modal .vikinger-post-stats-modal-body.who-shares .js_see-more .loader.loader_small {
width: 18px;
height: 18px;
margin: 0;
padding: 0;
border: 3px solid #e7e7f5;
border-top-color: #615dfa;
border-radius: 50%;
animation: vikinger-post-stats-modal-spin .75s linear infinite;
}
body.vikinger-theme.night-mode #modal .vikinger-post-stats-modal-body.who-shares {
background: #202b33;
}
body.vikinger-theme.night-mode #modal .vikinger-post-stats-modal-body.who-shares .vikinger-post-stats-item,
body.vikinger-theme.night-mode #modal .vikinger-post-stats-modal-body.who-shares .vikinger-post-stats-item > .post-body {
background: #26323b;
}
body.vikinger-theme.night-mode #modal .vikinger-post-stats-modal-body.who-shares .js_see-more {
border-color: #34424d;
background: #26323b;
color: #83caff;
}
body.vikinger-theme.night-mode #modal .vikinger-post-stats-modal-body.who-shares .js_see-more:hover,
body.vikinger-theme.night-mode #modal .vikinger-post-stats-modal-body.who-shares .js_see-more:focus-visible {
background: #2d3b45;
}
@keyframes vikinger-post-stats-modal-spin {
to {
transform: rotate(360deg);
}
}
@media screen and (max-width: 575px) {
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .vikinger-post-stats-modal-header) > .modal-dialog {
width: calc(100vw - 24px);
max-width: none;
margin: 12px auto;
}
body.vikinger-theme #modal .vikinger-post-stats-modal-header {
min-height: 58px;
padding-right: 54px;
padding-left: 16px;
}
body.vikinger-theme #modal .vikinger-post-stats-modal-header .btn-close {
top: 11px;
right: 10px;
}
body.vikinger-theme #modal .vikinger-post-stats-modal-body {
max-height: calc(100vh - 108px);
}
body.vikinger-theme #modal .vikinger-post-stats-modal-body > ul {
padding: 12px;
}
body.vikinger-theme #modal .vikinger-post-stats-modal-body.who-shares > ul > li {
margin-bottom: 12px;
}
}
/*
* Shared-post link previews
*
* A shared origin is already rendered inside its own Vikinger card. The
* link-preview shadow must therefore stay inside that card instead of
* visually running into the statistics divider below it. Keep the spacing
* inside the shared card, and reduce only the following stats gap so the
* overall rhythm remains the same as the Diamond Pro reference.
*/
body.vikinger-theme .vikinger-post-shared .vikinger-shared-post-content {
padding-bottom: 8px;
}
body.vikinger-theme .vikinger-post-shared .vikinger-shared-post-content .video-status {
box-shadow: none;
}
body.vikinger-theme .vikinger-post-shared .vikinger-post-content-actions {
margin-top: 8px;
}
/* Give the nested shared post a little more horizontal room than the
* surrounding post content. Keep the adjustment scoped to shared posts so
* regular posts retain the native Vikinger spacing. */
@media screen and (min-width: 768px) {
body.vikinger-theme .vikinger-post-shared > .post-body > .vikinger-post-content {
margin-right: 20px;
margin-left: 20px;
}
body.vikinger-theme .vikinger-post-shared .vikinger-shared-post-content {
padding-right: 24px;
padding-left: 24px;
}
body.vikinger-theme .vikinger-post-shared .vikinger-shared-post-content > .vikinger-post-content {
margin-right: 0;
margin-left: 0;
}
}
/* -------------------------------------------------------------------------
* Header messages dropdown
*
* Sngine renders conversations as a list item containing a .user-status
* link, while Vikinger uses .dropdown-box-list-item with .user-status inside
* it. Keep the existing chat data attributes and reproduce Vikinger's visual
* geometry only inside the header dropdown.
* ------------------------------------------------------------------------- */
body.vikinger-theme .header .js_live-messages > .header-dropdown {
width: 384px;
padding-bottom: 60px;
border-radius: 10px;
background-color: #fff;
box-shadow: 3px 5px 40px 0 rgba(94, 92, 154, .06);
color: #3e3f5e;
}
body.vikinger-theme .header .js_live-messages > .header-dropdown .dropdown-widget-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
width: 100%;
min-height: 64px;
padding: 28px 28px 20px;
background-color: transparent;
}
body.vikinger-theme .header .js_live-messages > .header-dropdown .dropdown-box-header-title {
flex: 0 0 auto;
margin: 0;
color: #3e3f5e;
font-family: Rajdhani, sans-serif;
font-size: 1rem;
font-weight: 700;
line-height: 1rem;
}
body.vikinger-theme .header .js_live-messages > .header-dropdown .dropdown-box-header-actions {
display: flex;
align-items: center;
justify-content: flex-end;
min-width: 0;
margin: 0 0 0 16px;
}
body.vikinger-theme .header .js_live-messages > .header-dropdown .dropdown-box-header-action {
display: block;
margin: 0;
padding: 0;
color: #8f91ac;
font-family: Rajdhani, sans-serif;
font-size: .75rem;
font-weight: 700;
line-height: .75rem;
white-space: nowrap;
cursor: pointer;
transition: color .2s ease-in-out;
}
body.vikinger-theme .header .js_live-messages > .header-dropdown .dropdown-box-header-action:hover,
body.vikinger-theme .header .js_live-messages > .header-dropdown .dropdown-box-header-action:focus-visible {
color: #3e3f5e;
}
body.vikinger-theme .header .js_live-messages > .header-dropdown .dropdown-widget-body {
width: 100%;
height: 420px;
max-height: 420px;
padding: 0;
overflow: hidden;
background-color: #fff;
}
body.vikinger-theme .header .js_live-messages > .header-dropdown .dropdown-widget-body > .js_scroller {
width: 100%;
height: 100% !important;
max-height: none !important;
margin: 0;
padding: 0;
overflow-x: hidden !important;
overflow-y: auto !important;
scrollbar-color: #adafca transparent;
scrollbar-width: thin;
}
body.vikinger-theme .header .js_live-messages > .header-dropdown .dropdown-widget-body > .js_scroller::-webkit-scrollbar {
width: 6px;
}
body.vikinger-theme .header .js_live-messages > .header-dropdown .dropdown-widget-body > .js_scroller::-webkit-scrollbar-thumb {
border-radius: 6px;
background-color: #adafca;
}
body.vikinger-theme .header .js_live-messages > .header-dropdown .dropdown-widget-body ul {
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
body.vikinger-theme .header .js_live-messages > .header-dropdown .dropdown-widget-body li.chat-widget-message {
display: block;
width: 100%;
min-height: 84px;
margin: 0;
padding: 0;
list-style: none;
}
body.vikinger-theme .header .js_live-messages > .header-dropdown .dropdown-widget-body li.chat-widget-message > a.user-status {
display: block;
width: 100%;
min-height: 84px;
margin: 0;
padding: 22px 28px 20px 80px;
border-radius: 0;
background-color: #fff;
color: #3e3f5e;
position: relative;
cursor: pointer;
transition: background-color .2s ease-in-out;
}
body.vikinger-theme .header .js_live-messages > .header-dropdown .dropdown-widget-body li.chat-widget-message.unread > a.user-status {
background-color: #fcfcfd;
}
body.vikinger-theme .header .js_live-messages > .header-dropdown .dropdown-widget-body li.chat-widget-message > a.user-status:hover,
body.vikinger-theme .header .js_live-messages > .header-dropdown .dropdown-widget-body li.chat-widget-message > a.user-status:focus-visible {
background-color: #eaeaf5;
}
body.vikinger-theme .header .js_live-messages > .header-dropdown .dropdown-widget-body li.chat-widget-message > a.user-status > .user-status-avatar {
display: block;
width: 40px;
height: 44px;
margin: 0;
position: absolute;
top: 20px;
left: 28px;
}
body.vikinger-theme .header .js_live-messages > .header-dropdown .dropdown-widget-body li.chat-widget-message > a.user-status > .user-status-title {
display: block;
width: 100%;
min-width: 0;
height: 20px;
margin: 0;
padding: 0;
overflow: hidden;
color: #3e3f5e;
font-family: Rajdhani, sans-serif;
font-size: .875rem;
font-weight: 500;
line-height: 20px;
text-overflow: ellipsis;
white-space: nowrap;
}
body.vikinger-theme .header .js_live-messages > .header-dropdown .dropdown-widget-body li.chat-widget-message > a.user-status > .user-status-title .bold {
font-weight: 700;
}
body.vikinger-theme .header .js_live-messages > .header-dropdown .dropdown-widget-body li.chat-widget-message > a.user-status > .user-status-text {
display: block;
width: 100%;
min-width: 0;
height: 14px;
margin: 4px 0 0;
padding: 0;
overflow: hidden;
color: #3e3f5e;
font-family: Rajdhani, sans-serif;
font-size: .875rem;
font-weight: 500;
line-height: 14px;
text-overflow: ellipsis;
white-space: nowrap;
}
body.vikinger-theme .header .js_live-messages > .header-dropdown .dropdown-widget-body li.chat-widget-message > a.user-status > .user-status-timestamp.floaty {
display: block;
margin: 0;
padding: 0;
color: #8f91ac;
font-family: Rajdhani, sans-serif;
font-size: .75rem;
font-weight: 500;
line-height: .75rem;
position: absolute;
top: 27px;
right: 28px;
}
body.vikinger-theme .header .js_live-messages > .header-dropdown .dropdown-widget-footer {
display: block;
width: 100%;
height: 60px;
margin: 0;
border-radius: 0 0 10px 10px;
color: #fff;
font-family: Rajdhani, sans-serif;
font-size: .875rem;
font-weight: 700;
line-height: 60px;
text-align: center;
}
@media screen and (max-width: 480px) {
body.vikinger-theme .header .js_live-messages > .header-dropdown {
width: min(384px, calc(100vw - 12px));
max-width: calc(100vw - 12px);
}
body.vikinger-theme .header .js_live-messages > .header-dropdown .dropdown-widget-header {
padding-right: 20px;
padding-left: 20px;
}
body.vikinger-theme .header .js_live-messages > .header-dropdown .dropdown-widget-body li.chat-widget-message > a.user-status {
padding-right: 20px;
padding-left: 72px;
}
body.vikinger-theme .header .js_live-messages > .header-dropdown .dropdown-widget-body li.chat-widget-message > a.user-status > .user-status-avatar {
left: 20px;
}
body.vikinger-theme .header .js_live-messages > .header-dropdown .dropdown-widget-body li.chat-widget-message > a.user-status > .user-status-timestamp.floaty {
right: 20px;
}
}
/* The mobile navigation keeps the Vikinger SVG language used by the first
* menu block. Add the same icon column to every section link below it. */
body.vikinger-theme .navigation-widget .navigation-widget-section-link {
display: flex;
align-items: center;
gap: 12px;
}
body.vikinger-theme .navigation-widget .navigation-widget-section-link-icon {
flex: 0 0 20px;
width: 20px;
height: 20px;
fill: #adafca;
opacity: .75;
pointer-events: none;
transition: fill .2s ease-in-out, opacity .2s ease-in-out;
}
body.vikinger-theme .navigation-widget .navigation-widget-section-link:hover .navigation-widget-section-link-icon,
body.vikinger-theme .navigation-widget .navigation-widget-section-link:focus-visible .navigation-widget-section-link-icon {
fill: #23d2e2;
opacity: 1;
}
body.vikinger-theme .navigation-widget .navigation-widget-section-link > .highlighted {
float: none;
margin-left: auto;
}
/* Shared posts keep their read-more toggle inside the nested post-content
* block instead of the outer post-replace wrapper. Give it the same native
* Vikinger meta-line treatment as regular posts. */
body.vikinger-theme .vikinger-post-shared .vikinger-shared-post-content .vikinger-post-content > .meta-line {
display: flex;
align-items: center;
width: 100%;
min-height: 28px;
margin-top: 10px;
}
body.vikinger-theme .vikinger-post-shared .vikinger-shared-post-content .vikinger-post-content > .meta-line > .meta-line-link[data-readmore-toggle] {
display: inline-flex;
align-items: center;
min-width: 0;
max-width: 100%;
min-height: 26px;
padding: 4px 0;
color: #615dfa;
font-family: Rajdhani, sans-serif;
font-size: .8125rem;
font-weight: 700;
line-height: 1.4;
letter-spacing: .01em;
text-decoration: none;
white-space: normal;
opacity: 1;
visibility: visible;
cursor: pointer;
transition: color .2s ease-in-out, text-decoration-color .2s ease-in-out;
}
body.vikinger-theme .vikinger-post-shared .vikinger-shared-post-content .vikinger-post-content > .meta-line > .meta-line-link[data-readmore-toggle]:hover,
body.vikinger-theme .vikinger-post-shared .vikinger-shared-post-content .vikinger-post-content > .meta-line > .meta-line-link[data-readmore-toggle]:focus-visible {
color: #23d2e2;
text-decoration: underline;
text-underline-offset: 3px;
}
body.vikinger-theme .vikinger-post-shared .vikinger-shared-post-content .vikinger-post-content > .js_readmore[data-readmore] {
overflow: hidden;
}
@media screen and (max-width: 575px) {
body.vikinger-theme .vikinger-post-shared .vikinger-shared-post-content {
padding-bottom: 6px;
}
body.vikinger-theme .vikinger-post-shared .vikinger-post-content-actions {
margin-top: 8px;
}
}
@media screen and (min-width: 576px) and (max-width: 767.98px) {
body.vikinger-theme .vikinger-post-shared > .post-body > .vikinger-post-content {
margin-right: 16px;
margin-left: 16px;
}
body.vikinger-theme .vikinger-post-shared .vikinger-shared-post-content {
padding-right: 22px;
padding-left: 22px;
}
body.vikinger-theme .vikinger-post-shared .vikinger-shared-post-content > .vikinger-post-content {
margin-right: 0;
margin-left: 0;
}
}
@media screen and (max-width: 575px) {
body.vikinger-theme .vikinger-post-shared > .post-body > .vikinger-post-content {
margin-right: 14px;
margin-left: 14px;
}
body.vikinger-theme .vikinger-post-shared .vikinger-shared-post-content {
padding-right: 20px;
padding-left: 20px;
}
body.vikinger-theme .vikinger-post-shared .vikinger-shared-post-content > .vikinger-post-content {
margin-right: 0;
margin-left: 0;
}
}
/*
* Vikinger chat containment
*
* The original Vikinger sidebar is a viewport-bound flex surface. Sngine's
* chat template adds a .chat-widget-content wrapper around the conversation
* and composer, so the base overlay rules otherwise let the fixed 615px
* scroller and the composer add up to more than the viewport height. Keep
* both the contact sidebar and each conversation inside the right edge while
* preserving Vikinger's transform transitions and native chat handlers.
*/
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar {
box-sizing: border-box;
width: min(300px, 100vw);
max-width: 100vw;
height: 100vh;
height: 100dvh;
max-height: 100vh;
max-height: 100dvh;
padding-top: 80px;
padding-bottom: 0;
overflow: hidden;
right: 0 !important;
left: auto !important;
top: 0 !important;
bottom: auto !important;
transform: translateX(0);
transition: transform .4s ease-in-out;
}
/* The chat markup is emitted near the end of the document and its saved
* open/closed state is restored immediately afterwards. Do not animate that
* first state restoration: otherwise the right rail appears late or slides in
* after the page has already painted. Normal user-triggered chat motion is
* restored as soon as the initial header state is released. */
html.vikinger-header-pending body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar,
html.vikinger-chat-sidebar-pending-open body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar {
transition: none !important;
animation: none !important;
}
html.vikinger-header-pending body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar > .chat-widget-button,
html.vikinger-chat-sidebar-pending-open body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar > .chat-widget-button {
opacity: 1;
visibility: visible;
}
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar.closed {
transform: translateX(calc(100% - 80px));
}
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar > .chat-sidebar-content.chat-widget-messages {
box-sizing: border-box;
width: 100%;
max-width: 100%;
min-height: 0;
max-height: calc(100dvh - 80px);
overflow-x: hidden;
overflow-y: auto;
}
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar > .chat-widget-form,
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar > .chat-widget-button {
box-sizing: border-box;
width: 100%;
max-width: 100%;
right: 0;
left: 0;
}
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar > .chat-widget-form {
bottom: 80px;
}
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar.closed > .chat-widget-form {
bottom: 0;
}
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar > .chat-widget-button {
bottom: 0;
}
/*
* Vikinger chat sidebar surface
*
* Keep the open sidebar visually identical to the original Vikinger widget,
* including its native message rows and empty state. The extra wrapper used
* by Sngine is treated as the scroll surface without changing the chat API.
*/
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar:not(.closed) {
display: flex;
flex-direction: column;
background-color: #fff;
box-shadow: 0 0 40px 0 rgba(94, 92, 154, .06);
}
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar > .chat-sidebar-content.chat-widget-messages {
flex: 1 1 auto;
background-color: #fff;
padding: 0;
}
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar > .chat-sidebar-content.chat-widget-messages > .js_scroller {
box-sizing: border-box;
min-height: 100%;
}
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar .chat-widget-message {
box-sizing: border-box;
display: block;
width: 100%;
min-width: 0;
padding: 20px 28px 20px 24px;
border-top: 0;
border-right: 0;
border-bottom: 0;
border-left: 4px solid transparent;
background-color: #fff;
cursor: pointer;
transition: border-color .25s ease-in-out, background-color .25s ease-in-out, padding .4s ease-in-out;
}
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar .chat-widget-message:hover,
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar .chat-widget-message:focus-visible {
border-left-color: #23d2e2;
background-color: #fff;
}
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar .chat-widget-message > .js_chat-start {
display: block;
width: 100%;
min-width: 0;
color: #3e3f5e;
text-decoration: none;
}
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar .chat-widget-message > .js_chat-start:hover,
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar .chat-widget-message > .js_chat-start:focus-visible {
color: #3e3f5e;
text-decoration: none;
}
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar .vikinger-chat-contact-hidden {
display: none !important;
}
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar .js_chat-conversations.has-conversations + .vikinger-chat-contact-fallback {
display: none;
}
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar .js_chat-conversations.has-conversations ~ .js_chat-contacts-online,
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar .js_chat-conversations.has-conversations ~ .js_chat-contacts-offline {
display: none;
}
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar .vikinger-chat-conversation-item {
position: relative;
width: 100%;
margin: 0;
}
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar .js_chat-conversations {
display: block;
width: 100%;
margin: 0;
padding: 0;
}
/* The conversation template wraps Vikinger's .user-status in an anchor. Keep
* the same 44px status row and inner offsets used by newsfeed.html. */
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar .vikinger-chat-conversation-item > .js_chat-start.user-status {
display: block;
width: 100%;
min-width: 0;
min-height: 44px;
margin: 0;
padding: 2px 0 0 52px;
position: relative;
box-sizing: border-box;
color: #3e3f5e;
text-align: left;
}
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar .vikinger-chat-conversation-item > .js_chat-start.user-status > .user-status-avatar {
display: block;
width: 40px;
height: 44px;
margin: 0;
position: absolute;
top: 0;
left: 0;
}
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar .vikinger-chat-conversation-item > .js_chat-start.user-status > .user-status-title {
margin: 0;
color: #3e3f5e;
line-height: 1.4285714286em;
}
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar .vikinger-chat-conversation-item > .js_chat-start.user-status > .user-status-text {
margin: 4px 0 0;
color: #3e3f5e;
}
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar .vikinger-chat-conversation-item > .js_chat-start.user-status > .user-status-timestamp.floaty {
display: block;
margin: 0;
padding: 0;
position: absolute;
top: 7px;
right: 0;
}
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar .vikinger-chat-conversation-item.unread {
border-left-color: #f9515c;
background-color: #fff7f8;
}
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar .vikinger-chat-conversation-item.unread .user-status-title,
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar .vikinger-chat-conversation-item.unread .user-status-text {
color: #d94455;
}
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar .vikinger-chat-conversation-item > .js_chat-start.user-status {
padding-right: 54px;
}
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar .vikinger-chat-unread-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
margin: 0;
padding: 0 6px;
border: 2px solid #fff;
border-radius: 200px;
background-color: #f9515c;
color: #fff;
font-family: Rajdhani, sans-serif;
font-size: .75rem;
font-weight: 700;
line-height: 18px;
position: absolute;
top: 42px;
right: 24px;
z-index: 2;
box-shadow: 0 3px 8px rgba(249, 81, 92, .24);
pointer-events: none;
}
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar .vikinger-chat-conversation-item.unread .user-status-avatar::after {
content: '';
width: 9px;
height: 9px;
border: 2px solid #fff;
border-radius: 50%;
background-color: #f9515c;
position: absolute;
top: -1px;
right: -1px;
z-index: 3;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation.vikinger-chat-unread > .chat-widget-head.chat-widget-header {
border-bottom-color: #ffd4d9;
background-color: #fff8f9;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation.vikinger-chat-unread > .chat-widget-head .chat-user-card .user-status-title .bold {
color: #d94455;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation > .chat-widget-head .chat-head-label {
display: flex;
align-items: center;
min-height: 22px;
pointer-events: none;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation > .chat-widget-head .chat-head-label .js_chat-box-label {
display: none;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
margin: 0;
padding: 0 6px;
border: 2px solid #fff;
border-radius: 200px;
background-color: #f9515c;
color: #fff;
font-family: Rajdhani, sans-serif;
font-size: .75rem;
font-weight: 700;
line-height: 18px;
box-shadow: 0 3px 8px rgba(249, 81, 92, .24);
}
body.vikinger-theme .chat-box.vikinger-chat-conversation.vikinger-chat-unread > .chat-widget-head .chat-head-label .js_chat-box-label {
display: inline-flex;
}
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar .vikinger-chat-empty-state {
display: flex;
align-items: center;
justify-content: center;
min-height: 220px;
padding: 40px 28px;
cursor: default;
text-align: center;
}
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar .vikinger-chat-empty-state:hover,
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar .vikinger-chat-empty-state:focus-visible {
background-color: #fff;
}
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar .js_scroller:has(.chat-widget-message:not(.vikinger-chat-empty-state)) .vikinger-chat-empty-state {
display: none;
}
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar .vikinger-chat-empty-state .user-status {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar .vikinger-chat-empty-icon {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
margin-bottom: 18px;
border-radius: 50%;
background-color: #eaeaf5;
color: #615dfa;
}
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar .vikinger-chat-empty-icon .icon-messages {
width: 28px;
height: 28px;
fill: currentColor;
}
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar .vikinger-chat-empty-state .user-status-title,
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar .vikinger-chat-empty-state .user-status-text {
display: block;
margin: 0;
opacity: 1;
visibility: visible;
}
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar .vikinger-chat-empty-state .user-status-text {
margin-top: 6px;
color: #8f91ac;
}
@media screen and (max-width: 680px) {
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar .chat-widget-message {
padding-right: 24px;
padding-left: 24px;
}
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar .vikinger-chat-empty-state {
min-height: 180px;
}
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar .vikinger-chat-unread-count {
right: 18px;
}
}
body.vikinger-theme .chat-box.vikinger-chat-conversation {
box-sizing: border-box;
display: flex;
flex-direction: column;
width: min(300px, 100vw);
max-width: 100vw;
/* Vikinger opens the conversation as a separate overlay surface. Leave
* the 80px chat control strip visible underneath instead of making the
* generated Sngine box fill the whole viewport like a second sidebar. */
height: calc(100vh - 80px);
height: calc(100dvh - 80px);
min-height: 0;
max-height: calc(100vh - 80px);
max-height: calc(100dvh - 80px);
padding: 80px 0 0;
overflow: hidden;
right: 0 !important;
left: auto !important;
top: 0 !important;
bottom: auto !important;
z-index: 10000;
transition: transform .4s ease-in-out, visibility .4s ease-in-out;
}
/*
* The core creates a conversation box under
. The theme controller
* mounts it inside the Vikinger chat sidebar; these rules make that mounted
* node a panel of the same widget instead of a second fixed popup.
*/
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar > .chat-box.vikinger-chat-conversation {
position: absolute;
top: 0 !important;
right: 0 !important;
bottom: 80px !important;
left: 0 !important;
width: 100%;
height: auto !important;
max-height: none !important;
padding-top: 80px;
z-index: 10001;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation.hidden {
transform: translateX(100%);
visibility: hidden;
pointer-events: none;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation > .chat-widget-head {
flex: 0 0 auto;
width: 100%;
min-width: 0;
box-sizing: border-box;
padding-right: 70px;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation > .chat-widget-head > .chat-user-card {
display: block;
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation > .chat-widget-head > .chat-user-card > .user-status-title {
display: block;
width: 100%;
min-width: 0;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation .vikinger-chat-avatar-fallback {
display: none;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation > .chat-widget-head .vikinger-chat-avatar-shell {
width: 40px;
height: 44px;
box-sizing: border-box;
overflow: visible;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation > .chat-widget-head .vikinger-chat-avatar-shell > .user-avatar {
position: absolute;
top: 0;
left: 0;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation > .chat-widget-head .vikinger-chat-avatar-shell > .online-status {
display: block;
width: 10px;
height: 10px;
border: 2px solid #fff;
border-radius: 50%;
box-sizing: border-box;
position: absolute;
top: 34px;
right: 0;
z-index: 4;
color: #f9515c;
font-size: 6px;
line-height: 6px;
text-align: center;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation > .chat-widget-head .vikinger-chat-avatar-shell > .online-status.online {
color: #1df377;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation > .chat-widget-content {
display: flex;
flex: 1 1 auto;
flex-direction: column;
width: 100%;
min-width: 0;
min-height: 0;
height: auto;
max-height: none;
overflow: hidden;
box-sizing: border-box;
}
/* Keep the recorder panel collapsed until the existing chat toggle opens it.
* The Diamond Pro template does not rely on the x-hidden helper for this
* state, so the same rule must also cover the static messages page. */
body.vikinger-theme .chat-voice-notes {
display: none;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation .chat-conversations.chat-widget-conversation {
flex: 1 1 auto;
width: 100%;
min-width: 0;
min-height: 0;
height: auto;
max-height: none;
box-sizing: border-box;
overflow-x: hidden;
overflow-y: auto;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation .chat-typing,
body.vikinger-theme .chat-box.vikinger-chat-conversation .chat-voice-notes,
body.vikinger-theme .chat-box.vikinger-chat-conversation .chat-attachments {
flex: 0 0 auto;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation .chat-typing {
display: none;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation > .chat-widget-content > .chat-widget-form {
flex: 0 0 auto;
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
position: static;
right: auto;
bottom: auto;
left: auto;
overflow: visible;
}
@media screen and (max-width: 680px) {
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar,
body.vikinger-theme .chat-box.vikinger-chat-conversation {
width: 100vw;
max-width: 100vw;
}
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar.closed {
transform: translateX(calc(100% - 80px));
}
body.vikinger-theme .chat-box.vikinger-chat-conversation {
height: calc(100vh - 60px);
height: calc(100dvh - 60px);
max-height: calc(100vh - 60px);
max-height: calc(100dvh - 60px);
padding-top: 60px;
}
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar > .chat-box.vikinger-chat-conversation {
top: 0 !important;
right: 0 !important;
bottom: 60px !important;
left: 0 !important;
height: auto !important;
padding-top: 60px;
}
}
/*
* Vikinger chat conversation surface
*
* The Sngine chat template keeps the original handlers and adds a few
* wrappers around Vikinger's conversation markup. The legacy theme rules
* treat those wrappers as a normal block form, which stacks the toolbar,
* leaves the voice panel visible and narrows every message bubble. Keep the
* correction scoped to generated Vikinger conversation boxes so the static
* Messages page and every other form keep their native layout.
*/
body.vikinger-theme .chat-box.vikinger-chat-conversation > .chat-widget-head.chat-widget-header {
position: relative;
box-sizing: border-box;
flex: 0 0 auto;
width: 100%;
min-width: 0;
min-height: 84px;
padding: 20px 70px 20px 28px;
border-bottom: 1px solid #eaeaf5;
background-color: #fff;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation > .chat-widget-head .chat-head-label {
position: absolute;
top: 10px;
left: 28px;
z-index: 3;
pointer-events: none;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation > .chat-widget-head > .chat-user-card.vikinger-chat-user-status {
display: block;
width: 100%;
max-width: 100%;
min-width: 0;
min-height: 44px;
margin: 0;
padding: 2px 0 0 52px;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
line-height: 24px;
overflow: hidden;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation > .chat-widget-head > .chat-user-card .user-status-title {
display: block;
width: 100%;
max-width: 100%;
min-width: 0;
margin: 0;
color: #3e3f5e;
font-size: .875rem;
font-weight: 500;
line-height: 1.4285714286em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation > .chat-widget-head > .chat-user-card .user-status-tag {
display: inline-block;
height: 20px;
max-width: 100%;
padding: 0 8px;
margin: 0;
border-radius: 200px;
font-size: .75rem;
font-weight: 700;
line-height: 20px;
text-transform: uppercase;
position: relative;
top: -3px;
vertical-align: baseline;
white-space: nowrap;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation > .chat-widget-head > .chat-head-btns {
display: flex;
align-items: center;
justify-content: flex-end;
position: absolute;
top: 0;
right: 0;
z-index: 4;
width: auto;
min-width: 70px;
height: 50px;
margin: 0;
padding: 0;
}
/* The new-message template keeps the close control directly in the header,
* without the conversation's .chat-head-btns wrapper. Keep it on the same
* absolute header layer so it does not add a second row below the title. */
body.vikinger-theme .chat-box.vikinger-chat-conversation > .chat-widget-head > .vikinger-chat-close-button {
display: inline-flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
right: 0;
z-index: 4;
width: 70px;
height: 50px;
margin: 0;
padding: 0;
color: #adafca;
cursor: pointer;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation > .chat-widget-head > .vikinger-chat-close-button:hover,
body.vikinger-theme .chat-box.vikinger-chat-conversation > .chat-widget-head > .vikinger-chat-close-button:focus-visible {
color: #615dfa;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation > .chat-widget-head > .vikinger-chat-close-button .chat-widget-close-button-icon {
width: 14px;
height: 10px;
fill: currentColor;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation > .chat-widget-head .chat-head-btn {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 40px;
width: 40px;
height: 50px;
color: #adafca;
cursor: pointer;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation > .chat-widget-head .chat-head-btn:hover,
body.vikinger-theme .chat-box.vikinger-chat-conversation > .chat-widget-head .chat-head-btn:focus-visible {
color: #615dfa;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation > .chat-widget-head .chat-head-btn .main-icon {
width: 20px;
height: 20px;
fill: currentColor;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation > .chat-widget-head > .chat-head-btns > .vikinger-chat-close-button {
display: inline-flex;
align-items: center;
justify-content: center;
position: static;
flex: 0 0 70px;
width: 70px;
height: 50px;
color: #adafca;
cursor: pointer;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation > .chat-widget-head .vikinger-chat-close-button:hover,
body.vikinger-theme .chat-box.vikinger-chat-conversation > .chat-widget-head .vikinger-chat-close-button:focus-visible {
color: #615dfa;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation > .chat-widget-head .vikinger-chat-close-button-icon {
width: 14px;
height: 10px;
fill: currentColor;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation > .chat-widget-head .vikinger-chat-status-label.offline {
background-color: #3e3f5e;
color: #fff;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation > .chat-widget-head .vikinger-chat-status-label.online {
background-color: #1df377;
color: #fff;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation > .chat-widget-content.chat-widget-body {
display: flex;
flex: 1 1 auto;
flex-direction: column;
width: 100%;
min-width: 0;
min-height: 0;
height: auto;
max-height: none;
overflow: hidden;
box-sizing: border-box;
background-color: #fcfcfd;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation .chat-conversations.chat-widget-conversation {
flex: 1 1 auto;
width: 100%;
min-width: 0;
min-height: 0;
height: auto;
max-height: none;
padding: 35px 28px;
box-sizing: border-box;
overflow-x: hidden;
overflow-y: auto;
background-color: #fcfcfd;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation .chat-conversations.chat-widget-conversation > ul {
display: block;
width: 100%;
min-width: 0;
margin: 0;
padding: 0;
list-style: none;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation .chat-conversations.chat-widget-conversation > ul > li {
display: block;
width: 100%;
min-width: 0;
margin: 0;
padding: 0;
list-style: none;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation .chat-conversations.chat-widget-conversation > ul > li + li {
margin-top: 16px;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation .chat-widget-speaker {
display: flex;
width: 100%;
min-width: 0;
margin: 0;
box-sizing: border-box;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation .chat-widget-speaker-body {
display: block;
width: 100%;
min-width: 0;
max-width: 100%;
overflow-wrap: anywhere;
word-break: break-word;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation .chat-widget-speaker-message {
display: inline-block;
max-width: 100%;
margin: 0;
overflow-wrap: anywhere;
word-break: break-word;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation .chat-widget-speaker-message + .chat-widget-speaker-message {
margin-top: 8px;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation .chat-widget-speaker-timestamp {
display: block;
margin-top: 12px;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation .chat-typing,
body.vikinger-theme .chat-box.vikinger-chat-conversation .chat-voice-notes,
body.vikinger-theme .chat-box.vikinger-chat-conversation .chat-attachments {
flex: 0 0 auto;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation .chat-voice-notes {
display: none;
padding: 0 28px 12px;
background-color: #fcfcfd;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation .chat-widget-form {
display: block;
flex: 0 0 auto;
width: 100%;
max-width: 100%;
min-width: 0;
height: auto;
min-height: 0;
padding: 22px 28px;
box-sizing: border-box;
position: static;
right: auto;
bottom: auto;
left: auto;
overflow: visible;
background-color: #fcfcfd;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
box-shadow: 0 0 40px 0 rgba(94, 92, 154, .10);
}
body.vikinger-theme .chat-box.vikinger-chat-conversation .chat-form-message {
width: 100%;
min-width: 0;
margin: 0;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation .chat-form-message textarea {
display: block;
width: 100%;
min-width: 0;
min-height: 48px;
max-height: 120px;
box-sizing: border-box;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation .x-form-tools {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
width: 100%;
height: auto;
min-height: 32px;
margin: 8px 0 0;
padding: 0;
clear: both;
list-style: none;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation .x-form-tools::before,
body.vikinger-theme .chat-box.vikinger-chat-conversation .x-form-tools::after {
display: none;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation .x-form-tools > li:not(.x-hidden) {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 32px;
width: 32px;
height: 32px;
margin: 0;
padding: 0;
float: none;
color: #adafca;
border-radius: 8px;
cursor: pointer;
list-style: none;
transition: color .2s ease-in-out, background-color .2s ease-in-out, transform .2s ease-in-out;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation .x-form-tools > li:not(.x-hidden):hover,
body.vikinger-theme .chat-box.vikinger-chat-conversation .x-form-tools > li:not(.x-hidden):focus-within {
color: #615dfa;
background-color: #f0efff;
transform: translateY(-1px);
}
body.vikinger-theme .chat-box.vikinger-chat-conversation .x-form-tools > li.x-hidden {
display: none;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation .x-form-tools > li > i,
body.vikinger-theme .chat-box.vikinger-chat-conversation .x-form-tools > li .js_x-uploader,
body.vikinger-theme .chat-box.vikinger-chat-conversation .x-form-tools > li .x-uploader {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
margin: 0;
color: currentColor;
font-size: 16px;
line-height: 1;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation .x-form-tools > li .x-uploader {
width: 100%;
height: 100%;
}
/* Chat colors: ajax.chat.conversation.tpl uses a second toolbar for the
* conversation page, while the chat-box template uses a single toolbar. The
* original Diamond_pro palette styling is kept here, scoped to Vikinger's
* default theme so it cannot alter Sngine/core forms. */
body.vikinger-theme .panel-messages.vikinger-page-conversation .chat-widget-form {
position: relative;
}
body.vikinger-theme .panel-messages.vikinger-page-conversation .chat-widget-form > ul.x-form-tools:not(.form-row) {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
width: 100%;
height: auto;
min-height: 32px;
margin: 8px 0 0;
padding: 0;
overflow: visible;
clear: both;
list-style: none;
}
body.vikinger-theme .panel-messages.vikinger-page-conversation .chat-widget-form > ul.x-form-tools:not(.form-row)::before,
body.vikinger-theme .panel-messages.vikinger-page-conversation .chat-widget-form > ul.x-form-tools:not(.form-row)::after {
display: none;
}
body.vikinger-theme .panel-messages.vikinger-page-conversation .chat-widget-form > ul.x-form-tools:not(.form-row) > li:not(.x-hidden) {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 32px;
width: 32px;
height: 32px;
margin: 0;
padding: 0;
float: none;
color: #adafca;
border-radius: 8px;
cursor: pointer;
list-style: none;
transition: color .2s ease-in-out, background-color .2s ease-in-out, transform .2s ease-in-out;
}
body.vikinger-theme .panel-messages.vikinger-page-conversation .chat-widget-form > ul.x-form-tools:not(.form-row) > li:not(.x-hidden):hover,
body.vikinger-theme .panel-messages.vikinger-page-conversation .chat-widget-form > ul.x-form-tools:not(.form-row) > li:not(.x-hidden):focus-within {
color: #615dfa;
background-color: #f0efff;
transform: translateY(-1px);
}
body.vikinger-theme .panel-messages.vikinger-page-conversation .chat-widget-form > ul.x-form-tools:not(.form-row) > li.x-hidden {
display: none;
}
body.vikinger-theme .panel-messages.vikinger-page-conversation .chat-widget-form > ul.x-form-tools:not(.form-row) > li > i,
body.vikinger-theme .panel-messages.vikinger-page-conversation .chat-widget-form > ul.x-form-tools:not(.form-row) > li .js_x-uploader,
body.vikinger-theme .panel-messages.vikinger-page-conversation .chat-widget-form > ul.x-form-tools:not(.form-row) > li .x-uploader {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
margin: 0;
color: currentColor;
font-size: 16px;
line-height: 1;
}
body.vikinger-theme .panel-messages.vikinger-page-conversation .chat-widget-form > ul.x-form-tools:not(.form-row) > li .x-uploader {
width: 100%;
height: 100%;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation .chat-widget-form,
body.vikinger-theme .panel-messages.vikinger-page-conversation .chat-widget-form {
position: relative;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation .chat-colors-menu,
body.vikinger-theme .panel-messages.vikinger-page-conversation .chat-colors-menu {
display: none;
position: absolute;
right: 28px;
bottom: 72px;
z-index: 10001;
width: 196px;
max-width: calc(100vw - 32px);
margin: 0;
padding: 8px;
overflow: hidden;
box-sizing: border-box;
font-size: 13px;
line-height: 1;
background-color: #fff;
border: 1px solid #f0f0f6;
border-radius: 16px;
box-shadow: 0 10px 28px rgba(35, 36, 82, .16);
}
body.vikinger-theme .chat-box.vikinger-chat-conversation .chat-colors-menu .js_scroller,
body.vikinger-theme .panel-messages.vikinger-page-conversation .chat-colors-menu .js_scroller {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 4px;
max-height: 180px;
overflow-y: auto;
overflow-x: hidden;
padding: 0;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation .chat-colors-menu .item,
body.vikinger-theme .panel-messages.vikinger-page-conversation .chat-colors-menu .item {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
margin: 0;
padding: 0;
color: inherit;
border-radius: 8px;
cursor: pointer;
transition: background-color .2s ease-in-out, transform .2s ease-in-out;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation .chat-colors-menu .item:hover,
body.vikinger-theme .chat-box.vikinger-chat-conversation .chat-colors-menu .item:focus-visible,
body.vikinger-theme .panel-messages.vikinger-page-conversation .chat-colors-menu .item:hover,
body.vikinger-theme .panel-messages.vikinger-page-conversation .chat-colors-menu .item:focus-visible {
background-color: #f0efff;
transform: translateY(-1px);
}
body.vikinger-theme .chat-box.vikinger-chat-conversation .chat-colors-menu .item i,
body.vikinger-theme .panel-messages.vikinger-page-conversation .chat-colors-menu .item i {
color: currentColor;
font-size: 22px;
line-height: 1;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation .x-form-tools-colors,
body.vikinger-theme .panel-messages.vikinger-page-conversation .x-form-tools-colors {
user-select: none;
}
@media screen and (max-width: 680px) {
body.vikinger-theme .chat-box.vikinger-chat-conversation > .chat-widget-head.chat-widget-header {
padding-right: 70px;
padding-left: 20px;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation > .chat-widget-head .chat-head-label {
left: 20px;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation .chat-conversations.chat-widget-conversation {
padding: 28px 20px;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation .chat-widget-form {
padding: 18px 20px;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation .chat-voice-notes {
padding-right: 20px;
padding-left: 20px;
}
body.vikinger-theme .panel-messages.vikinger-page-conversation .chat-widget-form {
padding: 18px 20px;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation .chat-colors-menu,
body.vikinger-theme .panel-messages.vikinger-page-conversation .chat-colors-menu {
right: 20px;
bottom: 64px;
width: 188px;
}
}
/*
* Vikinger form modals.
*
* The Sngine modal shell is shared by the create page/group/event/product
* responses and by the tip form. Those responses are inserted directly as
* `.modal-header + form`, so keep the integration structural and scoped to
* that exact modal shape. The AJAX form classes and their submit controls
* remain untouched: this block only restores the Vikinger surface, spacing,
* controls and responsive behaviour.
*/
body.vikinger-theme:has(#modal > .modal-dialog > .modal-content > .modal-header + form) > .modal-backdrop {
z-index: 100050;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) {
z-index: 100100;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) > .modal-dialog {
display: flex;
align-items: center;
width: min(92vw, 640px);
max-width: 640px;
min-height: calc(100% - 48px);
margin: 24px auto;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) > .modal-dialog > .modal-content {
display: flex;
flex-direction: column;
width: 100%;
max-height: calc(100vh - 48px);
overflow: hidden;
border: 1px solid #eaeaf5;
border-radius: 16px;
background: #fff;
color: #3e3f5e;
box-shadow: 0 18px 52px rgba(62, 63, 94, .22);
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) > .modal-dialog > .modal-content > .modal-header {
display: flex;
flex: 0 0 auto;
align-items: center;
min-height: 68px;
padding: 14px 22px;
border-bottom: 1px solid #eaeaf5;
background: #fff;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .modal-title {
display: flex;
align-items: center;
min-width: 0;
margin: 0;
color: #3e3f5e;
font-family: Rajdhani, sans-serif;
font-size: 1.125rem;
font-weight: 700;
line-height: 1.25;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .modal-title .main-icon,
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .modal-title .main-icon svg {
display: inline-flex;
flex: 0 0 24px;
align-items: center;
justify-content: center;
width: 24px !important;
height: 24px !important;
margin: 0 10px 0 0 !important;
color: #615dfa;
fill: #615dfa;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .modal-title .main-icon svg,
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .modal-title .main-icon svg * {
fill: currentColor;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .modal-header .btn-close {
flex: 0 0 40px;
width: 40px;
height: 40px;
margin: 0 0 0 auto;
padding: 0;
border-radius: 10px;
background-color: #f5f4ff;
opacity: 1;
transition: background-color .2s ease, transform .2s ease;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .modal-header .btn-close:hover,
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .modal-header .btn-close:focus-visible {
background-color: #e4e2ff;
box-shadow: none;
outline: 0;
transform: rotate(6deg);
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) > .modal-dialog > .modal-content > form {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-height: 0;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .modal-body {
flex: 1 1 auto;
min-height: 0;
padding: 24px 26px 8px;
overflow-y: auto;
color: #3e3f5e;
scrollbar-color: #cfd0e7 transparent;
scrollbar-width: thin;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .modal-body::-webkit-scrollbar {
width: 8px;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .modal-body::-webkit-scrollbar-thumb {
border: 2px solid #fff;
border-radius: 8px;
background: #cfd0e7;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .form-group {
margin: 0 0 20px;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .form-group:last-child {
margin-bottom: 0;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .form-label {
display: block;
margin: 0 0 8px;
color: #adafca;
font-family: Rajdhani, sans-serif;
font-size: .75rem;
font-weight: 700;
line-height: 1.2;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .form-label.h6 {
margin-bottom: 5px;
color: #3e3f5e;
font-size: .875rem;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .form-control,
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .form-select,
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .input-group-text {
min-height: 54px;
border: 1px solid #dedeea;
border-radius: 12px;
background-color: #fff;
color: #3e3f5e;
font-family: Rajdhani, sans-serif;
font-size: 1rem;
font-weight: 600;
transition: border-color .2s ease-in-out, box-shadow .2s ease-in-out;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .form-control,
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .form-select {
padding: 0 18px;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) textarea.form-control {
min-height: 112px;
padding-top: 14px;
padding-bottom: 14px;
resize: vertical;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .form-control:focus,
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .form-select:focus {
border-color: #615dfa;
box-shadow: 0 0 0 3px rgba(97, 93, 250, .12);
outline: 0;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .form-control::placeholder {
color: #adafca;
font-size: .875rem;
font-weight: 500;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .input-group {
display: flex;
flex-wrap: nowrap;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .input-group .input-group-text {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
min-width: 0;
padding: 0 14px;
border-radius: 12px 0 0 12px;
background-color: #f5f4ff;
color: #adafca;
font-size: .875rem;
font-weight: 600;
line-height: 1.35;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .input-group .form-control {
min-width: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .form-text {
margin-top: 8px;
color: #adafca;
font-family: Rajdhani, sans-serif;
font-size: .75rem;
font-weight: 500;
line-height: 1.5;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .form-table-row {
display: flex;
align-items: center;
gap: 20px;
margin: 0 0 24px;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .form-table-row > div:first-child {
min-width: 0;
flex: 1 1 auto;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .form-table-row > div:last-child {
flex: 0 0 auto;
margin-inline-start: auto;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .switch {
position: relative;
display: inline-block;
width: 52px;
height: 28px;
margin: 0;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .switch .slider {
border: 1px solid #dedeea;
border-radius: 200px;
background-color: #eaeaf5;
transition: background-color .2s ease-in-out;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .switch .slider::before {
width: 22px;
height: 22px;
bottom: 2px;
left: 2px;
background-color: #fff;
box-shadow: 0 2px 5px rgba(62, 63, 94, .16);
transition: transform .2s ease-in-out;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .switch input:checked + .slider {
border-color: #23d2e2;
background-color: #23d2e2;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .switch input:checked + .slider::before {
transform: translateX(24px);
}
/* Event creation toggle: keep the native checkbox accessible and clickable. */
body.vikinger-theme #modal .modal-content > form[data-url*="type=event"] label.switch[for="create_post"] {
position: relative;
display: inline-block;
width: 52px;
height: 30px;
margin: 0;
vertical-align: middle;
cursor: pointer;
}
body.vikinger-theme #modal .modal-content > form[data-url*="type=event"] label.switch[for="create_post"] > input#create_post {
position: absolute;
z-index: 2;
inset: 0;
width: 100% !important;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
}
body.vikinger-theme #modal .modal-content > form[data-url*="type=event"] label.switch[for="create_post"] > .slider {
position: absolute;
inset: 0;
display: block;
border: 1px solid #d7d9e8;
border-radius: 999px;
background-color: #e9eaf4;
box-shadow: inset 0 1px 2px rgba(28, 31, 55, .08);
pointer-events: none;
transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
body.vikinger-theme #modal .modal-content > form[data-url*="type=event"] label.switch[for="create_post"] > .slider::before {
position: absolute;
top: 3px;
bottom: auto;
left: 3px;
width: 22px;
height: 22px;
border-radius: 50%;
background: #fff;
box-shadow: 0 2px 5px rgba(28, 31, 55, .18);
content: "";
transition: transform .2s ease;
}
body.vikinger-theme #modal .modal-content > form[data-url*="type=event"] label.switch[for="create_post"] > input#create_post:checked + .slider {
border-color: var(--vikinger-modal-primary, #615dfa);
background-color: var(--vikinger-modal-primary, #615dfa);
}
body.vikinger-theme #modal .modal-content > form[data-url*="type=event"] label.switch[for="create_post"] > input#create_post:checked + .slider::before {
transform: translateX(24px);
}
body.vikinger-theme #modal .modal-content > form[data-url*="type=event"] label.switch[for="create_post"] > input#create_post:focus-visible + .slider {
box-shadow: 0 0 0 3px rgba(97, 93, 250, .24);
}
body.vikinger-theme.night-mode #modal .modal-content > form[data-url*="type=event"] label.switch[for="create_post"] > .slider {
border-color: #515874;
background-color: #3f455d;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .input-money {
position: relative;
height: 54px;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .input-money > span {
position: absolute;
top: 0;
bottom: 0;
left: 0;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
width: 45px;
color: #615dfa;
font-family: Rajdhani, sans-serif;
font-size: 1rem;
font-weight: 700;
pointer-events: none;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .input-money > .form-control {
width: 100%;
height: 54px;
padding-left: 45px;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .input-money.right > span {
right: 0;
left: auto;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .input-money.right > .form-control {
padding-right: 45px;
padding-left: 18px;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .bs-callout {
margin: 0 0 20px;
padding: 14px 16px;
border: 1px solid #eaeaf5;
border-left: 4px solid #23d2e2;
border-radius: 12px;
background: #f8f8fc;
color: #3e3f5e;
font-family: Rajdhani, sans-serif;
font-size: .875rem;
font-weight: 600;
line-height: 1.5;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .badge-lg {
display: inline-flex;
align-items: center;
min-height: 26px;
margin-inline-start: 6px;
padding: 4px 9px;
border-radius: 8px;
background: #f5f4ff !important;
color: #615dfa !important;
font-size: .8125rem;
font-weight: 700;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .alert {
margin: 0 0 20px;
padding: 14px 16px;
border: 0;
border-radius: 12px;
font-family: Rajdhani, sans-serif;
font-size: .875rem;
line-height: 1.5;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .modal-footer {
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: flex-end;
gap: 10px;
min-height: 76px;
padding: 14px 26px 20px;
border-top: 1px solid #eaeaf5;
background: #fff;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .modal-footer .btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: auto;
flex: 0 0 auto;
min-width: 112px;
min-height: 44px;
margin: 0 !important;
padding: 0 20px;
border: 0;
border-radius: 12px;
font-family: Rajdhani, sans-serif;
font-size: .875rem;
font-weight: 700;
line-height: 1;
transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .modal-footer .btn:hover,
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .modal-footer .btn:focus-visible {
box-shadow: none;
outline: 0;
transform: translateY(-1px);
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .modal-footer .btn.btn-light {
background: #f5f4ff;
color: #3e3f5e;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .modal-footer .btn.btn-light:hover,
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .modal-footer .btn.btn-light:focus-visible {
background: #eaeaf5;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .modal-footer .btn.btn-primary {
background: #615dfa;
color: #fff;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .modal-footer .btn.btn-primary:hover,
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .modal-footer .btn.btn-primary:focus-visible {
background: #4c48cc;
}
body.vikinger-theme.night-mode #modal:has(> .modal-dialog > .modal-content > .modal-header + form) > .modal-dialog > .modal-content,
body.vikinger-theme.night-mode #modal:has(> .modal-dialog > .modal-content > .modal-header + form) > .modal-dialog > .modal-content > .modal-header,
body.vikinger-theme.night-mode #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .modal-footer {
border-color: #34424d;
background: #26323b;
}
body.vikinger-theme.night-mode #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .modal-title,
body.vikinger-theme.night-mode #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .modal-body,
body.vikinger-theme.night-mode #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .form-label.h6,
body.vikinger-theme.night-mode #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .form-control,
body.vikinger-theme.night-mode #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .form-select {
color: #d2e0eb;
}
body.vikinger-theme.night-mode #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .form-control,
body.vikinger-theme.night-mode #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .form-select,
body.vikinger-theme.night-mode #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .input-group-text {
border-color: #4b5b69;
background-color: #33414c;
}
body.vikinger-theme.night-mode #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .form-text,
body.vikinger-theme.night-mode #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .form-label {
color: #9daebb;
}
body.vikinger-theme.night-mode #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .bs-callout {
border-color: #34424d;
background: #2d3b45;
color: #d2e0eb;
}
@media screen and (max-width: 575px) {
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) > .modal-dialog {
width: calc(100vw - 24px);
max-width: none;
min-height: calc(100% - 24px);
margin: 12px auto;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) > .modal-dialog > .modal-content {
max-height: calc(100vh - 24px);
border-radius: 16px;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) > .modal-dialog > .modal-content > .modal-header {
min-height: 60px;
padding: 10px 14px 10px 18px;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .modal-body {
padding: 20px 18px 4px;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .modal-footer {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
min-height: 70px;
padding: 12px 18px 16px;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .modal-footer .btn {
width: 100%;
min-width: 0;
padding: 0 12px;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .form-table-row {
gap: 12px;
margin-bottom: 20px;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .input-group .input-group-text {
display: none !important;
}
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .input-group .form-control {
border-radius: 12px;
}
}
/* Bootstrap's d-sm-block is declared with !important. Restore the flex
* alignment of Vikinger's input-group prefix on screens where it is visible,
* without re-enabling it on mobile where the markup intentionally hides it. */
@media screen and (min-width: 576px) {
body.vikinger-theme #modal:has(> .modal-dialog > .modal-content > .modal-header + form) .input-group .input-group-text {
display: inline-flex !important;
align-items: center;
}
}
/* -------------------------------------------------------------------------- */
/* Vikinger shell for message/error modals */
/* -------------------------------------------------------------------------- */
body.vikinger-theme:has(#modal > .modal-dialog > .modal-content > .vikinger-post-modal-header) > .modal-backdrop {
z-index: 10000;
background: #3e3f5e;
opacity: .48;
}
body.vikinger-theme #modal:not(.vikinger-post-modal-open):has(> .modal-dialog > .modal-content > .vikinger-post-modal-header) {
z-index: 10001;
overflow-x: hidden;
overflow-y: auto;
padding-right: 0 !important;
}
body.vikinger-theme #modal:not(.vikinger-post-modal-open):has(> .modal-dialog > .modal-content > .vikinger-post-modal-header) > .modal-dialog {
display: flex;
align-items: center;
width: min(94vw, 720px);
max-width: 720px;
min-height: calc(100% - 32px);
margin: 16px auto;
}
body.vikinger-theme #modal:not(.vikinger-post-modal-open):has(> .modal-dialog > .modal-content > .vikinger-post-modal-header) > .modal-dialog > .modal-content {
--vikinger-modal-text: #3e3f5e;
--vikinger-modal-muted: #adafca;
--vikinger-modal-primary: #615dfa;
--vikinger-modal-border: #eaeaf5;
display: flex;
flex-direction: column;
width: 100%;
max-height: calc(100vh - 32px);
overflow: hidden;
border: 1px solid var(--vikinger-modal-border);
border-radius: 16px;
background: #fff;
color: var(--vikinger-modal-text);
box-shadow: 0 18px 52px rgba(62, 63, 94, .22);
}
body.vikinger-theme #modal:not(.vikinger-post-modal-open):has(> .modal-dialog > .modal-content > .vikinger-post-modal-header) .vikinger-post-modal-header {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
min-height: 62px;
padding: 12px 56px;
border-bottom: 1px solid var(--vikinger-modal-border);
background: #fff;
}
body.vikinger-theme #modal:not(.vikinger-post-modal-open):has(> .modal-dialog > .modal-content > .vikinger-post-modal-header) .vikinger-post-modal-header .modal-title {
max-width: 100%;
margin: 0;
overflow: hidden;
color: var(--vikinger-modal-text);
font-size: 18px;
font-weight: 700;
line-height: 1.35;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
}
body.vikinger-theme #modal:not(.vikinger-post-modal-open):has(> .modal-dialog > .modal-content > .vikinger-post-modal-header) .vikinger-post-modal-header .btn-close {
position: absolute;
inset-inline-end: 14px;
top: 13px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
margin: 0;
padding: 0;
border: 0;
border-radius: 10px;
background-color: #f0efff;
background-size: 12px;
opacity: 1;
box-shadow: none;
transition: background-color .2s ease, transform .2s ease;
}
body.vikinger-theme #modal:not(.vikinger-post-modal-open):has(> .modal-dialog > .modal-content > .vikinger-post-modal-header) .vikinger-post-modal-header .btn-close:hover,
body.vikinger-theme #modal:not(.vikinger-post-modal-open):has(> .modal-dialog > .modal-content > .vikinger-post-modal-header) .vikinger-post-modal-header .btn-close:focus-visible {
background-color: #e4e2ff;
opacity: 1;
outline: 0;
transform: rotate(6deg);
}
body.vikinger-theme #modal:not(.vikinger-post-modal-open):has(> .modal-dialog > .modal-content > .vikinger-post-modal-header) .vikinger-post-modal-body {
display: flex;
flex: 1 1 auto;
align-items: center;
min-height: 96px;
margin: 0;
padding: 28px !important;
overflow: auto;
color: var(--vikinger-modal-text);
}
body.vikinger-theme #modal:not(.vikinger-post-modal-open):has(> .modal-dialog > .modal-content > .vikinger-post-modal-header) .vikinger-post-modal-body p {
width: 100%;
margin: 0;
color: var(--vikinger-modal-text);
font-family: Rajdhani, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 1.5;
text-align: center;
}
body.vikinger-theme.night-mode #modal:has(> .modal-dialog > .modal-content > .vikinger-post-modal-header) > .modal-dialog > .modal-content,
body.vikinger-theme.night-mode #modal:has(> .modal-dialog > .modal-content > .vikinger-post-modal-header) .vikinger-post-modal-header {
border-color: #34424d;
background: #26323b;
}
body.vikinger-theme.night-mode #modal:has(> .modal-dialog > .modal-content > .vikinger-post-modal-header) .vikinger-post-modal-header .modal-title,
body.vikinger-theme.night-mode #modal:has(> .modal-dialog > .modal-content > .vikinger-post-modal-header) .vikinger-post-modal-body,
body.vikinger-theme.night-mode #modal:has(> .modal-dialog > .modal-content > .vikinger-post-modal-header) .vikinger-post-modal-body p {
color: #d2e0eb;
}
@media screen and (max-width: 575px) {
body.vikinger-theme #modal:not(.vikinger-post-modal-open):has(> .modal-dialog > .modal-content > .vikinger-post-modal-header) > .modal-dialog {
width: calc(100vw - 24px);
max-width: none;
min-height: calc(100% - 24px);
margin: 12px auto;
}
body.vikinger-theme #modal:not(.vikinger-post-modal-open):has(> .modal-dialog > .modal-content > .vikinger-post-modal-header) > .modal-dialog > .modal-content {
max-height: calc(100vh - 24px);
border-radius: 16px;
}
body.vikinger-theme #modal:not(.vikinger-post-modal-open):has(> .modal-dialog > .modal-content > .vikinger-post-modal-header) .vikinger-post-modal-header {
min-height: 58px;
padding: 10px 54px 10px 18px;
}
body.vikinger-theme #modal:not(.vikinger-post-modal-open):has(> .modal-dialog > .modal-content > .vikinger-post-modal-header) .vikinger-post-modal-body {
min-height: 84px;
padding: 22px 18px !important;
}
body.vikinger-theme #modal:not(.vikinger-post-modal-open):has(> .modal-dialog > .modal-content > .vikinger-post-modal-header) .vikinger-post-modal-body p {
font-size: 15px;
}
}
/* -------------------------------------------------------------------------- */
/* Vikinger chat contact autocomplete */
/* -------------------------------------------------------------------------- */
/* The core injects this menu immediately after the recipient input. Keep the
* native .dropdown-menu behaviour, but restore the compact Vikinger contact
* row that the default theme does not provide for the injected markup. */
body.vikinger-theme .chat-box.vikinger-chat-conversation .js_autocomplete-tags,
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar .js_autocomplete-tags {
position: relative;
z-index: 10002;
overflow: visible;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation .js_autocomplete-tags .typeahead,
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar .js_autocomplete-tags .typeahead {
position: relative;
z-index: 10003;
min-width: 0;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation .js_autocomplete-tags .dropdown-menu.auto-complete,
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar .js_autocomplete-tags .dropdown-menu.auto-complete {
display: none;
position: absolute;
top: calc(100% + 6px);
right: 0;
left: 0;
z-index: 10004;
width: 100%;
min-width: 0;
max-width: calc(100vw - 32px);
max-height: 260px;
margin: 0;
padding: 8px;
overflow-x: hidden;
overflow-y: auto;
border: 1px solid #eaeaf5;
border-radius: 14px;
background: #fff;
box-shadow: 0 12px 30px rgba(62, 63, 94, .16);
color: #3e3f5e;
font-family: Rajdhani, sans-serif;
font-size: 14px;
line-height: 1.35;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation .js_autocomplete-tags .dropdown-menu.auto-complete > ul,
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar .js_autocomplete-tags .dropdown-menu.auto-complete > ul {
display: block;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation .js_autocomplete-tags .dropdown-menu.auto-complete > ul > li,
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar .js_autocomplete-tags .dropdown-menu.auto-complete > ul > li {
display: block;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation .js_autocomplete-tags .dropdown-menu.auto-complete .data-container,
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar .js_autocomplete-tags .dropdown-menu.auto-complete .data-container {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
min-width: 0;
min-height: 48px;
margin: 0;
padding: 8px 10px;
border-radius: 10px;
background: transparent;
color: #3e3f5e;
cursor: pointer;
text-decoration: none;
transition: background-color .2s ease-in-out, color .2s ease-in-out;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation .js_autocomplete-tags .dropdown-menu.auto-complete .data-container:hover,
body.vikinger-theme .chat-box.vikinger-chat-conversation .js_autocomplete-tags .dropdown-menu.auto-complete .data-container:focus-visible,
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar .js_autocomplete-tags .dropdown-menu.auto-complete .data-container:hover,
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar .js_autocomplete-tags .dropdown-menu.auto-complete .data-container:focus-visible {
background: #f0efff;
color: #615dfa;
outline: 0;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation .js_autocomplete-tags .dropdown-menu.auto-complete .data-avatar,
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar .js_autocomplete-tags .dropdown-menu.auto-complete .data-avatar {
display: flex;
flex: 0 0 32px;
align-items: center;
justify-content: center;
width: 32px;
height: 34px;
margin: 0;
padding: 0;
overflow: hidden;
background: #eaeaf5;
float: none;
clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
body.vikinger-theme .chat-box.vikinger-chat-conversation .js_autocomplete-tags .dropdown-menu.auto-complete .data-avatar > img,
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar .js_autocomplete-tags .dropdown-menu.auto-complete .data-avatar > img {
display: block;
width: 32px;
height: 34px;
max-width: none;
margin: 0;
object-fit: cover;
border: 0;
border-radius: 0;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation .js_autocomplete-tags .dropdown-menu.auto-complete .data-content,
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar .js_autocomplete-tags .dropdown-menu.auto-complete .data-content {
display: block;
flex: 1 1 auto;
min-width: 0;
width: auto;
padding: 0;
color: #3e3f5e;
font-family: Rajdhani, sans-serif;
font-size: 14px;
font-weight: 600;
line-height: 1.35;
overflow: hidden;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation .js_autocomplete-tags .dropdown-menu.auto-complete .data-content > div,
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar .js_autocomplete-tags .dropdown-menu.auto-complete .data-content > div {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation .js_autocomplete-tags .dropdown-menu.auto-complete .data-content strong,
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar .js_autocomplete-tags .dropdown-menu.auto-complete .data-content strong {
color: inherit;
font-family: inherit;
font-size: inherit;
font-weight: 700;
}
body.vikinger-theme.night-mode .chat-box.vikinger-chat-conversation .js_autocomplete-tags .dropdown-menu.auto-complete,
body.vikinger-theme.night-mode #chat-widget-messages.vikinger-chat-sidebar .js_autocomplete-tags .dropdown-menu.auto-complete {
border-color: #34424d;
background: #26323b;
color: #d2e0eb;
box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
}
body.vikinger-theme.night-mode .chat-box.vikinger-chat-conversation .js_autocomplete-tags .dropdown-menu.auto-complete .data-container,
body.vikinger-theme.night-mode #chat-widget-messages.vikinger-chat-sidebar .js_autocomplete-tags .dropdown-menu.auto-complete .data-container,
body.vikinger-theme.night-mode .chat-box.vikinger-chat-conversation .js_autocomplete-tags .dropdown-menu.auto-complete .data-content {
color: #d2e0eb;
}
body.vikinger-theme.night-mode .chat-box.vikinger-chat-conversation .js_autocomplete-tags .dropdown-menu.auto-complete .data-container:hover,
body.vikinger-theme.night-mode .chat-box.vikinger-chat-conversation .js_autocomplete-tags .dropdown-menu.auto-complete .data-container:focus-visible,
body.vikinger-theme.night-mode #chat-widget-messages.vikinger-chat-sidebar .js_autocomplete-tags .dropdown-menu.auto-complete .data-container:hover,
body.vikinger-theme.night-mode #chat-widget-messages.vikinger-chat-sidebar .js_autocomplete-tags .dropdown-menu.auto-complete .data-container:focus-visible {
background: #34424d;
color: #fff;
}
@media screen and (max-width: 680px) {
body.vikinger-theme .chat-box.vikinger-chat-conversation .js_autocomplete-tags .dropdown-menu.auto-complete,
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar .js_autocomplete-tags .dropdown-menu.auto-complete {
max-width: calc(100vw - 24px);
max-height: min(260px, 42vh);
border-radius: 12px;
}
body.vikinger-theme .chat-box.vikinger-chat-conversation .js_autocomplete-tags .dropdown-menu.auto-complete .data-container,
body.vikinger-theme #chat-widget-messages.vikinger-chat-sidebar .js_autocomplete-tags .dropdown-menu.auto-complete .data-container {
min-height: 46px;
padding: 7px 8px;
}
}
/* Show more of the user's dynamic profile cover in the expanded navigation. */
body.vikinger-theme .navigation-widget .navigation-widget-cover {
width: 100%;
height: 136px;
min-height: 136px;
overflow: hidden;
}
@media screen and (max-width: 680px) {
body.vikinger-theme .navigation-widget .navigation-widget-cover {
height: 144px;
min-height: 144px;
}
}
/*
* Full-width messages page.
*
* The Account Hub banner and account-settings column are deliberately not
* rendered by templates/messages.tpl. Keep the conversation UI inside the
* normal Vikinger content grid, but let it use the complete grid width. The
* selectors are limited to this page so the global navigation, fixed chat
* sidebar and every other account page keep their existing layout.
*/
body.vikinger-theme main.content-grid:has(> .vikinger-messages-page) {
width: 100%;
max-width: 1184px;
min-width: 0;
padding: 112px 0 100px 80px;
}
body.vikinger-theme .vikinger-messages-page,
body.vikinger-theme .vikinger-messages-layout,
body.vikinger-theme .vikinger-messages-page .account-hub-content {
width: 100%;
max-width: none;
min-width: 0;
}
body.vikinger-theme .vikinger-messages-layout {
display: block;
margin: 0;
}
body.vikinger-theme .vikinger-messages-page .account-hub-content .section-header {
display: flex;
align-items: flex-end;
gap: 24px;
width: 100%;
min-width: 0;
margin: 0 0 28px;
padding: 0 4px;
}
body.vikinger-theme .vikinger-messages-page .section-header-info {
min-width: 0;
}
body.vikinger-theme .vikinger-messages-page .section-header-actions {
flex: 0 0 auto;
min-width: 0;
margin-left: auto;
}
body.vikinger-theme .vikinger-messages-page .section-header-action {
display: inline-flex;
align-items: center;
min-height: 40px;
padding: 0 16px;
border-radius: 10px;
color: #615dfa;
background: #f0efff;
line-height: 1;
transition: color .2s ease-in-out, background-color .2s ease-in-out, transform .2s ease-in-out;
}
body.vikinger-theme .vikinger-messages-page .section-header-action:hover,
body.vikinger-theme .vikinger-messages-page .section-header-action:focus-visible {
color: #fff;
background: #615dfa;
transform: translateY(-1px);
}
body.vikinger-theme .vikinger-messages-page .chat-widget-wrap {
display: flex;
align-items: stretch;
width: 100%;
min-width: 0;
max-width: none;
min-height: 620px;
overflow: hidden;
border-radius: 16px;
background: #fff;
box-shadow: 0 0 40px 0 rgba(94, 92, 154, .08);
}
body.vikinger-theme .vikinger-messages-page .chat-widget-wrap > .chat-widget {
min-width: 0;
min-height: 620px;
box-shadow: none;
}
body.vikinger-theme .vikinger-messages-page .chat-widget-wrap > .chat-widget.static {
flex: 0 0 clamp(300px, 33%, 410px);
width: auto;
border-right: 1px solid #eaeaf5;
border-top-left-radius: 16px;
border-bottom-left-radius: 16px;
}
body.vikinger-theme .vikinger-messages-page .chat-widget-wrap > .chat-widget.panel-messages {
flex: 1 1 0;
width: auto;
max-width: none;
border-top-right-radius: 16px;
border-bottom-right-radius: 16px;
}
body.vikinger-theme .vikinger-messages-page .chat-widget-wrap .chat-widget-messages,
body.vikinger-theme .vikinger-messages-page .chat-widget-wrap .chat-widget-conversation,
body.vikinger-theme .vikinger-messages-page .chat-widget-wrap .chat-widget-content {
min-width: 0;
max-width: 100%;
}
body.vikinger-theme .vikinger-messages-page .chat-widget-wrap .chat-widget-messages {
height: 588px;
}
body.vikinger-theme .vikinger-messages-page .chat-widget-wrap .chat-widget-form {
min-width: 0;
max-width: 100%;
}
@media screen and (max-width: 1365px) {
body.vikinger-theme main.content-grid:has(> .vikinger-messages-page) {
max-width: 100%;
padding: 112px 0 160px 80px;
}
}
@media screen and (max-width: 960px) {
body.vikinger-theme .vikinger-messages-page .chat-widget-wrap {
display: block;
min-height: 0;
overflow: visible;
box-shadow: none;
}
body.vikinger-theme .vikinger-messages-page .chat-widget-wrap > .chat-widget {
width: 100%;
min-height: 0;
border-radius: 16px;
box-shadow: 0 0 40px 0 rgba(94, 92, 154, .08);
}
body.vikinger-theme .vikinger-messages-page .chat-widget-wrap > .chat-widget.static,
body.vikinger-theme .vikinger-messages-page .chat-widget-wrap > .chat-widget.panel-messages {
width: 100%;
flex: none;
}
body.vikinger-theme .vikinger-messages-page .chat-widget-wrap > .chat-widget.static {
margin-bottom: 16px;
border-right: 0;
}
}
@media screen and (max-width: 680px) {
body.vikinger-theme main.content-grid:has(> .vikinger-messages-page) {
width: 100%;
padding: 92px 12px 112px;
}
body.vikinger-theme .vikinger-messages-page .account-hub-content .section-header {
align-items: flex-start;
flex-wrap: wrap;
gap: 14px;
margin-bottom: 20px;
padding: 0;
}
body.vikinger-theme .vikinger-messages-page .section-header-actions {
width: 100%;
margin-left: 0;
}
body.vikinger-theme .vikinger-messages-page .section-header-action {
width: 100%;
justify-content: center;
}
body.vikinger-theme .vikinger-messages-page .chat-widget-wrap > .chat-widget {
border-radius: 12px;
}
body.vikinger-theme .vikinger-messages-page .chat-widget-wrap > .chat-widget.static {
margin-bottom: 12px;
border-bottom: 0;
}
body.vikinger-theme .vikinger-messages-page .chat-widget-wrap .chat-widget-messages {
height: min(420px, 52vh);
min-height: 280px;
}
}
/* Engagement icons are rendered in both the standalone post page and the
* regular newsfeed post. The original compact rules were scoped only to
* .vikinger-post-standalone, leaving the feed markup without its icon
* container, counter badge and hidden accessible label. */
body.vikinger-theme .vikinger-post-content-actions .content-action {
display: flex;
align-items: center;
min-width: 0;
margin: 0;
}
body.vikinger-theme .vikinger-post-content-actions .vikinger-post-reactions-summary {
flex: 1 1 auto;
}
body.vikinger-theme .vikinger-post-content-actions .vikinger-post-engagement-summary {
justify-content: flex-end;
flex: 0 0 auto;
flex-wrap: wrap;
gap: 8px 22px;
}
body.vikinger-theme .vikinger-post-content-actions .vikinger-post-engagement-summary .meta-line + .meta-line {
margin-left: 0;
}
body.vikinger-theme .vikinger-post-content-actions .vikinger-post-engagement-summary .meta-line {
flex: 0 0 auto;
margin: 0 !important;
}
body.vikinger-theme .vikinger-post-content-actions .vikinger-post-engagement-summary .meta-line-link,
body.vikinger-theme .vikinger-post-content-actions .vikinger-post-engagement-summary .meta-line-text {
display: inline-flex;
align-items: center;
min-height: 36px;
margin: 0 !important;
padding: 0 !important;
color: #8f91ac;
font-size: 0;
font-weight: 700;
line-height: 1;
white-space: nowrap;
text-decoration: none;
}
body.vikinger-theme .vikinger-post-content-actions .vikinger-post-engagement-summary .meta-line-link:hover,
body.vikinger-theme .vikinger-post-content-actions .vikinger-post-engagement-summary .meta-line-link:focus-visible,
body.vikinger-theme .vikinger-post-content-actions .vikinger-post-engagement-summary .meta-line-text:hover,
body.vikinger-theme .vikinger-post-content-actions .vikinger-post-engagement-summary .meta-line-text:focus-visible {
color: inherit;
text-decoration: none;
}
body.vikinger-theme .vikinger-post-content-actions .vikinger-engagement-icon {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 10px;
color: #fff;
box-shadow: 0 5px 12px rgba(62, 63, 94, .12);
transition: transform .2s ease, box-shadow .2s ease;
}
body.vikinger-theme .vikinger-post-content-actions .vikinger-engagement-icon > i {
color: inherit;
font-size: 14px;
line-height: 1;
}
body.vikinger-theme .vikinger-post-content-actions .vikinger-engagement-count {
position: absolute;
right: -6px;
bottom: -5px;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 4px;
border: 2px solid #fff;
border-radius: 999px;
background: #fff;
color: #3e3f5e;
box-shadow: 0 2px 7px rgba(62, 63, 94, .18);
box-sizing: border-box;
font-size: 10px;
font-weight: 800;
line-height: 14px;
letter-spacing: -.02em;
}
body.vikinger-theme .vikinger-post-content-actions .vikinger-engagement-label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
body.vikinger-theme .vikinger-post-content-actions .vikinger-engagement-item p:hover .vikinger-engagement-icon,
body.vikinger-theme .vikinger-post-content-actions .vikinger-engagement-item p:focus-visible .vikinger-engagement-icon {
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(62, 63, 94, .18);
}
body.vikinger-theme .vikinger-post-content-actions .vikinger-engagement-comments .vikinger-engagement-icon {
background: linear-gradient(135deg, #536dfe, #7c4dff);
}
body.vikinger-theme .vikinger-post-content-actions .vikinger-engagement-comments .vikinger-engagement-count {
color: #536dfe;
}
body.vikinger-theme .vikinger-post-content-actions .vikinger-engagement-shares .vikinger-engagement-icon {
background: linear-gradient(135deg, #ec4899, #f43f5e);
}
body.vikinger-theme .vikinger-post-content-actions .vikinger-engagement-shares .vikinger-engagement-count {
color: #ec4899;
}
body.vikinger-theme .vikinger-post-content-actions .vikinger-engagement-views .vikinger-engagement-icon {
background: linear-gradient(135deg, #06b6d4, #2563eb);
}
body.vikinger-theme .vikinger-post-content-actions .vikinger-engagement-views .vikinger-engagement-count {
color: #0891b2;
}
body.vikinger-theme .vikinger-post-content-actions .vikinger-engagement-video-views .vikinger-engagement-icon {
background: linear-gradient(135deg, #f97316, #ef4444);
}
body.vikinger-theme .vikinger-post-content-actions .vikinger-engagement-video-views .vikinger-engagement-count {
color: #ea580c;
}
body.vikinger-theme .vikinger-post-content-actions .vikinger-engagement-audio-views .vikinger-engagement-icon {
background: linear-gradient(135deg, #10b981, #059669);
}
body.vikinger-theme .vikinger-post-content-actions .vikinger-engagement-audio-views .vikinger-engagement-count {
color: #059669;
}
body.vikinger-theme .vikinger-post-content-actions .vikinger-engagement-donations .vikinger-engagement-icon {
background: linear-gradient(135deg, #f59e0b, #f97316);
}
body.vikinger-theme .vikinger-post-content-actions .vikinger-engagement-donations .vikinger-engagement-count {
color: #d97706;
}
body.vikinger-theme .vikinger-post-content-actions .vikinger-engagement-reviews .vikinger-engagement-icon {
background: linear-gradient(135deg, #eab308, #f59e0b);
}
body.vikinger-theme .vikinger-post-content-actions .vikinger-engagement-reviews .vikinger-engagement-count {
color: #ca8a04;
}
@media screen and (max-width: 767.98px) {
body.vikinger-theme .vikinger-post-content-actions .vikinger-post-reactions-summary,
body.vikinger-theme .vikinger-post-content-actions .vikinger-post-engagement-summary {
width: 100%;
flex: 1 1 100%;
}
body.vikinger-theme .vikinger-post-content-actions .vikinger-post-engagement-summary {
justify-content: center;
gap: 8px 18px;
}
}
/*
* Daytime greeting card.
*
* The legacy daytime_message template is inserted by core.js after the
* publisher placeholder. Bootstrap's generic .card rules leave it with a
* flex layout and no spacing in the default theme, while Diamond Pro keeps
* the component hidden until core fades it in. Keep the same contract here,
* but use the Vikinger card surface and spacing.
*/
body.vikinger-theme .daytime_message {
position: relative;
display: none;
box-sizing: border-box;
width: 100%;
max-width: 100%;
min-height: 70px;
margin: 0 0 20px;
padding: 15px 52px 15px 15px;
border: 1px solid rgba(62, 63, 94, .08);
border-left: 2px solid #fba540 !important;
border-radius: 12px;
background: #fff;
color: #3e3f5e;
box-shadow: 0 6px 18px rgba(62, 63, 94, .08);
font-size: 14px;
line-height: 1.4;
}
body.vikinger-theme .daytime_message > .btn-close {
position: absolute;
top: 12px;
right: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
margin: 0 !important;
padding: 0;
border-radius: 50%;
opacity: .65;
transition: background-color .2s ease, opacity .2s ease, transform .2s ease;
}
body.vikinger-theme .daytime_message > .btn-close:hover,
body.vikinger-theme .daytime_message > .btn-close:focus-visible {
background-color: #f0efff;
opacity: 1;
outline: 0;
transform: rotate(6deg);
}
body.vikinger-theme .daytime_message > .svg-container {
display: inline-flex !important;
align-items: center;
justify-content: center;
flex: 0 0 40px;
width: 40px !important;
height: 40px !important;
margin-right: 10px;
padding-right: 0 !important;
vertical-align: middle;
}
body.vikinger-theme .daytime_message > .svg-container > svg {
display: block;
width: 40px;
height: 40px;
}
body.vikinger-theme .daytime_message > .d-table-cell:last-child {
display: inline-flex !important;
flex-direction: column;
justify-content: center;
align-items: flex-start;
min-width: 0;
min-height: 40px;
vertical-align: middle;
}
body.vikinger-theme .daytime_message strong {
color: #3e3f5e;
font-size: 15px;
font-weight: 700;
}
body.vikinger-theme .daytime_message span {
color: #8f91ac;
font-size: 13px;
font-weight: 500;
}
html[dir="RTL"] body.vikinger-theme .daytime_message {
padding-right: 15px;
padding-left: 52px;
border-right: 2px solid #fba540 !important;
border-left: 1px solid rgba(62, 63, 94, .08) !important;
}
html[dir="RTL"] body.vikinger-theme .daytime_message > .btn-close {
right: auto;
left: 12px;
}
html[dir="RTL"] body.vikinger-theme .daytime_message > .svg-container {
margin-right: 0;
margin-left: 10px;
}
@media screen and (max-width: 575.98px) {
body.vikinger-theme .daytime_message {
min-height: 64px;
margin-bottom: 16px;
padding: 13px 46px 13px 12px;
font-size: 13px;
}
body.vikinger-theme .daytime_message > .svg-container {
flex-basis: 36px;
width: 36px !important;
height: 36px !important;
margin-right: 8px;
}
body.vikinger-theme .daytime_message > .svg-container > svg {
width: 36px;
height: 36px;
}
body.vikinger-theme .daytime_message strong {
font-size: 14px;
}
body.vikinger-theme .daytime_message span {
font-size: 12px;
}
html[dir="RTL"] body.vikinger-theme .daytime_message {
padding-right: 12px;
padding-left: 46px;
}
html[dir="RTL"] body.vikinger-theme .daytime_message > .svg-container {
margin-right: 0;
margin-left: 8px;
}
}
/*
* Public information pages.
*
* Vikinger uses a single content-grid language for lightweight pages. The
* legacy templates still carry Bootstrap columns and cards, so keep their
* existing functionality and give them the same spacing, surfaces and
* responsive behavior through a page-scoped compatibility layer.
*/
body.vikinger-theme main.content-grid:has(.vikinger-utility-page) {
margin-right: auto;
margin-left: auto;
}
body.vikinger-theme .vikinger-utility-page {
width: 100%;
max-width: 1184px;
margin: 32px auto 0;
padding: 0;
}
body.vikinger-theme .vikinger-utility-page > .row {
margin-right: -8px;
margin-left: -8px;
}
body.vikinger-theme .vikinger-utility-page > .row > [class*="col-"] {
padding-right: 8px;
padding-left: 8px;
}
body.vikinger-theme .vikinger-info-banner {
overflow: hidden;
}
body.vikinger-theme .vikinger-utility-card {
overflow: hidden;
border: 0 !important;
border-radius: 12px !important;
background: #fff;
box-shadow: 0 0 40px 0 rgba(94, 92, 154, .06) !important;
}
body.vikinger-theme .vikinger-utility-card-body {
padding: 32px;
}
body.vikinger-theme .vikinger-contact-page .vikinger-utility-main {
width: 100%;
max-width: 784px;
margin-right: auto;
margin-left: auto;
flex: 0 0 100%;
}
body.vikinger-theme .vikinger-contact-card {
padding: 0 !important;
}
body.vikinger-theme .vikinger-contact-card .form-group {
margin-bottom: 24px;
}
body.vikinger-theme .vikinger-contact-card .form-group:last-of-type {
margin-bottom: 0;
}
body.vikinger-theme .vikinger-contact-card .form-label {
margin-bottom: 10px;
color: #3e3f5e;
font-size: .875rem;
font-weight: 700;
}
body.vikinger-theme .vikinger-contact-card .form-control {
min-height: 54px;
border: 1px solid #dedeea;
border-radius: 12px;
background: #fff;
color: #3e3f5e;
font-size: .9375rem;
font-weight: 600;
box-shadow: none;
transition: border-color .2s ease, box-shadow .2s ease;
}
body.vikinger-theme .vikinger-contact-card textarea.form-control {
min-height: 144px;
padding-top: 14px;
resize: vertical;
}
body.vikinger-theme .vikinger-contact-card .form-control:focus {
border-color: #615dfa;
box-shadow: 0 0 0 3px rgba(97, 93, 250, .1);
}
body.vikinger-theme .vikinger-contact-card .d-grid {
margin-top: 28px;
}
body.vikinger-theme .vikinger-contact-card .btn-primary,
body.vikinger-theme .vikinger-support-page .btn-primary {
min-height: 52px;
border: 0;
border-radius: 12px;
background: #615dfa;
color: #fff;
font-size: .9375rem;
font-weight: 700;
box-shadow: 4px 7px 12px rgba(97, 93, 250, .2);
transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
body.vikinger-theme .vikinger-contact-card .btn-primary:hover,
body.vikinger-theme .vikinger-contact-card .btn-primary:focus-visible,
body.vikinger-theme .vikinger-support-page .btn-primary:hover,
body.vikinger-theme .vikinger-support-page .btn-primary:focus-visible {
background: #4c48cc;
color: #fff;
box-shadow: 5px 9px 16px rgba(97, 93, 250, .25);
outline: 0;
transform: translateY(-1px);
}
body.vikinger-theme .vikinger-contact-card .alert {
margin-top: 16px;
border: 0;
border-radius: 10px;
font-size: .875rem;
font-weight: 600;
}
body.vikinger-theme .vikinger-static-page .vikinger-utility-main {
width: 100%;
max-width: 1184px;
margin-right: auto;
margin-left: auto;
flex: 0 0 100%;
}
body.vikinger-theme .vikinger-static-content {
padding: 32px !important;
color: #3e3f5e;
font-size: 1rem;
font-weight: 500;
line-height: 1.75;
}
body.vikinger-theme .vikinger-static-content h1,
body.vikinger-theme .vikinger-static-content h2,
body.vikinger-theme .vikinger-static-content h3,
body.vikinger-theme .vikinger-static-content h4,
body.vikinger-theme .vikinger-static-content h5,
body.vikinger-theme .vikinger-static-content h6 {
margin: 28px 0 12px;
color: #3e3f5e;
font-weight: 700;
line-height: 1.25;
}
body.vikinger-theme .vikinger-static-content h1:first-child,
body.vikinger-theme .vikinger-static-content h2:first-child,
body.vikinger-theme .vikinger-static-content h3:first-child {
margin-top: 0;
}
body.vikinger-theme .vikinger-static-content p {
margin: 0 0 16px;
line-height: 1.75 !important;
}
/* Static-page content can contain inline font-size values generated by the
* WYSIWYG editor. Keep the line box tall enough for that text so metadata,
* paragraphs and list items never collide with the following line. */
body.vikinger-theme .vikinger-static-content p > span,
body.vikinger-theme .vikinger-static-content li > p > span,
body.vikinger-theme .vikinger-static-content li > span {
line-height: inherit !important;
}
body.vikinger-theme .vikinger-static-content a {
color: #615dfa;
font-weight: 700;
}
body.vikinger-theme .vikinger-static-content a:hover,
body.vikinger-theme .vikinger-static-content a:focus-visible {
color: #4c48cc;
text-decoration: underline;
}
body.vikinger-theme .vikinger-static-content ul,
body.vikinger-theme .vikinger-static-content ol {
margin: 0 0 20px;
padding-left: 24px;
}
body.vikinger-theme .vikinger-static-content ul {
list-style: disc;
}
body.vikinger-theme .vikinger-static-content ol {
list-style: decimal;
}
body.vikinger-theme .vikinger-static-content li {
margin-bottom: 8px;
}
body.vikinger-theme .vikinger-static-content img,
body.vikinger-theme .vikinger-static-content iframe,
body.vikinger-theme .vikinger-static-content video {
max-width: 100%;
}
@media screen and (min-width: 768px) {
body.vikinger-theme .vikinger-static-page > .row {
margin-right: 0;
margin-left: 0;
}
body.vikinger-theme .vikinger-static-page > .row > .vikinger-utility-main {
padding-right: 0;
padding-left: 0;
}
}
body.vikinger-theme .vikinger-directory-card-shell {
width: 100%;
}
body.vikinger-theme .vikinger-directory-content {
padding: 28px;
}
body.vikinger-theme .vikinger-directory-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin: 0;
}
body.vikinger-theme .vikinger-directory-grid > [class*="col-"] {
width: auto;
max-width: none;
margin: 0;
padding: 0;
flex: none;
}
body.vikinger-theme .vikinger-directory-grid .directory-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
min-height: 232px;
padding: 24px 20px;
border: 1px solid #eaeaf5;
border-radius: 12px;
background: #fff;
color: #3e3f5e;
text-align: center;
transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
body.vikinger-theme .vikinger-directory-grid .directory-card:hover,
body.vikinger-theme .vikinger-directory-grid .directory-card:focus-visible {
border-color: rgba(97, 93, 250, .25);
box-shadow: 0 8px 22px rgba(94, 92, 154, .12);
color: #3e3f5e;
outline: 0;
transform: translateY(-2px);
}
body.vikinger-theme .vikinger-directory-grid .directory-card .main-icon,
body.vikinger-theme .vikinger-directory-grid .directory-card .main-icon svg {
width: 76px !important;
height: 76px !important;
color: #615dfa;
fill: #615dfa;
}
body.vikinger-theme .vikinger-directory-grid .directory-card .main-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 76px;
margin: 0;
}
body.vikinger-theme .vikinger-directory-grid .directory-card .title {
margin-top: 16px;
color: #3e3f5e;
font-size: 1.125rem;
font-weight: 700;
}
body.vikinger-theme .vikinger-directory-grid .directory-card p {
max-width: 250px;
margin: 8px auto 0;
color: #8f91ac;
font-size: .875rem;
font-weight: 500;
line-height: 1.5;
text-align: center;
}
body.vikinger-theme .vikinger-support-tabs {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 80px;
margin-bottom: 24px;
padding: 16px 28px;
border-radius: 12px !important;
background: #fff;
box-shadow: 0 0 40px 0 rgba(94, 92, 154, .06) !important;
}
body.vikinger-theme .vikinger-support-tabs ul {
display: flex;
align-items: center;
min-height: 48px;
margin: 0;
padding: 0;
}
body.vikinger-theme .vikinger-support-tabs li {
margin: 0;
}
body.vikinger-theme .vikinger-support-tabs li a {
display: inline-flex;
align-items: center;
min-height: 48px;
padding: 0 18px;
border-radius: 10px;
color: #3e3f5e;
font-size: .9375rem;
font-weight: 700;
}
body.vikinger-theme .vikinger-support-tabs li.active a,
body.vikinger-theme .vikinger-support-tabs li a:hover,
body.vikinger-theme .vikinger-support-tabs li a:focus-visible {
background: #f0efff;
color: #615dfa;
outline: 0;
}
body.vikinger-theme .vikinger-support-tabs > .float-end {
float: none !important;
margin: 0 !important;
}
body.vikinger-theme .vikinger-support-page > .row > [class*="col-"] {
min-width: 0;
}
body.vikinger-theme .vikinger-support-page .card {
overflow: hidden;
border: 0;
border-radius: 12px;
box-shadow: 0 0 40px 0 rgba(94, 92, 154, .06);
}
body.vikinger-theme .vikinger-support-page .card-header {
min-height: 64px;
padding: 18px 24px;
border-bottom: 1px solid #eaeaf5;
background: #fff;
color: #3e3f5e;
font-size: 1rem;
font-weight: 700;
}
body.vikinger-theme .vikinger-support-page .card-body {
padding: 24px;
}
body.vikinger-theme .vikinger-support-page .card-footer {
padding: 16px 24px;
border-top: 1px solid #eaeaf5;
background: #fff;
}
body.vikinger-theme .vikinger-support-page .side-nav li a {
display: flex;
align-items: center;
min-height: 46px;
border-radius: 10px;
color: #8f91ac;
font-size: .875rem;
font-weight: 700;
}
body.vikinger-theme .vikinger-support-page .side-nav li.active a,
body.vikinger-theme .vikinger-support-page .side-nav li a:hover,
body.vikinger-theme .vikinger-support-page .side-nav li a:focus-visible {
background: #f0efff;
color: #615dfa;
outline: 0;
}
body.vikinger-theme .vikinger-support-page .table {
margin-bottom: 0;
color: #3e3f5e;
font-size: .875rem;
vertical-align: middle;
}
body.vikinger-theme .vikinger-support-page .table thead th {
border-bottom: 1px solid #eaeaf5;
color: #8f91ac;
font-size: .75rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
white-space: nowrap;
}
body.vikinger-theme .vikinger-support-page .table tbody td {
border-color: #f1f1f8;
font-weight: 600;
}
body.vikinger-theme .vikinger-support-page .table tbody tr:hover {
background: #fafaff;
}
@media screen and (max-width: 960px) {
body.vikinger-theme .vikinger-directory-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.vikinger-theme .vikinger-support-tabs {
align-items: stretch;
flex-direction: column;
gap: 12px;
}
body.vikinger-theme .vikinger-support-tabs ul {
width: 100%;
}
body.vikinger-theme .vikinger-support-tabs > .float-end {
align-self: flex-end;
}
}
@media screen and (max-width: 767.98px) {
body.vikinger-theme .vikinger-utility-page {
margin-top: 20px;
}
body.vikinger-theme .vikinger-utility-card-body,
body.vikinger-theme .vikinger-directory-content,
body.vikinger-theme .vikinger-static-content {
padding: 20px !important;
}
body.vikinger-theme .vikinger-directory-grid {
grid-template-columns: minmax(0, 1fr);
}
body.vikinger-theme .vikinger-directory-grid .directory-card {
min-height: 204px;
}
body.vikinger-theme .vikinger-support-tabs {
padding: 12px 16px;
}
body.vikinger-theme .vikinger-support-tabs ul {
overflow-x: auto;
}
body.vikinger-theme .vikinger-support-tabs li a {
padding: 0 12px;
white-space: nowrap;
}
body.vikinger-theme .vikinger-support-page .card-body,
body.vikinger-theme .vikinger-support-page .card-footer {
padding: 18px;
}
body.vikinger-theme .vikinger-static-content {
font-size: .9375rem;
line-height: 1.65;
}
}
@media screen and (max-width: 480px) {
body.vikinger-theme .vikinger-contact-card .form-group {
margin-bottom: 18px;
}
body.vikinger-theme .vikinger-contact-card .d-grid {
margin-top: 22px;
}
body.vikinger-theme .vikinger-info-banner {
border-radius: 10px;
}
}
/* Support page: two-column panel polish */
body.vikinger-theme .vikinger-support-page > .row {
align-items: stretch;
}
body.vikinger-theme .vikinger-support-page > .row > [class*="col-"] {
display: flex;
min-width: 0;
}
body.vikinger-theme .vikinger-support-page .card {
display: flex;
flex-direction: column;
width: 100%;
}
body.vikinger-theme .vikinger-support-sidebar > .card:only-child,
body.vikinger-theme .vikinger-support-main > .card:only-child {
flex: 1 1 auto;
}
body.vikinger-theme .vikinger-support-sidebar .card-body {
padding: 20px 16px;
}
body.vikinger-theme .vikinger-support-page .side-nav {
margin: 0;
padding: 0;
}
body.vikinger-theme .vikinger-support-page .side-nav li {
margin: 0 0 4px;
}
body.vikinger-theme .vikinger-support-page .side-nav li:last-child {
margin-bottom: 0;
}
body.vikinger-theme .vikinger-support-page .side-nav li a {
justify-content: space-between;
gap: 12px;
padding: 0 14px;
}
body.vikinger-theme .vikinger-support-page .side-nav li a .badge {
flex: 0 0 auto;
margin-left: auto;
}
body.vikinger-theme .vikinger-support-page .side-nav .divider {
margin: 10px 0;
}
body.vikinger-theme .vikinger-support-main > .card {
min-height: 285px;
}
body.vikinger-theme .vikinger-support-main .card-header {
display: flex;
align-items: center;
gap: 8px;
border-radius: 12px 12px 0 0;
}
body.vikinger-theme .vikinger-support-main .card-header .svg-container {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 24px;
width: 24px !important;
height: 24px !important;
margin: 0 !important;
}
body.vikinger-theme .vikinger-support-main .card-header .svg-container svg,
body.vikinger-theme .vikinger-support-main .card-header .svg-container path {
width: 24px;
height: 24px;
fill: #615dfa !important;
color: #615dfa;
}
body.vikinger-theme .vikinger-support-main .card-body {
flex: 1 1 auto;
min-height: 0;
}
body.vikinger-theme .vikinger-support-main .card-body > .mb20,
body.vikinger-theme .vikinger-support-main .card-body > .mb20 > form,
body.vikinger-theme .vikinger-support-main .card-body > .mb20 .form-group {
width: 100%;
}
body.vikinger-theme .vikinger-support-main .card-body > .mb20 .input-group {
width: 100%;
max-width: 620px;
}
body.vikinger-theme .vikinger-support-main .card-body > .mb20 .input-group .form-control {
min-width: 0;
min-height: 54px;
}
body.vikinger-theme .vikinger-support-main .card-body > .mb20 .input-group > .btn {
min-width: 108px;
min-height: 54px;
}
@media screen and (max-width: 767.98px) {
body.vikinger-theme .vikinger-support-page > .row {
gap: 16px 0;
}
body.vikinger-theme .vikinger-support-sidebar .card-body,
body.vikinger-theme .vikinger-support-main .card-body {
padding: 18px;
}
body.vikinger-theme .vikinger-support-main .card-body > .mb20 .input-group {
max-width: none;
}
}
/* Shared image uploader */
body.vikinger-theme .x-image {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 116px;
padding: 18px;
overflow: hidden;
border: 1px dashed rgba(97, 93, 250, .35);
border-radius: 12px;
background: #fafaff;
}
body.vikinger-theme .x-image > .x-uploader {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 78px;
margin: 0;
border-radius: 10px;
}
body.vikinger-theme .x-image > .js_x-uploader,
body.vikinger-theme .x-image > .x-uploader .js_x-uploader {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 48px;
width: 48px;
height: 48px;
border-radius: 50%;
background: #f0efff;
color: #615dfa;
font-size: 20px;
line-height: 1;
cursor: pointer;
transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
body.vikinger-theme .x-image > .js_x-uploader:hover,
body.vikinger-theme .x-image > .js_x-uploader:focus-visible,
body.vikinger-theme .x-image > .x-uploader .js_x-uploader:hover,
body.vikinger-theme .x-image > .x-uploader .js_x-uploader:focus-visible {
background: #615dfa;
color: #fff;
outline: 0;
transform: translateY(-1px);
}
body.vikinger-theme .x-image > .btn-close {
position: absolute;
top: 10px;
right: 10px;
z-index: 5;
width: 28px;
height: 28px;
padding: 0;
border-radius: 50%;
background-color: #615dfa;
background-size: 11px;
opacity: 1;
}
body.vikinger-theme .x-image > .x-image-loader {
position: absolute;
right: 18px;
bottom: 12px;
left: 18px;
z-index: 4;
pointer-events: none;
}
body.vikinger-theme .x-image > .x-image-loader .progress {
height: 6px;
margin: 0;
overflow: hidden;
border-radius: 99px;
background: #eaeaf5;
}
body.vikinger-theme .x-image > .x-image-loader .progress-bar {
border-radius: inherit;
background: linear-gradient(90deg, #615dfa, #23d2e2);
transition: width .2s ease;
}
body.vikinger-theme .x-image > img,
body.vikinger-theme .x-image > .x-image-preview {
display: block;
max-width: 100%;
max-height: 220px;
margin: 0 auto;
border-radius: 10px;
object-fit: contain;
}
@media screen and (max-width: 575.98px) {
body.vikinger-theme .x-image {
min-height: 104px;
padding: 14px;
}
body.vikinger-theme .x-image > .x-uploader {
min-height: 72px;
}
}
/* Shared public discovery filters */
body.vikinger-theme main.content-grid:has(> section.section-banner) {
width: 100%;
max-width: 1184px;
margin-right: auto;
margin-left: auto;
}
body.vikinger-theme section.section-banner + .section-filters-bar,
body.vikinger-theme .section-filters-bar + .container.sg-offcanvas,
body.vikinger-theme .section-filters-bar + .container-fluid.sg-offcanvas {
width: 100%;
max-width: 1184px;
margin-right: auto;
margin-left: auto;
}
body.vikinger-theme section.section-banner + .section-filters-bar {
min-height: 96px;
margin-top: 24px;
padding: 20px 28px;
border-radius: 12px;
background: #fff;
box-shadow: 0 0 40px 0 rgba(94, 92, 154, .06);
}
body.vikinger-theme section.section-banner + .section-filters-bar .section-filters-bar-actions,
body.vikinger-theme section.section-banner + .section-filters-bar .form,
body.vikinger-theme section.section-banner + .section-filters-bar .form-item.split {
width: 100%;
}
body.vikinger-theme section.section-banner + .section-filters-bar .form-item.split {
display: flex;
align-items: flex-end;
gap: 12px;
max-width: 760px;
}
body.vikinger-theme section.section-banner + .section-filters-bar .form-input.small {
flex: 1 1 0;
min-width: 0;
}
body.vikinger-theme section.section-banner + .section-filters-bar .form-input.small label {
margin-bottom: 8px;
color: #3e3f5e;
font-size: .8125rem;
font-weight: 700;
}
body.vikinger-theme section.section-banner + .section-filters-bar .form-input.small input {
width: 100%;
min-height: 54px;
border: 1px solid #dedeea;
border-radius: 12px;
background: #fff;
box-shadow: none;
}
body.vikinger-theme section.section-banner + .section-filters-bar .form-input.small input:focus {
border-color: #615dfa;
box-shadow: 0 0 0 3px rgba(97, 93, 250, .1);
outline: 0;
}
body.vikinger-theme section.section-banner + .section-filters-bar .button.primary {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 54px;
width: 54px;
height: 54px;
border-radius: 12px;
background: #23d2e2;
color: #fff;
box-shadow: 0 7px 14px rgba(35, 210, 226, .2);
}
body.vikinger-theme section.section-banner + .section-filters-bar .button.primary:hover,
body.vikinger-theme section.section-banner + .section-filters-bar .button.primary:focus-visible {
background: #1ab9c8;
color: #fff;
outline: 0;
transform: translateY(-1px);
}
body.vikinger-theme .section-filters-bar + .container.sg-offcanvas,
body.vikinger-theme .section-filters-bar + .container-fluid.sg-offcanvas {
margin-top: 24px;
}
/* Groups page: keep the Vikinger full-width filter layout and move categories into it. */
body.vikinger-theme .section-filters-bar.v6 + .container.sg-offcanvas .vikinger-groups-content-row > .sg-offcanvas-mainbar,
body.vikinger-theme .section-filters-bar.v6 + .container-fluid.sg-offcanvas .vikinger-groups-content-row > .sg-offcanvas-mainbar {
flex: 0 0 100%;
width: 100%;
max-width: 100%;
}
body.vikinger-theme .section-filters-bar.v6 .section-filters-bar-actions:has(.vikinger-groups-category-filter) {
display: flex;
align-items: center;
gap: 16px;
}
body.vikinger-theme .section-filters-bar.v6 .section-filters-bar-actions:has(.vikinger-groups-category-filter) > .form {
flex: 1 1 auto;
min-width: 0;
}
body.vikinger-theme section.section-banner + .section-filters-bar.vikinger-groups-filters {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
min-height: 96px;
padding: 0 28px;
}
body.vikinger-theme .vikinger-groups-filters > .section-filters-bar-actions:first-child {
display: flex;
align-items: center;
flex: 1 1 auto;
width: auto;
min-width: 0;
padding-right: 150px;
}
body.vikinger-theme .vikinger-groups-filters > .section-filters-bar-actions:first-child > .form {
display: flex;
align-items: center;
flex: 0 0 auto;
width: auto;
}
body.vikinger-theme .vikinger-groups-filters .form-input.with-button {
flex: 0 0 240px;
width: 240px;
}
body.vikinger-theme .vikinger-groups-filters .vikinger-groups-category-filter {
margin-left: 16px;
}
body.vikinger-theme .vikinger-groups-filters .vikinger-groups-sort-tabs {
display: flex;
flex: 0 0 auto;
height: 96px;
margin-left: 32px;
}
body.vikinger-theme .vikinger-groups-filters > .section-filters-bar-actions:last-child {
display: flex;
align-items: center;
width: auto !important;
height: 96px;
margin-left: 0;
position: absolute !important;
top: 0 !important;
right: 28px !important;
z-index: 2;
}
body.vikinger-theme .vikinger-groups-filters .view-actions {
display: flex;
align-items: center;
}
body.vikinger-theme .vikinger-groups-filters .vikinger-groups-sort-tabs .filter-tab {
display: flex;
align-items: center;
justify-content: center;
min-width: 116px;
color: #adafca;
white-space: nowrap;
}
body.vikinger-theme .vikinger-groups-filters .vikinger-groups-sort-tabs .filter-tab-text {
color: inherit;
}
body.vikinger-theme .vikinger-groups-filters .vikinger-groups-sort-tabs .filter-tab:hover,
body.vikinger-theme .vikinger-groups-filters .vikinger-groups-sort-tabs .filter-tab:focus-visible,
body.vikinger-theme .vikinger-groups-filters .vikinger-groups-sort-tabs .filter-tab.active {
color: #3e3f5e;
outline: 0;
}
body.vikinger-theme .vikinger-groups-filters > .section-filters-bar-actions:last-child {
gap: 24px;
}
body.vikinger-theme .vikinger-groups-create-button {
flex: 0 0 auto;
align-items: center;
justify-content: center;
white-space: nowrap;
}
body.vikinger-theme .vikinger-groups-category-filter {
position: relative;
flex: 0 0 auto;
}
body.vikinger-theme .vikinger-groups-category-filter-placeholder {
width: 190px;
min-height: 54px;
visibility: hidden;
pointer-events: none;
}
body.vikinger-theme .vikinger-groups-category-toggle {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 10px;
min-width: 190px;
min-height: 54px;
padding: 0 18px;
border: 1px solid #dedeea;
border-radius: 12px;
background: #fff;
color: #3e3f5e;
font-size: .8125rem;
font-weight: 700;
text-align: left;
box-shadow: none;
}
body.vikinger-theme .vikinger-groups-category-toggle:hover,
body.vikinger-theme .vikinger-groups-category-toggle:focus-visible,
body.vikinger-theme .vikinger-groups-category-toggle.show {
border-color: #615dfa;
background: #f0efff;
color: #615dfa;
outline: 0;
}
body.vikinger-theme .vikinger-groups-category-icon {
order: 2;
width: 16px;
height: 16px;
fill: currentColor;
transform: rotate(90deg);
}
body.vikinger-theme .vikinger-groups-category-menu {
width: 256px;
min-width: 256px;
max-width: calc(100vw - 32px);
padding: 8px;
border: 0;
border-radius: 12px;
background: #fff;
box-shadow: 0 10px 30px rgba(94, 92, 154, .16);
}
body.vikinger-theme .vikinger-groups-category-menu .js_scroller {
height: auto !important;
max-height: min(320px, 55vh);
overflow-x: hidden !important;
overflow-y: auto !important;
}
body.vikinger-theme .vikinger-groups-category-menu .dropdown-item {
min-height: 40px;
padding: 10px 12px;
border-radius: 9px;
color: #3e3f5e;
font-size: .8125rem;
font-weight: 700;
line-height: 1.25;
}
body.vikinger-theme .vikinger-groups-category-menu .dropdown-item:hover,
body.vikinger-theme .vikinger-groups-category-menu .dropdown-item:focus-visible,
body.vikinger-theme .vikinger-groups-category-menu .dropdown-item.active {
background: #f0efff;
color: #615dfa;
outline: 0;
}
body.vikinger-theme .vikinger-groups-filters .form-input.with-button input {
display: block;
box-sizing: border-box;
width: 100%;
height: 48px;
margin: 0;
min-width: 0;
border: 1px solid #dedeea;
border-radius: 12px;
background: #fff;
color: #3e3f5e;
font-family: Rajdhani, sans-serif;
font-size: .875rem;
font-weight: 700;
line-height: 48px;
padding-right: 70px;
transition: border-color .2s ease-in-out, box-shadow .2s ease-in-out;
}
body.vikinger-theme .vikinger-groups-filters .form-input.with-button input::placeholder {
color: #adafca;
font-size: .875rem;
font-weight: 500;
}
body.vikinger-theme .vikinger-groups-filters .form-input.with-button input:focus {
border-color: #615dfa;
box-shadow: 0 0 0 3px rgba(97, 93, 250, .12);
outline: 0;
}
body.vikinger-theme .vikinger-groups-filters .form-input.with-button:focus-within label,
body.vikinger-theme .vikinger-groups-filters .form-input.with-button.active label {
top: -6px;
left: 12px;
z-index: 2;
padding: 0 6px;
background: #fff;
color: #615dfa;
font-size: .75rem;
line-height: 1;
}
body.vikinger-theme .vikinger-groups-filters .form-input.with-button label {
pointer-events: none;
}
body.vikinger-theme .vikinger-groups-filters .form-input.with-button .button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 54px;
min-width: 54px;
height: 48px;
padding: 0;
}
body.vikinger-theme.night-mode .vikinger-groups-filters .form-input.with-button input {
border-color: #3a4a57;
background: #26323b;
color: #d2e0eb;
}
body.vikinger-theme.night-mode .vikinger-groups-filters .form-input.with-button input:focus {
border-color: #23d2e2;
box-shadow: 0 0 0 3px rgba(35, 210, 226, .12);
}
body.vikinger-theme.night-mode .vikinger-groups-filters .form-input.with-button:focus-within label,
body.vikinger-theme.night-mode .vikinger-groups-filters .form-input.with-button.active label {
background: #26323b;
color: #23d2e2;
}
body.vikinger-theme.night-mode .vikinger-groups-category-toggle,
body.vikinger-theme.night-mode .vikinger-groups-category-menu {
border-color: #3a4a57;
background: #26323b;
color: #d2e0eb;
}
body.vikinger-theme.night-mode .vikinger-groups-category-menu .dropdown-item {
color: #d2e0eb;
}
body.vikinger-theme.night-mode .vikinger-groups-category-menu .dropdown-item:hover,
body.vikinger-theme.night-mode .vikinger-groups-category-menu .dropdown-item:focus-visible,
body.vikinger-theme.night-mode .vikinger-groups-category-menu .dropdown-item.active {
background: #34424d;
color: #fff;
}
/* Keep category panels and their content separated from the page tabs. */
body.vikinger-theme .container.sg-offcanvas > .position-relative + .row,
body.vikinger-theme .container-fluid.sg-offcanvas > .position-relative + .row {
margin-top: 24px;
}
body.vikinger-theme section.section-banner + .container.sg-offcanvas,
body.vikinger-theme section.section-banner + .container-fluid.sg-offcanvas {
max-width: 1184px;
margin-right: auto;
margin-left: auto;
}
body.vikinger-theme .section-filters-bar + .container.sg-offcanvas .content-tabs,
body.vikinger-theme .section-filters-bar + .container-fluid.sg-offcanvas .content-tabs {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 80px;
padding: 16px 28px;
border-radius: 12px !important;
background: #fff;
box-shadow: 0 0 40px 0 rgba(94, 92, 154, .06) !important;
}
body.vikinger-theme .section-filters-bar + .container.sg-offcanvas .content-tabs ul,
body.vikinger-theme .section-filters-bar + .container-fluid.sg-offcanvas .content-tabs ul {
display: flex;
align-items: center;
margin: 0;
padding: 0;
}
body.vikinger-theme .section-filters-bar + .container.sg-offcanvas .content-tabs li a,
body.vikinger-theme .section-filters-bar + .container-fluid.sg-offcanvas .content-tabs li a {
display: inline-flex;
align-items: center;
min-height: 48px;
padding: 0 18px;
border-radius: 10px;
color: #3e3f5e;
font-size: .9375rem;
font-weight: 700;
}
body.vikinger-theme .section-filters-bar + .container.sg-offcanvas .content-tabs li.active a,
body.vikinger-theme .section-filters-bar + .container.sg-offcanvas .content-tabs li a:hover,
body.vikinger-theme .section-filters-bar + .container-fluid.sg-offcanvas .content-tabs li.active a,
body.vikinger-theme .section-filters-bar + .container-fluid.sg-offcanvas .content-tabs li a:hover {
background: #f0efff;
color: #615dfa;
}
body.vikinger-theme section.section-banner ~ .container.sg-offcanvas .posts-filter,
body.vikinger-theme section.section-banner ~ .container-fluid.sg-offcanvas .posts-filter {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 56px;
margin: 0 0 16px;
padding: 12px 20px;
border-radius: 12px;
background: #fff;
color: #3e3f5e;
box-shadow: 0 0 40px 0 rgba(94, 92, 154, .06);
font-size: .9375rem;
font-weight: 700;
}
body.vikinger-theme section.section-banner ~ .container.sg-offcanvas .posts-filter .float-end,
body.vikinger-theme section.section-banner ~ .container-fluid.sg-offcanvas .posts-filter .float-end {
float: none !important;
display: flex;
align-items: center;
gap: 12px;
}
body.vikinger-theme section.section-banner ~ .container.sg-offcanvas .countries-filter,
body.vikinger-theme section.section-banner ~ .container-fluid.sg-offcanvas .countries-filter {
color: #8f91ac;
font-size: .875rem;
font-weight: 700;
}
body.vikinger-theme section.section-banner ~ .container.sg-offcanvas .countries-filter:hover,
body.vikinger-theme section.section-banner ~ .container.sg-offcanvas .countries-filter:focus-visible,
body.vikinger-theme section.section-banner ~ .container-fluid.sg-offcanvas .countries-filter:hover,
body.vikinger-theme section.section-banner ~ .container-fluid.sg-offcanvas .countries-filter:focus-visible {
color: #615dfa;
outline: 0;
}
body.vikinger-theme section.section-banner ~ .container.sg-offcanvas .countries-dropdown,
body.vikinger-theme section.section-banner ~ .container-fluid.sg-offcanvas .countries-dropdown {
min-width: 190px;
max-height: 320px;
padding: 8px;
overflow: hidden;
border: 0;
border-radius: 12px;
background: #fff;
box-shadow: 0 10px 30px rgba(94, 92, 154, .16);
}
body.vikinger-theme section.section-banner ~ .container.sg-offcanvas .countries-dropdown .js_scroller,
body.vikinger-theme section.section-banner ~ .container-fluid.sg-offcanvas .countries-dropdown .js_scroller {
max-height: 304px;
overflow-y: auto;
}
body.vikinger-theme section.section-banner ~ .container.sg-offcanvas .countries-dropdown .dropdown-item,
body.vikinger-theme section.section-banner ~ .container-fluid.sg-offcanvas .countries-dropdown .dropdown-item {
min-height: 40px;
padding: 10px 12px;
border-radius: 8px;
color: #3e3f5e;
font-size: .875rem;
font-weight: 600;
}
body.vikinger-theme section.section-banner ~ .container.sg-offcanvas .countries-dropdown .dropdown-item:hover,
body.vikinger-theme section.section-banner ~ .container.sg-offcanvas .countries-dropdown .dropdown-item:focus-visible,
body.vikinger-theme section.section-banner ~ .container-fluid.sg-offcanvas .countries-dropdown .dropdown-item:hover,
body.vikinger-theme section.section-banner ~ .container-fluid.sg-offcanvas .countries-dropdown .dropdown-item:focus-visible {
background: #f0efff;
color: #615dfa;
outline: 0;
}
body.vikinger-theme main.content-grid:has(> section.section-banner) .sg-offcanvas-sidebar .card:has(> .card-body.with-nav) {
overflow: hidden;
border: 0;
border-radius: 12px;
background: #fff;
box-shadow: 0 0 40px 0 rgba(94, 92, 154, .06);
}
body.vikinger-theme main.content-grid:has(> section.section-banner) .sg-offcanvas-sidebar .card-body.with-nav {
padding: 20px 16px;
}
body.vikinger-theme main.content-grid:has(> section.section-banner) .card-body.with-nav .side-nav {
margin: 0;
padding: 0;
}
body.vikinger-theme main.content-grid:has(> section.section-banner) .card-body.with-nav .side-nav li {
margin: 0 0 4px;
}
body.vikinger-theme main.content-grid:has(> section.section-banner) .card-body.with-nav .side-nav li:last-child {
margin-bottom: 0;
}
body.vikinger-theme main.content-grid:has(> section.section-banner) .card-body.with-nav .side-nav li a {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 44px;
padding: 0 14px;
border-radius: 10px;
color: #8f91ac;
font-size: .875rem;
font-weight: 700;
line-height: 1.2;
transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
body.vikinger-theme main.content-grid:has(> section.section-banner) .card-body.with-nav .side-nav li.active a,
body.vikinger-theme main.content-grid:has(> section.section-banner) .card-body.with-nav .side-nav li a:hover,
body.vikinger-theme main.content-grid:has(> section.section-banner) .card-body.with-nav .side-nav li a:focus-visible {
background: #f0efff;
color: #615dfa;
outline: 0;
transform: translateX(2px);
}
body.vikinger-theme main.content-grid:has(> section.section-banner) .card-body.with-nav .side-nav li .float-end {
float: none !important;
margin-left: auto;
}
body.vikinger-theme main.content-grid:has(> section.section-banner) .card-body.with-nav .side-nav li .divider {
height: 1px;
margin: 10px 0;
background: #eaeaf5;
}
@media screen and (max-width: 767.98px) {
body.vikinger-theme main.content-grid:has(> section.section-banner) {
width: 100%;
max-width: 100%;
}
body.vikinger-theme section.section-banner + .section-filters-bar,
body.vikinger-theme .section-filters-bar + .container.sg-offcanvas,
body.vikinger-theme .section-filters-bar + .container-fluid.sg-offcanvas,
body.vikinger-theme section.section-banner + .container.sg-offcanvas,
body.vikinger-theme section.section-banner + .container-fluid.sg-offcanvas {
width: calc(100% - 32px);
}
body.vikinger-theme section.section-banner + .section-filters-bar {
padding: 18px 16px;
}
body.vikinger-theme section.section-banner + .section-filters-bar .form-item.split {
max-width: none;
}
body.vikinger-theme .section-filters-bar + .container.sg-offcanvas .content-tabs,
body.vikinger-theme .section-filters-bar + .container-fluid.sg-offcanvas .content-tabs,
body.vikinger-theme section.section-banner ~ .container.sg-offcanvas .posts-filter,
body.vikinger-theme section.section-banner ~ .container-fluid.sg-offcanvas .posts-filter {
align-items: flex-start;
flex-direction: column;
gap: 10px;
padding: 12px 16px;
}
body.vikinger-theme section.section-banner ~ .container.sg-offcanvas .posts-filter .float-end,
body.vikinger-theme section.section-banner ~ .container-fluid.sg-offcanvas .posts-filter .float-end {
width: 100%;
justify-content: flex-end;
}
body.vikinger-theme main.content-grid:has(> section.section-banner) .sg-offcanvas-sidebar .card-body.with-nav {
padding: 16px 12px;
}
}
/* Icon selection dropdowns */
body.vikinger-theme .dropdown-menu.custom-scrollbar:has(.js_scroller > .dropdown-item[data-title]) {
min-width: 232px;
max-width: min(300px, calc(100vw - 32px));
padding: 8px;
overflow: hidden;
border: 0;
border-radius: 12px;
background: #fff;
box-shadow: 0 10px 30px rgba(94, 92, 154, .16);
}
body.vikinger-theme .dropdown-menu.custom-scrollbar:has(.js_scroller > .dropdown-item[data-title]) > .js_scroller {
max-height: min(280px, 60vh);
margin: 0;
padding: 2px;
overflow-x: hidden !important;
overflow-y: auto !important;
}
body.vikinger-theme .dropdown-menu.custom-scrollbar:has(.js_scroller > .dropdown-item[data-title]) > .js_scroller > .dropdown-item[data-title] {
display: flex;
align-items: center;
gap: 10px;
min-height: 44px;
margin: 2px 0;
padding: 8px 10px;
border-radius: 10px;
color: #3e3f5e;
font-size: .875rem;
font-weight: 700;
line-height: 1.2;
cursor: pointer;
transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
body.vikinger-theme .dropdown-menu.custom-scrollbar:has(.js_scroller > .dropdown-item[data-title]) > .js_scroller > .dropdown-item[data-title]:hover,
body.vikinger-theme .dropdown-menu.custom-scrollbar:has(.js_scroller > .dropdown-item[data-title]) > .js_scroller > .dropdown-item[data-title]:focus-visible {
background: #f0efff;
color: #615dfa;
outline: 0;
transform: translateX(2px);
}
body.vikinger-theme .dropdown-menu.custom-scrollbar:has(.js_scroller > .dropdown-item[data-title]) .dropdown-item[data-title] .svg-container.main-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 24px;
width: 24px !important;
height: 24px !important;
margin: 0 !important;
color: #615dfa;
line-height: 0;
}
body.vikinger-theme .dropdown-menu.custom-scrollbar:has(.js_scroller > .dropdown-item[data-title]) .dropdown-item[data-title] .svg-container.main-icon > svg {
display: block;
width: 24px !important;
height: 24px !important;
max-width: 100%;
fill: currentColor !important;
}
body.vikinger-theme .dropdown-menu.custom-scrollbar:has(.js_scroller > .dropdown-item[data-title]) .dropdown-item[data-title] .svg-container.main-icon > svg * {
fill: currentColor !important;
}
body.vikinger-theme.night-mode .dropdown-menu.custom-scrollbar:has(.js_scroller > .dropdown-item[data-title]) {
background: #26323b;
box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
}
body.vikinger-theme.night-mode .dropdown-menu.custom-scrollbar:has(.js_scroller > .dropdown-item[data-title]) > .js_scroller > .dropdown-item[data-title] {
color: #d2e0eb;
}
body.vikinger-theme.night-mode .dropdown-menu.custom-scrollbar:has(.js_scroller > .dropdown-item[data-title]) > .js_scroller > .dropdown-item[data-title]:hover,
body.vikinger-theme.night-mode .dropdown-menu.custom-scrollbar:has(.js_scroller > .dropdown-item[data-title]) > .js_scroller > .dropdown-item[data-title]:focus-visible {
background: #34424d;
color: #fff;
}
@media screen and (max-width: 575.98px) {
body.vikinger-theme .section-filters-bar.v6 .section-filters-bar-actions:has(.vikinger-groups-category-filter) {
align-items: stretch;
flex-direction: column;
gap: 12px;
}
body.vikinger-theme .vikinger-groups-category-filter,
body.vikinger-theme .vikinger-groups-category-toggle {
width: 100%;
}
body.vikinger-theme .vikinger-groups-category-toggle {
min-width: 0;
}
body.vikinger-theme .vikinger-groups-category-menu {
width: calc(100vw - 32px);
min-width: 0;
}
body.vikinger-theme .vikinger-groups-filters .form-input.with-button {
width: 100%;
flex-basis: 100%;
}
body.vikinger-theme .dropdown-menu.custom-scrollbar:has(.js_scroller > .dropdown-item[data-title]) {
min-width: 0;
width: calc(100vw - 32px);
max-width: calc(100vw - 32px);
border-radius: 12px;
}
}
/* Jobs directory route */
body.vikinger-theme .vikinger-jobs-banner,
body.vikinger-theme .vikinger-jobs-filters,
body.vikinger-theme .vikinger-jobs-page {
width: 100%;
max-width: 1184px;
margin-right: auto;
margin-left: auto;
}
body.vikinger-theme .vikinger-jobs-banner {
margin-top: 32px;
overflow: hidden;
}
body.vikinger-theme .vikinger-jobs-filters {
min-height: 96px;
margin-top: 24px;
padding: 20px 28px;
border-radius: 12px;
background: #fff;
box-shadow: 0 0 40px 0 rgba(94, 92, 154, .06);
}
body.vikinger-theme .vikinger-jobs-filters .section-filters-bar-actions,
body.vikinger-theme .vikinger-jobs-filters .form,
body.vikinger-theme .vikinger-jobs-filters .form-item.split {
width: 100%;
}
body.vikinger-theme .vikinger-jobs-filters .form-item.split {
display: flex;
align-items: flex-end;
gap: 12px;
max-width: 640px;
}
body.vikinger-theme .vikinger-jobs-filters .form-input.small {
flex: 1 1 auto;
min-width: 0;
}
body.vikinger-theme .vikinger-jobs-filters .form-input.small label {
margin-bottom: 8px;
color: #3e3f5e;
font-size: .8125rem;
font-weight: 700;
}
body.vikinger-theme .vikinger-jobs-filters .form-input.small input {
width: 100%;
min-height: 54px;
border: 1px solid #dedeea;
border-radius: 12px;
box-shadow: none;
}
body.vikinger-theme .vikinger-jobs-filters .form-input.small input:focus {
border-color: #615dfa;
box-shadow: 0 0 0 3px rgba(97, 93, 250, .1);
outline: 0;
}
body.vikinger-theme .vikinger-jobs-filters .button.primary {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 54px;
width: 54px;
height: 54px;
border-radius: 12px;
background: #23d2e2;
color: #fff;
box-shadow: 0 7px 14px rgba(35, 210, 226, .2);
}
body.vikinger-theme .vikinger-jobs-page {
margin-top: 24px;
}
body.vikinger-theme .vikinger-jobs-page > .position-relative {
margin-bottom: 24px;
}
body.vikinger-theme .vikinger-jobs-tabs {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 80px;
padding: 16px 28px;
border-radius: 12px !important;
background: #fff;
box-shadow: 0 0 40px 0 rgba(94, 92, 154, .06) !important;
}
body.vikinger-theme .vikinger-jobs-tabs ul {
display: flex;
align-items: center;
margin: 0;
padding: 0;
}
body.vikinger-theme .vikinger-jobs-tabs li a {
display: inline-flex;
align-items: center;
min-height: 48px;
padding: 0 18px;
border-radius: 10px;
color: #615dfa;
background: #f0efff;
font-size: .9375rem;
font-weight: 700;
}
body.vikinger-theme .vikinger-jobs-tabs > .float-end {
float: none !important;
margin: 0 !important;
}
body.vikinger-theme .vikinger-jobs-page > .row {
margin-right: -8px;
margin-left: -8px;
}
body.vikinger-theme .vikinger-jobs-page > .row > [class*="col-"] {
min-width: 0;
padding-right: 8px;
padding-left: 8px;
}
body.vikinger-theme .vikinger-jobs-sidebar .card {
overflow: hidden;
border: 0;
border-radius: 12px;
background: #fff;
box-shadow: 0 0 40px 0 rgba(94, 92, 154, .06);
}
body.vikinger-theme .vikinger-jobs-sidebar .card-body {
padding: 20px 16px;
}
body.vikinger-theme .vikinger-jobs-sidebar .side-nav {
margin: 0;
padding: 0;
}
body.vikinger-theme .vikinger-jobs-sidebar .side-nav li {
margin-bottom: 4px;
}
body.vikinger-theme .vikinger-jobs-sidebar .side-nav li a {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 44px;
padding: 0 14px;
border-radius: 10px;
color: #8f91ac;
font-size: .875rem;
font-weight: 700;
}
body.vikinger-theme .vikinger-jobs-sidebar .side-nav li.active a,
body.vikinger-theme .vikinger-jobs-sidebar .side-nav li a:hover,
body.vikinger-theme .vikinger-jobs-sidebar .side-nav li a:focus-visible {
background: #f0efff;
color: #615dfa;
outline: 0;
}
body.vikinger-theme .vikinger-jobs-main > .posts-filter {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 56px;
margin: 0 0 16px;
padding: 12px 20px;
border-radius: 12px;
background: #fff;
color: #3e3f5e;
box-shadow: 0 0 40px 0 rgba(94, 92, 154, .06);
font-size: .9375rem;
font-weight: 700;
}
body.vikinger-theme .vikinger-jobs-main > .posts-filter .float-end {
float: none !important;
display: flex;
align-items: center;
gap: 12px;
}
body.vikinger-theme .vikinger-jobs-main > .row {
margin-right: -8px;
margin-left: -8px;
}
body.vikinger-theme .vikinger-jobs-main > .row > [class*="col-"] {
padding-right: 8px;
padding-left: 8px;
}
body.vikinger-theme .vikinger-jobs-main .product {
overflow: hidden;
height: 100%;
border: 0;
border-radius: 12px;
background: #fff;
box-shadow: 0 0 40px 0 rgba(94, 92, 154, .06);
}
body.vikinger-theme .vikinger-jobs-main .product-image {
position: relative;
min-height: 190px;
overflow: hidden;
border-radius: 12px 12px 0 0;
background: #f0efff;
}
body.vikinger-theme .vikinger-jobs-main .product-image > img {
display: block;
width: 100%;
height: 190px;
object-fit: cover;
}
body.vikinger-theme .vikinger-jobs-main .product-price {
top: 12px;
right: 12px;
z-index: 2;
padding: 6px 10px;
border-radius: 8px;
background: rgba(62, 63, 94, .86);
color: #fff;
font-size: .75rem;
font-weight: 700;
}
body.vikinger-theme .vikinger-jobs-main .product-info {
padding: 18px 20px 20px;
}
body.vikinger-theme .vikinger-jobs-main .product-meta {
margin-top: 8px;
color: #8f91ac;
font-size: .875rem;
font-weight: 600;
}
body.vikinger-theme .vikinger-jobs-main .product-meta:first-child {
margin-top: 0;
}
body.vikinger-theme .vikinger-jobs-main .product-meta .title {
display: block;
overflow: hidden;
color: #3e3f5e;
font-size: 1.05rem;
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
}
body.vikinger-theme .vikinger-jobs-main .product-overlay {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
body.vikinger-theme .vikinger-jobs-main .product-overlay .btn {
min-height: 38px;
border-radius: 10px;
font-size: .8125rem;
font-weight: 700;
}
body.vikinger-theme .vikinger-jobs-main .countries-filter {
color: #8f91ac;
font-size: .875rem;
font-weight: 700;
}
body.vikinger-theme .vikinger-jobs-main .countries-filter:hover,
body.vikinger-theme .vikinger-jobs-main .countries-filter:focus-visible {
color: #615dfa;
outline: 0;
}
@media screen and (max-width: 960px) {
body.vikinger-theme .vikinger-jobs-tabs {
align-items: stretch;
flex-direction: column;
gap: 12px;
}
body.vikinger-theme .vikinger-jobs-tabs > .float-end {
align-self: flex-end;
}
}
@media screen and (max-width: 767.98px) {
body.vikinger-theme .vikinger-jobs-banner,
body.vikinger-theme .vikinger-jobs-filters,
body.vikinger-theme .vikinger-jobs-page {
width: calc(100% - 32px);
}
body.vikinger-theme .vikinger-jobs-filters {
padding: 18px 16px;
}
body.vikinger-theme .vikinger-jobs-filters .form-item.split {
max-width: none;
}
body.vikinger-theme .vikinger-jobs-tabs {
padding: 12px 16px;
}
body.vikinger-theme .vikinger-jobs-main > .posts-filter {
align-items: flex-start;
flex-direction: column;
gap: 10px;
}
body.vikinger-theme .vikinger-jobs-main > .posts-filter .float-end {
width: 100%;
justify-content: flex-end;
}
}
@media screen and (max-width: 480px) {
body.vikinger-theme .vikinger-jobs-filters .form-item.split {
gap: 8px;
}
body.vikinger-theme .vikinger-jobs-filters .button.primary {
flex-basis: 48px;
width: 48px;
height: 48px;
}
}
/* Smooth handoff between full page navigations. The document still follows
* Sngine's normal link navigation; this only removes the abrupt visual jump. */
body.vikinger-theme .page-loader {
position: fixed;
inset: 0;
width: auto;
height: auto;
z-index: 2147483647;
transition: opacity .28s ease, visibility .28s ease;
}
body.vikinger-theme.vikinger-page-transitioning {
overflow-x: hidden;
overflow-y: scroll;
scrollbar-gutter: stable;
}
body.vikinger-theme .page-loader.hidden {
pointer-events: none;
}
/* During navigation keep the current document visible and replace the full
* first-load logo with a quiet top progress line. */
body.vikinger-theme .page-loader.vikinger-navigation-loader {
position: fixed;
inset: 0;
z-index: 2147483647 !important;
align-items: flex-start;
justify-content: flex-start;
background: transparent;
pointer-events: none;
}
body.vikinger-theme .page-loader.vikinger-navigation-loader::before {
content: '';
position: absolute;
top: 0;
left: 0;
z-index: 1;
display: block;
flex: 0 0 auto;
width: 34%;
height: 3px;
border-radius: 0 3px 3px 0;
background: linear-gradient(90deg, #23d2e2, #615dfa);
box-shadow: 0 1px 8px rgba(97, 93, 250, .35);
animation: vikinger-navigation-progress 1.15s ease-in-out infinite;
}
body.vikinger-theme .page-loader.vikinger-navigation-loader > * {
display: none;
}
@keyframes vikinger-navigation-progress {
0% { transform: translateX(-100%); }
100% { transform: translateX(300%); }
}
@media (prefers-reduced-motion: reduce) {
body.vikinger-theme .page-loader {
transition: none;
}
body.vikinger-theme .page-loader.vikinger-navigation-loader::before {
animation: none;
}
}
/* Match the original Vikinger header palette exactly: the header is a solid
* #615dfa surface, while the regular action icons use the softer #8b88ff
* accent. White is reserved for the logo, menu dots, settings icon and the
* active/hover state, as in the original template. */
body.vikinger-theme .header {
background-color: #615dfa;
background-image: none;
box-shadow: none;
}
body.vikinger-theme .header .icon-grid,
body.vikinger-theme .header .icon-magnifying-glass,
body.vikinger-theme .header .icon-cross-thin,
body.vikinger-theme .header .icon-plus,
body.vikinger-theme .header .icon-friend,
body.vikinger-theme .header .icon-messages,
body.vikinger-theme .header .icon-shopping-bag,
body.vikinger-theme .header .icon-notification {
fill: #8b88ff;
}
body.vikinger-theme .header .icon-logo-vikinger,
body.vikinger-theme .header .icon-dots,
body.vikinger-theme .header .icon-settings {
fill: #fff;
}
body.vikinger-theme .header .header-brand .logo.vikinger-system-logo {
display: flex;
align-items: center;
justify-content: center;
width: auto;
max-width: 190px;
height: 60px;
margin-left: 26px;
}
body.vikinger-theme .header .vikinger-system-logo-image {
display: none;
width: auto;
max-width: 225px;
max-height: 80px;
object-fit: contain;
}
body.vikinger-theme .header .vikinger-system-logo-image.logo-light {
display: block;
}
body.vikinger-theme.night-mode .header .vikinger-system-logo-image.logo-light {
display: none;
}
body.vikinger-theme.night-mode .header .vikinger-system-logo-image.logo-dark {
display: block;
}
/* The "Mostra tutto" trigger is a paragraph in the legacy header markup,
* while the original Vikinger stylesheet treats it like a menu link. Keep
* its first-paint box and icon alignment identical to the real menu links. */
body.vikinger-theme .header .menu-main > .menu-main-item >
.menu-main-item-link[aria-label="Mostra tutto"] {
display: block;
width: 58px;
height: 80px;
padding: 0 24px;
box-sizing: border-box;
color: #fff;
line-height: 80px;
white-space: nowrap;
cursor: pointer;
}
body.vikinger-theme .header .menu-main > .menu-main-item >
.menu-main-item-link[aria-label="Mostra tutto"] .icon-dots {
display: inline-block;
width: 10px;
height: 2px;
vertical-align: middle;
fill: #fff;
}
body.vikinger-theme .header .menu-main > .menu-main-item:hover >
.menu-main-item-link[aria-label="Mostra tutto"],
body.vikinger-theme .header .menu-main > .menu-main-item:hover >
.menu-main-item-link[aria-label="Mostra tutto"] .icon-dots {
color: #41efff;
fill: #41efff;
}
body.vikinger-theme .header .sidemenu-trigger:hover .icon-grid,
body.vikinger-theme .header .sidemenu-trigger.active .icon-grid,
body.vikinger-theme .header .action-list-item:hover .action-list-item-icon,
body.vikinger-theme .header .action-list-item.active .action-list-item-icon,
body.vikinger-theme .header .action-list-item.unread .action-list-item-icon {
fill: #fff;
}
/* First-paint header stabilization. The original Vikinger header is visible
* immediately; hover transitions are enabled again after initialization. */
body.vikinger-theme .header .action-list-item-wrap,
body.vikinger-theme .header .action-item-wrap {
position: relative;
}
/* Dropdown binding adds these declarations inline later. Keep them in the
* theme stylesheet as well, so an unbound header never lays its panels out as
* ordinary children for a single frame. */
body.vikinger-theme .header .header-search-dropdown {
position: absolute;
top: 57px;
right: auto;
left: 0;
z-index: 9999;
}
body.vikinger-theme .header .action-list-item-wrap > .header-dropdown {
position: absolute;
top: 64px;
right: 6px;
left: auto;
z-index: 9999;
}
body.vikinger-theme .header .action-item-wrap > .header-settings-dropdown {
position: absolute;
top: 64px;
right: 22px;
left: auto;
z-index: 9999;
}
html.vikinger-header-pending body.vikinger-theme .header,
html.vikinger-header-pending body.vikinger-theme .header *,
html.vikinger-header-pending body.vikinger-theme .header *::before,
html.vikinger-header-pending body.vikinger-theme .header *::after {
transition: none !important;
animation: none !important;
}
html.vikinger-header-pending body.vikinger-theme .header {
display: flex;
align-items: center;
min-height: 80px;
background-color: #615dfa;
}
html.vikinger-header-pending body.vikinger-theme .header .header-actions,
html.vikinger-header-pending body.vikinger-theme .header .header-brand,
html.vikinger-header-pending body.vikinger-theme .header .action-list {
display: flex;
align-items: center;
}
html.vikinger-header-pending body.vikinger-theme .header svg {
display: block;
flex: 0 0 auto;
}
/* Keep the document scrollbar visible during page transitions. Diamond's
* navigation does not remove the browser scroll affordance while a page is
* changing, so the Default theme uses the same stable behavior. */
html:has(body.vikinger-theme) {
scrollbar-gutter: stable;
scrollbar-color: #615dfa #eaeaf5;
scrollbar-width: auto;
}
body.vikinger-theme::-webkit-scrollbar {
width: 12px;
}
body.vikinger-theme::-webkit-scrollbar-track {
background: #eaeaf5;
}
body.vikinger-theme::-webkit-scrollbar-thumb {
min-height: 48px;
border: 3px solid #eaeaf5;
border-radius: 999px;
background: #615dfa;
}
body.vikinger-theme::-webkit-scrollbar-thumb:hover {
background: #23d2e2;
}
/* Pages page: keep the filter controls inside the default theme area, using only the
* fields and actions already supplied by Sngine's pages template. */
body.vikinger-theme section.section-banner + .section-filters-bar.vikinger-pages-filters {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
max-width: 100%;
min-height: 96px;
padding: 0 28px;
}
body.vikinger-theme .vikinger-pages-filters > .section-filters-bar-actions:first-child {
display: flex;
align-items: center;
flex: 1 1 auto;
flex-wrap: wrap;
min-width: 0;
max-width: 100%;
gap: 12px;
padding-right: 0;
}
body.vikinger-theme .vikinger-pages-filters > .section-filters-bar-actions:first-child > .form {
display: flex;
align-items: center;
flex: 0 0 auto;
min-width: 0;
max-width: 100%;
width: auto;
}
body.vikinger-theme .vikinger-pages-filters .form-input.with-button {
flex: 0 0 240px;
width: 240px;
}
body.vikinger-theme .vikinger-pages-filters .form-input.with-button input {
display: block;
box-sizing: border-box;
width: 100%;
height: 48px;
margin: 0;
min-width: 0;
padding: 0 66px 0 16px;
border: 1px solid #dedeea;
border-radius: 12px;
background: #fff;
color: #3e3f5e;
font-family: Rajdhani, sans-serif;
font-size: .875rem;
font-weight: 700;
line-height: normal;
}
body.vikinger-theme .vikinger-pages-filters .form-input.with-button input:focus {
border-color: #615dfa;
box-shadow: 0 0 0 3px rgba(97, 93, 250, .12);
outline: 0;
}
body.vikinger-theme .vikinger-pages-filters .form-input.with-button .vikinger-pages-search-label {
display: none;
}
body.vikinger-theme .vikinger-pages-filters .form-input.with-button input::placeholder {
color: #adafca;
opacity: 1;
font-size: .875rem;
font-weight: 600;
}
body.vikinger-theme .vikinger-pages-filters .form-input.with-button .button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 54px;
min-width: 54px;
height: 48px;
padding: 0;
}
body.vikinger-theme .vikinger-pages-filters .form-select { margin-left: 16px; }
body.vikinger-theme .vikinger-pages-filters .vikinger-pages-category-filter { margin-left: 16px; }
body.vikinger-theme .vikinger-pages-filters .vikinger-pages-navigation-tabs {
display: flex;
flex: 0 0 auto;
height: 96px;
margin-left: 32px;
}
body.vikinger-theme .vikinger-pages-filters .vikinger-pages-navigation-tabs .filter-tab {
display: flex;
align-items: center;
justify-content: center;
min-width: 116px;
color: #adafca;
white-space: nowrap;
}
body.vikinger-theme .vikinger-pages-filters .vikinger-pages-navigation-tabs .filter-tab-text { color: inherit; }
body.vikinger-theme .vikinger-pages-filters .vikinger-pages-navigation-tabs .filter-tab:hover,
body.vikinger-theme .vikinger-pages-filters .vikinger-pages-navigation-tabs .filter-tab:focus-visible,
body.vikinger-theme .vikinger-pages-filters .vikinger-pages-navigation-tabs .filter-tab.active {
color: #3e3f5e;
outline: 0;
}
body.vikinger-theme .vikinger-pages-filters > .section-filters-bar-actions:last-child:not(:first-child) {
display: flex;
align-items: center;
flex: 0 0 auto;
width: auto !important;
height: 96px;
margin-left: 12px;
position: static !important;
}
body.vikinger-theme .vikinger-pages-filters .view-actions {
display: flex;
align-items: center;
}
body.vikinger-theme .vikinger-pages-location-filters {
display: flex;
align-items: center;
flex: 0 1 auto;
flex-wrap: wrap;
min-width: 0;
max-width: 100%;
gap: 8px;
margin-left: auto;
padding-left: 18px;
}
body.vikinger-theme .vikinger-pages-location-filter { position: relative; flex: 0 0 auto; min-width: 0; }
body.vikinger-theme .vikinger-pages-location-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
width: 148px;
max-width: 100%;
min-width: 0;
min-height: 42px;
padding: 0 10px;
border-radius: 9px;
color: #adafca;
font-size: .75rem;
font-weight: 700;
white-space: nowrap;
}
body.vikinger-theme .vikinger-pages-location-toggle:hover,
body.vikinger-theme .vikinger-pages-location-toggle:focus-visible,
body.vikinger-theme .vikinger-pages-location-toggle.show {
background: #f0efff;
color: #615dfa;
outline: 0;
}
body.vikinger-theme .vikinger-pages-location-toggle span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
body.vikinger-theme .vikinger-pages-location-menu {
width: 220px;
min-width: 220px;
max-width: calc(100vw - 32px);
padding: 8px;
border: 0;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(94, 92, 154, .16);
}
body.vikinger-theme .vikinger-pages-location-menu .js_scroller {
height: auto !important;
max-height: min(320px, 55vh);
overflow-x: hidden !important;
overflow-y: auto !important;
}
body.vikinger-theme .vikinger-pages-location-menu .dropdown-item {
min-height: 36px;
padding: 9px 10px;
border-radius: 8px;
color: #3e3f5e;
font-size: .75rem;
font-weight: 700;
}
body.vikinger-theme .vikinger-pages-location-menu .dropdown-item:hover,
body.vikinger-theme .vikinger-pages-location-menu .dropdown-item:focus-visible {
background: #f0efff;
color: #615dfa;
outline: 0;
}
body.vikinger-theme .vikinger-pages-category-filter { position: relative; flex: 0 0 auto; }
body.vikinger-theme .vikinger-pages-category-filter-placeholder {
width: 190px;
min-height: 48px;
visibility: hidden;
pointer-events: none;
}
body.vikinger-theme .vikinger-pages-category-toggle {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 190px;
min-height: 48px;
padding: 0 14px 0 16px;
border: 1px solid #dedeea;
border-radius: 12px;
background: #fff;
color: #3e3f5e;
font-size: .8125rem;
font-weight: 700;
text-align: left;
box-shadow: 0 5px 18px rgba(94, 92, 154, .08);
}
body.vikinger-theme .vikinger-pages-category-toggle:hover,
body.vikinger-theme .vikinger-pages-category-toggle:focus-visible,
body.vikinger-theme .vikinger-pages-category-toggle.show {
border-color: #615dfa;
background: #f0efff;
color: #615dfa;
outline: 0;
}
body.vikinger-theme .vikinger-pages-category-icon { order: 2; flex: 0 0 16px; width: 16px; height: 16px; fill: currentColor; transform: rotate(90deg); }
body.vikinger-theme .vikinger-pages-category-menu {
width: 256px;
min-width: 256px;
max-width: calc(100vw - 32px);
padding: 8px;
border: 0;
border-radius: 12px;
background: #fff;
box-shadow: 0 10px 30px rgba(94, 92, 154, .16);
}
body.vikinger-theme .vikinger-pages-category-menu .js_scroller { height: auto !important; max-height: min(320px, 55vh); overflow-x: hidden !important; overflow-y: auto !important; }
body.vikinger-theme .vikinger-pages-category-menu .dropdown-item { min-height: 40px; padding: 10px 12px; border-radius: 9px; color: #3e3f5e; font-size: .8125rem; font-weight: 700; line-height: 1.25; }
body.vikinger-theme .vikinger-pages-category-menu .dropdown-item:hover,
body.vikinger-theme .vikinger-pages-category-menu .dropdown-item:focus-visible,
body.vikinger-theme .vikinger-pages-category-menu .dropdown-item.active { background: #f0efff; color: #615dfa; outline: 0; }
/* The page grid uses Vikinger's original user-preview component directly.
* Keep this integration hook-free so the original card spacing, dimensions,
* typography, responsive grid and button treatment come from styles.min.css. */
body.vikinger-theme.night-mode .vikinger-pages-category-toggle,
body.vikinger-theme.night-mode .vikinger-pages-category-menu { border-color: #3a4a57; background: #26323b; color: #d2e0eb; }
body.vikinger-theme.night-mode .vikinger-pages-category-menu .dropdown-item { color: #d2e0eb; }
body.vikinger-theme.night-mode .vikinger-pages-category-menu .dropdown-item:hover,
body.vikinger-theme.night-mode .vikinger-pages-category-menu .dropdown-item:focus-visible,
body.vikinger-theme.night-mode .vikinger-pages-category-menu .dropdown-item.active { background: #34424d; color: #fff; }
@media screen and (max-width: 1600px) {
body.vikinger-theme section.section-banner + .section-filters-bar.vikinger-pages-filters {
min-height: 0;
height: auto;
padding: 18px 28px;
}
body.vikinger-theme .vikinger-pages-filters > .section-filters-bar-actions:first-child {
height: auto;
flex-wrap: wrap;
gap: 8px 12px;
}
body.vikinger-theme .vikinger-pages-filters .vikinger-pages-navigation-tabs { height: 56px; }
body.vikinger-theme .vikinger-pages-location-filters {
width: 100%;
margin-left: 0;
padding-left: 0;
justify-content: flex-end;
}
}
@media screen and (max-width: 1365px) {
body.vikinger-theme section.section-banner + .section-filters-bar.vikinger-pages-filters { display: flex; align-items: stretch; padding: 32px 28px; }
body.vikinger-theme .vikinger-pages-filters > .section-filters-bar-actions:first-child { width: 100%; padding-right: 0; flex-wrap: wrap; gap: 12px; }
body.vikinger-theme .vikinger-pages-filters > .section-filters-bar-actions:first-child > .form { min-width: 0; }
body.vikinger-theme .vikinger-pages-filters .vikinger-pages-navigation-tabs { margin-left: 0; }
body.vikinger-theme .vikinger-pages-location-filters { width: 100%; margin-left: 0; padding-left: 0; justify-content: flex-end; }
body.vikinger-theme .vikinger-pages-filters > .section-filters-bar-actions:last-child:not(:first-child) { width: 100% !important; height: auto; margin-top: 24px; margin-left: 0; position: static !important; justify-content: center; }
}
@media screen and (max-width: 700px) {
body.vikinger-theme .vikinger-pages-filters > .section-filters-bar-actions:first-child { flex-wrap: wrap; gap: 16px; }
body.vikinger-theme .vikinger-pages-filters > .section-filters-bar-actions:first-child > .form {
flex: 1 1 100%;
flex-wrap: wrap;
width: 100%;
gap: 12px;
}
body.vikinger-theme .vikinger-pages-filters .form-input.with-button { flex: 1 1 220px; width: auto; }
body.vikinger-theme .vikinger-pages-filters .vikinger-pages-category-filter { margin-left: 0; }
body.vikinger-theme .vikinger-pages-location-filters { width: 100%; margin-left: 0; padding-left: 0; justify-content: flex-end; }
body.vikinger-theme .vikinger-pages-filters .vikinger-pages-navigation-tabs { width: 100%; height: 56px; margin-left: 0; overflow-x: auto; }
body.vikinger-theme .vikinger-pages-filters .vikinger-pages-navigation-tabs .filter-tab { min-width: 0; flex: 1 0 auto; padding: 0 12px; }
}
/* Keep the page controls in two clear rows: search/category/navigation,
* followed by location filters and the view selector. */
@media screen and (min-width: 1366px) {
body.vikinger-theme section.section-banner + .section-filters-bar.vikinger-pages-filters {
display: grid;
grid-template-columns: minmax(220px, 240px) 190px minmax(0, 1fr);
grid-template-areas:
"search category navigation"
"location location views";
align-items: center;
justify-content: stretch;
gap: 12px 16px;
min-height: 0;
height: auto;
padding: 18px 28px;
}
body.vikinger-theme .vikinger-pages-filters > .section-filters-bar-actions:first-child {
display: contents;
}
body.vikinger-theme .vikinger-pages-filters > .section-filters-bar-actions:first-child > .form {
grid-area: search;
width: 100%;
min-width: 0;
}
body.vikinger-theme .vikinger-pages-filters .form-input.with-button {
flex: 1 1 auto;
width: 100%;
min-width: 0;
}
body.vikinger-theme .vikinger-pages-filters .vikinger-pages-category-filter {
grid-area: category;
width: 100%;
margin-left: 0;
}
body.vikinger-theme .vikinger-pages-filters .vikinger-pages-category-toggle {
width: 100%;
}
body.vikinger-theme .vikinger-pages-filters .vikinger-pages-navigation-tabs {
grid-area: navigation;
width: 100%;
height: 56px;
min-width: 0;
margin-left: 0;
}
body.vikinger-theme .vikinger-pages-filters .vikinger-pages-location-filters {
grid-area: location;
width: auto;
margin-left: 0;
padding-left: 0;
justify-content: flex-start;
}
body.vikinger-theme .vikinger-pages-filters > .section-filters-bar-actions.pages-grid-view-actions:last-child:not(:first-child) {
grid-area: views;
display: flex;
align-items: center;
justify-self: end;
width: auto !important;
height: auto;
margin: 0;
padding: 0;
position: static !important;
}
}
@media screen and (max-width: 1365px) {
body.vikinger-theme section.section-banner + .section-filters-bar.vikinger-pages-filters {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 12px;
}
body.vikinger-theme .vikinger-pages-filters > .section-filters-bar-actions:first-child {
display: flex;
width: 100%;
}
body.vikinger-theme .vikinger-pages-filters > .section-filters-bar-actions.pages-grid-view-actions:last-child:not(:first-child) {
width: 100% !important;
height: auto;
margin: 0;
padding: 0;
position: static !important;
justify-content: flex-end;
}
}
/* Phone layout: stack the primary controls, keep navigation swipeable, and
* group the compact location and view controls at the bottom of the panel. */
@media screen and (max-width: 700px) {
body.vikinger-theme section.section-banner + .section-filters-bar.vikinger-pages-filters {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 10px;
padding: 14px 16px;
}
body.vikinger-theme .vikinger-pages-filters > .section-filters-bar-actions:first-child {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 10px;
width: 100%;
height: auto;
}
body.vikinger-theme .vikinger-pages-filters > .section-filters-bar-actions:first-child > .form {
display: block;
flex: 0 0 auto;
width: 100%;
max-width: none;
margin: 0;
}
body.vikinger-theme .vikinger-pages-filters .form-input.with-button {
width: 100%;
max-width: none;
}
body.vikinger-theme .vikinger-pages-filters .vikinger-pages-category-filter,
body.vikinger-theme .vikinger-pages-filters .vikinger-pages-category-toggle {
width: 100%;
min-width: 0;
margin: 0;
}
body.vikinger-theme .vikinger-pages-filters .vikinger-pages-navigation-tabs {
display: flex;
width: 100%;
height: 48px;
min-height: 48px;
margin: 0;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
body.vikinger-theme .vikinger-pages-filters .vikinger-pages-navigation-tabs::-webkit-scrollbar {
display: none;
}
body.vikinger-theme .vikinger-pages-filters .vikinger-pages-navigation-tabs .filter-tab {
flex: 0 0 auto;
min-width: 0;
padding: 0 14px;
white-space: nowrap;
}
body.vikinger-theme .vikinger-pages-filters .vikinger-pages-location-filters {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
width: 100%;
gap: 8px;
margin: 0;
padding: 0;
}
body.vikinger-theme .vikinger-pages-filters .vikinger-pages-location-filter,
body.vikinger-theme .vikinger-pages-filters .vikinger-pages-location-toggle {
width: 100%;
min-width: 0;
max-width: 100%;
}
body.vikinger-theme .vikinger-pages-filters > .section-filters-bar-actions.pages-grid-view-actions:last-child:not(:first-child) {
display: flex;
align-items: center;
justify-content: flex-end;
width: 100% !important;
height: auto;
margin: 0;
padding: 8px 0 0;
border-top: 1px solid #eaeaf5;
position: static !important;
}
body.vikinger-theme .vikinger-pages-filters .pages-grid-view-actions .view-actions {
gap: 4px;
}
body.vikinger-theme .vikinger-pages-filters .pages-grid-view-actions .view-action {
width: 40px;
height: 40px;
}
body.vikinger-theme section.section-banner + .section-filters-bar.vikinger-pages-filters {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"search views"
"category category"
"navigation navigation"
"location location";
align-items: center;
gap: 10px 8px;
}
body.vikinger-theme .vikinger-pages-filters > .section-filters-bar-actions:first-child {
display: contents;
}
body.vikinger-theme .vikinger-pages-filters > .section-filters-bar-actions:first-child > .form {
grid-area: search;
width: 100%;
min-width: 0;
}
body.vikinger-theme .vikinger-pages-filters .vikinger-pages-category-filter {
grid-area: category;
}
body.vikinger-theme .vikinger-pages-filters .vikinger-pages-navigation-tabs {
grid-area: navigation;
}
body.vikinger-theme .vikinger-pages-filters .vikinger-pages-location-filters {
grid-area: location;
}
body.vikinger-theme .vikinger-pages-filters > .section-filters-bar-actions.pages-grid-view-actions:last-child:not(:first-child) {
grid-area: views;
justify-self: end;
width: auto !important;
margin: 0;
padding: 0;
border: 0;
}
body.vikinger-theme .vikinger-pages-filters .pages-grid-view-actions .view-actions {
width: auto;
gap: 2px;
}
body.vikinger-theme .vikinger-pages-filters .pages-grid-view-actions .view-action {
flex: 0 0 40px;
width: 40px;
height: 40px;
margin: 0;
}
}
@media screen and (max-width: 380px) {
body.vikinger-theme section.section-banner + .section-filters-bar.vikinger-pages-filters {
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
"search"
"views"
"category"
"navigation"
"location";
}
body.vikinger-theme .vikinger-pages-filters > .section-filters-bar-actions.pages-grid-view-actions:last-child:not(:first-child) {
justify-self: end;
}
}
/* Suggested pages and groups widgets
*
* These lists are rendered by Sngine's legacy feed partials, while the
* surrounding newsfeed uses Vikinger's card system. Keep the bridge scoped to
* these widgets so the same partials remain unchanged everywhere else. */
body.vikinger-theme :is(.vikinger-suggested-pages-widget, .vikinger-suggested-groups-widget, .vikinger-suggested-friends-widget) {
overflow: hidden;
padding: 0;
border: 1px solid #e7e8f4;
box-shadow: 0 10px 26px rgba(53, 55, 101, .06);
}
body.vikinger-theme :is(.vikinger-suggested-pages-widget, .vikinger-suggested-groups-widget, .vikinger-suggested-friends-widget) .vikinger-widget-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
min-width: 0;
padding: 24px 28px 18px;
border-bottom: 1px solid #eaeaf5;
}
/* Center the full People directory wrapper, not only its inner column. This
* structural selector also covers Smarty's already-compiled people template. */
body.vikinger-theme .sg-offcanvas:has(> .row > .sg-offcanvas-mainbar > section.section-banner) {
box-sizing: border-box;
width: 100%;
max-width: 1184px;
margin-right: auto;
margin-left: auto;
}
body.vikinger-theme .sg-offcanvas:has(> .row > .sg-offcanvas-mainbar > section.section-banner) > .row > .sg-offcanvas-mainbar {
box-sizing: border-box;
width: 100%;
max-width: 100%;
position: relative;
left: clamp(0px, calc((100vw - 1184px) / 2 + 28px), 180px);
}
@media screen and (max-width: 767.98px) {
body.vikinger-theme .sg-offcanvas:has(> .row > .sg-offcanvas-mainbar > section.section-banner) > .row > .sg-offcanvas-mainbar {
left: 0;
}
}
body.vikinger-theme .vikinger-groups-filters .section-menu.vikinger-groups-sort-tabs,
body.vikinger-theme .vikinger-pages-filters .section-menu.vikinger-pages-navigation-tabs {
display: flex;
flex: 0 1 auto;
align-items: stretch;
width: max-content;
max-width: 100%;
height: 80px;
margin-left: 20px;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
}
body.vikinger-theme .vikinger-groups-filters .section-menu.vikinger-groups-sort-tabs::-webkit-scrollbar,
body.vikinger-theme .vikinger-pages-filters .section-menu.vikinger-pages-navigation-tabs::-webkit-scrollbar {
display: none;
}
body.vikinger-theme .vikinger-groups-filters .section-menu.vikinger-groups-sort-tabs > .section-menu-item,
body.vikinger-theme .vikinger-pages-filters .section-menu.vikinger-pages-navigation-tabs > .section-menu-item {
float: none;
flex: 0 0 104px;
width: 104px;
height: 80px;
}
body.vikinger-theme .vikinger-groups-filters .section-menu.vikinger-groups-sort-tabs > .section-menu-item .section-menu-item-icon,
body.vikinger-theme .vikinger-pages-filters .section-menu.vikinger-pages-navigation-tabs > .section-menu-item .section-menu-item-icon {
top: 30px;
}
body.vikinger-theme .vikinger-pages-filters .vikinger-pages-navigation-tabs .section-menu-item-icon.fa-rss {
width: 20px;
height: 20px;
margin-left: -10px;
color: #adafca;
font-size: 16px;
line-height: 20px;
text-align: center;
}
body.vikinger-theme .vikinger-pages-filters .vikinger-pages-navigation-tabs .section-menu-item.active .section-menu-item-icon.fa-rss {
color: #3e3f5e;
}
@media screen and (max-width: 1365px) {
body.vikinger-theme .vikinger-groups-filters .section-menu.vikinger-groups-sort-tabs,
body.vikinger-theme .vikinger-pages-filters .section-menu.vikinger-pages-navigation-tabs {
margin-left: 0;
}
}
@media screen and (max-width: 700px) {
body.vikinger-theme .vikinger-groups-filters .section-menu.vikinger-groups-sort-tabs,
body.vikinger-theme .vikinger-pages-filters .section-menu.vikinger-pages-navigation-tabs {
width: 100%;
height: 56px;
min-height: 56px;
}
body.vikinger-theme .vikinger-groups-filters .section-menu.vikinger-groups-sort-tabs > .section-menu-item,
body.vikinger-theme .vikinger-pages-filters .section-menu.vikinger-pages-navigation-tabs > .section-menu-item {
flex-basis: 96px;
width: 96px;
height: 56px;
}
body.vikinger-theme .vikinger-groups-filters .section-menu.vikinger-groups-sort-tabs > .section-menu-item .section-menu-item-icon,
body.vikinger-theme .vikinger-pages-filters .section-menu.vikinger-pages-navigation-tabs > .section-menu-item .section-menu-item-icon {
top: 17px;
}
body.vikinger-theme .vikinger-groups-filters .section-menu.vikinger-groups-sort-tabs > .section-menu-item::before,
body.vikinger-theme .vikinger-groups-filters .section-menu.vikinger-groups-sort-tabs > .section-menu-item::after,
body.vikinger-theme .vikinger-pages-filters .section-menu.vikinger-pages-navigation-tabs > .section-menu-item::before,
body.vikinger-theme .vikinger-pages-filters .section-menu.vikinger-pages-navigation-tabs > .section-menu-item::after {
top: 18px;
}
}
body.vikinger-theme :is(.vikinger-suggested-pages-widget, .vikinger-suggested-groups-widget, .vikinger-suggested-friends-widget) .widget-box-title {
min-width: 0;
padding: 0;
color: #3e3f5e;
font-size: .95rem;
font-weight: 700;
line-height: 1.25;
}
body.vikinger-theme :is(.vikinger-suggested-pages-widget, .vikinger-suggested-groups-widget, .vikinger-suggested-friends-widget) .vikinger-widget-heading > a {
flex: 0 0 auto;
color: #8f91ac;
font-size: .75rem;
font-weight: 700;
line-height: 1.4;
white-space: nowrap;
transition: color .2s ease-in-out;
}
body.vikinger-theme :is(.vikinger-suggested-pages-widget, .vikinger-suggested-groups-widget, .vikinger-suggested-friends-widget) .vikinger-widget-heading > a:hover,
body.vikinger-theme :is(.vikinger-suggested-pages-widget, .vikinger-suggested-groups-widget, .vikinger-suggested-friends-widget) .vikinger-widget-heading > a:focus-visible {
color: #615dfa;
outline: 0;
}
body.vikinger-theme :is(.vikinger-suggested-pages-widget, .vikinger-suggested-groups-widget, .vikinger-suggested-friends-widget) .vikinger-native-list {
min-width: 0;
padding: 6px 12px 12px;
}
body.vikinger-theme :is(.vikinger-suggested-pages-widget, .vikinger-suggested-groups-widget, .vikinger-suggested-friends-widget) .vikinger-native-list > ul {
margin: 0;
padding: 0;
}
body.vikinger-theme :is(.vikinger-suggested-pages-widget, .vikinger-suggested-groups-widget, .vikinger-suggested-friends-widget) .vikinger-native-list .feeds-item {
margin: 0;
padding: 0;
border-top: 1px solid #eaeaf5;
}
body.vikinger-theme :is(.vikinger-suggested-pages-widget, .vikinger-suggested-groups-widget, .vikinger-suggested-friends-widget) .vikinger-native-list .feeds-item:first-child {
border-top: 0;
}
body.vikinger-theme :is(.vikinger-suggested-pages-widget, .vikinger-suggested-groups-widget, .vikinger-suggested-friends-widget) .vikinger-native-list .data-container {
display: flex;
align-items: center;
width: 100%;
min-width: 0;
min-height: 68px;
margin: 0;
padding: 10px 8px;
border-radius: 10px;
background: transparent;
color: #3e3f5e;
transition: background-color .2s ease-in-out, box-shadow .2s ease-in-out;
}
body.vikinger-theme :is(.vikinger-suggested-pages-widget, .vikinger-suggested-groups-widget, .vikinger-suggested-friends-widget) .vikinger-native-list .data-container:hover,
body.vikinger-theme :is(.vikinger-suggested-pages-widget, .vikinger-suggested-groups-widget, .vikinger-suggested-friends-widget) .vikinger-native-list .data-container:focus-within {
background: #f5f4ff;
box-shadow: 0 4px 14px rgba(53, 55, 101, .06);
}
body.vikinger-theme :is(.vikinger-suggested-pages-widget, .vikinger-suggested-groups-widget, .vikinger-suggested-friends-widget) .vikinger-native-list .data-avatar {
display: block;
flex: 0 0 46px;
width: 46px;
height: 46px;
margin: 0 12px 0 0;
border-radius: 50%;
overflow: hidden;
}
body.vikinger-theme :is(.vikinger-suggested-pages-widget, .vikinger-suggested-groups-widget, .vikinger-suggested-friends-widget) .vikinger-native-list .data-avatar > img {
display: block;
width: 46px;
height: 46px;
border-radius: 50%;
object-fit: cover;
}
body.vikinger-theme :is(.vikinger-suggested-pages-widget, .vikinger-suggested-groups-widget, .vikinger-suggested-friends-widget) .vikinger-native-list .data-content {
display: flex;
align-items: center;
flex: 1 1 auto;
min-width: 0;
gap: 12px;
margin: 0;
padding: 0;
}
body.vikinger-theme :is(.vikinger-suggested-pages-widget, .vikinger-suggested-groups-widget, .vikinger-suggested-friends-widget) .vikinger-native-list .data-content > div:not(.float-end) {
flex: 1 1 auto;
min-width: 0;
}
body.vikinger-theme :is(.vikinger-suggested-pages-widget, .vikinger-suggested-groups-widget, .vikinger-suggested-friends-widget) .vikinger-native-list .data-content > .float-end {
order: 2;
float: none !important;
flex: 0 0 auto;
margin: 0;
}
body.vikinger-theme :is(.vikinger-suggested-pages-widget, .vikinger-suggested-groups-widget, .vikinger-suggested-friends-widget) .vikinger-native-list .data-content .name {
display: inline-block;
max-width: calc(100% - 22px);
overflow: hidden;
vertical-align: middle;
text-overflow: ellipsis;
white-space: nowrap;
}
body.vikinger-theme :is(.vikinger-suggested-pages-widget, .vikinger-suggested-groups-widget, .vikinger-suggested-friends-widget) .vikinger-native-list .data-content .name a {
color: #3e3f5e;
font-size: .875rem;
font-weight: 700;
line-height: 1.3;
transition: color .2s ease-in-out;
}
body.vikinger-theme :is(.vikinger-suggested-pages-widget, .vikinger-suggested-groups-widget, .vikinger-suggested-friends-widget) .vikinger-native-list .data-content .name a:hover,
body.vikinger-theme :is(.vikinger-suggested-pages-widget, .vikinger-suggested-groups-widget, .vikinger-suggested-friends-widget) .vikinger-native-list .data-content .name a:focus-visible {
color: #615dfa;
outline: 0;
}
body.vikinger-theme :is(.vikinger-suggested-pages-widget, .vikinger-suggested-groups-widget, .vikinger-suggested-friends-widget) .vikinger-native-list .data-content .verified-badge {
display: inline-flex;
width: 18px;
height: 18px;
margin: 0 0 0 4px;
vertical-align: middle;
}
body.vikinger-theme :is(.vikinger-suggested-pages-widget, .vikinger-suggested-groups-widget, .vikinger-suggested-friends-widget) .vikinger-native-list .data-content .verified-badge svg {
width: 18px;
height: 18px;
}
body.vikinger-theme :is(.vikinger-suggested-pages-widget, .vikinger-suggested-groups-widget, .vikinger-suggested-friends-widget) .vikinger-native-list .data-content > div:not(.float-end) > div {
margin-top: 3px;
color: #adafca;
font-size: .75rem;
font-weight: 500;
line-height: 1.25;
}
body.vikinger-theme :is(.vikinger-suggested-pages-widget, .vikinger-suggested-groups-widget, .vikinger-suggested-friends-widget) .vikinger-native-list .data-content .btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
min-width: 34px;
padding: 0;
border: 1px solid #e2e1f2;
border-radius: 10px;
background: #fff;
box-shadow: none;
color: #615dfa;
transition: background-color .2s ease-in-out, border-color .2s ease-in-out, color .2s ease-in-out, transform .2s ease-in-out;
}
body.vikinger-theme :is(.vikinger-suggested-pages-widget, .vikinger-suggested-groups-widget, .vikinger-suggested-friends-widget) .vikinger-native-list .data-content .btn:hover,
body.vikinger-theme :is(.vikinger-suggested-pages-widget, .vikinger-suggested-groups-widget, .vikinger-suggested-friends-widget) .vikinger-native-list .data-content .btn:focus-visible {
border-color: #615dfa;
background: #615dfa;
color: #fff;
outline: 0;
transform: translateY(-1px);
}
body.vikinger-theme :is(.vikinger-suggested-pages-widget, .vikinger-suggested-groups-widget, .vikinger-suggested-friends-widget) .vikinger-native-list .data-content .btn svg {
width: 17px;
height: 17px;
fill: currentColor;
}
body.vikinger-theme .vikinger-suggested-pages-widget .vikinger-native-list .data-content .js_like-page .svg-container.main-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px !important;
height: 18px !important;
line-height: 0;
}
body.vikinger-theme .vikinger-suggested-pages-widget .vikinger-native-list .data-content .js_like-page .svg-container.main-icon > svg {
display: block;
width: 18px;
height: 18px;
}
body.vikinger-theme .vikinger-suggested-pages-widget .vikinger-native-list .data-content .js_like-page .svg-container.main-icon > svg path {
fill: currentColor !important;
}
body.vikinger-theme .vikinger-suggested-pages-widget .vikinger-native-list .data-content .js_unlike-page {
width: auto;
min-width: 34px;
padding: 0 10px;
gap: 5px;
border-color: #f4cbd0;
background: #fff3f4;
color: #e74958;
}
body.vikinger-theme .vikinger-suggested-pages-widget .vikinger-native-list .data-content .js_unlike-page:hover,
body.vikinger-theme .vikinger-suggested-pages-widget .vikinger-native-list .data-content .js_unlike-page:focus-visible {
border-color: #e74958;
background: #e74958;
color: #fff;
}
body.vikinger-theme .vikinger-suggested-friends-widget .vikinger-native-list .data-content .user-connection-icon-only.js_friend-add > i {
margin: 0 !important;
font-size: 1rem;
}
body.vikinger-theme .vikinger-suggested-friends-widget .vikinger-native-list .data-content .user-connection-icon-only.js_friend-add > .connection-state-symbol {
display: none !important;
}
body.vikinger-theme.night-mode :is(.vikinger-suggested-pages-widget, .vikinger-suggested-groups-widget, .vikinger-suggested-friends-widget) {
border-color: #34424d;
background: #26323b;
box-shadow: 0 10px 26px rgba(0, 0, 0, .18);
}
body.vikinger-theme.night-mode :is(.vikinger-suggested-pages-widget, .vikinger-suggested-groups-widget, .vikinger-suggested-friends-widget) .vikinger-widget-heading,
body.vikinger-theme.night-mode :is(.vikinger-suggested-pages-widget, .vikinger-suggested-groups-widget, .vikinger-suggested-friends-widget) .vikinger-native-list .feeds-item {
border-color: #34424d;
}
body.vikinger-theme.night-mode :is(.vikinger-suggested-pages-widget, .vikinger-suggested-groups-widget, .vikinger-suggested-friends-widget) .widget-box-title,
body.vikinger-theme.night-mode :is(.vikinger-suggested-pages-widget, .vikinger-suggested-groups-widget, .vikinger-suggested-friends-widget) .vikinger-native-list .data-content .name a {
color: #fff;
}
body.vikinger-theme.night-mode :is(.vikinger-suggested-pages-widget, .vikinger-suggested-groups-widget, .vikinger-suggested-friends-widget) .vikinger-widget-heading > a {
color: #c1d4e3;
}
body.vikinger-theme.night-mode :is(.vikinger-suggested-pages-widget, .vikinger-suggested-groups-widget, .vikinger-suggested-friends-widget) .vikinger-native-list .data-container:hover,
body.vikinger-theme.night-mode :is(.vikinger-suggested-pages-widget, .vikinger-suggested-groups-widget, .vikinger-suggested-friends-widget) .vikinger-native-list .data-container:focus-within {
background: #34424d;
box-shadow: none;
}
body.vikinger-theme.night-mode :is(.vikinger-suggested-pages-widget, .vikinger-suggested-groups-widget, .vikinger-suggested-friends-widget) .vikinger-native-list .data-content > div:not(.float-end) > div {
color: #8f9bb5;
}
body.vikinger-theme.night-mode :is(.vikinger-suggested-pages-widget, .vikinger-suggested-groups-widget, .vikinger-suggested-friends-widget) .vikinger-native-list .data-content .btn {
border-color: #465765;
background: #2d3b45;
color: #c1d4e3;
}
body.vikinger-theme.night-mode .vikinger-suggested-pages-widget .vikinger-native-list .data-content .js_unlike-page {
border-color: #70424a;
background: #4b3037;
color: #ff9ba4;
}
body.vikinger-theme.night-mode :is(.vikinger-suggested-pages-widget, .vikinger-suggested-groups-widget, .vikinger-suggested-friends-widget) .vikinger-native-list .data-content .btn:hover,
body.vikinger-theme.night-mode :is(.vikinger-suggested-pages-widget, .vikinger-suggested-groups-widget, .vikinger-suggested-friends-widget) .vikinger-native-list .data-content .btn:focus-visible {
border-color: #615dfa;
background: #615dfa;
color: #fff;
}
body.vikinger-theme.night-mode .vikinger-suggested-pages-widget .vikinger-native-list .data-content .js_unlike-page:hover,
body.vikinger-theme.night-mode .vikinger-suggested-pages-widget .vikinger-native-list .data-content .js_unlike-page:focus-visible {
border-color: #e74958;
background: #e74958;
color: #fff;
}
@media screen and (max-width: 767.98px) {
body.vikinger-theme :is(.vikinger-suggested-pages-widget, .vikinger-suggested-groups-widget, .vikinger-suggested-friends-widget) .vikinger-widget-heading {
padding: 20px 20px 16px;
}
body.vikinger-theme :is(.vikinger-suggested-pages-widget, .vikinger-suggested-groups-widget, .vikinger-suggested-friends-widget) .vikinger-native-list {
padding: 4px 8px 8px;
}
}
@media screen and (max-width: 480px) {
body.vikinger-theme :is(.vikinger-suggested-pages-widget, .vikinger-suggested-groups-widget, .vikinger-suggested-friends-widget) .vikinger-widget-heading {
gap: 10px;
padding-right: 16px;
padding-left: 16px;
}
body.vikinger-theme :is(.vikinger-suggested-pages-widget, .vikinger-suggested-groups-widget, .vikinger-suggested-friends-widget) .vikinger-native-list .data-avatar,
body.vikinger-theme :is(.vikinger-suggested-pages-widget, .vikinger-suggested-groups-widget, .vikinger-suggested-friends-widget) .vikinger-native-list .data-avatar > img {
width: 42px;
height: 42px;
}
body.vikinger-theme :is(.vikinger-suggested-pages-widget, .vikinger-suggested-groups-widget, .vikinger-suggested-friends-widget) .vikinger-native-list .data-avatar {
flex-basis: 42px;
margin-right: 10px;
}
body.vikinger-theme :is(.vikinger-suggested-pages-widget, .vikinger-suggested-groups-widget, .vikinger-suggested-friends-widget) .vikinger-native-list .data-content {
gap: 8px;
}
}
@media (prefers-reduced-motion: reduce) {
body.vikinger-theme :is(.vikinger-suggested-pages-widget, .vikinger-suggested-groups-widget, .vikinger-suggested-friends-widget) .vikinger-widget-heading > a,
body.vikinger-theme :is(.vikinger-suggested-pages-widget, .vikinger-suggested-groups-widget, .vikinger-suggested-friends-widget) .vikinger-native-list .data-container,
body.vikinger-theme :is(.vikinger-suggested-pages-widget, .vikinger-suggested-groups-widget, .vikinger-suggested-friends-widget) .vikinger-native-list .data-content .name a,
body.vikinger-theme :is(.vikinger-suggested-pages-widget, .vikinger-suggested-groups-widget, .vikinger-suggested-friends-widget) .vikinger-native-list .data-content .btn {
transition: none;
}
}
/* Promoted pages widget */
body.vikinger-theme .vikinger-promoted-widget {
overflow: hidden;
padding: 0;
border: 1px solid #e7e8f4;
box-shadow: 0 10px 26px rgba(53, 55, 101, .06);
}
body.vikinger-theme .vikinger-promoted-widget .vikinger-widget-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
min-width: 0;
padding: 24px 28px 18px;
border-bottom: 1px solid #eaeaf5;
}
body.vikinger-theme .vikinger-promoted-widget .widget-box-title {
min-width: 0;
margin: 0;
padding: 0;
color: #3e3f5e;
font-size: .95rem;
font-weight: 700;
line-height: 1.25;
}
body.vikinger-theme .vikinger-promoted-widget .vikinger-widget-heading > a {
flex: 0 0 auto;
color: #8f91ac;
font-size: .75rem;
font-weight: 700;
line-height: 1.4;
white-space: nowrap;
transition: color .2s ease-in-out;
}
body.vikinger-theme .vikinger-promoted-widget .vikinger-widget-heading > a:hover,
body.vikinger-theme .vikinger-promoted-widget .vikinger-widget-heading > a:focus-visible {
color: #615dfa;
outline: 0;
}
body.vikinger-theme .vikinger-promoted-widget .vikinger-promoted-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 4px;
min-width: 0;
padding: 6px 12px 12px;
}
body.vikinger-theme .vikinger-promoted-widget .vikinger-promoted-item {
display: flex;
align-items: center;
width: 100%;
min-width: 0;
min-height: 68px;
margin: 0;
padding: 10px 8px;
border-radius: 10px;
color: #3e3f5e;
text-decoration: none;
transition: background-color .2s ease-in-out, box-shadow .2s ease-in-out;
}
body.vikinger-theme .vikinger-promoted-widget .vikinger-promoted-item:hover,
body.vikinger-theme .vikinger-promoted-widget .vikinger-promoted-item:focus-visible {
background: #f5f4ff;
box-shadow: 0 4px 14px rgba(53, 55, 101, .06);
outline: 0;
}
body.vikinger-theme .vikinger-promoted-widget .vikinger-promoted-item > img {
display: block;
flex: 0 0 46px;
width: 46px;
height: 46px;
margin-right: 12px;
border-radius: 50%;
object-fit: cover;
}
body.vikinger-theme .vikinger-promoted-widget .vikinger-promoted-item .name {
min-width: 0;
overflow: hidden;
color: #3e3f5e;
font-size: .875rem;
font-weight: 700;
line-height: 1.3;
text-overflow: ellipsis;
white-space: nowrap;
transition: color .2s ease-in-out;
}
body.vikinger-theme .vikinger-promoted-widget .vikinger-promoted-item:hover .name,
body.vikinger-theme .vikinger-promoted-widget .vikinger-promoted-item:focus-visible .name {
color: #615dfa;
}
body.vikinger-theme.night-mode .vikinger-promoted-widget {
border-color: #34424d;
background: #26323b;
box-shadow: 0 10px 26px rgba(0, 0, 0, .18);
}
body.vikinger-theme.night-mode .vikinger-promoted-widget .vikinger-widget-heading {
border-color: #34424d;
}
body.vikinger-theme.night-mode .vikinger-promoted-widget .widget-box-title,
body.vikinger-theme.night-mode .vikinger-promoted-widget .vikinger-promoted-item .name {
color: #fff;
}
body.vikinger-theme.night-mode .vikinger-promoted-widget .vikinger-widget-heading > a {
color: #c1d4e3;
}
body.vikinger-theme.night-mode .vikinger-promoted-widget .vikinger-promoted-item:hover,
body.vikinger-theme.night-mode .vikinger-promoted-widget .vikinger-promoted-item:focus-visible {
background: #34424d;
box-shadow: none;
}
@media screen and (max-width: 767.98px) {
body.vikinger-theme .vikinger-promoted-widget .vikinger-widget-heading {
padding: 20px 20px 16px;
}
body.vikinger-theme .vikinger-promoted-widget .vikinger-promoted-grid {
padding: 4px 8px 8px;
}
}
@media screen and (max-width: 480px) {
body.vikinger-theme .vikinger-promoted-widget .vikinger-widget-heading {
gap: 10px;
padding-right: 16px;
padding-left: 16px;
}
body.vikinger-theme .vikinger-promoted-widget .vikinger-promoted-item > img {
flex-basis: 42px;
width: 42px;
height: 42px;
margin-right: 10px;
}
}
@media (prefers-reduced-motion: reduce) {
body.vikinger-theme .vikinger-promoted-widget .vikinger-widget-heading > a,
body.vikinger-theme .vikinger-promoted-widget .vikinger-promoted-item,
body.vikinger-theme .vikinger-promoted-widget .vikinger-promoted-item .name {
transition: none;
}
}
/* Profile hover cards: echo the clean cover/avatar hierarchy of page cards. */
body.vikinger-theme .user-popover-wrapper {
width: 340px;
min-height: 0;
max-height: calc(100vh - 16px);
overflow-y: auto;
overscroll-behavior: contain;
z-index: 99999;
}
body.vikinger-theme .user-popover-content {
width: 320px;
overflow: hidden;
border: 1px solid #eaeaf5;
border-radius: 12px;
background: #fff;
box-shadow: 0 12px 36px rgba(44, 42, 96, .18);
color: #3e3f5e;
z-index: 999999;
}
body.vikinger-theme .user-popover-content .user-card {
position: relative;
min-height: 0;
padding-top: 1px;
background: #fff;
}
body.vikinger-theme .user-popover-content .user-card-cover {
height: 108px;
background-color: #615dfa;
background-position: center;
background-size: cover;
position: relative;
}
body.vikinger-theme .user-popover-content .user-card-cover::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(26, 24, 69, .02), rgba(26, 24, 69, .3));
}
body.vikinger-theme .user-popover-content .user-card-avatar {
width: 88px;
height: 88px;
margin: -44px auto 10px;
position: relative;
z-index: 1;
border: 4px solid #fff;
border-radius: 50%;
background: #fff;
box-shadow: 0 4px 14px rgba(44, 42, 96, .16);
}
body.vikinger-theme .user-popover-content .user-card-avatar img {
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
body.vikinger-theme .user-popover-content .user-card-info {
padding: 0 20px 17px;
text-align: center;
}
body.vikinger-theme .user-popover-content .user-card-info .name {
display: inline-block;
max-width: 100%;
color: #3e3f5e;
font-family: Rajdhani, sans-serif;
font-size: 1.125rem;
font-weight: 700;
line-height: 1.25;
overflow-wrap: anywhere;
}
body.vikinger-theme .user-popover-content .user-card-info .name:hover,
body.vikinger-theme .user-popover-content .user-card-info .name:focus-visible {
color: #615dfa;
}
body.vikinger-theme .user-popover-content .user-card-info .verified-badge {
display: inline-flex;
margin-left: 4px;
vertical-align: middle;
}
body.vikinger-theme .user-popover-content .user-card-info .info {
margin-top: 5px;
color: #8f91ac;
font-family: Rajdhani, sans-serif;
font-size: .8125rem;
font-weight: 600;
}
body.vikinger-theme .user-popover-content .user-card-meta {
padding: 13px 20px;
border-top: 1px solid #eaeaf5;
color: #8f91ac;
font-family: Rajdhani, sans-serif;
font-size: .8125rem;
font-weight: 600;
line-height: 1.4;
}
body.vikinger-theme .user-popover-content .user-card-meta > div {
display: flex;
align-items: center;
gap: 8px;
margin: 0 !important;
}
body.vikinger-theme .user-popover-content .user-card-meta .main-icon {
flex: 0 0 auto;
margin: 0 !important;
fill: #adafca;
}
body.vikinger-theme .user-popover-content .popover-footer {
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
padding: 13px 18px 16px;
border-top: 1px solid #eaeaf5;
background: #fff;
}
body.vikinger-theme .user-popover-content .popover-footer .btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 42px;
min-height: 40px;
margin: 0;
border-radius: 8px;
font-family: Rajdhani, sans-serif;
font-weight: 700;
}
body.vikinger-theme .user-popover-content .popover-footer .btn-light {
border: 1px solid #eaeaf5;
background: #f7f7fb;
color: #615dfa;
}
body.vikinger-theme .user-popover-content .popover-footer .btn-light:hover,
body.vikinger-theme .user-popover-content .popover-footer .btn-light:focus-visible {
background: #f0efff;
outline: 0;
}
body.vikinger-theme.night-mode .user-popover-content {
border-color: #34424d;
background: #26323b;
box-shadow: 0 12px 36px rgba(0, 0, 0, .36);
color: #c1d4e3;
}
body.vikinger-theme.night-mode .user-popover-content .user-card,
body.vikinger-theme.night-mode .user-popover-content .user-card-info,
body.vikinger-theme.night-mode .user-popover-content .popover-footer {
background: #26323b;
}
body.vikinger-theme.night-mode .user-popover-content .user-card-avatar {
border-color: #26323b;
background: #26323b;
}
body.vikinger-theme.night-mode .user-popover-content .user-card-info .name {
color: #fff;
}
body.vikinger-theme.night-mode .user-popover-content .user-card-meta,
body.vikinger-theme.night-mode .user-popover-content .popover-footer {
border-color: #34424d;
}
body.vikinger-theme.night-mode .user-popover-content .popover-footer .btn-light {
border-color: #34424d;
background: #34424d;
color: #c1d4e3;
}
@media screen and (max-width: 480px) {
body.vikinger-theme .user-popover-wrapper {
width: min(340px, calc(100vw - 28px));
}
body.vikinger-theme .user-popover-content {
width: min(320px, calc(100vw - 36px));
}
}
/* Paid-post price: use the same full-width, compact field treatment as the
* other controls in the inline Vikinger publisher. */
body.vikinger-theme .publisher-footer-options #paid-price-wrapper {
box-sizing: border-box;
width: 100%;
max-width: 100%;
}
body.vikinger-theme .publisher-footer-options #paid-price-wrapper > input.form-control {
display: block;
box-sizing: border-box;
width: 100%;
height: 42px;
min-height: 42px;
margin: 0;
padding: 0 14px;
border: 1px solid #dedeea;
border-radius: 10px;
background: #fff;
color: #3e3f5e;
box-shadow: none;
font-family: Rajdhani, sans-serif;
font-size: .875rem;
font-weight: 600;
line-height: normal;
}
body.vikinger-theme .publisher-footer-options #paid-price-wrapper > input.form-control:focus {
border-color: rgba(97, 93, 250, .55);
box-shadow: 0 0 0 3px rgba(97, 93, 250, .1);
outline: 0;
}
body.vikinger-theme .publisher-footer-options #paid-price-wrapper > input.form-control::placeholder {
color: #adafca;
font-family: Rajdhani, sans-serif;
font-size: .875rem;
font-weight: 600;
opacity: 1;
}
body.vikinger-theme.night-mode .publisher-footer-options #paid-price-wrapper > input.form-control {
border-color: #34424d;
background: #26323b;
color: #d2e0eb;
}
/* Merits ranking: bring the legacy Bootstrap panel into the Vikinger system. */
body.vikinger-theme .vikinger-merits-page {
margin-top: 24px !important;
margin-bottom: 40px;
}
body.vikinger-theme .vikinger-merits-page > .row {
row-gap: 20px;
}
body.vikinger-theme .vikinger-merits-mainbar {
min-width: 0;
}
body.vikinger-theme .vikinger-merits-mainbar > .card {
display: block;
overflow: hidden;
border: 1px solid #e7e8f4;
border-radius: 14px;
background: #fff;
box-shadow: 0 10px 28px rgba(53, 55, 101, .07);
color: #3e3f5e;
}
body.vikinger-theme .vikinger-merits-mainbar > .card > .card-header {
min-height: 68px;
display: flex;
align-items: center;
padding: 18px 26px;
border-bottom: 1px solid #eaeaf5;
border-radius: 0;
background-color: #fff !important;
color: #3e3f5e;
}
body.vikinger-theme .vikinger-merits-mainbar > .card > .card-header strong {
font-family: Rajdhani, sans-serif;
font-size: 1.25rem;
font-weight: 700;
line-height: 1.2;
}
body.vikinger-theme .vikinger-merits-mainbar > .card > .card-body {
padding: 24px 26px 26px;
background: #fff;
color: #3e3f5e;
}
body.vikinger-theme .vikinger-merits-filter-form {
display: grid;
grid-template-columns: minmax(120px, 1.1fr) minmax(160px, 1.5fr) minmax(160px, 1.5fr) minmax(112px, .9fr);
align-items: end;
gap: 14px;
width: 100%;
margin: 0;
}
body.vikinger-theme .vikinger-merits-filter-form > [class*="col-"] {
width: auto;
min-width: 0;
padding: 0;
}
body.vikinger-theme .vikinger-merits-filter-form .form-select,
body.vikinger-theme .vikinger-merits-filter-form .form-control {
min-width: 0;
height: 46px;
border: 1px solid #dedeea;
border-radius: 10px;
background-color: #fff;
color: #3e3f5e;
box-shadow: none;
font-family: Rajdhani, sans-serif;
font-size: .875rem;
font-weight: 600;
}
body.vikinger-theme .vikinger-merits-filter-form .form-select {
width: 100%;
padding: 0 38px 0 14px;
cursor: pointer;
}
body.vikinger-theme .vikinger-merits-filter-form .input-group {
display: flex;
flex-wrap: nowrap;
width: 100%;
min-width: 0;
}
body.vikinger-theme .vikinger-merits-filter-form .input-group-text {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
min-width: 54px;
height: 46px;
padding: 0 11px;
border: 1px solid #dedeea;
border-right: 0;
border-radius: 10px 0 0 10px;
background: #f7f7fb;
color: #8f91ac;
font-family: Rajdhani, sans-serif;
font-size: .8125rem;
font-weight: 700;
}
body.vikinger-theme .vikinger-merits-filter-form .input-group > .form-control {
flex: 1 1 auto;
width: 1%;
padding: 0 10px;
border-radius: 0 10px 10px 0;
}
body.vikinger-theme .vikinger-merits-filter-form .form-select:focus,
body.vikinger-theme .vikinger-merits-filter-form .form-control:focus {
border-color: #615dfa;
box-shadow: 0 0 0 3px rgba(97, 93, 250, .12);
outline: 0;
}
body.vikinger-theme .vikinger-merits-filter-form .btn-primary {
width: 100%;
min-height: 46px;
padding: 10px 18px;
border: 1px solid #615dfa;
border-radius: 10px;
background: #615dfa;
color: #fff;
font-family: Rajdhani, sans-serif;
font-size: .875rem;
font-weight: 700;
line-height: 1.2;
box-shadow: none;
transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
body.vikinger-theme .vikinger-merits-filter-form .btn-primary:hover,
body.vikinger-theme .vikinger-merits-filter-form .btn-primary:focus-visible {
border-color: #4e4ac8;
background: #4e4ac8;
color: #fff;
outline: 0;
}
body.vikinger-theme .vikinger-merits-filter-form .btn-primary:active {
transform: translateY(1px);
}
body.vikinger-theme .vikinger-merits-table-wrap {
width: 100%;
margin-top: 24px !important;
overflow-x: auto;
border: 1px solid #eaeaf5;
border-radius: 12px;
background: #fff;
scrollbar-width: thin;
}
body.vikinger-theme .vikinger-merits-table {
--bs-table-color: #3e3f5e;
--bs-table-bg: #fff;
--bs-table-striped-color: #3e3f5e;
--bs-table-striped-bg: #fafaff;
--bs-table-hover-color: #3e3f5e;
--bs-table-hover-bg: #f4f3ff;
--bs-table-border-color: #eaeaf5;
min-width: 520px;
margin: 0;
border: 0;
border-collapse: separate;
border-spacing: 0;
color: #3e3f5e;
font-family: Rajdhani, sans-serif;
font-size: .9rem;
}
body.vikinger-theme .vikinger-merits-table > thead > tr > th {
padding: 14px 18px;
border-top: 0;
border-bottom: 1px solid #eaeaf5;
background: #f7f7fb;
color: #8f91ac;
font-size: .75rem;
font-weight: 700;
line-height: 1.25;
white-space: nowrap;
}
body.vikinger-theme .vikinger-merits-table > thead > tr > th:first-child,
body.vikinger-theme .vikinger-merits-table > tbody > tr > td:first-child {
width: 88px;
text-align: center;
}
body.vikinger-theme .vikinger-merits-table > tbody > tr > td {
padding: 12px 18px;
border-color: #eaeaf5;
background-clip: padding-box;
color: #3e3f5e;
vertical-align: middle;
}
body.vikinger-theme .vikinger-merits-table > tbody > tr:last-child > td {
border-bottom: 0;
}
body.vikinger-theme .vikinger-merits-table > tbody > tr > td:first-child {
color: #8f91ac;
font-weight: 700;
}
body.vikinger-theme .vikinger-merits-table > tbody > tr > td:last-child {
color: #615dfa;
font-weight: 700;
text-align: right;
white-space: nowrap;
}
body.vikinger-theme .vikinger-merits-table > tbody > tr > td a {
display: inline-flex;
align-items: center;
gap: 12px;
color: #3e3f5e;
font-weight: 700;
text-decoration: none;
}
body.vikinger-theme .vikinger-merits-table > tbody > tr > td a:hover,
body.vikinger-theme .vikinger-merits-table > tbody > tr > td a:focus-visible {
color: #615dfa;
outline: 0;
}
body.vikinger-theme .vikinger-merits-table .tbl-image {
display: block;
flex: 0 0 40px;
width: 40px;
height: 40px;
margin: 0;
border: 2px solid #f0efff;
border-radius: 50%;
object-fit: cover;
}
body.vikinger-theme .vikinger-merits-mainbar .card-body > p.text-center.text-muted {
margin: 24px 0 0 !important;
padding: 28px 18px;
border: 1px dashed #dedeea;
border-radius: 12px;
background: #fafaff;
color: #8f91ac !important;
font-family: Rajdhani, sans-serif;
font-size: .9375rem;
font-weight: 600;
}
body.vikinger-theme.night-mode .vikinger-merits-mainbar > .card,
body.vikinger-theme.night-mode .vikinger-merits-mainbar > .card > .card-body {
border-color: #34424d;
background: #26323b;
color: #d2e0eb;
box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
}
body.vikinger-theme.night-mode .vikinger-merits-mainbar > .card > .card-header,
body.vikinger-theme.night-mode .vikinger-merits-table-wrap {
border-color: #34424d;
background-color: #26323b !important;
color: #fff;
}
body.vikinger-theme.night-mode .vikinger-merits-filter-form .form-select,
body.vikinger-theme.night-mode .vikinger-merits-filter-form .form-control {
border-color: #465765;
background-color: #2d3b45;
color: #d2e0eb;
}
body.vikinger-theme.night-mode .vikinger-merits-filter-form .input-group-text {
border-color: #465765;
background: #34424d;
color: #aebdca;
}
body.vikinger-theme.night-mode .vikinger-merits-table {
--bs-table-color: #d2e0eb;
--bs-table-bg: #26323b;
--bs-table-striped-color: #d2e0eb;
--bs-table-striped-bg: #2a3740;
--bs-table-hover-color: #fff;
--bs-table-hover-bg: #34424d;
--bs-table-border-color: #34424d;
color: #d2e0eb;
}
body.vikinger-theme.night-mode .vikinger-merits-table > thead > tr > th {
border-color: #34424d;
background: #2d3b45;
color: #aebdca;
}
body.vikinger-theme.night-mode .vikinger-merits-table > tbody > tr > td {
border-color: #34424d;
color: #d2e0eb;
}
body.vikinger-theme.night-mode .vikinger-merits-table > tbody > tr > td a {
color: #fff;
}
body.vikinger-theme.night-mode .vikinger-merits-table .tbl-image {
border-color: #465765;
}
body.vikinger-theme.night-mode .vikinger-merits-mainbar .card-body > p.text-center.text-muted {
border-color: #465765;
background: #2d3b45;
color: #aebdca !important;
}
@media screen and (max-width: 991.98px) {
body.vikinger-theme .vikinger-merits-filter-form {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
}
@media screen and (max-width: 575.98px) {
body.vikinger-theme .vikinger-merits-page {
margin-top: 16px !important;
margin-bottom: 28px;
}
body.vikinger-theme .vikinger-merits-mainbar > .card {
border-radius: 12px;
}
body.vikinger-theme .vikinger-merits-mainbar > .card > .card-header {
min-height: 58px;
padding: 15px 18px;
}
body.vikinger-theme .vikinger-merits-mainbar > .card > .card-body {
padding: 18px;
}
body.vikinger-theme .vikinger-merits-filter-form {
grid-template-columns: minmax(0, 1fr);
gap: 10px;
}
body.vikinger-theme .vikinger-merits-table-wrap {
margin-top: 18px !important;
}
}
@media (prefers-reduced-motion: reduce) {
body.vikinger-theme .vikinger-merits-filter-form .btn-primary {
transition: none;
}
}
/* Keep scrolling inside the post composer body so the linked-game panel,
* message editor and publisher options remain reachable beneath the fixed
* modal header. */
body.vikinger-theme #modal.vikinger-post-modal-open {
overflow-y: hidden;
}
body.vikinger-theme #modal.vikinger-post-modal-open .vikinger-post-modal-body {
align-items: stretch;
min-height: 0;
margin: 0;
padding: 0 !important;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
/* Keep the grid switcher on the same top row as the page controls. */
@media screen and (min-width: 1000px) and (max-width: 1600px) {
body.vikinger-theme section.section-banner + .section-filters-bar.vikinger-pages-filters {
display: grid;
grid-template-columns: minmax(170px, 220px) max-content minmax(180px, 1fr) auto;
grid-template-areas:
"search category navigation views"
"location location location location";
align-items: start;
gap: 10px 12px;
padding: 18px 28px;
}
body.vikinger-theme .vikinger-pages-filters > .section-filters-bar-actions:first-child {
display: contents;
}
body.vikinger-theme .vikinger-pages-filters > .section-filters-bar-actions:first-child > .form {
grid-area: search;
width: 100%;
}
body.vikinger-theme .vikinger-pages-filters .form-input.with-button {
width: 100%;
}
body.vikinger-theme .vikinger-pages-filters .vikinger-pages-category-filter {
grid-area: category;
margin-left: 0;
}
body.vikinger-theme .vikinger-pages-filters .vikinger-pages-navigation-tabs {
grid-area: navigation;
width: 100%;
min-width: 0;
height: 56px;
margin: 0;
}
body.vikinger-theme .vikinger-pages-filters .vikinger-pages-location-filters {
grid-area: location;
width: auto;
margin: 0;
padding: 0;
justify-content: flex-start;
}
body.vikinger-theme .vikinger-pages-filters > .section-filters-bar-actions.pages-grid-view-actions:last-child:not(:first-child) {
grid-area: views;
position: static !important;
justify-self: end;
align-self: start;
width: auto !important;
height: 56px;
margin: 0;
}
body.vikinger-theme .vikinger-pages-filters .pages-grid-view-actions .view-actions {
align-items: flex-start;
}
}
/* Groups directory: place search, sort, category and navigation above the
results, with country/language filters beside the grid controls. */
@media screen and (min-width: 1366px) {
body.vikinger-theme section.section-banner + .section-filters-bar.vikinger-groups-filters {
display: grid;
grid-template-columns: minmax(180px, 220px) 180px minmax(150px, 170px) minmax(160px, 1fr) auto;
grid-template-areas:
"search category sort navigation views"
"location location location location location";
align-items: center;
justify-content: stretch;
gap: 12px 14px;
height: auto;
min-height: 0;
padding: 18px 28px;
}
body.vikinger-theme .vikinger-groups-filters > .section-filters-bar-actions:first-child {
display: contents;
}
body.vikinger-theme .vikinger-groups-filters > .section-filters-bar-actions:first-child > .form {
display: contents;
}
body.vikinger-theme .vikinger-groups-filters .form-input.with-button {
grid-area: search;
width: 100%;
min-width: 0;
}
body.vikinger-theme .vikinger-groups-filters .form-select {
grid-area: sort;
width: 100%;
min-width: 0;
}
body.vikinger-theme .vikinger-groups-filters .vikinger-groups-category-filter {
grid-area: category;
width: 100%;
margin: 0;
}
body.vikinger-theme .vikinger-groups-filters .vikinger-groups-category-toggle {
width: 100%;
min-width: 0;
min-height: 48px;
}
body.vikinger-theme .vikinger-groups-filters .vikinger-groups-sort-tabs {
grid-area: navigation;
width: 100%;
height: 56px;
min-width: 0;
margin: 0;
}
body.vikinger-theme .vikinger-groups-filters .vikinger-groups-sort-tabs > .section-menu-item {
flex: 1 1 0;
width: auto;
height: 56px;
}
body.vikinger-theme .vikinger-groups-filters .vikinger-groups-sort-tabs > .section-menu-item .section-menu-item-icon {
top: 18px;
}
body.vikinger-theme .vikinger-groups-filters > .section-filters-bar-actions:last-child {
display: contents;
position: static !important;
inset: auto !important;
}
body.vikinger-theme .vikinger-groups-filters .vikinger-groups-location-filters {
grid-area: location;
}
body.vikinger-theme .vikinger-groups-filters .vikinger-groups-view-actions {
grid-area: views;
justify-self: end;
}
body.vikinger-theme .vikinger-groups-filters .vikinger-groups-view-actions {
display: flex;
align-items: center;
height: auto;
margin: 0;
}
}
body.vikinger-theme .vikinger-groups-location-filters {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
body.vikinger-theme .vikinger-groups-location-filter {
position: relative;
min-width: 0;
}
body.vikinger-theme .vikinger-groups-location-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
max-width: 240px;
min-height: 44px;
padding: 0 14px;
overflow: hidden;
border: 1px solid #dedeea;
border-radius: 12px;
background: #fff;
color: #3e3f5e;
font-size: .8125rem;
font-weight: 700;
line-height: 1.2;
text-overflow: ellipsis;
white-space: nowrap;
}
body.vikinger-theme .vikinger-groups-location-toggle > i {
flex: 0 0 auto;
color: #615dfa;
}
body.vikinger-theme .vikinger-groups-location-toggle:hover,
body.vikinger-theme .vikinger-groups-location-toggle:focus-visible,
body.vikinger-theme .vikinger-groups-location-toggle.show {
border-color: #615dfa;
background: #f0efff;
color: #615dfa;
outline: 0;
}
body.vikinger-theme .vikinger-groups-location-menu {
width: 256px;
min-width: 220px;
max-width: calc(100vw - 32px);
padding: 8px;
border: 0;
border-radius: 12px;
background: #fff;
box-shadow: 0 10px 30px rgba(94, 92, 154, .16);
}
body.vikinger-theme .vikinger-groups-location-menu .js_scroller {
height: auto !important;
max-height: min(320px, 55vh);
overflow-x: hidden !important;
overflow-y: auto !important;
}
body.vikinger-theme .vikinger-groups-location-menu .dropdown-item {
min-height: 40px;
padding: 10px 12px;
border-radius: 9px;
color: #3e3f5e;
font-size: .8125rem;
font-weight: 700;
line-height: 1.25;
}
body.vikinger-theme .vikinger-groups-location-menu .dropdown-item:hover,
body.vikinger-theme .vikinger-groups-location-menu .dropdown-item:focus-visible {
background: #f0efff;
color: #615dfa;
outline: 0;
}
body.vikinger-theme.night-mode .vikinger-groups-location-toggle,
body.vikinger-theme.night-mode .vikinger-groups-location-menu {
border-color: #3a4a57;
background: #26323b;
color: #d2e0eb;
}
body.vikinger-theme.night-mode .vikinger-groups-location-toggle > i,
body.vikinger-theme.night-mode .vikinger-groups-location-menu .dropdown-item {
color: #d2e0eb;
}
body.vikinger-theme.night-mode .vikinger-groups-location-toggle:hover,
body.vikinger-theme.night-mode .vikinger-groups-location-toggle:focus-visible,
body.vikinger-theme.night-mode .vikinger-groups-location-toggle.show,
body.vikinger-theme.night-mode .vikinger-groups-location-menu .dropdown-item:hover,
body.vikinger-theme.night-mode .vikinger-groups-location-menu .dropdown-item:focus-visible {
background: #34424d;
color: #fff;
}
@media screen and (max-width: 1365px) {
body.vikinger-theme section.section-banner + .section-filters-bar.vikinger-groups-filters {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 14px;
height: auto;
min-height: 0;
padding: 22px 28px;
}
body.vikinger-theme .vikinger-groups-filters > .section-filters-bar-actions:first-child {
display: grid;
grid-template-columns: minmax(0, 1fr) 190px minmax(150px, 180px);
grid-template-areas:
"search category sort"
"navigation navigation navigation";
gap: 12px;
width: 100%;
min-width: 0;
padding: 0;
}
body.vikinger-theme .vikinger-groups-filters > .section-filters-bar-actions:first-child > .form {
display: contents;
}
body.vikinger-theme .vikinger-groups-filters .form-input.with-button,
body.vikinger-theme .vikinger-groups-filters .form-select,
body.vikinger-theme .vikinger-groups-filters .vikinger-groups-category-filter {
width: 100%;
min-width: 0;
margin: 0;
}
body.vikinger-theme .vikinger-groups-filters .form-input.with-button {
grid-area: search;
}
body.vikinger-theme .vikinger-groups-filters .vikinger-groups-category-filter {
grid-area: category;
}
body.vikinger-theme .vikinger-groups-filters .form-select {
grid-area: sort;
}
body.vikinger-theme .vikinger-groups-filters .vikinger-groups-category-toggle {
width: 100%;
min-width: 0;
}
body.vikinger-theme .vikinger-groups-filters .vikinger-groups-sort-tabs {
grid-area: navigation;
width: 100%;
height: 56px;
margin: 0;
}
body.vikinger-theme .vikinger-groups-filters .vikinger-groups-sort-tabs > .section-menu-item {
flex: 0 0 112px;
width: 112px;
height: 56px;
}
body.vikinger-theme .vikinger-groups-filters .vikinger-groups-sort-tabs > .section-menu-item .section-menu-item-icon {
top: 18px;
}
body.vikinger-theme .vikinger-groups-filters > .section-filters-bar-actions:last-child {
display: flex;
align-items: center;
justify-content: space-between;
width: 100% !important;
height: auto;
margin: 0;
padding: 0;
position: static !important;
}
}
@media screen and (max-width: 700px) {
body.vikinger-theme section.section-banner + .section-filters-bar.vikinger-groups-filters {
gap: 12px;
padding: 14px 16px;
}
body.vikinger-theme .vikinger-groups-filters > .section-filters-bar-actions:first-child {
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
"search"
"category"
"sort"
"navigation";
gap: 10px;
}
body.vikinger-theme .vikinger-groups-filters .vikinger-groups-sort-tabs {
height: 56px;
overflow-x: auto;
overflow-y: hidden;
}
body.vikinger-theme .vikinger-groups-filters > .section-filters-bar-actions:last-child {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 12px;
}
body.vikinger-theme .vikinger-groups-location-filters {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
width: 100%;
}
body.vikinger-theme .vikinger-groups-location-filter,
body.vikinger-theme .vikinger-groups-location-toggle {
width: 100%;
max-width: none;
min-width: 0;
}
body.vikinger-theme .vikinger-groups-location-toggle {
justify-content: center;
padding: 0 8px;
}
body.vikinger-theme .vikinger-groups-view-actions {
grid-column: 2;
justify-self: end;
}
}
/* On tablet and compact desktop widths, keep the view switcher in the first
control row just like the Pages directory; location filters stay beneath. */
@media screen and (min-width: 701px) and (max-width: 1365px) {
body.vikinger-theme section.section-banner + .section-filters-bar.vikinger-groups-filters {
display: grid;
grid-template-columns: minmax(0, 1fr) 180px minmax(150px, 180px) auto;
grid-template-areas:
"search category sort views"
"navigation navigation navigation navigation"
"location location location location";
}
body.vikinger-theme .vikinger-groups-filters > .section-filters-bar-actions:first-child,
body.vikinger-theme .vikinger-groups-filters > .section-filters-bar-actions:first-child > .form,
body.vikinger-theme .vikinger-groups-filters > .section-filters-bar-actions:last-child {
display: contents;
}
body.vikinger-theme .vikinger-groups-filters .vikinger-groups-sort-tabs {
grid-area: navigation;
}
body.vikinger-theme .vikinger-groups-filters .vikinger-groups-location-filters {
grid-area: location;
}
body.vikinger-theme .vikinger-groups-filters .vikinger-groups-view-actions {
grid-area: views;
justify-self: end;
}
}
/* Sngine/Vikinger base rules set every