Template:ComboCard/style.css

.combo_card {
	display:grid;
	grid-template-columns:auto;
	width: 100%;
    grid-column-gap: 25px;
    grid-row-gap: 5px;
    background-color: var(--color-surface-1);
    box-shadow: var(--card-shadow-dlw);
    padding: 18px;
    padding-top:0;
    align-content:start;
}

.youtubeplay,.videoplay {
	margin-right:5px;
	margin-top:-1px;
}
/*.combo-customtoggle::before {
	content:"[+] ";
}*/
.combo-customtoggle {
	white-space: nowrap;
	background: var(--background-color-overlay);
	padding: 0px 11px;
	text-align: center;
	display: inline-block;
}
.combo-tr-toggled-row {
	background-color: var(--background-color-quiet--hover);
}
.grayscale { filter: grayscale(100%); }
.dimmer { filter: brightness(.75); }
/*some reason it's not a border bottom but the first row is missing the line */
.cvideo_linker {
  height: 45px;
  width: auto;
  display: inline-block;
  padding: 5px;
	aspect-ratio:4/3;
}

.combo_table {
	margin: 1em auto 1em auto;
	text-align: center;
	width:100%;
	border:1px;
}
.combo_table tr {
	border-bottom: 1px solid #333;
}
.combo_title p,.d_combo_title p,.d_combo_video p {
	padding:0;
	margin:0;
}
.combo_table .mw-collapsible-toggle-collapsed {
	white-space:nowrap;
}
.combo_vid_wrap {
	padding:5px 0;
}
.combo_vid_wrap.local {
	padding:0;
}
.combo_card .title {
	font-weight:bold;
}
.combo_table .expanded_details td {
	padding-top: 4px !important;
    padding-bottom: 4px !important;
}
.combo_table .expanded_details td.firsttd {
	padding-left:0 !important;
}
.combo_vid_wrap video, .combo_vid_wrap .embedvideo, .combo_vid_wrap iframe, .combo_vid_wrap .embedvideo-wrapper {
	width:100% !important;

}
.combo_table .mw-collapsible-toggle {
	float:right !important;
}
.mw-collapsible-content .combo_notes {
	padding-top:10px;
}
.combo_table td {
	text-align:left;
}
.combo_table .combo_properties td {
	text-align:center;
}
/*.combo_card_tr td {
	display:table-cell;
}*/
.combo_card_tr .combo_card_first_td {
	display:none;
	padding:0;
}
.combo_top_row {
	display:grid;
	grid-template-columns:auto 1fr auto auto;
	grid-column-gap: 15px;
	align-content:start;
}
.combo_bot_row {
    display:grid;
	grid-template-columns:auto auto;
	grid-column-gap: 15px;
	align-content:start;
}
.combo_combo {
	padding:5px 0;
	/*font-size:17px;*/
}
.combo_top_row_box {
  background: var(--color-surface-2);
  padding: 5px 10px 5px 10px;
  font-size: 16px;
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  grid-column-gap: 10px;
  margin-left:-18px;
}
.combo_title h4 {
	margin:0;
	font-size:16px !important;
	margin-top:4px !important;
}
.combo_damage {
	
}
.combo_badge {
    display: inline-grid;
    padding: 0;
    border-radius: 10px;
    grid-template-columns: auto auto;
}
.combo_label {
  /*display: inline-block;*/
  vertical-align:middle;
  padding: 0 5px;
  background: #204D48;
  border: 1px solid #204D48;
  border-radius: 8px 0 0 8px;
  color: #fff;
}
.combo_details_box .combo_badge {
	margin-top:5px;
}
.combo_value {
	/*display: inline-block;*/
    padding: 0 5px;
    border: 1px solid #2A4078;
    border-radius: 0 8px 8px 0;
    background: #2A4078;
    color: #fff;
}
.combo_difficulty {
	font-weight:bold;
	text-align:right;
	margin-top:0px;
}
.combo_properties {
	display: grid;
    grid-template-columns: auto auto auto;
    grid-column-gap: 15px;
}
.combo_props_top {
	display:grid;
	grid-template-columns:1fr auto auto;
}
.combo_top_row_box .combo_damage, .combo_top_row_box .combo_tension, .combo_top_row_box .combo_position {
	display:block;
}
.combo_properties .combo_damage, .combo_properties .combo_tension, .combo_properties .combo_position {
	display:none;
}
.d_combo_combo {
	text-align:left;
}
.tooltipblock {
	border-bottom: 1px dashed var(--color-base);
	/*the div box inside is what is a block*/
	display:inline;
}
.tooltipblock .tooltipblocktext {
	display:none;
	position: absolute;
	background:#1d2330;
	padding:10px;
	text-decoration:underline;
}
.combo_collapsebox {
	width: 100%;
	max-width: 1920px; 
	padding-top: 0 !important; 
	float:none !important;
}

.tooltipblock:hover .tooltipblocktext {
	display:block;
}
.tooltipblock > div {
	margin:5px 0;
}
/* hack cuz vertical-align is not working on this table */
.combo_label > div {
	position:relative;
	top:50%;
	margin-top:-12px;
	white-space:nowrap;
}
@media only screen and (max-width: 600px) {
	.combo_card_tr > td {
		display:none;
    }
    .combo_table > thead {
    	display:none;
    }
    .combo_table .mw-collapsible-toggle {
		float:none !important;
    }
    .combo_table tr {
    	background:none !important;
    }
    .combo_table {
    	background:none !important;
    	padding:0;
    	margin:0 !important;
    }
    .combo_card_tr .combo_card_first_td {
    	display:table-cell;
    }
    .combo_top_row, .combo_bot_row {
    	grid-template-columns:auto;
    }
    .combo_properties, .combo_props_top {
    	grid-column-gap:0;
    	padding-top:5px;
    }
    .combo_props_top {
    	grid-column-gap: 15px;
    }
    .combo_properties {
    	grid-template-columns: auto auto;
        grid-row-gap: 10px;
        grid-column-gap: 10px;

    }
    .combo_top_row_box .combo_damage, .combo_top_row_box .combo_tension, .combo_top_row_box .combo_position {
		display:none;
	}
	.combo_properties .combo_damage, .combo_properties .combo_tension, .combo_properties .combo_position {
		display:table;
	}
	.combo_top_row_box {
		grid-template-columns:auto auto;
		margin-right:-18px;
	}
	.combo_bot_row > .mw-collapsible {
		/*margin-bottom:12px;*/
	}
	.cc_youtube.cc_embedvideo .combo_bot_row > .mw-collapsible {
		/*margin-top:12px;*/
	}
	.combo_table tr {
		border-bottom: none;
	}
	.combo_properties .emptybadge {
		display:none;
	}
	.combo_bot_row {
		grid-row-gap: 15px;
	}
	.ccempty_properties {
		display:none;
	}
	html .combo-tr-toggled-row {
		display:none !important;
	}
}