183 lines
4.2 KiB
CSS
183 lines
4.2 KiB
CSS
/*
|
|
@config : next999.json
|
|
@filename : ${psFileBasename}
|
|
@title : 2.カレンダースタイル
|
|
@name : 2.カレンダースタイル
|
|
@siteIds : 310514
|
|
@siteTitles : イオン多摩平シフト希望
|
|
@disabled: false
|
|
*/
|
|
|
|
/* グローバルコンテナ */
|
|
#custom-calendar-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
}
|
|
|
|
/* カレンダーとコントロールのコンテナ */
|
|
#custom-calendar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
/* スマホ表示では縦並び */
|
|
align-items: stretch;
|
|
/* 幅を合わせる */
|
|
width: 100%;
|
|
background: #fff;
|
|
padding: 10px;
|
|
border-radius: 6px;
|
|
margin-bottom: 10px;
|
|
margin-left: 0 !important;
|
|
/* 初期値として左マージンをリセット */
|
|
}
|
|
|
|
/* カレンダーテーブルの直接の親div */
|
|
#custom-calendar>div:first-child {
|
|
overflow-x: auto;
|
|
/* テーブルがはみ出る場合はスクロール */
|
|
width: 100%;
|
|
margin-bottom: 15px;
|
|
/* ボタンとの間隔 */
|
|
}
|
|
|
|
/* テーブル全体 */
|
|
#custom-calendar table {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
background: #fff;
|
|
min-width: 300px;
|
|
/* 最小幅を設定 */
|
|
}
|
|
|
|
/* テーブルヘッダーとセル共通 */
|
|
#custom-calendar th,
|
|
#custom-calendar td {
|
|
border: 1px solid #ccc;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
height: 40px;
|
|
/* 基本の高さを維持 */
|
|
width: auto;
|
|
/* 幅は自動調整、または特定の列で指定 */
|
|
padding: 5px;
|
|
/* 少しパディングを調整 */
|
|
font-size: 1.2em;
|
|
/* フォントサイズを少し大きく */
|
|
}
|
|
|
|
/* 曜日行 */
|
|
#custom-calendar thead th {
|
|
background: #f0f0f0;
|
|
color: #333;
|
|
}
|
|
|
|
/* 日曜日 */
|
|
#custom-calendar thead th:first-child,
|
|
#custom-calendar tbody td:nth-child(1) {
|
|
background: #e0f0ff;
|
|
color: #0070c0;
|
|
}
|
|
|
|
/* 土曜日 */
|
|
#custom-calendar thead th:last-child,
|
|
#custom-calendar tbody td:nth-child(7) {
|
|
background: #fff4e0;
|
|
color: #ff8000;
|
|
}
|
|
|
|
/* チェックボックスと日付のラベル */
|
|
#custom-calendar label {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
width: 100%;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* タップしやすくするために td 内の label を block にする */
|
|
#custom-calendar td label {
|
|
display: block;
|
|
}
|
|
|
|
|
|
/* 操作コントロール（ボタンとタイムバー）のコンテナ */
|
|
.controls-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
width: 100%;
|
|
margin-left: 0 !important;
|
|
/* 初期値として左マージンをリセット */
|
|
}
|
|
|
|
/* 曜日ボタングループ */
|
|
.day-toggle-buttons {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 5px;
|
|
justify-content: center;
|
|
/* スマホ表示では中央揃え */
|
|
}
|
|
|
|
/* 曜日ボタン個別 */
|
|
.calendar-day-toggle {
|
|
padding: 6px 6px;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
/* タイムバーコンテナ */
|
|
#time-bar {
|
|
width: 100%;
|
|
display: flex;
|
|
margin: 3px 0;
|
|
flex-wrap: nowrap;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
/* タイムスロット */
|
|
.time-slot {
|
|
min-width: 25px;
|
|
text-align: center;
|
|
border: 1px solid #ccc;
|
|
font-size: 1.3em !important;
|
|
/* !important は元の指定を尊重 */
|
|
/* font-size: 0.85em; 重複していたため、どちらかを選択または調整 */
|
|
}
|
|
|
|
/* タブレット以上の幅でレイアウト変更 */
|
|
@media (min-width: 768px) {
|
|
#custom-calendar {
|
|
flex-direction: row;
|
|
/* 横並びに戻す */
|
|
align-items: flex-start;
|
|
width: fit-content;
|
|
/* 元の指定に近い形に戻す */
|
|
float: left;
|
|
/* 元の指定 */
|
|
margin-left: 121px !important;
|
|
/* 元の指定に戻す */
|
|
}
|
|
|
|
#custom-calendar>div:first-child {
|
|
/* カレンダーテーブルのコンテナ */
|
|
width: auto;
|
|
/* 自動幅に戻す */
|
|
margin-bottom: 0;
|
|
margin-right: 15px;
|
|
/* 右側にマージン */
|
|
}
|
|
|
|
.controls-container {
|
|
width: auto;
|
|
/* 自動幅に戻す */
|
|
margin-left: 16px !important;
|
|
/* 元のマージンに戻す */
|
|
}
|
|
|
|
.day-toggle-buttons {
|
|
justify-content: flex-start;
|
|
/* 左揃えに戻す */
|
|
}
|
|
} |