Cookie
- Автор темы Zenettany
- Дата начала
CF
evanzo
Продвинутый
- Сообщения
- 130
- Реакции
- 28
- Сообщения
- 132
- Реакции
- 109
CSS:
@_notice-darkBg: rgb(20, 20, 20);
@_notice-lightBg: #fefefe;
@_notice-floatingFade: 80%;
@_notice-imageSize: 48px;
@_notice-padding: @xf-paddingLarge;
@_cookie-glassBg: rgba(15, 15, 15, 0.95);
@_cookie-borderColor: rgba(255, 255, 255, 0.1);
@_cookie-iconBg: linear-gradient(135deg, #f59e0b, #d97706);
@_cookie-acceptBg: linear-gradient(135deg, #10b981, #059669);
@_cookie-acceptHoverBg: linear-gradient(135deg, #059669, #047857);
@_cookie-moreBg: rgba(255, 255, 255, 0.05);
@_cookie-moreHoverBg: rgba(255, 255, 255, 0.1);
@_cookie-textPrimary: #ffffff;
@_cookie-textSecondary: #d1d5db;
@_cookie-textMuted: #9ca3af;
.notices
{
.m-listPlain();
&.notices--block
{
.notice
{
margin-bottom: ((@xf-elementSpacer) / 2);
}
}
&.notices--floating
{
// assumed to be within u-bottomFixer
margin: 0 20px 0 auto;
width: 300px;
max-width: 100%;
z-index: @zIndex-8;
@media (max-width: 340px)
{
margin-right: 10px;
}
.notice
{
margin-bottom: 20px;
}
}
&.notices--scrolling
{
display: flex;
align-items: stretch;
overflow: hidden;
.xf-blockBorder();
margin-bottom: ((@xf-elementSpacer) / 2);
&.notices--isMulti
{
margin-bottom: ((@xf-elementSpacer) / 2) + 20px;
}
.notice
{
width: 100%;
flex-grow: 0;
flex-shrink: 0;
border: none;
}
}
}
.noticeScrollContainer
{
margin-bottom: ((@xf-elementSpacer) / 2);
.lSSlideWrapper
{
.xf-blockBorder();
}
.notices.notices--scrolling
{
border: none;
margin-bottom: 0;
}
}
.notice
{
.m-clearFix();
position: relative;
.xf-blockBorder();
&.notice--primary
{
.xf-contentHighlightBase();
}
&.notice--accent
{
.xf-contentAccentBase();
a:not(.button--notice)
{
.xf-contentAccentLink();
}
}
&.notice--dark
{
color: #fefefe;
border: none;
background: @_notice-darkBg;
a:not(.button--notice)
{
color: rgb(180, 180, 180);
}
}
&.notice--light
{
color: rgb(20, 20, 20);
background: @_notice-lightBg;
a:not(.button--notice)
{
color: rgb(130, 130, 130);
}
}
&.notice--enablePush
{
display: none;
@media (max-width: @xf-responsiveWide)
{
padding: @xf-paddingSmall @xf-paddingSmall @xf-paddingLarge;
font-size: @xf-fontSizeSmall;
}
}
&.notice--cookie
{
position: fixed !important;
bottom: 0;
left: 0;
right: 0;
background: @_cookie-glassBg !important;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
color: @_cookie-textPrimary !important;
padding: 0 !important;
margin: 0 16px 16px 16px !important;
border-radius: 16px !important;
box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.6), 0 -2px 8px rgba(0, 0, 0, 0.3) !important;
z-index: 9999 !important;
font-size: 14px;
animation: slideUpModern 0.6s cubic-bezier(0.16, 1, 0.3, 1);
border: 1px solid @_cookie-borderColor !important;
overflow: hidden;
max-width: none !important;
width: auto !important;
&::before
{
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.6), rgba(168, 85, 247, 0.6), rgba(236, 72, 153, 0.6), transparent);
animation: shimmer 3s ease-in-out infinite;
}
.notice-content
{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 20px 24px !important;
gap: 20px;
background: transparent !important;
border: none !important;
}
.cookieBanner-contentWrapper
{
flex: 1;
min-width: 280px;
line-height: 1.5;
display: flex;
align-items: center;
gap: 16px;
}
.cookieBanner-icon
{
flex-shrink: 0;
width: 48px;
height: 48px;
background: @_cookie-iconBg;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
animation: bounce 2s ease-in-out infinite;
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
position: relative;
&::before
{
content: '';
position: absolute;
inset: -2px;
background: @_cookie-iconBg;
border-radius: 14px;
z-index: -1;
opacity: 0.3;
filter: blur(8px);
}
}
.cookieBanner-textContent
{
flex: 1;
}
.cookieBanner-title
{
font-weight: 600;
font-size: 16px;
margin-bottom: 4px;
background: linear-gradient(135deg, #ffffff, #e5e7eb);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: @_cookie-textPrimary; /* Fallback */
}
.cookieBanner-description
{
color: @_cookie-textSecondary !important;
font-size: 14px;
line-height: 1.4;
}
.cookieBanner-buttons
{
display: flex;
gap: 12px;
flex-shrink: 0;
flex-wrap: wrap;
}
.cookieBanner-accept
{
background: @_cookie-acceptBg !important;
color: @_cookie-textPrimary !important;
border: none !important;
border-radius: 12px !important;
padding: 12px 24px !important;
font-weight: 600 !important;
font-size: 14px !important;
text-transform: none !important;
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3), 0 2px 4px rgba(0, 0, 0, 0.1) !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
position: relative !important;
overflow: hidden !important;
min-width: 120px;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
text-decoration: none !important;
&::before
{
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.6s ease;
}
&:hover
{
transform: translateY(-2px) !important;
box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4), 0 4px 8px rgba(0, 0, 0, 0.15) !important;
background: @_cookie-acceptHoverBg !important;
color: @_cookie-textPrimary !important;
text-decoration: none !important;
&::before
{
left: 100%;
}
}
&:active
{
transform: translateY(0) !important;
}
}
.cookieBanner-more
{
background: @_cookie-moreBg !important;
color: @_cookie-textSecondary !important;
border: 1px solid @_cookie-borderColor !important;
border-radius: 12px !important;
padding: 12px 20px !important;
font-weight: 500 !important;
font-size: 14px !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
min-width: 100px;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
text-decoration: none !important;
&:hover
{
background: @_cookie-moreHoverBg !important;
border-color: rgba(255, 255, 255, 0.4) !important;
color: @_cookie-textPrimary !important;
transform: translateY(-1px) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
text-decoration: none !important;
}
&:active
{
transform: translateY(0) !important;
}
}
.notice-dismiss
{
position: absolute !important;
top: 16px !important;
right: 16px !important;
width: 32px !important;
height: 32px !important;
border-radius: 50% !important;
background: @_cookie-moreBg !important;
border: 1px solid @_cookie-borderColor !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: all 0.3s ease !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
padding: 0 !important;
opacity: 1 !important;
&:hover
{
background: @_cookie-moreHoverBg !important;
border-color: rgba(255, 255, 255, 0.4) !important;
transform: scale(1.1) !important;
}
&::before
{
content: '×';
color: @_cookie-textSecondary;
font-size: 18px;
font-weight: bold;
line-height: 1;
}
&:hover::before
{
color: @_cookie-textPrimary;
}
}
@media (max-width: @xf-responsiveWide)
{
margin: 0 12px 12px 12px !important;
border-radius: 12px !important;
.notice-content
{
padding: 16px 20px !important;
gap: 16px;
flex-direction: column;
align-items: stretch;
}
.cookieBanner-contentWrapper
{
min-width: auto;
text-align: center;
flex-direction: column;
gap: 12px;
}
.cookieBanner-buttons
{
justify-content: center;
width: 100%;
}
.cookieBanner-accept,
.cookieBanner-more
{
flex: 1;
min-width: 0 !important;
}
.notice-dismiss
{
top: 12px !important;
right: 12px !important;
}
}
@media (max-width: 480px)
{
.cookieBanner-buttons
{
flex-direction: column;
gap: 8px;
}
.cookieBanner-accept,
.cookieBanner-more
{
width: 100%;
}
}
}
&.notice--cookieAdvanced .notice-content
{
padding: 1em 0;
.u-pageCentered
{
display: grid;
grid-template-columns: 1fr @xf-sidebarWidth;
gap: @xf-sidebarSpacer;
align-items: end;
}
@media (max-width: @xf-responsiveMedium)
{
.u-pageCentered
{
display: block;
}
}
h2
{
margin: 0;
}
.button
{
width: 100%;
margin: .5em 0;
font-weight: bold;
}
form.is-active
{
display: contents;
grid-column: span 2;
.formRow.formRow--fullWidth > dd
{
padding-left: 0;
padding-right: 0;
}
}
form:not(.is-active)
{
display: none;
}
}
.notices--block &
{
font-size: @xf-fontSizeNormal;
border-radius: @xf-blockBorderRadius;
}
.notices--floating &
{
font-size: @xf-fontSizeSmallest;
border-radius: @xf-borderRadiusMedium;
box-shadow: 1px 1px 3px rgba(0,0,0, 0.25);
&.notice--primary
{
background-color: fade(@xf-contentHighlightBase--background-color, @_notice-floatingFade);
}
&.notice--accent
{
background-color: fade(@xf-contentAccentBase--background-color, @_notice-floatingFade);
}
&.notice--dark
{
background-color: fade(@_notice-darkBg, @_notice-floatingFade);
}
&.notice--light
{
background-color: fade(@_notice-lightBg, @_notice-floatingFade);
}
.has-js &
{
display: none;
}
}
&.notice--hasImage
{
.notice-content
{
margin-left: ((@_notice-imageSize) + (@_notice-padding) * 2);
min-height: ((@_notice-imageSize) + (@_notice-padding) * 2);
}
}
@media (max-width: @xf-responsiveWide)
{
&.notice--hidewide:not(.is-vis-processed)
{
display: none;
visibility: hidden;
}
}
@media (max-width: @xf-responsiveMedium)
{
&.notice--hidemedium:not(.is-vis-processed)
{
display: none;
visibility: hidden;
}
}
@media (max-width: @xf-responsiveNarrow)
{
&.notice--hidenarrow:not(.is-vis-processed)
{
display: none;
visibility: hidden;
}
}
}
.notice-image
{
float: left;
padding: @_notice-padding 0 @_notice-padding @_notice-padding;
img
{
max-width: @_notice-imageSize;
max-height: @_notice-imageSize;
}
}
.notice-content
{
padding: @_notice-padding;
a.notice-dismiss
{
&:before
{
.m-faBase();
.m-faContent(@fa-var-times, .75em);
}
float: right;
color: inherit;
font-size: 16px;
line-height: 1;
height: 1em;
box-sizing: content-box;
padding: 0 0 5px 5px;
opacity: .5;
.m-transition(opacity);
cursor: pointer;
&:hover
{
text-decoration: none;
opacity: 1;
}
.notices--floating &
{
font-size: 14px;
}
}
}
@keyframes slideUpModern
{
from {
opacity: 0;
transform: translateY(100%) scale(0.95);
filter: blur(10px);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
filter: blur(0);
}
}
@keyframes bounce
{
0%, 20%, 50%, 80%, 100% {
transform: translateY(0) rotate(0deg);
}
40% {
transform: translateY(-4px) rotate(-2deg);
}
60% {
transform: translateY(-2px) rotate(1deg);
}
}
@keyframes shimmer
{
0%, 100% { opacity: 0; }
50% { opacity: 1; }
}
.p-body-inner--dark .notice--cookie
{
background: rgba(10, 10, 10, 0.95) !important;
border-color: rgba(255, 255, 255, 0.05) !important;
}
@media (prefers-contrast: high)
{
.notice--cookie
{
background: #000000 !important;
border: 2px solid #ffffff !important;
.cookieBanner-accept
{
background: #00ff00 !important;
color: #000000 !important;
}
.cookieBanner-more
{
background: transparent !important;
border-color: #ffffff !important;
color: #ffffff !important;
}
}
}
@media (prefers-reduced-motion: reduce)
{
.notice--cookie
{
animation: none;
.cookieBanner-icon
{
animation: none;
}
.cookieBanner-accept,
.cookieBanner-more
{
transition: none !important;
}
.cookieBanner-accept:hover,
.cookieBanner-more:hover
{
transform: none !important;
}
}
}
