|
Balises : Modification par mobile Modification par le web mobile |
| Ligne 1 : |
Ligne 1 : |
| /* =================================================================
| | .infobox-table { |
| PortableInfobox Styles - Adapted from TG Design System
| | z-index: 3 !important; |
| =================================================================
| | overflow: hidden; |
|
| | width: 400px; |
| Modern infobox styling using CSS custom properties for theming
| | max-width: 100%; |
| and consistent design across all infobox templates.
| | margin-bottom: var( --space-md ); |
|
| | padding-bottom: 20px !important; |
| Based on TG-style infobox design with PortableInfobox structure.
| | background: var( --color-surface-1 ); |
|
| | border: 1px solid var( --border-color-base ); |
| ================================================================= */
| | border-radius: var( --border-radius-medium ); |
| | | border-spacing: 0; |
| /* CSS Custom Properties (Variables) */
| | font-size: 0.875rem; |
| :root {
| | text-align: left; |
| --tg-border-base: 1px solid #e0e6ed;
| | display: block; |
| --tg-border-radius-large: 8px;
| |
| --tg-border-radius-sharp: 0px;
| |
| --tg-color-base: #222;
| |
| --tg-color-emphasized: #000;
| |
| --tg-color-subtle: #666;
| |
| --tg-color-surface-2: #f8f9fa;
| |
| --tg-border-color-base: #e0e6ed;
| |
| --tg-line-height-xx-small: 1.25;
| |
| --tg-line-height-xxx-small: 1.2;
| |
| --tg-font-size-small: 14px;
| |
| --tg-font-size-x-small: 12px;
| |
| --tg-font-size-x-large: 18px;
| |
| --tg-font-weight-regular: 400;
| |
| }
| |
| | |
| /* Dark mode variables */
| |
| @media (prefers-color-scheme: dark) {
| |
| :root {
| |
| --tg-border-base: 1px solid #404040;
| |
| --tg-color-base: #e0e0e0;
| |
| --tg-color-emphasized: #fff;
| |
| --tg-color-subtle: #a0a0a0;
| |
| --tg-color-surface-2: #1a1a1a;
| |
| --tg-border-color-base: #404040;
| |
| }
| |
| }
| |
| | |
| /* Base PortableInfobox Container */
| |
| .portable-infobox {
| |
| position: relative;
| |
| width: 320px;
| |
| padding: 16px 0;
| |
| border: var(--tg-border-base);
| |
| border-radius: var(--tg-border-radius-large);
| |
| border-spacing: 0;
| |
| color: var(--tg-color-base);
| |
| background-color: var(--tg-color-surface-2);
| |
| line-height: var(--tg-line-height-xx-small);
| |
| font-size: var(--tg-font-size-small);
| |
| float: right;
| |
| clear: right;
| |
| margin: 0 0 1em 1em;
| |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
| |
| }
| |
| | |
| /* Reset default padding for all infobox elements */
| |
| .portable-infobox .pi-item {
| |
| padding: 0;
| |
| vertical-align: top;
| |
| }
| |
| | |
| /* Add consistent horizontal padding */
| |
| .portable-infobox .pi-title,
| |
| .portable-infobox .pi-header,
| |
| .portable-infobox .pi-data-label,
| |
| .portable-infobox .pi-data-value {
| |
| padding-left: 16px;
| |
| padding-right: 16px;
| |
| }
| |
| | |
| /* Title Styling */
| |
| .portable-infobox .pi-title {
| |
| font-size: var(--tg-font-size-x-large);
| |
| line-height: var(--tg-line-height-xxx-small);
| |
| color: var(--tg-color-emphasized);
| |
| text-align: center;
| |
| padding-top: 0;
| |
| padding-bottom: 4px;
| |
| font-weight: bold;
| |
| background: transparent;
| |
| border: none;
| |
| }
| |
| | |
| /* Image Container */
| |
| .portable-infobox .pi-image { | |
| border-top-left-radius: var(--tg-border-radius-large);
| |
| border-top-right-radius: var(--tg-border-radius-large);
| |
| padding: 0 !important;
| |
| transform: translateY(-16px);
| |
| overflow: hidden;
| |
| text-align: center;
| |
| }
| |
| | |
| /* Reset figure styles */
| |
| .portable-infobox .pi-image figure,
| |
| .portable-infobox .pi-image figcaption {
| |
| border: 0;
| |
| padding: 0;
| |
| background: transparent;
| |
| box-shadow: none;
| |
| margin: 0;
| |
| }
| |
| | |
| .portable-infobox .pi-image figure {
| |
| overflow: hidden;
| |
| }
| |
| | |
| /* Image thumbnail */
| |
| .portable-infobox .pi-image-thumbnail {
| |
| margin: 0;
| |
| border: 0;
| |
| width: 100%;
| |
| height: auto;
| |
| display: block;
| |
| border-radius: var(--tg-border-radius-sharp);
| |
| }
| |
| | |
| /* Image caption */
| |
| .portable-infobox .pi-image-caption {
| |
| padding: 4px 16px;
| |
| text-align: center;
| |
| color: var(--tg-color-subtle);
| |
| font-size: var(--tg-font-size-x-small);
| |
| background: transparent;
| |
| border: none;
| |
| font-style: normal;
| |
| }
| |
| | |
| /* Group Headers */
| |
| .portable-infobox .pi-header {
| |
| padding-top: 12px;
| |
| padding-bottom: 8px;
| |
| color: var(--tg-color-emphasized);
| |
| background: transparent !important;
| |
| border: none;
| |
| text-align: center;
| |
| font-weight: bold;
| |
| position: relative;
| |
| }
| |
| | |
| /* Header separator lines */
| |
| .portable-infobox .pi-header:not(.pi-title) {
| |
| display: flex;
| |
| align-items: center;
| |
| gap: 1rem;
| |
| white-space: nowrap;
| |
| color: var(--tg-color-subtle);
| |
| font-size: var(--tg-font-size-x-small);
| |
| font-weight: var(--tg-font-weight-regular);
| |
| }
| |
| | |
| .portable-infobox .pi-header:not(.pi-title):before,
| |
| .portable-infobox .pi-header:not(.pi-title):after {
| |
| content: "";
| |
| height: 1px;
| |
| width: 100%;
| |
| background-color: var(--tg-border-color-base);
| |
| }
| |
| | |
| /* Data Rows */
| |
| .portable-infobox .pi-data {
| |
| border: none;
| |
| background: transparent;
| |
| }
| |
| | |
| /* Data Labels */
| |
| .portable-infobox .pi-data-label {
| |
| padding: 8px 16px;
| |
| text-align: start;
| |
| vertical-align: top;
| |
| color: var(--tg-color-base);
| |
| background: transparent;
| |
| border: none;
| |
| font-weight: normal;
| |
| width: auto;
| |
| }
| |
| | |
| /* Data Values */
| |
| .portable-infobox .pi-data-value {
| |
| padding: 8px 16px;
| |
| background: transparent;
| |
| border: none;
| |
| color: var(--tg-color-base);
| |
| word-wrap: break-word;
| |
| vertical-align: top;
| |
| width: auto;
| |
| }
| |
| | |
| /* Special styling for subtitle-like data */
| |
| .portable-infobox .pi-data[data-source="subtitle"] .pi-data-value,
| |
| .portable-infobox .pi-data[data-source="caption"] .pi-data-value {
| |
| text-align: center;
| |
| color: var(--tg-color-subtle);
| |
| font-size: var(--tg-font-size-x-small);
| |
| line-height: var(--tg-line-height-xxx-small);
| |
| }
| |
| | |
| /* Links */
| |
| .portable-infobox a {
| |
| color: var(--tg-color-base);
| |
| text-decoration: none;
| |
| }
| |
| | |
| .portable-infobox a:hover {
| |
| text-decoration: underline;
| |
| }
| |
| | |
| /* Groups */
| |
| .portable-infobox .pi-group {
| |
| border: none;
| |
| margin: 0;
| |
| padding: 0;
| |
| background: transparent;
| |
| }
| |
| | |
| /* =================================================================
| |
| THEME SYSTEM - Color Schemes with CSS Variables
| |
| ================================================================= */
| |
| | |
| /* Monde Theme - Green */
| |
| .portable-infobox.pi-theme-monde {
| |
| --theme-primary: #86C705;
| |
| --theme-accent: #099DFF;
| |
| }
| |
| | |
| .portable-infobox.pi-theme-monde .pi-title {
| |
| background-color: var(--theme-primary) !important;
| |
| color: #fff !important;
| |
| padding: 8px 16px;
| |
| margin-bottom: 8px;
| |
| border-radius: var(--tg-border-radius-large) var(--tg-border-radius-large) 0 0;
| |
| }
| |
| | |
| .portable-infobox.pi-theme-monde .pi-header:not(.pi-title) {
| |
| color: var(--theme-accent) !important;
| |
| }
| |
| | |
| .portable-infobox.pi-theme-monde .pi-data[data-source="seed"] .pi-data-value,
| |
| .portable-infobox.pi-theme-monde .pi-data[data-source="spawn"] .pi-data-value a {
| |
| color: var(--theme-accent);
| |
| font-style: italic;
| |
| }
| |
| | |
| /* Joueur Theme - Blue */
| |
| .portable-infobox.pi-theme-joueur {
| |
| --theme-primary: #0066CC;
| |
| --theme-accent: #4A90E2;
| |
| }
| |
| | |
| .portable-infobox.pi-theme-joueur .pi-title {
| |
| background-color: var(--theme-primary) !important;
| |
| color: #fff !important;
| |
| padding: 8px 16px;
| |
| margin-bottom: 8px;
| |
| border-radius: var(--tg-border-radius-large) var(--tg-border-radius-large) 0 0;
| |
| }
| |
| | |
| .portable-infobox.pi-theme-joueur .pi-header:not(.pi-title) {
| |
| color: var(--theme-primary) !important;
| |
| }
| |
| | |
| .portable-infobox.pi-theme-joueur .pi-data[data-source="username"] .pi-data-value {
| |
| color: var(--theme-primary);
| |
| font-weight: bold;
| |
| } | | } |
|
| |
|
| /* Serveur Theme - Red */
| | .infobox-table tr:not( #infobox-table-img-bg ) { |
| .portable-infobox.pi-theme-serveur { | | display: flex; |
| --theme-primary: #CC0000;
| | margin-top: 10px; |
| --theme-accent: #FF4444;
| |
| } | | } |
|
| |
|
| .portable-infobox.pi-theme-serveur .pi-title { | | .infobox-table th, |
| background-color: var(--theme-primary) !important;
| | .infobox-table td { |
| color: #fff !important;
| | padding: 0 15px !important; |
| padding: 8px 16px;
| |
| margin-bottom: 8px;
| |
| border-radius: var(--tg-border-radius-large) var(--tg-border-radius-large) 0 0;
| |
| } | | } |
|
| |
|
| .portable-infobox.pi-theme-serveur .pi-header:not(.pi-title) { | | .infobox-table th, |
| color: var(--theme-primary) !important;
| | .infobox-table tr > td:first-child { |
| | font-weight: 600; |
| } | | } |
|
| |
|
| .portable-infobox.pi-theme-serveur .pi-data[data-source="ip"] .pi-data-value { | | .infobox-table tr > td:first-child { |
| font-family: "Courier New", monospace;
| | color: var( --color-subtle ); |
| background-color: rgba(0, 0, 0, 0.05);
| | font-size: 0.8125rem; |
| padding: 4px 8px;
| | font-weight: normal; |
| border-radius: 4px;
| | letter-spacing: 0.75px; |
| margin: 4px 0;
| |
| } | | } |
|
| |
|
| /* Événement Theme - Purple */
| | .infobox-table th, |
| .portable-infobox.pi-theme-evenement { | | th.infobox-table-name { |
| --theme-primary: #8A2BE2;
| | color: var( --color-emphasized ); |
| --theme-accent: #B347D9;
| |
| } | | } |
|
| |
|
| .portable-infobox.pi-theme-evenement .pi-title { | | .infobox-table th { |
| background-color: var(--theme-primary) !important;
| | padding-top: 15px !important; |
| color: #fff !important;
| | border-top: 1px solid; |
| padding: 8px 16px;
| | border-color: var( --border-color-base ); |
| margin-bottom: 8px;
| | font-size: 1rem; |
| border-radius: var(--tg-border-radius-large) var(--tg-border-radius-large) 0 0;
| | text-align: left !important; |
| } | | } |
|
| |
|
| .portable-infobox.pi-theme-evenement .pi-header:not(.pi-title) { | | th.infobox-table-name { |
| color: var(--theme-primary) !important;
| | padding-top: 0 !important; |
| | border: 0 !important; |
| | margin-top: 10px; |
| | margin-bottom: 5px; |
| | font-size: 1.4rem !important; |
| | line-height: 1.4; |
| } | | } |
|
| |
|
| .portable-infobox.pi-theme-evenement .pi-data[data-source="date"] .pi-data-value { | | .infobox-table-img { |
| color: var(--theme-primary);
| | background: var( --background-color-button-quiet--hover ); |
| font-weight: bold;
| |
| } | | } |
|
| |
|
| /* Construction Theme - Orange */
| | .infobox-table .infobox-table-img { |
| .portable-infobox.pi-theme-construction { | | padding: 0 !important; |
| --theme-primary: #FF8C00;
| |
| --theme-accent: #FFA500;
| |
| } | | } |
|
| |
|
| .portable-infobox.pi-theme-construction .pi-title { | | .infobox-table-img img { |
| background-color: var(--theme-primary) !important;
| | max-width: 100%; |
| color: #fff !important;
| | height: auto !important; |
| padding: 8px 16px;
| |
| margin-bottom: 8px;
| |
| border-radius: var(--tg-border-radius-large) var(--tg-border-radius-large) 0 0;
| |
| } | | } |
|
| |
|
| .portable-infobox.pi-theme-construction .pi-header:not(.pi-title) { | | /* Neutral background for all transprent SVG */ |
| color: var(--theme-primary) !important;
| | .infobox-table-img img[ src$='.svg' ] { |
| | background: #eaecf0; |
| } | | } |
|
| |
|
| .portable-infobox.pi-theme-construction .pi-data[data-source="architecte"] .pi-data-value { | | .infobox-table-img a.image { |
| color: var(--theme-primary);
| | background: 0 !important; |
| font-weight: bold;
| |
| } | | } |
|
| |
|
| /* =================================================================
| | .infobox-table .image:hover img { |
| RESPONSIVE DESIGN
| | transform: scale( 1.1 ); |
| ================================================================= */
| |
| | |
| @media (max-width: 640px) {
| |
| .portable-infobox {
| |
| width: 100%;
| |
| float: none;
| |
| margin: 1em 0;
| |
| border-radius: var(--tg-border-radius-large);
| |
| }
| |
| | |
| .portable-infobox .pi-image {
| |
| transform: none;
| |
| border-radius: 0;
| |
| margin-top: 0;
| |
| }
| |
| | |
| .portable-infobox .pi-image figure {
| |
| margin-top: 16px;
| |
| }
| |
| | |
| /* Stack data labels and values on mobile */
| |
| .portable-infobox .pi-data {
| |
| display: block;
| |
| }
| |
| | |
| .portable-infobox .pi-data-label,
| |
| .portable-infobox .pi-data-value {
| |
| display: block;
| |
| width: 100%;
| |
| padding: 6px 16px;
| |
| }
| |
| | |
| .portable-infobox .pi-data-label {
| |
| font-weight: bold;
| |
| padding-bottom: 2px;
| |
| }
| |
| | |
| .portable-infobox .pi-data-value {
| |
| padding-top: 2px;
| |
| padding-bottom: 12px;
| |
| }
| |
| } | | } |
|
| |
|
| /* Tablet adjustments */
| | .infobox-table ul, |
| @media (max-width: 1024px) and (min-width: 641px) {
| | .infobox-table ol { |
| .portable-infobox {
| | margin-top: 0; |
| width: 300px;
| |
| }
| |
| } | | } |
|
| |
|
| /* =================================================================
| | .infobox-button { |
| ACCESSIBILITY & SPECIAL FEATURES
| | display: block; |
| ================================================================= */
| | width: 100%; |
| | |
| /* High contrast mode support */
| |
| @media (prefers-contrast: high) {
| |
| .portable-infobox {
| |
| border: 2px solid var(--tg-color-base);
| |
| background-color: var(--tg-color-surface-2);
| |
| }
| |
| | |
| .portable-infobox .pi-title {
| |
| border: 2px solid currentColor;
| |
| }
| |
| }
| |
| | |
| /* Reduced motion support */
| |
| @media (prefers-reduced-motion: reduce) {
| |
| .portable-infobox,
| |
| .portable-infobox * {
| |
| transition: none !important;
| |
| animation: none !important;
| |
| }
| |
| }
| |
| | |
| /* Focus indicators for accessibility */
| |
| .portable-infobox a:focus {
| |
| outline: 2px solid var(--theme-primary, #0066CC);
| |
| outline-offset: 2px;
| |
| border-radius: 2px;
| |
| }
| |
| | |
| /* Print styles */
| |
| @media print {
| |
| .portable-infobox {
| |
| width: 100%;
| |
| float: none;
| |
| margin: 1em 0;
| |
| border: 1px solid #000;
| |
| box-shadow: none;
| |
| background-color: #fff !important;
| |
| color: #000 !important;
| |
| font-size: 12px;
| |
| page-break-inside: avoid;
| |
| }
| |
| | |
| .portable-infobox .pi-title {
| |
| background-color: #f0f0f0 !important;
| |
| color: #000 !important;
| |
| border: 1px solid #000;
| |
| }
| |
| | |
| .portable-infobox .pi-header {
| |
| color: #000 !important;
| |
| }
| |
| | |
| .portable-infobox a {
| |
| color: #000 !important;
| |
| text-decoration: underline;
| |
| }
| |
| } | | } |
|
| |
|
| /* EmbedVideo compatibility (if used) */
| | .infobox-button > div { |
| .portable-infobox .embedvideo { | | display: flex; |
| position: relative;
| | flex-wrap: wrap; |
| width: 100% !important;
| | justify-content: space-between; |
| margin: 8px 0;
| |
| } | | } |
|
| |
|
| /* Spotify embed hack adaptation */
| | @media only screen and ( max-width: 720px ) { |
| .portable-infobox .embedvideo[data-service="spotifytrack"]::after { | | .infobox-table { |
| content: "";
| | margin-right: auto; |
| position: absolute;
| | margin-left: auto; |
| inset: -4px;
| | } |
| border: 6px solid var(--tg-color-surface-2);
| |
| border-radius: 12px;
| |
| pointer-events: none;
| |
| } | | } |
