Template:Mbox/styles.css: Difference between revisions

Revision as of 16:09, 23 April 2024

.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 {
	background-color: var( --background-color-destructive );
}

.mbox.mbox-med {
	background-color: var( --background-color-warning );
}

.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;
	z-index: 10;
	padding: var( --space-md );
	width: 100%;
    box-sizing: border-box;
	background-color: var( --color-surface-2 );
	border-radius: var( --border-radius--medium );
	box-shadow: var( --box-shadow-dialog );
	opacity: 0;
	visibility: hidden;
}

.mbox:hover .mbox-text {
	opacity: 1;
	visibility: visible;
}

.mbox-high .mbox-text {
	background-color: var( --background-color-destructive );
}

.mbox-med .mbox-text {
	background-color: var( --background-color-warning );
}

/* Dark mode */
html.skin-citizen-dark .mbox-icon img {
	filter: invert( 1 );
}

/* Readability fixes */
html.skin-citizen-dark .mbox {
	color: var( --color-base--emphasized );
}
.mbox-icon.metadata {
  vertical-align: text-bottom;
}

@@ Line 1: / Line 1: @@
-@media (max-width: 800px) {
+.mbox {
-   .homesizehide {
-   display: none;
-   }
-}
-@media (min-width: 800px) {
-  .priority {
-    display: none;
-  }
-}
-.article {
-  grid-area: article;
-}
-.widgets {
-  grid-area: widgets;
-}
-.main-home-grid {
-  display: grid;
-  grid-template-areas:
-    "priority"
-    "article"
-    "widgets";
-}
-@media (min-width: 800px) {
-  .main-home-grid {
-    grid-template-columns: 4.059fr 2fr;
-    grid-gap: 0.625rem;
-    grid-template-areas:
-      "article widgets";
-  }
-}
-.split-left {
-  grid-area: split-left;
-}
-.split-right {
-  grid-area: split-right;
-}
-.sub-home-grid {
-  display: grid;
-  grid-gap: 0.625rem;
-  grid-template-areas:
-    "split-left"
-    "split-right";
-}
-@media (min-width: 200px) {
-  .sub-home-grid {
-    grid-template-columns: 1fr 1fr;
-    grid-template-areas:
-      "split-left split-right";
-  }
-}
-/* Templates, from Citizen */
-.home-grid {
-	display: grid;
-	grid: auto-flow dense/repeat( auto-fit, minmax( 9.375rem, 1fr ) );
-	grid-auto-rows: minmax( 3rem, auto );
-	grid-gap: 0.625rem;
-}
-@media (max-width: 1083px) and (min-width: 916px) {
-.home-grid {
-	display: grid;
-	grid: auto-flow dense/repeat( auto-fit, minmax( 8.375rem, 1fr ) );
-	grid-auto-rows: minmax( 3rem, auto );
-	grid-gap: 0.625rem;
-}
-}
-@media (max-width: 915px) and (min-width: 852px) {
-.home-grid {
-	display: grid;
-	grid: auto-flow dense/repeat( auto-fit, minmax( 7.375rem, 1fr ) );
-	grid-auto-rows: minmax( 3rem, auto );
-	grid-gap: 0.625rem;
-}
-}
-@media (max-width: 851px) and (min-width: 838px) {
-.home-grid {
-	display: grid;
-	grid: auto-flow dense/repeat( auto-fit, minmax( 10.375rem, 1fr ) );
-	grid-auto-rows: minmax( 3rem, auto );
-	grid-gap: 0.625rem;
-}
-}
-.home-grid--col2 {
-	grid-template-columns: 1fr 1fr;
-}
-.home-grid a.external {
-	background-image: none;
-}
-.home-card {
 	position: relative;
-	padding: 15px;
+	display: flex;
-	background: var( --color-surface-1 );
+	flex-direction: column;
-	border-radius: 8px;
+	margin-top: var( --space-xs );
-	box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.04 ), 0 3px 6px rgba( 0, 0, 0, 0.0575 );
+	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;
-    margin-bottom: 0.625rem;
-}
-.home-card table.timeline {
-	margin-top: 0.2rem;
-}
-.home-card--col2 {
-	grid-column: span 2;
-}
-.home-card--col4 {
-	grid-column: span 4;
 }
-.home-card--row3 {
+.mbox.mbox-high {
-	grid-row: span 3;
+	background-color: var( --background-color-destructive );
 }
-.home-card--row4 {
+.mbox.mbox-med {
-	grid-row: span 4;
+	background-color: var( --background-color-warning );
 }
-.home-card--row8 {
+.mbox-title {
-	grid-row: span 8 / auto;
-}
-.home-card__label {
-	color: var( --color-base--subtle );
-	font-size: 0.8125rem;
-	letter-spacing: 0.75px;
-}
-h3.home-card__header {
-	margin-top: 0;
-	font-size: 1rem;
-}
-.home-card__header a {
 	display: flex;
 	align-items: center;
-	justify-content: space-between;
+	padding: var( --space-sm ) var( --space-md );
+	font-weight: 500;
 }
-.home-card__header a:after {
+.mbox-icon img {
-	content: '▶';
+	width: 14px;
-	font-size: 0.8125rem;
+	height: auto;
+	margin-right: var( --space-xs );
+	opacity: 0.5;
 }
-.home-card__background {
+.mbox-text {
 	position: absolute;
-	top: 0;
+	z-index: 10;
-	right: 0;
+	padding: var( --space-md );
-	bottom: 0;
-	left: 0;
-	background: #242a31;
-	border-radius: 8px;
-}
-.home-card__background img {
 	width: 100%;
-	height: 100%;
+    box-sizing: border-box;
-	object-fit: cover;
+	background-color: var( --color-surface-2 );
-	object-position: center;
+	border-radius: var( --border-radius--medium );
-}
+	box-shadow: var( --box-shadow-dialog );
+	opacity: 0;
-.home-card__foreground {
+	visibility: hidden;
-	position: absolute;
-}
-.home-card__foreground .home-card__label {
-	color: #bababa;
-}
-.home-card__foreground .home-card__header {
-	color: #fff;
-}
-.home-card p {
-	margin-top: 0.2rem;
-	font-size: 0.875rem;
-}
-.home-card.home-card--button {
-	overflow: hidden;
-	padding: 0;
-	background: #242a31;
-}
-.home-card--button a {
-	display: flex;
-	height: 100%;
-	justify-content: center;
-	align-items: center;
-	padding: 0 15px;
-	background: transparent;
-	color: #fff;
-	font-weight: 500;
-}
-.home-card--button .home-card__background a {
-	padding: 0;
-}
-.home-card--button img {
-	transition: transform 0.2s ease;
-}
-.home-card--button:hover img {
-	transform: scale(1.1);
-}
-.home-link {
-	display: grid;
-	margin-top: 6px;
-	font-size: 0.875rem;
-	font-weight: 500;
-	grid-gap: 6px;
-	text-align: center;
-}
-.home-link__button {
-	display: flex;
-    text-align: center;
-}
-.home-link__button a {
-	flex-grow: 1;
-	padding: 0.3rem 0.6rem;
-	border: 1px solid;
-	border-color: var( --border-color-base );
-	background: var( --color-surface-2 );
-	border-radius: 12px;
-	color: var( --color-base--emphasized ) !important;
-}
-.home-link__button a:hover {
-	background: var( --color-surface-2--hover );
 }
-.home-link__button a:active {
+.mbox:hover .mbox-text {
-	background: var( --color-surface-2--active );
+	opacity: 1;
-}
+	visibility: visible;
-/*no radius top*/
-.home-link__button-connecttop {
-	display: flex;
-    text-align: center;
 }
-.home-link__button-connecttop a {
+.mbox-high .mbox-text {
-	flex-grow: 1;
+	background-color: var( --background-color-destructive );
-	padding: 0.3rem 0.6rem;
-	border: 1px solid;
-	border-color: var( --border-color-base );
-	background: var( --color-surface-2 );
-	border-radius: 0 0 12px 12px;
-	color: var( --color-base--emphasized ) !important;
 }
-.home-link__button-connecttop a:hover {
+.mbox-med .mbox-text {
-	background: var( --color-surface-2--hover );
+	background-color: var( --background-color-warning );
 }
-.home-link__button-connecttop a:active {
+/* Dark mode */
-	background: var( --color-surface-2--active );
+html.skin-citizen-dark .mbox-icon img {
+	filter: invert( 1 );
 }
-#home-content {
+/* Readability fixes */
-	margin-top: 1.6rem;
+html.skin-citizen-dark .mbox {
+	color: var( --color-base--emphasized );
 }
+.mbox-icon.metadata {
-.home-footer {
+   vertical-align: text-bottom;
-	font-size: 0.8125rem;
-	font-family: monospace;
-	text-align: center;
-}
-.button-container__spacebetween {
-   display: flex;
-  align-items: end;
-  justify-content: space-between;
-}
-.button-container__right {
-  display: flex;
-  align-items: center;
-  justify-content: end;
-}
-.up-date {
- background: var(--color-surface-3);
- border-radius: 100px;
- font-size: 0.7125rem;
- font-weight: 500;
- text-transform: uppercase;
- padding: 0 5px;
- white-space: nowrap;
- pointer-events: none;
-}
-@media (max-width: 500px) {
-  #home-card-prevupdate .up-date {
-    display: none;
-  }
-}
-.up-preview {
-  background: var(--color-surface-3);
-  border-radius: 100%;
-  font-size: 0.7125rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  white-space: nowrap;
-  display: none;
-  height: 1.5rem;
-  width: 1.5rem;
-  text-align: center;
-  line-height: 1.5rem;
-}
-@media (max-width: 500px) {
-  #home-card-prevupdate .up-preview {
-    display: inherit;
-  }
-  .prevupdate-date {
-    position: absolute;
-    pointer-events: none;
-    right: 0;
-  }
-  div#home-card-prevupdate.home-card div.citizen-table-wrapper table.wikitable tbody tr td a {
-   width: 70%;
-   display: inline-block;
-  }
-}
-#home-featuredpoll.home-card div.home-server-address__container br {
-  display: none;
 }