feat(core): ✨ revamp thumbnail styles
这个提交包含在：
alistair3149
父节点
4e26241669
当前提交
8eebf6806d
|
|
@ -1,35 +0,0 @@
|
|||
figure,
|
||||
.thumb {
|
||||
margin: var( --space-md ) 0;
|
||||
|
||||
.thumbinner {
|
||||
overflow: hidden; // needed for center to work
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
|
||||
a {
|
||||
&.image {
|
||||
max-width: inherit;
|
||||
border-radius: var( --border-radius--small );
|
||||
margin-right: 2px; // Counter the 2px space added by core
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
&.new {
|
||||
display: block;
|
||||
padding: var( --space-sm );
|
||||
background-color: var( --color-surface-3 );
|
||||
transition: @transition-background, @transition-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
figcaption,
|
||||
.thumbcaption {
|
||||
margin: var( --space-xs ) 0;
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
|
|
@ -40,26 +40,10 @@ sup {
|
|||
font-size: 80%;
|
||||
}
|
||||
|
||||
figcaption,
|
||||
.thumbcaption {
|
||||
font-size: 0.8125rem;
|
||||
font-style: italic;
|
||||
|
||||
i {
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.mw-logo-wordmark {
|
||||
font-weight: var( --font-weight-semibold );
|
||||
}
|
||||
|
||||
.thumbinner {
|
||||
.new {
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
}
|
||||
|
||||
.firstHeading {
|
||||
&-parenthesis {
|
||||
font-size: var( --font-size-h3 );
|
||||
|
|
@ -70,12 +54,3 @@ figcaption,
|
|||
.mw-body-content {
|
||||
line-height: var( --line-height );
|
||||
}
|
||||
|
||||
@media ( max-width: @width-breakpoint-tablet ) {
|
||||
#mw-content-text {
|
||||
figcaption,
|
||||
.thumbcaption {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -51,33 +51,6 @@ a.image {
|
|||
}
|
||||
}
|
||||
|
||||
@media ( min-width: @width-breakpoint-tablet ) {
|
||||
div.tleft,
|
||||
figure.mw-halign-left,
|
||||
div.floatleft,
|
||||
table.floatleft {
|
||||
/* @noflip */
|
||||
margin-right: 1.4rem;
|
||||
/* @noflip */
|
||||
clear: left;
|
||||
/* @noflip */
|
||||
float: left;
|
||||
}
|
||||
|
||||
div.tright,
|
||||
figure.mw-halign-right,
|
||||
figure.mw-default-size,
|
||||
div.floatright,
|
||||
table.floatright {
|
||||
/* @noflip */
|
||||
margin-left: 1.4rem;
|
||||
/* @noflip */
|
||||
clear: right;
|
||||
/* @noflip */
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
@media ( min-width: @width-breakpoint-desktop ) {
|
||||
.citizen-page-container {
|
||||
margin-bottom: 0;
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@
|
|||
@import 'layout.less';
|
||||
@import 'common/common.less';
|
||||
@import 'common/content.less';
|
||||
@import 'common/thumbnail.less';
|
||||
@import 'common/scrollbar.less';
|
||||
@import 'common/hacks.less';
|
||||
@import 'common/progressbar.less';
|
||||
|
|
@ -37,6 +36,9 @@
|
|||
@import 'skinning/content.links.less';
|
||||
@import 'skinning/content.externallinks.less';
|
||||
@import 'skinning/content.tables.less';
|
||||
// FIXME: This should not be under screen, fix this when we work on print styles
|
||||
@import 'skinning/content.thumbnails-common.less';
|
||||
@import 'skinning/content.thumbnails-screen.less';
|
||||
@import 'skinning/elements.less';
|
||||
@import 'skinning/i18n-all-lists-margins.less';
|
||||
@import 'skinning/interface-edit-section-links.less';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,71 @@
|
|||
/*
|
||||
* Citizen
|
||||
*
|
||||
* Module: mediawiki.skinning.content.thumbnails-common
|
||||
* Version: REL1_39
|
||||
*
|
||||
* Date: 2022-11-18
|
||||
*/
|
||||
|
||||
/* @noflip */
|
||||
div.floatleft,
|
||||
table.floatleft,
|
||||
div.floatright,
|
||||
table.floatright {
|
||||
margin: 0 0 var( --space-md ) 0;
|
||||
}
|
||||
|
||||
/* @noflip */
|
||||
div.tleft,
|
||||
div.tright {
|
||||
margin: var( --space-xs ) 0 var( --space-md ) 0;
|
||||
}
|
||||
|
||||
.thumbcaption {
|
||||
margin-top: var( --space-xs );
|
||||
margin-right: var( --border-radius--small );
|
||||
// Sync with rounded corner
|
||||
margin-left: var( --border-radius--small );
|
||||
color: var( --color-base--subtle );
|
||||
letter-spacing: 0.025em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div.thumbinner {
|
||||
/* new block formatting context,
|
||||
* to clear background from floating content */
|
||||
overflow: hidden;
|
||||
// Avoid overflow
|
||||
max-width: 100%;
|
||||
margin-right: auto;
|
||||
// Center thumbnail without float
|
||||
margin-left: auto;
|
||||
// We use the same font size for both caption and inner
|
||||
font-size: 0.8125rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// Do not float content in mobile view
|
||||
@media ( min-width: @width-breakpoint-tablet ) {
|
||||
/* @noflip */
|
||||
div.tright,
|
||||
div.floatright,
|
||||
table.floatright {
|
||||
margin-left: var( --space-lg );
|
||||
clear: right;
|
||||
float: right;
|
||||
}
|
||||
|
||||
/* @noflip */
|
||||
div.tleft,
|
||||
div.floatleft,
|
||||
table.floatleft {
|
||||
margin-right: var( --space-lg );
|
||||
clear: left;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.thumbcaption {
|
||||
text-align: start;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
/*
|
||||
* Citizen
|
||||
*
|
||||
* Module: mediawiki.skinning.content.thumbnails-screen
|
||||
* Version: REL1_39
|
||||
*
|
||||
* Date: 2022-11-18
|
||||
*/
|
||||
|
||||
.thumbinner {
|
||||
> a {
|
||||
display: block;
|
||||
border-radius: var( --border-radius--small );
|
||||
|
||||
&.image {
|
||||
max-width: inherit;
|
||||
margin-right: 1px;
|
||||
// Counter the weird hardcoded 2px width added by core
|
||||
margin-left: 1px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
&.new {
|
||||
padding: var( --space-sm );
|
||||
border: 1px dashed var( --border-color-base );
|
||||
transition: @transition-background, @transition-color;
|
||||
|
||||
&:hover {
|
||||
background-color: var( --color-destructive--hover );
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var( --color-destructive--active );
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
正在加载...
在新工单中引用
屏蔽一个用户