模板:Minibox/styles.css

/*内容源自音MAD维基，URL地址 https://otomad.wiki/MediaWiki:Common.css*/
/*部分内容已经修改*/
/* 这个页面包含 minibox 模板需要的大部分css */
/* 其余内容参见 template:minibox/doc*/
/* 首页dpl列表相关样式 */
.mini-block {
    width: 100%;
    min-width: 20%;
    padding: 16px;
    margin-top: 8px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.04);
    border: 1px solid; border-color: rgba(0,0,0,0.05);
    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: rgba(60, 60, 60, 1); /* Default color */
}

.mini-block-list a.new {
    color: rgba(60, 60, 60, 1);
}

.mini-block-list a:hover,
.mini-block-list li a:hover {
    color: rgba(30, 30, 30, 1); /* Default hover color */
}

/* Dark theme styles */
.skin-citizen-dark .mini-block-list a {
    color: rgba(160, 160, 160, 1);
}

.skin-citizen-dark .mini-block-list a.new {
    color: rgba(160, 160, 160, 1);
}

.skin-citizen-dark .mini-block-list a:hover,
.skin-citizen-dark .mini-block-list li a:hover {
    color: rgba(200, 200, 200, 1);
}

/* Light theme styles */
.skin-citizen-light .mini-block-list a {
    color: rgba(60, 60, 60, 1);
}

.skin-citizen-light .mini-block-list a.new {
    color: rgba(60, 60, 60, 1);
}

.skin-citizen-light .mini-block-list a:hover,
.skin-citizen-light .mini-block-list li a:hover {
    color: rgba(30, 30, 30, 1);
}
/*citizen text auto color end*/
.mini-block-container li{
    border-radius: 4px;
    margin: 0;
    list-style: none;
    cursor: pointer;
    transition: background cubic-bezier(0.22,0.58,0.12,0.98) 0.4s;
}
.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: rgba(128,128,128,0.3);
    user-select: none;
    margin-bottom: 0;
}
.mini-block-bg-text-v{
    font-size: 40px;
    font-weight: 200;
    color: rgba(128,128,128,0.3);
    user-select: none;
    position: absolute;
    top: 24px;
    right: 8px;
    /*text-wrap-mode: nowrap;*/
    writing-mode: vertical-rl;
}
@media screen and (min-width: 851px) {
	.mini-block-container li:hover {
    	background: rgba(128,128,128,0.1);
	}
	.mini-block-container li:hover a {
		transform: translateX(5px);
	}
}
.mini-block-container ul {
    margin: 0;
    padding: 0;
}
.mini-block-container li a {
    padding: .5em .4em;
    display: inline-block;
    width: 100%;
    transition: transform cubic-bezier(0.22,0.58,0.12,0.98) 0.4s;
}
@media screen and (max-width: 850px) {
    .mini-block {
        align-self: stretch;
        width: auto;
    }
    .mini-block-container {
    	flex-direction: column;
    }
}