diff --git a/app-tree-index-edit/src/app/tree-list2/tree-list2.component.css b/app-tree-index-edit/src/app/tree-list2/tree-list2.component.css index 6656f31..24ad081 100644 --- a/app-tree-index-edit/src/app/tree-list2/tree-list2.component.css +++ b/app-tree-index-edit/src/app/tree-list2/tree-list2.component.css @@ -13,40 +13,90 @@ } /* モーダルウィンドウのスタイル */ -/* パネルのスタイル */ -.panel { - border: 1px solid #ddd; - border-radius: 4px; - box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); +.Mymodal { + display: none; /* デフォルトでは非表示 */ + position: fixed; /* 固定位置 */ + z-index: 1050; /* 他のコンテンツの上に表示 */ + left: 0; + top: 0; + width: 100%; /* フルスクリーン */ + height: 100%; /* フルスクリーン */ + overflow: auto; /* 必要に応じてスクロール */ + background-color: rgba(0, 0, 0, 0.5); /* 背面を薄暗くする */ } -.panel-body { - padding: 15px; +.modal-content { + background-color: #fefefe; + margin: 15% auto; /* 上下のマージンと中央寄せ */ + padding: 20px; + border: 1px solid #888; + width: 60%; /* 幅 */ + z-index: 1060; /* モーダルコンテンツをさらに前面に */ +} + +.modal-header, .modal-footer { + padding: 10px; + border-bottom: 1px solid #e5e5e5; } -.row { - margin-left: -15px; - margin-right: -15px; +.modal-header { + border-bottom: 1px solid #e5e5e5; } -.col-sm-2, .col-md-2, .col-sm-10, .col-md-10 { - position: relative; - min-height: 1px; - padding-left: 15px; - padding-right: 15px; +.modal-footer { + border-top: 1px solid #e5e5e5; + text-align: right; /* ボタンを右寄せ */ } -.checkbox { - margin-top: 10px; - margin-bottom: 10px; +.close { + color: #aaa; + float: right; + font-size: 28px; + font-weight: bold; } -.text-danger { - color: #a94442; +.close:hover, +.close:focus { + color: black; + text-decoration: none; + cursor: pointer; } -/* モーダルウィンドウのスタイル */ -.Mymodal { +.enable_button:disabled { + background-color: #ccc; /* 非活性時の背景色 */ + cursor: not-allowed; /* 非活性時のカーソル */ +} + +.enable_button { + background-color: #5bc0de; /* 活性時の背景色 */ + color: white; + border: none; + padding: 10px 20px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + margin: 4px 2px; + cursor: pointer; + border-radius: 4px; +} + +.cancel-button { + background-color: #d9534f; /* キャンセルボタンの背景色 */ + color: white; + border: none; + padding: 10px 20px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + margin: 4px 2px; + cursor: pointer; + border-radius: 4px; +} + +/* 新しいモーダル用のCSS */ +#ConfirmModalComponent2 { display: none; /* デフォルトでは非表示 */ position: fixed; /* 固定位置 */ z-index: 1050; /* 他のコンテンツの上に表示 */ @@ -58,7 +108,7 @@ background-color: rgba(0, 0, 0, 0.5); /* 背面を薄暗くする */ } -.modal-content { +#ConfirmModalComponent2 .modal-content { background-color: #fefefe; margin: 15% auto; /* 上下のマージンと中央寄せ */ padding: 20px; @@ -67,40 +117,40 @@ z-index: 1060; /* モーダルコンテンツをさらに前面に */ } -.modal-header, .modal-footer { +#ConfirmModalComponent2 .modal-header, #ConfirmModalComponent2 .modal-footer { padding: 10px; border-bottom: 1px solid #e5e5e5; } -.modal-header { +#ConfirmModalComponent2 .modal-header { border-bottom: 1px solid #e5e5e5; } -.modal-footer { +#ConfirmModalComponent2 .modal-footer { border-top: 1px solid #e5e5e5; text-align: right; /* ボタンを右寄せ */ } -.close { +#ConfirmModalComponent2 .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; } -.close:hover, -.close:focus { +#ConfirmModalComponent2 .close:hover, +#ConfirmModalComponent2 .close:focus { color: black; text-decoration: none; cursor: pointer; } -.enable_button:disabled { +#ConfirmModalComponent2 .enable_button:disabled { background-color: #ccc; /* 非活性時の背景色 */ cursor: not-allowed; /* 非活性時のカーソル */ } -.enable_button { +#ConfirmModalComponent2 .enable_button { background-color: #5bc0de; /* 活性時の背景色 */ color: white; border: none; @@ -114,7 +164,7 @@ border-radius: 4px; } -.cancel-button { +#ConfirmModalComponent2 .cancel-button { background-color: #d9534f; /* キャンセルボタンの背景色 */ color: white; border: none; diff --git a/app-tree-index-edit/src/app/tree-list2/tree-list2.component.html b/app-tree-index-edit/src/app/tree-list2/tree-list2.component.html index a4fe91e..67b9739 100644 --- a/app-tree-index-edit/src/app/tree-list2/tree-list2.component.html +++ b/app-tree-index-edit/src/app/tree-list2/tree-list2.component.html @@ -129,6 +129,7 @@

{{langJson.Index_Edit[1]}}

+
@@ -138,21 +139,52 @@

{{langJson.Index_Edit[1]}}

{{langJson.Publish[1]}}
- {{langJson.Open_To_Public[1]}} + {{langJson.Open_To_Public[1]}}

-

- - - {{langJson.Date[1]}}: - - -
-

-

- {{langJson.Set_Publish_Date_Recursively[1]}} -
+
+ + + {{langJson.Date[1]}}: + + +
+

+

+ {{langJson.Set_Publish_Date_Recursively[1]}} +
+
+
+
+ + +
+
@@ -289,11 +321,8 @@

{{langJson.Index_Edit[1]}}