style.css

/* 全ページ共通css */

body {
	margin-bottom: 20vh;
}

h1.small_header {
	font-size: 160%;
}


a.refer {
	font-size: 80%;
}

.footer {
	font-size: 80%;
}
.footer > hr {
	border-width: 0px 0px 1px 0px;
}
.footer > .right {
	float: right;
}

/* 選択不可 */
.noselect {
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
}

/* テーブル汎用 */
/* th, td に black の線 */
table.black_border {
	border-collapse: collapse;
}

table.black_border th
, table.black_border td
{
	border: 1px solid black;
}

/* th, td 以外に --table_graycolor の線をつける */
/* th, td が優先になるはずだが、Firefox がうまく解決してくれない場合が・・・ */
:root {
	--table_graycolor: #aaa;
}

table.back_border
, table.back_border thead
, table.back_border tbody
, table.back_border tfoot
, table.back_border tr
, table.back_border col
{
	border: 1px solid var(--table_graycolor);
}

/* こっちで指定も可 */
table.black_border.gray_all, table.black_border *.gray_all {
	border: 1px solid var(--table_graycolor);
}
table.black_border.gray_tb, table.black_border *.gray_tb {
	border-top: 1px solid var(--table_graycolor);
	border-bottom: 1px solid var(--table_graycolor);
}
table.black_border.gray_rl, table.black_border *.gray_rl {
	border-right: 1px solid var(--table_graycolor);
	border-left: 1px solid var(--table_graycolor);
}

/* ボーダーを消す */
table.black_border.n_all, table.black_border *.n_all {
	border-width: 0px;
}
table.black_border.n_tb, table.black_border *.n_tb {
	border-top-width: 0px;
	border-bottom-width: 0px;
}
table.black_border.n_rl, table.black_border *.n_rl {
	border-right-width: 0px;
	border-left-width: 0px;
}
table.black_border.n_t, table.black_border *.n_t {
	border-top-width: 0px;
}
table.black_border.n_r, table.black_border *.n_r {
	border-right-width: 0px;
}
table.black_border.n_b, table.black_border *.n_b {
	border-bottom-width: 0px;
}
table.black_border.n_l, table.black_border *.n_l {
	border-left-width: 0px;
}

/* 周囲を太く */
table.black_border.around2 {
	border-width: 2px;
}


/* table 自体を真ん中に */
table.center {
	margin-left: auto;
	margin-right: auto;
}

/* セルのテキスト */
table.center_text {
	text-align: center;
}

th.left, td.left {
	text-align: left;
}
th.right, td.right {
	text-align: right;
}
th.center, td.center {
	text-align: center;
}

/* お知らせと期間限定で表示する要素 */
.notice {
	border-left: 4px gray solid;
	padding-left: 0.5em;
	margin-top: 1em;
	margin-bottom: 1em;
}
.limited_notice {
	display: none;
}

/* メッセージバー (MessageBar) */
.message_bar {
	position: fixed;
	left: 0px;
	bottom: 0px;
	width: 100%;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	background-color: white;
	
	padding: 0px 0.5em;
	border-style: solid;
	border-width: 1px 0px 0px 10px;
	border-color: gold;
}
.message_bar.hide_animation {
	/* これをセットするまでの時間はスクリプトで指定する */
	transition: transform 1000ms 0ms ease;
	transform: translateY(100%);
}
.message_bar.hide {
	display: none;
}


/* 読込・保存ツールバー */
.toolbar {
	margin: 0.5em 0em;
}
.toolbar > div {
	display: inline-block;
	margin-right: 1em;
}
.toolbar select, .toolbar button {
	margin: 0px 1px;
}
.toolbar .hidden {
	/*display: none;*/ /* ボタンの位置が変わってしまうのはいまいち… */
	visibility: hidden;
}

.toolbar .record_list {
	width: 200px;
}

.toolbar .record_name {
	width: 200px;
	margin: 1px 3px;
}
.toolbar .save_button {
	min-width: 100px;
}


/* dom_dialog.mjs */

/* 変数 */
.dialog_container {
	--top-margin: 20px;
	--bottom-margin: 20px;
	--left-margin: 20px;
	--right-margin: 20px;
	--bar-height: calc(24px * 1.0);
	--bar-font-size: 100%;
}

/* ダイアログを収納する要素 とりあえずz-index:100 */
.dialog_container {
	z-index: 100;
}

/* 選択を無効にする */
.dialog_container .noselect {
	user-select: none;
}

/* ダイアログを包む、外側の要素 クリックでキャンセル */
.dialog_container .outside {
	display: block;
	position: fixed;
	left: 0px;
	top: 0px;
	height: 100%;
	width: 100%;
	background-color: #0000004d;
}
.dialog_container .outside.hidden {
	display: none;
}

/* ダイアログ本体 タイトルバーと内容を持つ */
.dialog_container .inside {
	position: fixed;
	left: 0;
	right: 0;
	top: var(--top-margin);
	margin-left: auto;
	margin-right: auto;
	width: -moz-fit-content; /* firefox */
	height: -moz-fit-content;
	width: fit-content; /* 個別に上書きすべき */
	height: fit-content;
	max-width: calc(100vw - var(--left-margin) - var(--right-margin));
	max-height: calc(100vh - var(--top-margin) - var(--bottom-margin));
	background-color: white;
	border: 1px solid #444;
	/*border-radius: 4px;*/
}
.dialog_container .inside.hidden {
	display: none;
}
/* 縦も中央揃え */
/* firefoxでうまくうごかない？ */
.dialog_container .inside.vcenter {
	top: 0px;
	bottom: 0px;
	margin-top: auto;
	margin-bottom: auto;
}

/* タイトルバー */
.dialog_container .inside .bar {
	position: relative;
	height: var(--bar-height);
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #444;
	font-size: var(--bar-font-size);
	white-space: nowrap;
	cursor: default;
	overflow: hidden;
}
/* タイトル */
.dialog_container .inside .bar .title {
	display: flex;
	align-items: center;
	height: 100%;
	padding-left: 0.5em;
	padding-right: var(--bar-height);
	font-weight: bold;
	background-color: #cfefff;
}
/* 右上の閉じるボタン */
.dialog_container .inside .bar .close {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0px;
	right: 0px;
	width: var(--bar-height);
	height: 100%;
	background-color: #00000022;
}
.dialog_container .inside .bar .close:hover {
	background-color: #00000055;
}
.dialog_container .inside .bar .close > .mark_x {
	--weight: 0.08em;
	--color: #003;
}

/* ダイアログの内容 */
.dialog_container .inside .contents {
/*
	max-width: calc(100% - var(--left-margin) - var(--right-margin));
	max-height: calc(100vh - var(--bar-height) - 3px - var(--top-margin) - var(--bottom-margin));
*/
	overflow: auto;
}

/* alert用 */
.dialog_container .inside.alert {
	width: -moz-fit-content;
	height: -moz-fit-content;
	width: fit-content;
	height: fit-content;
	min-width: 200px;
	top: 0;
	bottom: 0;
	margin: auto;
}
.dialog_container .inside.alert .message {
	padding: 0.5em 1em;
}
.dialog_container .inside.alert .button_div {
	text-align: center;
	padding-bottom: 0.5em;
}
.dialog_container .inside.alert .button_div button {
	/*font-size: 100%;*/
	width: 4em;
}

/* 艦娘選択ダイアログ */
.inside.ship_selector .contents {
	margin: 0.5em 1em 1em 1em;
}
.inside.ship_selector .search_bar > .ship_class {
	width: 10em;
	margin-right: 4px;
}
.inside.ship_selector .search_bar > .mark_x {
	margin-right: 0.3em;
	vertical-align: middle;
	opacity: 0.5;
}
.inside.ship_selector .search_bar > .mark_x:hover {
	opacity: 1;
}
.inside.ship_selector .search_bar > label {
	margin-left: 0.5em;
}
.inside.ship_selector .search_bar > .ok {
	float: right;
	padding-left: 2em;
	padding-right: 2em;
}
.inside.ship_selector .search_bar > .ok.hide {
	display: none;
}
/* 艦娘リスト */
.inside.ship_selector .list {
	position: relative;
	border: 1px solid gray;
	width: 75vw;
	height: 75vh;
	padding: 2px;
	overflow: auto;
	user-select: none;
}
.inside.ship_selector .list > .delimiter {
	position: absolute;
	right: 0px;
	font-size: 75%;
	z-index: 1;
	display: flex;
	cursor: default;
	width: 100%;
}
.inside.ship_selector .list > .delimiter .hr {
	position: relative;
	flex-grow: 1;
}
.inside.ship_selector .list > .delimiter .hr > :first-child {
	position: absolute;
	width: 100%;
	height: 2px;
	margin: auto;
	top: 0;
	bottom: 0;
	border-top: 1px solid lightgray;
}
.inside.ship_selector .list > .delimiter .group_name {
	margin: 0em 0.5em;
	flex-grow: 0;
	color: #444;
}

.inside.ship_selector .list > .groupheader {
	position: absolute;
	right: 0px;
	margin-right: 0.5em;
	font-size: 75%;
	z-index: 1;
}
.inside.ship_selector .list > .shipgroup {
	position: relative;
	z-index: 2;
	
	display: flex;
	flex-wrap: wrap;
}
.inside.ship_selector .list > .shipgroup > .ship {
	margin: 2px;
	padding: 3px;
	border-radius: 8px;
	flex-basis: 8em;
	max-width: 8em;
	flex-shrink: 0;
	line-height: 1;
	border: 1px solid black;
	cursor: pointer;
	overflow: hidden;
	
	display: flex;
	flex-direction: column;
}
.inside.ship_selector .list > .shipgroup > .ship > .name {
	text-align: center;
	flex-grow: 1;
	
	display: flex;
	align-items: center;
	justify-content: center;
}
.inside.ship_selector .list > .shipgroup > .ship > .hint {
	font-size: 75%;
	padding: 0em 0.3em;
	flex-grow: 0;
	
	display: flex;
	justify-content: space-around;
}
.inside.ship_selector .list > .shipgroup > .ship.guide {
	opacity: 0.6;
}
.inside.ship_selector .list > .shipgroup > .ship.empty {
	padding-top: 0.3em;
	padding-bottom: 0.3em;
}
.inside.ship_selector .list > .shipgroup > .ship.selected {
	filter: drop-shadow(1px 1px 4px #444);
}
.inside.ship_selector .list > .shipgroup > .ship.selected > .name {
	font-weight: bold;
}
/* 艦種ごとの色(.ship.XX)については、使う場所で別定義とする */
.inside.ship_selector .list > .shipgroup > .ship {
	background-color: #fff;
}
.inside.ship_selector .list > .shipgroup > .ship.other {
	color: #000;
	border-color: #444;
}
.inside.ship_selector .list > .shipgroup > .ship.empty {
	color: #444;
	border-color: #888;
}

/* 艦娘選択フォーム */
.shipnamediv {
	cursor: pointer;
}
.shipnamediv.empty {
	color: gray;
}
.shipnamediv:hover {
	color: blue;
	background-color: #e6f3ff;
	text-decoration: underline;
}