mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-12-05 19:28:23 +00:00
60999eb1d9
Codex tokens are a better implementation and this should ensure consistency across the MW ecosystem. We have to keep a copy for now as they are introduced in 1.41. Related: #735
319 lines
6.2 KiB
Plaintext
319 lines
6.2 KiB
Plaintext
/*
|
|
* Citizen
|
|
*
|
|
* SkinStyles for Extension:Echo
|
|
* Module: ext.echo.ui
|
|
* Version: REL1_35 347c30e
|
|
*
|
|
* Date: 2023-05-27
|
|
*/
|
|
|
|
@import '../../../resources/variables.less';
|
|
@import '../../../resources/mixins.less';
|
|
|
|
#pt-talk-alert {
|
|
display: none;
|
|
}
|
|
|
|
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup {
|
|
top: unset !important;
|
|
bottom: var( --header-size ) !important;
|
|
margin: var( --space-xs );
|
|
box-shadow: var( --box-shadow-dialog );
|
|
|
|
.oo-ui-popupWidget-body {
|
|
height: auto !important;
|
|
max-height: ~'calc( var( --header-card-maxheight ) - 2 * 3.1428571em )'; // 3.1428571em = height of .oo-ui-popupWidget-head & .oo-ui-popupWidget-footer
|
|
}
|
|
}
|
|
|
|
@media ( min-width: @min-width-breakpoint-tablet ) {
|
|
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup {
|
|
// .citizen-header-card-tablet( right );
|
|
}
|
|
}
|
|
|
|
@media ( min-width: @min-width-breakpoint-desktop ) {
|
|
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup {
|
|
bottom: 0 !important;
|
|
left: var( --header-size ) !important;
|
|
}
|
|
}
|
|
|
|
/* mw.echo.ui.mobile.less */
|
|
@media all and ( max-width: 720px ) {
|
|
.mw-echo-ui-overlay {
|
|
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup {
|
|
right: 0 !important;
|
|
left: 0 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* mw.echo.ui.overlay.less */
|
|
.mw-echo-ui-overlay {
|
|
position: fixed; // Header is fixed
|
|
// The notification button is always bottom-aligned
|
|
// Setting a top value will break the 0 height hack used in the original
|
|
top: unset;
|
|
bottom: 0;
|
|
z-index: @z-index-overlay; // Higher than header
|
|
}
|
|
|
|
/* mw.echo.ui.NotificationItemWidget.less */
|
|
.mw-echo-ui-notificationItemWidget {
|
|
background-color: var( --color-surface-3 );
|
|
border-color: var( --border-color-base );
|
|
|
|
&:hover {
|
|
background-color: var( --color-surface-2--hover );
|
|
}
|
|
|
|
&:active {
|
|
background-color: var( --color-surface-2--active );
|
|
}
|
|
|
|
&:last-child {
|
|
border-bottom-color: var( --border-color-base );
|
|
}
|
|
|
|
&-unread {
|
|
background-color: var( --color-surface-1 );
|
|
|
|
&:hover {
|
|
background-color: var( --color-surface-2--hover );
|
|
}
|
|
}
|
|
|
|
&-notify {
|
|
&-description {
|
|
color: var( --color-base--subtle );
|
|
}
|
|
}
|
|
|
|
&-icon {
|
|
img {
|
|
width: 24px; // It looks nicer
|
|
}
|
|
}
|
|
|
|
&-content {
|
|
&-message {
|
|
&-header {
|
|
color: var( --color-base--emphasized );
|
|
}
|
|
|
|
&-body {
|
|
color: var( --color-base--subtle );
|
|
}
|
|
}
|
|
|
|
&-table {
|
|
display: block;
|
|
}
|
|
|
|
&-actions {
|
|
display: flex; // Table row does not align things properly
|
|
align-items: center;
|
|
|
|
& > &-buttons.oo-ui-buttonSelectWidget {
|
|
display: block;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.mw-echo-ui-menuItemWidget-prioritized {
|
|
border-radius: var( --border-radius-small );
|
|
|
|
&:hover {
|
|
background-color: var( --background-color-quiet--hover );
|
|
}
|
|
|
|
&:active {
|
|
background-color: var( --background-color-quiet--active );
|
|
}
|
|
}
|
|
|
|
&-menu {
|
|
opacity: var( --opacity-icon-base );
|
|
|
|
&:hover {
|
|
opacity: var( --opacity-icon-base--hover );
|
|
}
|
|
|
|
&:active {
|
|
opacity: var( --opacity-icon-base--active );
|
|
}
|
|
}
|
|
|
|
&-timestamp {
|
|
display: block;
|
|
color: var( --color-base--subtle );
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-bundled {
|
|
.mw-echo-ui-notificationItemWidget-content {
|
|
.mw-echo-ui-notificationItemWidget {
|
|
&-content-message {
|
|
&-header {
|
|
em {
|
|
color: var( --color-base--subtle );
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&-initiallyUnseen {
|
|
-webkit-animation-name: unseen-fadeout-to-read;
|
|
animation-name: unseen-fadeout-to-read;
|
|
|
|
&.mw-echo-ui-notificationItemWidget-unread {
|
|
-webkit-animation-name: unseen-fadeout-to-unread;
|
|
animation-name: unseen-fadeout-to-unread;
|
|
}
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes unseen-fadeout-to-unread {
|
|
from {
|
|
background-color: var( --color-surface-2 );
|
|
}
|
|
|
|
to {
|
|
background-color: var( --color-surface-1 );
|
|
}
|
|
}
|
|
|
|
@keyframes unseen-fadeout-to-unread {
|
|
from {
|
|
background-color: var( --color-surface-2 );
|
|
}
|
|
|
|
to {
|
|
background-color: var( --color-surface-1 );
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes unseen-fadeout-to-read {
|
|
from {
|
|
background-color: var( --color-surface-2 );
|
|
}
|
|
|
|
to {
|
|
background-color: var( --color-surface-3 );
|
|
}
|
|
}
|
|
|
|
@keyframes unseen-fadeout-to-read {
|
|
from {
|
|
background-color: var( --color-surface-2 );
|
|
}
|
|
|
|
to {
|
|
background-color: var( --color-surface-3 );
|
|
}
|
|
}
|
|
|
|
/* mw.echo.ui.ToggleReadCircleButtonWidget.less */
|
|
.mw-echo-ui-toggleReadCircleButtonWidget {
|
|
&-circle {
|
|
background-color: var( --color-primary );
|
|
|
|
&-unread {
|
|
background-color: var( --color-surface-2 );
|
|
border-color: var( --border-color-base );
|
|
}
|
|
}
|
|
|
|
&:hover .mw-echo-ui-toggleReadCircleButtonWidget-circle {
|
|
background-color: var( --color-primary--hover );
|
|
|
|
&-unread {
|
|
background-color: var( --color-surface-2--hover );
|
|
}
|
|
}
|
|
|
|
&:active .mw-echo-ui-toggleReadCircleButtonWidget-circle {
|
|
background-color: var( --color-primary--active );
|
|
|
|
&-unread {
|
|
background-color: var( --color-surface-2--active );
|
|
}
|
|
}
|
|
}
|
|
|
|
/* mw.echo.ui.CrossWikiNotificationItemWidget.less */
|
|
.mw-echo-ui-crossWikiNotificationItemWidget,
|
|
.mw-echo-ui-bundleNotificationItemWidget {
|
|
&-separator {
|
|
border-bottom-color: var( --border-color-base );
|
|
}
|
|
|
|
&-group {
|
|
background-color: var( --color-surface-2 );
|
|
}
|
|
|
|
.mw-echo-ui-subGroupListWidget-header {
|
|
&-row-title {
|
|
color: var( --color-base--subtle );
|
|
}
|
|
}
|
|
}
|
|
|
|
/* mw.echo.ui.NotificationsListWidget.less */
|
|
.mw-echo-ui-notificationsListWidget {
|
|
> a,
|
|
&:hover > a {
|
|
color: var( --color-base--subtle );
|
|
}
|
|
|
|
&:not( :hover ) a,
|
|
#p-personal &:not( :hover ) a.new {
|
|
color: var( --color-base--subtle );
|
|
}
|
|
}
|
|
|
|
/* mw.echo.ui.PlaceholderItemWidget.less */
|
|
.mw-echo-ui-placeholderItemWidget {
|
|
background-color: var( --color-surface-1 );
|
|
}
|
|
|
|
/* mw.echo.ui.MenuItemWidget.less */
|
|
.mw-echo-ui-menuItemWidget {
|
|
// First selector is polyfill for MW 1.35
|
|
> .oo-ui-labelElement-label,
|
|
> .oo-ui-buttonElement-button > .oo-ui-labelElement-label {
|
|
color: var( --color-base--emphasized );
|
|
}
|
|
|
|
&-prioritized {
|
|
opacity: var( --opacity-icon-base );
|
|
|
|
&:hover {
|
|
opacity: var( --opacity-icon-base--hover );
|
|
}
|
|
|
|
&:active {
|
|
opacity: var( --opacity-icon-base--active );
|
|
}
|
|
}
|
|
|
|
&-dynamic-action {
|
|
&:hover {
|
|
background-color: var( --color-surface-1 );
|
|
}
|
|
|
|
.mw-echo-ui-menuItemWidget-description {
|
|
color: var( --color-base--subtle );
|
|
}
|
|
}
|
|
|
|
.mw-echo-ui-actionMenuPopupWidget-menu:hover {
|
|
background-color: var( --color-surface-2--hover );
|
|
}
|
|
}
|