Template:Striped table.css: Difference between revisions
From TwogPedia
No edit summary |
No edit summary |
||
(26 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
.striped-table { | .striped-table { | ||
border: 2px solid # | border: 2px solid #77737A; | ||
color: white; | |||
background-color: #050509; | |||
border-radius: 12px; | |||
overflow: hidden; | |||
border-collapse: separate; | |||
margin-top: 30px; | |||
max-width: 100%; | |||
width: 100%; | |||
} | } | ||
.striped-table | |||
background-color: # | /*.tc {*/ | ||
/* color: red;*/ | |||
/*}*/ | |||
.striped-table th, | |||
.striped-table td { | |||
text-align: center; | |||
} | |||
.striped-table td:first-child, | |||
.striped-table th:first-child { | |||
text-align: left !important; | |||
padding-left: 10px; | |||
} | |||
.striped-table td:last-child { | |||
padding-left: 5%; | |||
} | |||
.striped-table td:last-child a img { | |||
margin-left: 10px; | |||
} | |||
.striped-table td:last-child img { | |||
width: 28px; | |||
height: auto; | |||
} | |||
.striped-table th, .striped-table td { | |||
border: 1px solid #77737A; | |||
min-width: 150px; | |||
} | |||
.headerRow { | |||
background-color: #19191E; | |||
border-top-left-radius: 12px; | |||
border-top-right-radius: 12px; | |||
color: #C1C1CD; | |||
} | } | ||
.striped-table tr:not(:last-child) {border-bottom: 1px solid #a2a9b1;} | |||
.headerRow { | .headerRow { | ||
text-align: center; | text-align: center; | ||
Line 10: | Line 58: | ||
.headerRow th { | .headerRow th { | ||
font-size: 1rem; | font-size: 1rem; | ||
padding: 20px; | |||
} | |||
.headerRow .table-title { | |||
font-size: 1.1rem; | |||
} | } | ||
.bodyRow td { | .bodyRow td { | ||
padding: 10px; | |||
} | |||
.linkID {font-weight: bold;} | |||
.striped-table th, | |||
.striped-table td { | |||
background-color: inherit; | |||
} | |||
td { | |||
color: #C1C1CD; | |||
} | } | ||
td a { | |||
color: #ECEBEB; | |||
text-decoration: none; | |||
} | } | ||
. | |||
width: | .news-icon { | ||
display: flex; | |||
align-items: center; | |||
} | |||
.news-icon img { | |||
margin-right: 15px; | |||
} | |||
.news-icon span { | |||
font-weight: bold; | |||
font-size: 1.4rem; | |||
} | |||
td:last-child > a { | |||
display: inline-block; | |||
margin-right: 0.3rem; | |||
} | |||
.striped-table td:last-child { | |||
text-align: center; | |||
} | |||
.container-team-tournaments .striped-table td:last-child { | |||
padding-left: 0 !important; | |||
} | |||
.container-team-tournaments .striped-table td:nth-child(3) div:nth-of-type(2), | |||
.container-team-tournaments .striped-table td:nth-child(3) div:nth-of-type(3) { | |||
display: none; | |||
} | |||
.container-team-tournaments .striped-table td:nth-child(1) div, | |||
.container-team-tournaments .striped-table td:nth-child(2) div { | |||
display: inline; | |||
white-space: nowrap; | |||
margin-right: 4px; | |||
} | |||
.container-team-tournaments .striped-table td { | |||
padding: 10px; | |||
} | |||
.container-team-tournaments .linkID a { | |||
margin-left: 5px; | |||
display: inline-block; | |||
} | |||
.container-team-tournaments .striped-table { | |||
margin-bottom: 30px; | |||
} | |||
@media (min-width: 700px) { | |||
.striped-table { | |||
table-layout: auto; | |||
} | |||
} | |||
@media (max-width: 699px) { | |||
.striped-table { | |||
display: block; | |||
overflow-x: auto; | |||
white-space: nowrap; | |||
} | |||
.striped-table { | |||
table-layout: fixed; | |||
} | |||
.equipment-table { | |||
table-layout: auto !important; | |||
} | |||
/* .tables-container-location .striped-table {*/ | |||
/* display: table !important;*/ | |||
/* overflow-x: visible !important;*/ | |||
/*}*/ | |||
.container-company-twogpedia .striped-table { | |||
display: table !important; | |||
overflow-x: visible !important; | |||
white-space: normal !important; | |||
} | |||
.container-locations-twogpedia .striped-table { | |||
display: table !important; | |||
overflow-x: visible !important; | |||
white-space: normal !important; | |||
border: none !important; | |||
} | |||
.container-locations-twogpedia .striped-table tr:first-child > *:first-child { | |||
border-top-left-radius: 12px; | |||
} | |||
.container-locations-twogpedia .striped-table tr:first-child > *:last-child { | |||
border-top-right-radius: 12px; | |||
} | |||
.container-locations-twogpedia .striped-table tr:last-child > *:first-child { | |||
border-bottom-left-radius: 12px; | |||
} | |||
.container-locations-twogpedia .striped-table tr:last-child > *:last-child { | |||
border-bottom-right-radius: 12px; | |||
} | |||
} | } | ||
. | |||
/* Darkmode */ | |||
html.skin-citizen-dark .headerRow {background-color: #262626;} | |||
html.skin-citizen-dark .striped-table tr:nth-of-type(odd) { | |||
background-color: #262626; | |||
} | } | ||
. | html.skin-citizen-dark .striped-table tr:nth-of-type(even) { | ||
background-color: #343434 | |||
} | } |
Latest revision as of 16:57, 6 June 2025
.striped-table {
border: 2px solid #77737A;
color: white;
background-color: #050509;
border-radius: 12px;
overflow: hidden;
border-collapse: separate;
margin-top: 30px;
max-width: 100%;
width: 100%;
}
/*.tc {*/
/* color: red;*/
/*}*/
.striped-table th,
.striped-table td {
text-align: center;
}
.striped-table td:first-child,
.striped-table th:first-child {
text-align: left !important;
padding-left: 10px;
}
.striped-table td:last-child {
padding-left: 5%;
}
.striped-table td:last-child a img {
margin-left: 10px;
}
.striped-table td:last-child img {
width: 28px;
height: auto;
}
.striped-table th, .striped-table td {
border: 1px solid #77737A;
min-width: 150px;
}
.headerRow {
background-color: #19191E;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
color: #C1C1CD;
}
.striped-table tr:not(:last-child) {border-bottom: 1px solid #a2a9b1;}
.headerRow {
text-align: center;
}
.headerRow th {
font-size: 1rem;
padding: 20px;
}
.headerRow .table-title {
font-size: 1.1rem;
}
.bodyRow td {
padding: 10px;
}
.linkID {font-weight: bold;}
.striped-table th,
.striped-table td {
background-color: inherit;
}
td {
color: #C1C1CD;
}
td a {
color: #ECEBEB;
text-decoration: none;
}
.news-icon {
display: flex;
align-items: center;
}
.news-icon img {
margin-right: 15px;
}
.news-icon span {
font-weight: bold;
font-size: 1.4rem;
}
td:last-child > a {
display: inline-block;
margin-right: 0.3rem;
}
.striped-table td:last-child {
text-align: center;
}
.container-team-tournaments .striped-table td:last-child {
padding-left: 0 !important;
}
.container-team-tournaments .striped-table td:nth-child(3) div:nth-of-type(2),
.container-team-tournaments .striped-table td:nth-child(3) div:nth-of-type(3) {
display: none;
}
.container-team-tournaments .striped-table td:nth-child(1) div,
.container-team-tournaments .striped-table td:nth-child(2) div {
display: inline;
white-space: nowrap;
margin-right: 4px;
}
.container-team-tournaments .striped-table td {
padding: 10px;
}
.container-team-tournaments .linkID a {
margin-left: 5px;
display: inline-block;
}
.container-team-tournaments .striped-table {
margin-bottom: 30px;
}
@media (min-width: 700px) {
.striped-table {
table-layout: auto;
}
}
@media (max-width: 699px) {
.striped-table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
.striped-table {
table-layout: fixed;
}
.equipment-table {
table-layout: auto !important;
}
/* .tables-container-location .striped-table {*/
/* display: table !important;*/
/* overflow-x: visible !important;*/
/*}*/
.container-company-twogpedia .striped-table {
display: table !important;
overflow-x: visible !important;
white-space: normal !important;
}
.container-locations-twogpedia .striped-table {
display: table !important;
overflow-x: visible !important;
white-space: normal !important;
border: none !important;
}
.container-locations-twogpedia .striped-table tr:first-child > *:first-child {
border-top-left-radius: 12px;
}
.container-locations-twogpedia .striped-table tr:first-child > *:last-child {
border-top-right-radius: 12px;
}
.container-locations-twogpedia .striped-table tr:last-child > *:first-child {
border-bottom-left-radius: 12px;
}
.container-locations-twogpedia .striped-table tr:last-child > *:last-child {
border-bottom-right-radius: 12px;
}
}
/* Darkmode */
html.skin-citizen-dark .headerRow {background-color: #262626;}
html.skin-citizen-dark .striped-table tr:nth-of-type(odd) {
background-color: #262626;
}
html.skin-citizen-dark .striped-table tr:nth-of-type(even) {
background-color: #343434
}
No categories