imported>=海豚= |
|
第1行: |
第1行: |
| /*
| |
| Wiki2021 Interface
| |
| Contributors: P.T.Đ
| |
| Year: 2021
| |
| */
| |
|
| |
|
| /* default layout */
| |
| .main-body {
| |
| display: flex;
| |
| flex-flow: wrap column;
| |
| }
| |
|
| |
| /** fix bug zooming **/
| |
| .main-body > div {
| |
| max-width: 100%;
| |
| }
| |
|
| |
| .main-box {
| |
| margin-top: 1rem;
| |
| }
| |
|
| |
| .main-bottom {
| |
| margin-top: -0.5rem;
| |
| clear: both;
| |
| }
| |
|
| |
| /* 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 {
| |
| flex: 0 1 auto;
| |
| width: 100%;
| |
| margin: 0 0.5rem;
| |
| }
| |
| }
| |
|
| |
| /* tweaks WikimediaUI */
| |
| .mw-headline-number {
| |
| display: none;
| |
| }
| |
|
| |
| .main-header__right .mw-ui-quiet {
| |
| padding: 6px 8px;
| |
| }
| |
|
| |
| .main-header__right .mw-ui-quiet:hover,
| |
| .main-header__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;
| |
| }
| |
|
| |
| @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: 0;
| |
| padding-bottom: 1rem;
| |
| font-size: 1.4em;
| |
| }
| |
| }
| |
|
| |
| @media (min-width: 1000px) {
| |
| .main-bottom-box__header {
| |
| margin: 0 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;
| |
| letter-spacing: -1em;
| |
| }
| |
|
| |
| .u-horizontal-list > ul > li {
| |
| display: inline;
| |
| letter-spacing: normal;
| |
| }
| |
|
| |
| .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-top: 0;
| |
| border-bottom-color: transparent;
| |
| }
| |
|
| |
| /* others */
| |
| /** thumb in .main-box **/
| |
| .main-box__body > .show-image {
| |
| margin: 0.4em 0 0.4em 1em !important;
| |
| }
| |
|
| |
| /** COVID-19 box **/
| |
| .itn-speciald {
| |
| padding: 6px 1rem !important;
| |
| background: #f9f9f9 !important;
| |
| border: 1px solid #e0e0e0 !important;
| |
| border-width: 0 0 1px 0 !important;
| |
| }
| |
|
| |
| /** #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;
| |
| }
| |
|
| |
| /** when box is empty **/
| |
| .isEmpty {
| |
| padding: 4.5em;
| |
| color: #aaa;
| |
| font-size: 1.3em;
| |
| font-weight: bold;
| |
| }
| |
|
| |
| /** did-you-know box **/
| |
| .subTextDYK {
| |
| padding: 0.4em 1.6em 0;
| |
| color: #aaa;
| |
| }
| |