Template:Minibox/styles.css

/* 内容源自音MAD维基，URL地址 https://otomad.wiki/MediaWiki:Common.css */
/* 部分内容已经修改 */
/* 这个页面包含 minibox 模板需要的大部分css */
/* 其余内容参见 template:minibox/doc*/
/* 首页dpl列表相关样式 */
/*https://www.mediawiki.org/wiki/Extension:TemplateStylesExtender#Note_CSS_Vars*/

:root {
  --bg-text-color: rgba(128,128,128,0.3);
}
@media screen {
	html.skin-theme-clientpref-night {
		--bg-text-color: rgba(255,255,255,0.3);
	}
}
@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os {
		--bg-text-color: rgba(255,255,255,0.3);
	}
}
.mini-block {
    width: 100%;
    min-width: 20%;
    padding: 16px;
    margin-top: 8px;
    box-shadow: var(--omw-surface-box-shadow);
    border: 1px solid;
    border-color: var(--border-color-base);
    border-radius: 8px;
    word-break: break-all;
    box-sizing: border-box;
    position: relative;
}
.mini-block p {
	margin: 0 0 1em 0;
}
.mini-block p:last-child {
	margin: 0;
}
.mini-block-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    box-sizing: border-box;
}
/*深色模式下效果不好，故注释*/
/*citizen text auto color start*/
.mini-block-list a {
    color: var(--color-base);
}
.mini-block-list a.new {
    color: var(--color-base);
}
.mini-block-list a:hover{
	color: var(--color-link-hover);
}
.mini-block-list a.new:hover{
	color: var(--color-destructive);
}
.mini-block-list li a:hover {
    color: var(--color-link-hover);
}
.mini-block-list li a.new:hover {
    color: var(--color-destructive);
}
/*citizen text auto color end*/
.mini-block-container li{
    border-radius: 4px;
    margin: 0;
    list-style: none;
    cursor: pointer;
    transition-property: background-color;
    transition-duration: 250ms;
    transition-timing-function: var(--ease-out-expo);
}
.mini-block-container li:hover {
    background-color: var(--background-color-interactive--hover);
}
.mini-block-title {
	font-size: 24px;
	font-weight: 500;
}
.mini-block-bg-text{
    font-size: 70px;
    font-weight: 200;
    text-align: right;
    height: 0;
    color: var(--bg-text-color);
    user-select: none;
    margin-bottom: 0;
}
.mini-block-bg-text-v{
    font-size: 40px;
    font-weight: 200;
    color: var(--bg-text-color);
    user-select: none;
    position: absolute;
    top: 24px;
    right: 8px;
    /*text-wrap-mode: nowrap;*/
    writing-mode: vertical-rl;
}
.mini-block-container ul {
    margin: 0;
    padding: 0;
}
.mini-block-container li a {
    padding: .5em .4em;
    display: inline-block;
    width: 100%;
    text-decoration: none;
    transition-property: transform;
	transition-duration: 1s;
	transition-timing-function: var(--ease-out-expo);
}
.mini-block-container li:hover a {
	transform: translateX(4px);
	transition-duration: 250ms;
}
@media screen and (max-width: 850px) {
    .mini-block {
        align-self: stretch;
        width: auto;
    }
    .mini-block-container {
    	flex-direction: column;
    }
}