._notif, %notif { position: absolute; z-index: 2; top: 1rem; right: 1rem; width: 25rem; max-width: 90%; padding: .625rem 1rem; font-size: .75rem; color: var(--notifColor); background: var(--notifBackground); border: var(--notifBorder); border-radius: .25rem; transition: opacity .2s; opacity: 0; cursor: default; @extend %border-box, %user-select-none; &._in { opacity: 1; }} ._notif-title { margin: 0 0 .5rem; line-height: 1rem; font-size: inherit;} ._notif-text { margin-bottom: 0; }._notif-text + ._notif-text { margin-top: .25rem; } ._notif-info { float: right; color: var(--notifColorLight);} ._notif-link,._notif-link:hover { color: inherit; text-decoration: underline; cursor: pointer;} ._notif-close { position: absolute; top: 0; right: 0; width: 2.25rem; height: 2.25rem; opacity: .9; @extend %hide-text; > svg { position: absolute; top: .625rem; left: .625rem; fill: white; @extend %svg-icon; } &:hover { opacity: 1; }} ._notif-content { max-height: calc(50vh - 4.5rem); margin: 0 -.25rem 0 0; padding-right: .75rem; overflow-y: auto; &::-webkit-scrollbar { width: 10px !important; } &::-webkit-scrollbar-track { background: var(--notifBackground) !important; border: 0 !important; border-radius: 5px !important; } &::-webkit-scrollbar-thumb { border: 3px solid var(--notifBackground) !important; &:hover, &:active { border-width: 2px !important; } } > ._notif-title { margin-bottom: .5rem; text-align: center; }} ._notif-news { > ._news-row { line-height: 1.125rem; font-size: .6875rem; color: var(--notifColorLight); margin-bottom: .25rem; + ._news-row { margin-top: .625rem; } } ._news-title { display: block; margin-bottom: .25rem; font-size: .75rem; font-weight: normal; color: white; } ._news-date { float: right; margin-left: 1rem; font-weight: var(--boldFontWeight); } code { display: inline-block; vertical-align: baseline; line-height: 0; margin: 0 .25rem; padding: 0; color: inherit; background: none; border: 0; }} ._notif-list { margin: 0; padding-left: 1rem;} ._notif-tip { color: var(--textColor); background: var(--tipBackground); border: var(--tipBorder); ._notif-info { color: var(--textColorLight); }} ._notif-right { float: right;}
._notif, %notif {
position: absolute;
z-index: 2;
top: 1rem;
right: 1rem;
width: 25rem;
max-width: 90%;
padding: .625rem 1rem;
font-size: .75rem;
color: var(--notifColor);
background: var(--notifBackground);
border: var(--notifBorder);
border-radius: .25rem;
transition: opacity .2s;
opacity: 0;
cursor: default;
@extend %border-box, %user-select-none;
&._in { opacity: 1; }
}
._notif-title {
margin: 0 0 .5rem;
line-height: 1rem;
font-size: inherit;
}
._notif-text { margin-bottom: 0; }
._notif-text + ._notif-text { margin-top: .25rem; }
._notif-info {
float: right;
color: var(--notifColorLight);
}
._notif-link,
._notif-link:hover {
color: inherit;
text-decoration: underline;
cursor: pointer;
}
._notif-close {
position: absolute;
top: 0;
right: 0;
width: 2.25rem;
height: 2.25rem;
opacity: .9;
@extend %hide-text;
> svg {
position: absolute;
top: .625rem;
left: .625rem;
fill: white;
@extend %svg-icon;
}
&:hover { opacity: 1; }
}
._notif-content {
max-height: calc(50vh - 4.5rem);
margin: 0 -.25rem 0 0;
padding-right: .75rem;
overflow-y: auto;
&::-webkit-scrollbar { width: 10px !important; }
&::-webkit-scrollbar-track {
background: var(--notifBackground) !important;
border: 0 !important;
border-radius: 5px !important;
}
&::-webkit-scrollbar-thumb {
border: 3px solid var(--notifBackground) !important;
&:hover, &:active { border-width: 2px !important; }
}
> ._notif-title {
margin-bottom: .5rem;
text-align: center;
}
}
._notif-news {
> ._news-row {
line-height: 1.125rem;
font-size: .6875rem;
color: var(--notifColorLight);
margin-bottom: .25rem;
+ ._news-row { margin-top: .625rem; }
}
._news-title {
display: block;
margin-bottom: .25rem;
font-size: .75rem;
font-weight: normal;
color: white;
}
._news-date {
float: right;
margin-left: 1rem;
font-weight: var(--boldFontWeight);
}
code {
display: inline-block;
vertical-align: baseline;
line-height: 0;
margin: 0 .25rem;
padding: 0;
color: inherit;
background: none;
border: 0;
}
}
._notif-list {
margin: 0;
padding-left: 1rem;
}
._notif-tip {
color: var(--textColor);
background: var(--tipBackground);
border: var(--tipBorder);
._notif-info { color: var(--textColorLight); }
}
._notif-right {
float: right;
}