User:Kaartic/common.css

a[accesskey]:before { content: " " attr(accesskey) " "; text-transform: uppercase; white-space: pre; font-family: sans-serif; margin-right: 0.5ex; } /* * Comment out the unused customised MDC layout-grid styles * This thing isn't of much use for sleek userbox formatting as these styles get loaded * only when I log in! */ /*
 * root {

--mdc-layout-grid-margin-desktop: 24px; --mdc-layout-grid-gutter-desktop: 24px; --mdc-layout-grid-margin-tablet: 16px; --mdc-layout-grid-gutter-tablet: 16px; --mdc-layout-grid-margin-phone: 16px; --mdc-layout-grid-gutter-phone: 16px; }

@media (min-width: 840px) { .mdc-layout-grid { box-sizing: border-box; margin: 0 auto; padding: 24px; padding: var(--mdc-layout-grid-margin-desktop, 24px); } } @media (min-width: 480px) and (max-width: 839px) { .mdc-layout-grid { box-sizing: border-box; margin: 0 auto; padding: 16px; padding: var(--mdc-layout-grid-margin-tablet, 16px); } } @media (max-width: 479px) { .mdc-layout-grid { box-sizing: border-box; margin: 0 auto; padding: 16px; padding: var(--mdc-layout-grid-margin-phone, 16px); } }

@media (min-width: 840px) { .mdc-layout-grid__inner { display: flex; flex-flow: row wrap; align-items: stretch; margin: -12px; margin: calc(var(--mdc-layout-grid-gutter-desktop, 24px) / 2 * -1); } @supports (display: grid) { .mdc-layout-grid__inner { display: grid; grid-gap: 24px; grid-gap: var(--mdc-layout-grid-gutter-desktop, 24px); margin: 0; grid-template-columns: repeat(12, minmax(0, 1fr)); } } } @media (min-width: 480px) and (max-width: 839px) { .mdc-layout-grid__inner { display: flex; flex-flow: row wrap; align-items: stretch; margin: -8px; margin: calc(var(--mdc-layout-grid-gutter-tablet, 16px) / 2 * -1); } @supports (display: grid) { .mdc-layout-grid__inner { display: grid; grid-gap: 16px; grid-gap: var(--mdc-layout-grid-gutter-tablet, 16px); margin: 0; grid-template-columns: repeat(8, minmax(0, 1fr)); } } } @media (max-width: 479px) { .mdc-layout-grid__inner { display: flex; flex-flow: row wrap; align-items: stretch; margin: -8px; margin: calc(var(--mdc-layout-grid-gutter-phone, 16px) / 2 * -1); } @supports (display: grid) { .mdc-layout-grid__inner { display: grid; grid-gap: 16px; grid-gap: var(--mdc-layout-grid-gutter-phone, 16px); margin: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); } } }

@media (min-width: 840px) { .mdc-layout-grid__cell { box-sizing: border-box; margin: 12px; margin: calc(var(--mdc-layout-grid-gutter-desktop, 24px) / 2); width: calc(33.33333% - 24px); width: calc(33.33333% - var(--mdc-layout-grid-gutter-desktop, 24px)); } @supports (display: grid) { .mdc-layout-grid__cell { margin: 0; } } @supports (display: grid) { .mdc-layout-grid__cell { width: auto; grid-column-end: span 4; } } .mdc-layout-grid__cell--span-3 { width: calc(25% - 24px); width: calc(25% - var(--mdc-layout-grid-gutter-desktop, 24px)); } @supports (display: grid) { .mdc-layout-grid__cell--span-3 { width: auto; grid-column-end: span 3; } } .mdc-layout-grid__cell--span-4 { width: calc(33.33333% - 24px); width: calc(33.33333% - var(--mdc-layout-grid-gutter-desktop, 24px)); } @supports (display: grid) { .mdc-layout-grid__cell--span-4 { width: auto; grid-column-end: span 4; } } .mdc-layout-grid__cell--span-5 { width: calc(41.66667% - 24px); width: calc(41.66667% - var(--mdc-layout-grid-gutter-desktop, 24px)); } @supports (display: grid) { .mdc-layout-grid__cell--span-5 { width: auto; grid-column-end: span 5; } } } @media (min-width: 480px) and (max-width: 839px) { .mdc-layout-grid__cell { box-sizing: border-box; margin: 8px; margin: calc(var(--mdc-layout-grid-gutter-tablet, 16px) / 2); width: calc(50% - 16px); width: calc(50% - var(--mdc-layout-grid-gutter-tablet, 16px)); } @supports (display: grid) { .mdc-layout-grid__cell { margin: 0; } } @supports (display: grid) { .mdc-layout-grid__cell { width: auto; grid-column-end: span 4; } } .mdc-layout-grid__cell--span-3 { width: calc(37.5% - 16px); width: calc(37.5% - var(--mdc-layout-grid-gutter-tablet, 16px)); } @supports (display: grid) { .mdc-layout-grid__cell--span-3 { width: auto; grid-column-end: span 3; } } .mdc-layout-grid__cell--span-4 { width: calc(50% - 16px); width: calc(50% - var(--mdc-layout-grid-gutter-tablet, 16px)); } @supports (display: grid) { .mdc-layout-grid__cell--span-4 { width: auto; grid-column-end: span 4; } } .mdc-layout-grid__cell--span-5 { width: calc(62.5% - 16px); width: calc(62.5% - var(--mdc-layout-grid-gutter-tablet, 16px)); } @supports (display: grid) { .mdc-layout-grid__cell--span-5 { width: auto; grid-column-end: span 5; } } } @media (max-width: 479px) { .mdc-layout-grid__cell { box-sizing: border-box; margin: 8px; margin: calc(var(--mdc-layout-grid-gutter-phone, 16px) / 2); width: calc(100% - 16px); width: calc(100% - var(--mdc-layout-grid-gutter-phone, 16px)); } @supports (display: grid) { .mdc-layout-grid__cell { margin: 0; } } @supports (display: grid) { .mdc-layout-grid__cell { width: auto; grid-column-end: span 4; } } .mdc-layout-grid__cell--span-3 { width: calc(75% - 16px); width: calc(75% - var(--mdc-layout-grid-gutter-phone, 16px)); } @supports (display: grid) { .mdc-layout-grid__cell--span-3 { width: auto; grid-column-end: span 3; } } .mdc-layout-grid__cell--span-4 { width: calc(100% - 16px); width: calc(100% - var(--mdc-layout-grid-gutter-phone, 16px)); } @supports (display: grid) { .mdc-layout-grid__cell--span-4 { width: auto; grid-column-end: span 4; } } .mdc-layout-grid__cell--span-5 { width: calc(100% - 16px); width: calc(100% - var(--mdc-layout-grid-gutter-phone, 16px)); } @supports (display: grid) { .mdc-layout-grid__cell--span-5 { width: auto; grid-column-end: span 4; } } }

/* * Clearfix is not used so comment it */

/* Add clearfix to test if it fixes babel floating issue .clearfix:after { content: ""; display: table; clear: both; }