MediaWiki:Gadget-tiku.css

/*工具栏*/
.timu-toolbar{
	display:flex;
	position:sticky;
	top:70px;
	margin: 15px;
	z-index:15;
	align-items: center;
}
.timu-toggle-btn{
	flex-grow:0;
	height:32px;
	margin-right:5px;
	margin-top: 5px;
	margin-bottom: 5px;
}
.timu-toolbar-toggle{
	flex-grow:1;
	display:flex;
	flex-wrap: wrap;
	border: 1px solid #CCC;
	padding: 4px;
	border-radius: 5px;
    background: rgba(255, 255, 255, 0.2);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow:inset 0 0 6px rgba(255, 255, 255, 0.2);
}
.timu-toolbar-toggle::after{
	content: '测试版v1.0.0';
	position: absolute;
	font-size: 10px;
	color: rgba(121, 121, 121, 0.2);
	right: 9px;
	bottom: 2px;
}
/*题目*/
.timuContainer{
	position:relative;
	margin-top:4px;
}

.timuID{
	font-size:13px;
	position:absolute;
	right: 12px;
	top: 0px;
	color:#dedada
}

.titleInline{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: flex-start;
    margin-bottom: 1px;
    border-radius: 4px;
    padding: 0.1em;
}
.titleInline-wrap{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: flex-start;
    margin-bottom: 2px;
    border-radius: 4px;
    padding: 0.2em;
}
.titleInline-no-flex{
    margin-bottom: 2px;
    border-radius: 4px;
    padding: 0.2em;
}
.info{
	margin-left: 30px;
    margin-top: 10px;
    padding: 5px;
	border-radius: 5px;
	background-color: rgb(247, 247, 247);
	font-size: 15.5px;

}
.source{
    display: inline;
    background: #e3e3e3;
    border-radius: 3px;
    color: #6d6d6d;
    margin: 0 3px 0 0;
    padding:0 3px 0 3px;
}
.type{
    display: inline;
    background: #e3e3e3;
    border-radius: 3px;
    color: #6d6d6d;
    margin: 0 3px 0 0;
    padding:0 3px 0 3px;
}
.title{
    display: inline;
    margin: 0 1px 0 0;
}
/* dorpdown */
.dorpdown{
	max-width: 55px;
	margin-left: 5px;
	margin-top: 10px;
	height: 30px;
	width: 50px;
	border-radius: 1px;
	border: 1px solid rgb(255, 255, 255);
	text-align: center;
	-moz-appearance:none; /* Firefox */ 
	-webkit-appearance:none; /* Safari 和 Chrome */ 
	appearance:none; 
}
.dropdown-option::-ms-expand{ display: none; } 
.dropdown-option{
	text-align: center!important;
	border-radius: 1px!important;
	border: 1px solid rgb(255, 255, 255)!important;
	-moz-appearance:none; /* Firefox */ 
	-webkit-appearance:none; /* Safari 和 Chrome */ 
	appearance:none; 
}
/* option */
.optionInline{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: flex-start;
    border-radius: 5px;
    margin-bottom: 2px;
    margin-right: 80px;
    padding-left:6px;
}
.optionInline>input{
	height:22px!important;
	margin-right:5px!important;
	margin-top:0!important;
	margin-bottom:0!important;
	margin-left:0!important;
}

.optionsGroup{
    display: block;
    margin-left: 30px;
    margin-top: 0;
    margin-bottom: 5px;
}
.optionsGroup-flex{
    display: flex;
    flex-wrap: wrap;
}
.optionsGroup-flex>.optionInline>:first-child{
	font-weight: bold;
}
/* subject */
.subjectForm{
    margin-top: 10px;
    max-width: 95%;
    word-wrap:break-word
}

/* btnGroup */
.buttonGroup{
    height: 33px;
    margin-left: 15px;
    white-space:nowrap;
}
.editThisBtn{
    display:none;
    margin-left: 5px;
    font-size:14px;
}

/* resultGroup */
.resultGroup{
    display: none;
    margin-top: 15px;
    margin-left: 20px;
}
.answerInline{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
}

.explainInline{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
}
/* textInput */
.text-input-tk{
    display: inline;
    max-width: 200px;
}
.text-input-tk>input{
    display: inline;
    width: 200px;
}
.text-input-mj{
    display: inline;
    max-width: auto;
}
/* 显示答案的设置 */
.notChoiced{
    transition-duration: 500ms;
    background-color: rgba(238, 226, 40, 0.4);
    font-weight: bold;
}
.correct{
    transition-duration: 500ms;
    background-color: rgba(53, 238, 40,0.4);
    font-weight: bold;
}
.wrong{
    transition-duration: 500ms;
    background-color: rgba(255, 79, 79, 0.4);
    font-weight: bold;
}
.answerTip{
    display: inline;
    background: lightgrey;
    color: darkgreen;
    padding: 3px;
    border-radius: 5px;
    margin-left: 5px;
}

@media screen and (max-width: 850px){
	.timu-toolbar{
		top:5px;
	}
}

@media screen and (max-width: 530px){
	.optionInline{
		margin-right:10px;
	}
	.optionsGroup {
		margin-left:5px;
	}
	.info{
		margin-left: 0;
		position:sticky;
		top:50px;
		z-index:10;
		border: 1.2px solid rgb(174, 165, 165);
	}
}
@media screen and (max-width: 360px){
	.info{
		font-size:12.5px;
	}
}