mediawiki-skins-Citizen/skinStyles/lib/tippy/tippy.less
alistair3149 c1370e95f0
feat(core): update box-shadow CSS variables
* Tokenize shadow vertical distance
* Rename CSS variables to match Codex counterpart
* Reduce the vertical distance for all box shadow
2024-07-24 21:53:51 -04:00

112 lines
3 KiB
Plaintext

/*
* Citizen
*
* SkinStyles for Tippy
* Shared by Extension:SemanticMediaWiki
*
* Date: 2024-07-24
*/
/* libs/tippy/tippy.css */
/* ^ This gets overriden by the styles below anyways */
/* libs/tippy/light-border.css */
.tippy-tooltip.light-border-theme {
color: var( --color-base );
background-color: var( --color-surface-1 );
border-color: var( --border-color-base );
border-radius: var( --border-radius-base );
box-shadow: var( --box-shadow-drop-medium );
}
.tippy-tooltip.light-border-theme .tippy-backdrop {
background-color: var( --color-surface-1 );
}
.tippy-tooltip.light-border-theme .tippy-roundarrow {
fill: var( --color-surface-1 );
}
.tippy-tooltip.light-border-theme .tippy-roundarrow::after {
fill: transparent;
}
.tippy-tooltip.light-border-theme[ x-placement^='top' ] .tippy-arrow {
border-top-color: var( --color-surface-1 );
}
.tippy-tooltip.light-border-theme[ x-placement^='top' ] .tippy-arrow::after {
border-top-color: var( --color-surface-1 );
}
.tippy-tooltip.light-border-theme[ x-placement^='top' ] .tippy-arrow::before {
border-top-color: var( --border-color-base );
}
.tippy-tooltip.light-border-theme[ x-placement^='bottom' ] .tippy-arrow {
border-bottom-color: var( --color-surface-1 );
}
.tippy-tooltip.light-border-theme[ x-placement^='bottom' ] .tippy-arrow::after {
border-bottom-color: var( --color-surface-1 );
}
.tippy-tooltip.light-border-theme[ x-placement^='bottom' ] .tippy-arrow::before {
border-bottom-color: var( --border-color-base );
}
.tippy-tooltip.light-border-theme[ x-placement^='left' ] .tippy-arrow {
border-left-color: var( --color-surface-1 );
}
.tippy-tooltip.light-border-theme[ x-placement^='left' ] .tippy-arrow::after {
border-left-color: var( --color-surface-1 );
}
.tippy-tooltip.light-border-theme[ x-placement^='left' ] .tippy-arrow::before {
border-left-color: var( --border-color-base );
}
.tippy-tooltip.light-border-theme[ x-placement^='right' ] .tippy-arrow {
border-right-color: var( --color-surface-1 );
}
.tippy-tooltip.light-border-theme[ x-placement^='right' ] .tippy-arrow::after {
border-right-color: var( --color-surface-1 );
}
.tippy-tooltip.light-border-theme[ x-placement^='right' ] .tippy-arrow::before {
border-right-color: var( --border-color-base );
}
/* libs/tippy/light.css */
.tippy-tooltip.light-theme {
color: var( --color-base );
background-color: var( --color-surface-1 );
box-shadow: var( --box-shadow-drop-xx-large );
}
.tippy-tooltip.light-theme[ x-placement^='top' ] .tippy-arrow {
border-top-color: var( --color-surface-1 );
}
.tippy-tooltip.light-theme[ x-placement^='bottom' ] .tippy-arrow {
border-bottom-color: var( --color-surface-1 );
}
.tippy-tooltip.light-theme[ x-placement^='left' ] .tippy-arrow {
border-left-color: var( --color-surface-1 );
}
.tippy-tooltip.light-theme[ x-placement^='right' ] .tippy-arrow {
border-right-color: var( --color-surface-1 );
}
.tippy-tooltip.light-theme .tippy-backdrop {
background-color: var( --color-surface-1 );
}
.tippy-tooltip.light-theme .tippy-roundarrow {
fill: var( --color-surface-1 );
}