Thành viên:Đức Anh/Nháp 30

    Tủ sách mở Wikibooks
    /* default layout */
    .main-body {
    	display: flex;
    	flex-flow: wrap column;
    }
    
    .main-box {
    	margin-top: 1rem;
    }
    
    .main-bottom {
    	margin-top: -0.5rem;
    }
    
    /* responsive layout */
    @media (min-width: 992px) {
    	.main-body {
    		flex-direction: row;
        	margin: 0 -0.5rem;
    	}
    	
    	.main-body__left,
    	.main-body__right {
    		flex: 1;
        	margin: 0 0.5rem;
    	}
    
    	.main-body__bottom {
    	    width: 100%;
    	    margin: 0 0.5rem;
    	}
    }
    
    /* tweaks WikimediaUI */
    .mw-headline-number {
        display: none;
    }
    
    .main-top__right .mw-ui-quiet {
    	padding: 6px 8px;
    }
    
    .main-top__right .mw-ui-quiet:hover,
    .main-top__right .mw-ui-quiet:focus,
    .main-box__title a:hover,
    .main-box__title a:focus,
    .main-box-dropdown__content > ul > li > a:hover,
    .main-box-dropdown__content > ul > li > a:focus {
    	color: #0645ad;
    }
    
    /* tweaks .main-bottom elements */
    /** .main-bottom-box **/
    .main-bottom-box {
    	margin-top: calc(1.5rem + 24px);
        border-top: 2px dotted #e0e0e0;
    }
    
    /** .main-bottom-box__icon **/
    .main-bottom-box__icon {
        margin: -24px 0 0.5rem;
    }
    
    .main-bottom-box__icon img {
        padding: 0 1em;
    	background-color: #fff;
    }
    
    /** .main-bottom-box__header **/
    .main-bottom-box__header {
    	text-align: center;
    }
    
    @media (max-width: 719px) {
    	.main-bottom-box__header {
    		margin-bottom: 1em;
    		font-family: inherit;
    		font-size: 1em;
    		line-height: 1.5;
    	}
    }
    
    @media (min-width: 720px) {
    	.main-bottom-box__header {
    		margin-bottom: 1rem;
    		font-size: 1.4em;
    	}
    }
    
    @media (min-width: 1000px) {
    	.main-bottom-box__header {
    		margin-left: auto;
    		margin-right: auto;
    		width: 80%;
    	}
    }
    
    /* utils */
    .u-display-inline-block {
    	display: inline-block;
    }
    
    .u-font-size-larger {
    	font-size: 1.35em;
    }
    
    .u-text-align-center {
    	text-align: center;
    }
    
    .u-plain-list > ul,
    .u-plain-list > ul > li {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    
    .u-horizontal-list > ul {
    	display: inline-flex;
        flex-wrap: wrap;
    }
    
    .u-horizontal-list > ul li::after {
        padding: 0 0.35em;
        content: "·";
        font-weight: bold;
    }
    
    .u-horizontal-list > ul li:last-child::after {
        padding: 0;
        content: "";
    }
    
    .u-plain-heading {
    	margin-top: 0;
    	padding-bottom: 0;
    	padding-top: 0;
    	border-bottom-color: transparent;
    }
    
    /* others */
    .main-box__body > .show-image,
    .main-box__body > .itn-img {
    	margin: 0.4em 0 0.4em 1em !important;
    }
    
    .main-box__body > .itn-img > .mp-thumb {
    	padding: 0 !important;
    }
    
    .itn-speciald {
    	padding: 6px 1rem !important;
    	background: #f9f9f9 !important;
        border: 1px solid #e0e0e0 !important;
        border-width: 0 0 1px 0 !important;
    }
    
    .-responsive-image center:first-child {
        padding: 0.25em 0 0.75em;
    }
    
    /** #main-suggestions **/
    #main-suggestions {
    	padding-top: 0.5rem;	
    }
    
    #main-suggestions .floatright {
        margin-top: -2.75em;
        position: relative;
    }
    
    #main-suggestions .main-box__title {
    	border-bottom: 1px dotted #e0e0e0;
    }
    
    /** .main-figure **/
    .main-figure {
    	display: table;
        position: relative;
        margin: auto;
        padding-top: 0.05em;
    }
    
    .main-figure-img > a > img {
        width: 100%;
        height: auto !important;
    	max-width: 420px !important;
    }
    
    .main-figure-caption {
        display: none;
    }
    
    .main-figure:hover .main-figure-caption {
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        overflow: hidden;
        width: 100%;
        height: auto;
        background: #fff;
        background: rgba(255, 255, 255, 0.9);
        padding: 1em;
        box-sizing: border-box;
        text-align: center;
    }
    
    .main-figure-button {
    	display: none;
    }
    
    @media (max-width: 576px) {
    	.main-figure-button {
    		display: block;
    		position: absolute;
    		z-index: 1;
    	    left: 0.5em;
    	    bottom: 0.5em;
    	    padding: 18px;
    	    background-color: #fff;
    	    background-color: rgba(255, 255, 255, 0.9);
    	    background-image: url(//upload.wikimedia.org/wikipedia/commons/8/81/OOjs_UI_icon_stripeFlow-ltr.svg);
    	    background-size: 20px;
    	    background-repeat: no-repeat;
    	    background-position: center;
    	}
    	
    	.main-figure:hover .main-figure-button {
    		display: none;
    	}
    }
    
    /*** fix bug <small> for skin minerva ***/
    body.skin-minerva small {
    	font-size: smaller;
    }
    
    /* .content-improvement-box */
    .content-improvement-box {
    	display: flex;
        flex-flow: wrap column;
        margin: 0 -0.5rem;
    }
    
    /* .content-improvement-problems */
    .content-improvement-problems,
    .content-improvement-invitation {
        margin: 0 0.5rem;
    }
    
    .content-improvement-problems {
    	order: 2;
    	display: flex;
        flex-wrap: wrap;
        margin: -0.5rem 0;
        padding-top: 1rem;
    }
    
    .content-improvement-item {
        flex-grow: 1;
        padding: 0.5rem;
    	width: 100%;
    }
    
    /** .content-improvement-item color modifier **/
    .content-improvement-item.-color-red > a {
        border-bottom: 5px solid #dd3333;
    }
    
    .content-improvement-item.-color-red > a:hover {
        background-color: #dd3333;
    }
    
    .content-improvement-item.-color-blue > a {
        border-bottom: 5px solid #36c;
    }
    
    .content-improvement-item.-color-blue > a:hover {
        background-color: #36c;
    }
    
    .content-improvement-item.-color-green > a {
        border-bottom: 5px solid #00af89;
    }
    
    .content-improvement-item.-color-green > a:hover {
        background-color: #00af89;
    }
    
    .content-improvement-item.-color-yellow > a {
        border-bottom: 5px solid #f2c94c;
    }
    
    .content-improvement-item.-color-yellow > a:hover {
        background-color: #f2c94c;
    }
    
    .content-improvement-item.-color-gray > a {
        border-bottom: 5px solid #a2a9b1;
    }
    
    .content-improvement-item.-color-gray > a:hover {
        background-color: #a2a9b1;
    }
    
    .content-improvement-item.-color-orange > a {
        border-bottom: 5px solid #f2994a;
    }
    
    .content-improvement-item.-color-orange > a:hover {
        background-color: #f2994a;
    }
    
    /** .content-improvement-item icon modifier **/
    .content-improvement-item.-icon-reload > a::before {
        background-image: url(//upload.wikimedia.org/wikipedia/commons/1/17/OOjs_UI_icon_reload.svg);
    }
    
    .content-improvement-item.-icon-tableMergeCells > a::before {
        background-image: url(//upload.wikimedia.org/wikipedia/commons/6/64/OOjs_UI_icon_table-merge-cells.svg);
    }
    
    .content-improvement-item.-icon-searchCaseSensitive > a::before {
        background-image: url(//upload.wikimedia.org/wikipedia/commons/e/e5/OOjs_UI_icon_searchCaseSensitive.svg);
    }
    
    .content-improvement-item.-icon-alert > a::before {
        background-image: url(//upload.wikimedia.org/wikipedia/commons/8/80/OOjs_UI_icon_alert.svg);
    }
    
    .content-improvement-item.-icon-tag > a::before {
        background-image: url(//upload.wikimedia.org/wikipedia/commons/d/dd/OOjs_UI_icon_tag-ltr.svg);
    }
    
    .content-improvement-item.-icon-language > a::before {
        background-image: url(//upload.wikimedia.org/wikipedia/commons/4/43/OOjs_UI_icon_language-ltr.svg);
    }
    
    .content-improvement-item.-icon-link > a::before {
        background-image: url(//upload.wikimedia.org/wikipedia/commons/7/72/OOjs_UI_icon_link-ltr.svg);
    }
    
    .content-improvement-item.-icon-link > a::before {
        background-image: url(//upload.wikimedia.org/wikipedia/commons/7/72/OOjs_UI_icon_link-ltr.svg);
    }
    
    .content-improvement-item.-icon-history > a::before {
        background-image: url(//upload.wikimedia.org/wikipedia/commons/2/27/OOjs_UI_icon_history.svg);
    }
    
    .content-improvement-item.-icon-edit > a::before {
        background-image: url(//upload.wikimedia.org/wikipedia/commons/8/8a/OOjs_UI_icon_edit-ltr.svg);
    }
    
    .content-improvement-item.-icon-users > a::before {
        background-image: url(//upload.wikimedia.org/wikipedia/commons/9/98/OOjs_UI_icon_userAvatar.svg);
    }
    
    .content-improvement-item.-icon-active-users > a::before {
        background-image: url(//upload.wikimedia.org/wikipedia/commons/1/1b/OOjs_UI_icon_logo-wikimediaDiscovery.svg);
    }
    
    .content-improvement-item.-icon-sysop > a::before {
        background-image: url(//upload.wikimedia.org/wikipedia/commons/1/1b/VisualEditor_icon_profile.svg);
    }
    
    .content-improvement-item.-icon-articles > a::before {
        background-image: url(//upload.wikimedia.org/wikipedia/commons/3/36/VisualEditor_icon_page-existing-rtl.svg);
    }
    
    .content-improvement-item.-icon-code > a::before {
        background-image: url(//upload.wikimedia.org/wikipedia/commons/c/cd/OOjs_UI_icon_code.svg);
    }
    
    /** .content-improvement-item > a **/
    .content-improvement-item > a {
        box-sizing: border-box;
        position: relative;
        z-index: 0;
        display: flex;
        flex-wrap: wrap;
        align-content: center;
        padding: 0.5rem 1rem 1rem;
        width: 100%;
        height: 100%;
        color: inherit;
        background: #f7f7f7;
        text-decoration: none;
        transition: color .1s ease-in-out, background .1s ease-in-out, box-shadow .1s ease-in-out, opacity .1s ease-in-out;
    }
    
    .content-improvement-item > a:hover {
        color: #fff;
        box-shadow: 0 2px 5px #ccc;
    }
    
    .content-improvement-item > a:active {
        opacity: 0.7;
        box-shadow: 0 4px 7px #ccc;
    }
    
    .content-improvement-item > a::before {
        content: "";
        position: absolute;
        z-index: -1;
        top: 50%;
        right: 0.75rem;
        transform: translateY(-50%);
        width: calc(100% - 0.75rem);
        height: 90%;
        background-size: contain;
        background-position: right;
        background-repeat: no-repeat;
        opacity: 0.02;
        transition: opacity .1s ease-in-out;
    }
    
    .content-improvement-item > a:hover::before {
        opacity: 0.08;
    }
    
    .content-improvement-item > a > span {
        display: block;
        width: 100%;
    }
    
    .content-improvement-item__number {
        font-weight: bold;
        font-size: 1.8em;
        padding-right: 0.25em;
    }
    
    /* .content-improvement-invitation */
    .content-improvement-invitation {
    	order: 1;
        padding: 1rem;
        background: #f7f7f7;
    }
    
    .content-improvement-invitation__icon {
        margin: 0 0 0.5em 0.75em;
        float: right;
        width: 80px;
        height: 80px;
        background-image: url(//upload.wikimedia.org/wikipedia/commons/b/bd/Wikipedia-logo-v2-bw.svg);
        background-size: 80px;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    .content-improvement-invitation__title {
        font-weight: bold;
        font-size: 1.1em;
    }
    
    .content-improvement-invitation__content p:last-child {
    	margin-bottom: 0;
    }
    
    .content-improvement-invitation__button {
    	padding: 0.75rem 0 0.45rem;
    }
    
    /* responsive */
    @media (min-width: 768px) {
    	/* .content-improvement-problems */
    	.content-improvement-item {
    		width: 45%;
    	}
    }
    
    @media (min-width: 992px) {
    	/* .content-improvement-box */
    	.content-improvement-box {
    		flex-direction: row;
    	}
    	
    	/* .content-improvement-problems */
    	.content-improvement-problems {
    		flex: 2;
    		order: 1;
        	padding-top: 0;
    	}
    
    	/* .content-improvement-invitation */
    	.content-improvement-invitation {
    		flex: 1;
    		order: 2;
    	}
    }
    
    @media (min-width: 1200px) {
    	/* .content-improvement-problems */
    	.content-improvement-item {
    		width: 20%;
    	}
    }