|
|
Line 172: |
Line 172: |
| margin-bottom: var(--space-md); | | margin-bottom: var(--space-md); |
| } | | } |
|
| |
| /* Citizen Infoboxes */
| |
| .infobox {
| |
| margin-bottom: var(--space-md);
| |
| width: 100%;
| |
| max-width: 400px;
| |
| border: 1px solid var(--border-color-base);
| |
| border-radius: var(--border-radius-medium);
| |
| background-color: transparent;
| |
| font-size: var(--font-size-small);
| |
| line-height: var(--line-height-xx-small);
| |
| box-sizing: content-box;
| |
| }
| |
|
| |
| .infobox[open] {
| |
| background-color: var(--color-surface-1);
| |
| }
| |
|
| |
| .infobox__content {
| |
| position: relative;
| |
| }
| |
|
| |
| .infobox__image {
| |
| position: relative;
| |
| margin-bottom: -2rem;
| |
| }
| |
|
| |
| .infobox__image::after {
| |
| content: '';
| |
| position: absolute;
| |
| left: 0;
| |
| right: 0;
| |
| bottom: 0;
| |
| height: 50%;
| |
| background-image: linear-gradient(
| |
| to bottom,
| |
| transparent,
| |
| var(--color-surface-1) 100%
| |
| );
| |
| pointer-events: none;
| |
| }
| |
|
| |
| .infobox__image,
| |
| .infobox__image::after,
| |
| .infobox__indicators {
| |
| transition-timing-function: var(--transition-timing-function-ease);
| |
| transition-duration: var(--transition-duration-medium);
| |
| }
| |
|
| |
| .infobox__image {
| |
| transition-property: margin-bottom;
| |
| }
| |
|
| |
| .infobox__image::after {
| |
| transition-property: opacity, transform;
| |
| }
| |
|
| |
| .infobox__image:hover {
| |
| margin-bottom: 0;
| |
| }
| |
|
| |
| .infobox__image:hover::after {
| |
| opacity: 0;
| |
| transform: translateY(2rem);
| |
| }
| |
|
| |
| .infobox__image:hover ~ .infobox__indicators {
| |
| opacity: 0;
| |
| transform: translateY(-2rem);
| |
| }
| |
|
| |
| .infobox__image img {
| |
| /* Prevent overflow */
| |
| max-width: 100%;
| |
| height: auto;
| |
| }
| |
|
| |
| /* Provide background color for transparent SVGs */
| |
| .infobox__image img[src$='.svg'] {
| |
| background: #eaecf0;
| |
| }
| |
|
| |
| .infobox__image-upload {
| |
| position: absolute;
| |
| bottom: var(--space-md);
| |
| left: 0;
| |
| right: 0;
| |
| z-index: 1;
| |
| }
| |
|
| |
| .infobox__image-upload > a {
| |
| display: flex;
| |
| margin: var(--space-md);
| |
| padding: var(--space-xs) var(--space-sm);
| |
| border-radius: var(--border-radius-base);
| |
| background: var(--color-surface-3);
| |
| color: var(--color-emphasized);
| |
| font-weight: var(--font-weight-medium);
| |
| text-decoration: none;
| |
| justify-content: center;
| |
| align-items: center;
| |
| gap: var(--space-xs);
| |
| }
| |
|
| |
| .infobox__image-upload > a .citizen-ui-icon {
| |
| width: 1rem;
| |
| height: 1rem;
| |
| }
| |
|
| |
| .infobox__image-upload > a:hover {
| |
| background: var(--color-surface-2--hover);
| |
| }
| |
|
| |
| .infobox__image-upload > a:active {
| |
| background: var(--color-surface-2--active);
| |
| }
| |
|
| |
| .infobox__header {
| |
| /* Needed to stay on top of image fade */
| |
| position: relative;
| |
| }
| |
|
| |
| .infobox__snippet,
| |
| .infobox__header,
| |
| .infobox__sectionHeader,
| |
| .infobox__sectionContent {
| |
| padding-left: var(--space-md);
| |
| padding-right: var(--space-md);
| |
| }
| |
|
| |
| .infobox__snippet {
| |
| position: relative;
| |
| z-index: 1;
| |
| padding-top: var(--space-sm);
| |
| padding-bottom: var(--space-sm);
| |
| display: flex;
| |
| gap: var(--space-xs);
| |
| align-items: center;
| |
| white-space: nowrap;
| |
| cursor: pointer;
| |
| /* So that clicking the infobox summary won't highlight the text */
| |
| user-select: none;
| |
| }
| |
|
| |
| .infobox__snippet:hover {
| |
| background-color: var(--background-color-button-quiet--hover);
| |
| }
| |
|
| |
| /* Might as well steal from skin */
| |
| .infobox__snippet .mw-ui-icon-wikimedia-collapse {
| |
| --transform-rotate-collapse: rotate3d(1, 0, 0, 180deg);
| |
| --size-icon: var(--font-size-small);
| |
| width: var(--font-size-small);
| |
| height: var(--font-size-small);
| |
| flex-shrink: 0;
| |
| transition: var(--transition-hover);
| |
| transition-property: transform;
| |
| transform: var(--transform-rotate-collapse);
| |
| }
| |
|
| |
| .infobox[open] .infobox__snippet .mw-ui-icon-wikimedia-collapse {
| |
| transform: none;
| |
| }
| |
|
| |
| .infobox__snippet .infobox__desc {
| |
| max-width: 100%;
| |
| text-overflow: ellipsis;
| |
| overflow: hidden;
| |
| font-size: var(--font-size-small);
| |
| }
| |
|
| |
| .infobox__indicators {
| |
| position: absolute;
| |
| top: 0;
| |
| right: 0;
| |
| display: flex;
| |
| justify-content: flex-end;
| |
| padding: var(--space-xs);
| |
| gap: var(--space-xxs);
| |
| transition-property: opacity, transform;
| |
| }
| |
|
| |
| .infobox__indicator {
| |
| padding: var(--space-xxs) var(--space-xs);
| |
| background: var(--color-surface-2);
| |
| color: var(--color-base);
| |
| border-radius: var(--border-radius-base);
| |
| line-height: var(--line-height-xxx-small);
| |
| }
| |
|
| |
| .infobox__indicator .infobox__data {
| |
| font-size: var(--font-size-x-small);
| |
| font-weight: var(--font-weight-medium);
| |
| }
| |
|
| |
| /* TODO: Add support for multiple badges */
| |
| .infobox__indicator.infobox__indicator--nopadding {
| |
| padding: 0;
| |
| }
| |
|
| |
| .infobox__indicator.infobox__indicator--red {
| |
| background-color: var(--background-color-destructive-subtle);
| |
| color: var(--color-destructive);
| |
| }
| |
|
| |
| .infobox__indicator.infobox__indicator--yellow {
| |
| background-color: var(--background-color-warning-subtle);
| |
| color: var(--color-warning);
| |
| }
| |
|
| |
| .infobox__indicator.infobox__indicator--green {
| |
| background-color: var(--background-color-success-subtle);
| |
| color: var(--color-success);
| |
| }
| |
|
| |
| .infobox__header,
| |
| .infobox__sectionHeader {
| |
| line-height: var(--line-height-xxx-small);
| |
| }
| |
|
| |
| .infobox__header {
| |
| margin-top: var(--space-md);
| |
| margin-bottom: var(--space-lg);
| |
| display: flex;
| |
| gap: var(--space-sm);
| |
| }
| |
|
| |
| .infobox__section,
| |
| .infobox__sectionHeader,
| |
| .infobox__sectionContent {
| |
| margin-top: var(--space-md);
| |
| }
| |
|
| |
| .infobox__title,
| |
| .infobox__sectionTitle {
| |
| color: var(--color-emphasized);
| |
| font-weight: var(--font-weight-medium);
| |
| }
| |
|
| |
| .infobox__title {
| |
| font-size: var(--font-size-x-large);
| |
| }
| |
|
| |
| .infobox__sectionSubtitle {
| |
| margin-top: 2px;
| |
| }
| |
|
| |
| .infobox__section + .infobox__section {
| |
| margin-top: var(--space-xl);
| |
| }
| |
|
| |
| /* Use padding to prevent margin collapse when there is no footer */
| |
| .infobox__content > .infobox__section:last-child {
| |
| margin-bottom: 0;
| |
| padding-bottom: var(--space-md);
| |
| }
| |
|
| |
| .infobox__sectionTitle {
| |
| font-size: var(--font-size-medium);
| |
| display: flex;
| |
| align-items: center;
| |
| gap: var(--space-md);
| |
| }
| |
|
| |
| .infobox__sectionTitle:after {
| |
| content: '';
| |
| height: 1px;
| |
| flex-grow: 1;
| |
| background: var(--border-color-base);
| |
| }
| |
|
| |
| .infobox__sectionSubtitle {
| |
| color: var(--color-subtle);
| |
| }
| |
|
| |
| .infobox__sectionContent {
| |
| display: grid;
| |
| gap: var(--space-sm);
| |
| grid-template-columns: repeat(var(--infobox-grid-cols), minmax(0, 1fr));
| |
| }
| |
|
| |
| .infobox__sectionContent--has-cells {
| |
| gap: var(--space-xxs);
| |
| }
| |
|
| |
| .infobox__item {
| |
| display: grid;
| |
| gap: 2px var(--space-xs);
| |
| grid-auto-rows: max-content;
| |
| }
| |
|
| |
| .infobox__item--is-cell {
| |
| display: grid;
| |
| padding: var(--space-xs);
| |
| border: var(--border-base);
| |
| border-radius: var(--border-radius-base);
| |
| }
| |
|
| |
| .infobox__item--is-cell.infobox__item--has-tooltip:hover {
| |
| background-color: var(--background-color-button-quiet--hover);
| |
| }
| |
|
| |
| .infobox__item--is-cell.infobox__item--positive {
| |
| background-color: var(--background-color-success-subtle);
| |
| color: var(--color-success);
| |
| }
| |
|
| |
| .infobox__item--is-cell.infobox__item--negative {
| |
| background-color: var(--background-color-destructive-subtle);
| |
| color: var(--color-destructive);
| |
| }
| |
|
| |
| .infobox__item--is-cell.infobox__item--null {
| |
| border-color: var(--border-color-subtle);
| |
| color: var(--color-subtle);
| |
| }
| |
|
| |
| .infobox__item--is-range {
| |
| justify-content: space-between;
| |
| grid-template-areas:
| |
| 'label data'
| |
| 'bar bar ';
| |
| gap: var(--space-xs);
| |
| grid-column: -1 / 1;
| |
| }
| |
|
| |
| .infobox__item--is-range .infobox__label {
| |
| grid-area: label;
| |
| }
| |
|
| |
| .infobox__item--is-range .infobox__data {
| |
| grid-area: data;
| |
| }
| |
|
| |
| .infobox__item--is-range .infobox__bar {
| |
| grid-area: bar;
| |
| }
| |
|
| |
| .infobox__item--hasIcon {
| |
| display: flex;
| |
| align-items: center;
| |
| column-gap: var(--space-sm);
| |
| }
| |
|
| |
| .infobox__bar {
| |
| height: 4px;
| |
| border-radius: var(--border-radius-pill);
| |
| background-color: var(--color-surface-3);
| |
| }
| |
|
| |
| .infobox__bar-item {
| |
| --infobox-bar-item-clip-path: polygon(
| |
| var(--infobox-bar-item-range-start) 0,
| |
| var(--infobox-bar-item-range-end) 0,
| |
| var(--infobox-bar-item-range-end) 100%,
| |
| var(--infobox-bar-item-range-start) 100%
| |
| );
| |
|
| |
| height: 100%;
| |
| border-radius: var(--border-radius-pill);
| |
| background: linear-gradient(to right, transparent, var(--color-success));
| |
| clip-path: var(--infobox-bar-item-clip-path);
| |
| }
| |
|
| |
| /* Should not be here, but it's a quick fix */
| |
| .infobox__item--is-range--temperature .infobox__bar-item {
| |
| background: linear-gradient(
| |
| to right,
| |
| var(--color-destructive),
| |
| var(--color-progressive)
| |
| );
| |
| }
| |
|
| |
| .infobox__badge {
| |
| place-content: center;
| |
| text-align: center;
| |
| box-shadow: inset 0 0 0 1px var(--border-color-base);
| |
| border-radius: var(--border-radius-medium);
| |
| padding: var(--space-xs) var(--space-sm);
| |
| font-weight: var(--font-weight-medium);
| |
| background-color: var(--color-surface-1);
| |
| }
| |
|
| |
| .infobox__desc,
| |
| .infobox__label {
| |
| color: var(--color-subtle);
| |
| font-size: var(--font-size-x-small);
| |
| }
| |
|
| |
| .infobox__label {
| |
| font-weight: var(--font-weight-medium);
| |
| }
| |
|
| |
| .infobox__grid--row .infobox__label,
| |
| .infobox__grid--row .infobox__desc {
| |
| font-size: var(--font-size-small);
| |
| }
| |
|
| |
| .infobox__data {
| |
| font-weight: var(--font-weight-medium);
| |
| }
| |
|
| |
| .infobox__icon img {
| |
| filter: var(--filter-invert);
| |
| opacity: var(--opacity-icon-base);
| |
| }
| |
|
| |
| .infobox__itemButton {
| |
| position: relative;
| |
| padding: var(--space-sm) var(--space-md);
| |
| line-height: var(--line-height-xx-small);
| |
| gap: 0;
| |
| }
| |
|
| |
| .infobox__itemButton:hover {
| |
| background-color: var(--background-color-button-quiet--hover);
| |
| }
| |
|
| |
| .infobox__itemButton:hover .infobox__itemButtonArrow {
| |
| transform: rotate(90deg) translateY(-4px);
| |
| }
| |
|
| |
| .infobox__itemButton:active {
| |
| background-color: var(--background-color-button-quiet--active);
| |
| }
| |
|
| |
| .infobox__itemButton .infobox__text {
| |
| flex-grow: 1;
| |
| }
| |
|
| |
| .infobox__itemButton .infobox__data {
| |
| color: var(--color-emphasized);
| |
| }
| |
|
| |
| .infobox__itemButtonLink a {
| |
| position: absolute;
| |
| inset: 0;
| |
| opacity: 0;
| |
| }
| |
|
| |
| .infobox__itemButton .infobox__icon {
| |
| margin-right: var(--space-sm);
| |
| }
| |
|
| |
| .infobox__itemButton .infobox__icon img {
| |
| width: 1.25rem;
| |
| height: 1.25rem;
| |
| }
| |
|
| |
| .infobox__itemButtonArrow {
| |
| width: 1rem;
| |
| height: 1rem;
| |
| transition: var(--transition-hover);
| |
| transform: rotate(90deg);
| |
| }
| |
|
| |
| .infobox__footer {
| |
| margin-top: var(--space-lg);
| |
| border-top: 1px solid var(--border-color-base);
| |
| background-color: var(--color-surface-1);
| |
| border-bottom-left-radius: var(--border-radius-medium);
| |
| border-bottom-right-radius: var(--border-radius-medium);
| |
| }
| |
|
| |
| .infobox__footer > .infobox__section {
| |
| margin: 0;
| |
| padding: var(--space-md);
| |
| display: grid;
| |
| gap: var(--space-xxs);
| |
| }
| |
|
| |
| .infobox__button {
| |
| position: relative;
| |
| border-bottom-left-radius: var(--border-radius-medium);
| |
| border-bottom-right-radius: var(--border-radius-medium);
| |
| padding: var(--space-sm) var(--space-md);
| |
| background-color: var(--color-progressive);
| |
| cursor: pointer;
| |
| }
| |
|
| |
| .infobox__button:hover {
| |
| background-color: var(--color-progressive--hover);
| |
| }
| |
|
| |
| .infobox__buttonLabel {
| |
| display: flex;
| |
| justify-content: center;
| |
| align-items: center;
| |
| gap: var(--space-xs);
| |
| color: #fff;
| |
| font-weight: var(--font-weight-medium);
| |
| }
| |
|
| |
| /* Fake button with link element */
| |
| .infobox__buttonLink {
| |
| position: absolute;
| |
| top: 0;
| |
| bottom: 0;
| |
| left: 0;
| |
| right: 0;
| |
| }
| |
|
| |
| .infobox__buttonLink a {
| |
| display: block;
| |
| height: 100%;
| |
| font-size: 0;
| |
| }
| |
|
| |
| .infobox__buttonCard {
| |
| position: absolute;
| |
| top: 100%;
| |
| left: 0;
| |
| right: 0;
| |
| z-index: -1;
| |
| border: 1px solid var(--border-color-base);
| |
| background-color: var(--color-surface-1);
| |
| border-radius: var(--border-radius-medium);
| |
| box-shadow: var(--box-shadow-drop-xx-large);
| |
| opacity: 0;
| |
| transition: var(--transition-menu);
| |
| transition-property: opacity, transform;
| |
| visibility: hidden;
| |
| transform: translateY(-20px);
| |
| }
| |
|
| |
| .infobox__button:hover > .infobox__buttonCard {
| |
| z-index: 10;
| |
| opacity: 1;
| |
| visibility: visible;
| |
| transform: none;
| |
| cursor: auto;
| |
| }
| |
|
| |
| .infobox__linkButton a {
| |
| padding: var(--space-xxs) var(--space-xs);
| |
| display: block;
| |
| border-radius: var(--border-radius-base);
| |
| text-decoration: none !important;
| |
| }
| |
|
| |
| /* Hide external URL icon */
| |
| .infobox__linkButton a:after {
| |
| content: none;
| |
| }
| |
|
| |
| .infobox__linkButton a:hover {
| |
| background-color: var(--background-color-button-quiet--hover);
| |
| }
| |
|
| |
| .infobox__linkButton a:active {
| |
| background-color: var(--background-color-button-quiet--active);
| |
| }
| |
|
| |
| .infobox__section--linkButtons > .infobox__sectionContent {
| |
| margin-bottom: var(--space-md);
| |
| }
| |
|
| |
| .infobox__section--linkButtons .infobox__data {
| |
| margin-top: var(--space-xxs);
| |
| margin-left: -8px; /* negative space-xs */
| |
| margin-right: -8px; /* negative space-xs */
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| align-items: baseline;
| |
| }
| |
|
| |
| .infobox__buttonLabel img[src$='.svg'] {
| |
| filter: invert(1);
| |
| }
| |
|
| |
| @media only screen and (max-width: 639px) {
| |
| .infobox {
| |
| margin-right: auto;
| |
| margin-left: auto;
| |
| }
| |
| }
| |
|
| |
| .infobox__section--actions .infobox__sectionContent {
| |
| padding-left: 0;
| |
| padding-right: 0;
| |
| }
| |
|
| |
| /* TODO: Remove when footer is removed */
| |
| .infobox__section--hasBackground + .infobox__section--hasBackground,
| |
| .infobox__section--hasBackground + .infobox__footer {
| |
| margin-top: 0;
| |
| }
| |
|
| |
| .infobox__section--hasBackground .infobox__sectionContent {
| |
| margin: 0;
| |
| }
| |
|
| |
| .infobox__section--metadata .infobox__sectionContent {
| |
| padding: var(--space-md);
| |
| background: var(--color-surface-2);
| |
| line-height: var(--line-height-xxx-small);
| |
| gap: var(--space-xxs);
| |
| }
| |
|
| |
| .infobox__section--metadata .infobox__label,
| |
| .infobox__section--metadata .infobox__data {
| |
| font-size: var(--font-size-x-small);
| |
| }
| |
|
| |
| .infobox__section--metadata .infobox__data {
| |
| word-break: break-word;
| |
| font-family: var(--font-family-monospace);
| |
| }
| |
|
| |
| /* CSS grid utility classes */
| |
| .infobox__grid--row {
| |
| --infobox-grid-cols: 1;
| |
| grid-auto-flow: column;
| |
| }
| |
|
| |
| .infobox__grid--cols-2 {
| |
| --infobox-grid-cols: 2;
| |
| }
| |
|
| |
| .infobox__grid--cols-3 {
| |
| --infobox-grid-cols: 3;
| |
| }
| |
|
| |
| .infobox__grid--cols-4 {
| |
| --infobox-grid-cols: 4;
| |
| }
| |
|
| |
| .infobox__grid--cols-5 {
| |
| --infobox-grid-cols: 5;
| |
| }
| |
|
| |
| .infobox__grid--cols-6 {
| |
| --infobox-grid-cols: 6;
| |
| }
| |
|
| |
| .infobox__grid--col-span-2 {
| |
| grid-column: span 2;
| |
| }
| |
|
| |
| .infobox__grid--col-span-3 {
| |
| grid-column: span 3;
| |
| }
| |
|
| |
| .infobox__grid--col-span-4 {
| |
| grid-column: span 4;
| |
| }
| |
|
| |
| .infobox__grid--col-span-5 {
| |
| grid-column: span 5;
| |
| }
| |
|
| |
| .infobox__grid--col-span-6 {
| |
| grid-column: span 6;
| |
| }
| |
|
| |
| .infobox__grid--space-between {
| |
| justify-content: space-between;
| |
| }
| |
|
| |
| /* FloatingUI styles */
| |
| .infobox__indicator--nopadding .ext-floatingui-reference {
| |
| padding: var(--space-xxs) var(--space-xs);
| |
| }
| |
|
| |
| /* Tabber styles */
| |
| .infobox__section--tabber > .infobox__sectionHeader {
| |
| margin-bottom: var(--space-xxs);
| |
| }
| |
|
| |
| .infobox__section--tabber > .infobox__sectionContent {
| |
| padding-left: 0;
| |
| padding-right: 0;
| |
| }
| |
|
| |
| /* Spacing is handled by tabber */
| |
| .infobox__section--tabber .infobox__sectionContent {
| |
| margin-top: 0;
| |
| margin-bottom: 0;
| |
| }
| |
|
| |
| .infobox__section--tabber .tabber .infobox__section {
| |
| margin-top: var(--space-sm);
| |
| margin-bottom: 0;
| |
| }
| |
|
| |
| /* Increase top margin for nested tabber section */
| |
| .infobox__section--tabber .infobox__section.infobox__section--tabber {
| |
| margin-top: var(--space-xl);
| |
| }
| |
|
| |
| .infobox__section--tabber .tabber__header {
| |
| margin-left: var(--space-xs);
| |
| margin-right: var(--space-xs);
| |
| box-shadow: none;
| |
| }
| |
|
| |
| /* Match padding in the rest of the infobox */
| |
| .infobox__section--tabber .tabber__tab {
| |
| margin-left: var(--space-xs);
| |
| margin-right: var(--space-xs);
| |
| padding-left: 0;
| |
| padding-right: 0;
| |
| }
| |
| /* */
| |