|
|
| Строка 2: |
Строка 2: |
| body.page-Main_Page #siteSub { display: none; } | | body.page-Main_Page #siteSub { display: none; } |
| body.page-Main_Page .mw-editsection { display: none; } | | body.page-Main_Page .mw-editsection { display: none; } |
|
| |
|
| |
|
| |
| /* Force override until skin is updated */
| |
| .skin-citizen blockquote {
| |
| margin: 0.8rem 20px;
| |
| padding: 0;
| |
| }
| |
|
| |
|
| |
| .card:hover {
| |
| box-shadow: 0 10px 20px rgba( 0, 0, 0, 0.0475 ), 0 6px 6px rgba( 0, 0, 0, 0.0575 );
| |
| }
| |
|
| |
| .card-col2 {
| |
| width: calc( 100% / 2 - 0.4rem );
| |
| }
| |
|
| |
| .card-col3 {
| |
| width: calc( 100% / 3 - 0.4rem );
| |
| }
| |
|
| |
| .card-col4 {
| |
| width: calc( 100% / 4 - 0.4rem );
| |
| }
| |
|
| |
| .card-col5 {
| |
| width: calc( 100% / 5 - 0.4rem );
| |
| }
| |
|
| |
| .card-col6 {
| |
| width: calc( 100% / 6 - 0.4rem );
| |
| }
| |
|
| |
| .card-container {
| |
| margin-top: 1.6rem !important;
| |
| margin-right: -0.2rem;
| |
| margin-bottom: 1.6rem !important;
| |
| margin-left: -0.2rem;
| |
| border-radius: 0 0 12px 12px;
| |
| }
| |
|
| |
| .card-container.floatnone {
| |
| padding: 0 20px;
| |
| }
| |
|
| |
| .card-row {
| |
| display: flex;
| |
| width: 100%;
| |
| flex-wrap: wrap;
| |
| }
| |
|
| |
| .card-caption {
| |
| font-size: 0.875rem;
| |
| font-weight: 600;
| |
| }
| |
|
| |
| .card-image '''a''' {
| |
| display: flex;
| |
| overflow: hidden;
| |
| justify-content: center;
| |
| background: none !important;
| |
| }
| |
|
| |
| .card-image '''a''' '''img''' {
| |
| transition: transform 0.2s cubic-bezier( 0.77, 0.2, 0.05, 1 );
| |
| }
| |
|
| |
| .card:hover .card-image '''a''' '''img''' {
| |
| transform: scale( 1.1 );
| |
| }
| |
|
| |
| .card .card-title {
| |
| margin-top: 0;
| |
| margin-bottom: 0.8rem;
| |
| color: var( --color-base--emphasized );
| |
| font-size: 1.25rem;
| |
| font-weight: 600;
| |
| line-height: 1.2;
| |
| }
| |
|
| |
| ''/* CSS hack */''
| |
| .card .card-title + .byline-bottom {
| |
| margin-top: -0.6rem;
| |
| }
| |
|
| |
| .card '''ol''',
| |
| .card '''ul''' {
| |
| padding-left: 1.6rem;
| |
| margin: 0;
| |
| }
| |
|
| |
| .card .byline-top,
| |
| .card .byline-bottom {
| |
| color: var( --color-base );
| |
| font-size: 0.825rem;
| |
| }
| |
|
| |
| .card .byline-top {
| |
| margin: 0 0 0.2rem 0;
| |
| }
| |
|
| |
| .card .byline-bottom {
| |
| margin: 0.2rem 0 1.6rem 0;
| |
| }
| |
|
| |
| .card .byline-bottom + '''p''' {
| |
| margin-top: 0.8rem;
| |
| }
| |
|
| |
| .card .numdata {
| |
| margin-top: 0.8rem;
| |
| }
| |
|
| |
| .card-top,
| |
| .card-bottom {
| |
| padding: 1.2rem;
| |
| }
| |
|
| |
| .card-button {
| |
| background: var( --color-base );
| |
| border-radius: 0 0 var( --border-radius--medium ) var( --border-radius--medium );
| |
| transition: opacity 0.2s ease;
| |
| }
| |
|
| |
| .card-button:hover {
| |
| opacity: 0.8;
| |
| }
| |
|
| |
| .card-button '''a''' {
| |
| display: block;
| |
| padding: 0.6rem;
| |
| ''/* Cancel out a styles */''
| |
| background: none !important;
| |
| color: #fff;
| |
| font-size: 0.875rem;
| |
| font-weight: 600;
| |
| letter-spacing: 0.25px;
| |
| text-align: center;
| |
| transition: background 0.2s ease, color 0.2s ease;
| |
| }
| |
|
| |
| .card-bottom {
| |
| background: var( --color-surface-2 );
| |
| }
| |
|
| |
| @media '''only''' '''screen''' '''and''' ( '''max-width''': '''720px''' ) {
| |
| .card-row {
| |
| overflow: auto;
| |
| width: auto;
| |
| flex-wrap: nowrap;
| |
| padding: 0 20px;
| |
| margin: 0 -20px;
| |
| }
| |
| }
| |
|
| |
|
| |
| .mbox {
| |
| position: relative;
| |
| display: flex;
| |
| flex-direction: column;
| |
| margin-top: var( --space-xs );
| |
| margin-bottom: var( --space-md );
| |
| background-color: var( --color-surface-2 );
| |
| border-radius: var( --border-radius--medium );
| |
| color: var( --color-base--subtle );
| |
| font-size: 0.875rem;
| |
| }
| |
|
| |
| .mbox.mbox-high {
| |
| /* FIXME: Update back to Citzen CSS var when patched */
| |
| background-color: rgba( 221, 51, 51, 0.1 );
| |
| }
| |
|
| |
| .mbox.mbox-med {
| |
| /* FIXME: Update back to Citzen CSS var when patched */
| |
| background-color: rgba( 255, 204, 51, 0.1 );
| |
| }
| |
|
| |
| .mbox-title {
| |
| display: flex;
| |
| align-items: center;
| |
| padding: var( --space-sm ) var( --space-md );
| |
| font-weight: 500;
| |
| }
| |
|
| |
| .mbox-icon img {
| |
| width: 14px;
| |
| height: auto;
| |
| margin-right: var( --space-xs );
| |
| opacity: 0.5;
| |
| }
| |
|
| |
| .mbox-text {
| |
| position: absolute;
| |
| top: 100%;
| |
| z-index: 10;
| |
| padding: var( --space-md );
| |
| width: 100%;
| |
| box-sizing: border-box;
| |
| background-color: var( --color-surface-1 );
| |
| border-bottom-left-radius: var( --border-radius--medium );
| |
| border-bottom-right-radius: var( --border-radius--medium );
| |
| box-shadow: var( --box-shadow-dialog );
| |
| opacity: 0;
| |
| visibility: hidden;
| |
| }
| |
|
| |
| .mbox:hover {
| |
| /* Merge with popup */
| |
| border-bottom-left-radius: 0;
| |
| border-bottom-right-radius: 0;
| |
| box-shadow: var( --box-shadow-dialog );
| |
| }
| |
|
| |
| .mbox:hover .mbox-text {
| |
| opacity: 1;
| |
| visibility: visible;
| |
| }
| |
|
| |
|
| /* Dark mode */ | | /* Dark mode */ |
