Merge pull request #221 from NUTFes/feature/takumi/211-user-modal-create

メンバー詳細モーダルの作成

view/next-project/src/components/common/UserDetailModal/UserDetailModal.module.css

@@ -0,0 +1,298 @@
+.modalContainer {
+  top: 0;
+  left: 0;
+  position: fixed;
+  padding: 100px;
+  height: 100vh;
+  width: 100%;
+  z-index: 11;
+  background-color: rgba(51, 51, 51, 0.3);
+}
+
+.modalInnerContainer {
+  width: 100%;
+  min-height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  pointer-events: none;
+}
+
+.modalTakumi {
+  position: absolute;
+  width: 50vw;
+  height: 80vh;
+}
+
+.img_header {
+  vertical-align:top;
+  z-index: 30;
+  position: absolute;
+  top: 0;
+  left: 0;
+  text-align:center;
+}
+
+.img_footer {
+  vertical-align:top;
+  z-index: 30;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  text-align:center;
+}
+
+.modalContent {
+  position: absolute;
+  width: 50vw;
+  height: 80vh;
+  display: flex;
+  flex-flow: column;
+  padding: 50px 70px 150px 70px;
+  color: var(--accent-7);
+  border-radius: var(--card-radius);
+  background: #FFF9F5; 
+  backdrop-filter: blur(10px);
+  gap: 30px;
+  overflow-y: auto;
+  overscroll-behavior-y: none;
+  pointer-events:auto;
+  /*スクロールバー非表示（IE・Edge）*/
+  -ms-overflow-style: none;
+  /*スクロールバー非表示（Firefox）*/
+  scrollbar-width: none;
+}
+
+/*スクロールバー非表示（Chrome・Safari）*/
+.modalContent::-webkit-scrollbar{
+  display:none;
+}
+
+.contentsTitle {
+  width: 100%;
+  display: flex;
+  justify-content: start;
+  align-items: start;
+  flex-flow: row;
+  flex-wrap: nowrap;
+}
+
+.modalContentContents {
+  width: 100%;
+  display: flex;
+  justify-content: start;
+  align-items: start;
+  flex-flow: row;
+  flex-wrap: nowrap;
+}
+
+.graduationAssignmentMde {
+  width: 100%;
+}
+
+.graduationAssignmentMde span {
+  font-size: 16px;
+  background-color: #fff;
+}
+
+.modalContent input {
+  font-size: 1.6rem;
+  width: 100%;
+  letter-spacing: 1px;
+  color: var(--accent-6);
+  background: none;
+  border: 1px solid var(--accent-4);
+  padding: 10px;
+}
+
+.modalContent input:focus {
+  border: 1px solid var(--button-secondary);
+  z-index: 10;
+  outline: 0;
+}
+
+.modalContent textarea {
+  font-size: 1.6rem;
+  width: 50%;
+  height: 50rem;
+  color: var(--accent-6);
+  background: none;
+  border: 1px solid var(--accent-4);
+  padding: 10px;
+}
+
+.modalContent textarea:focus {
+  border: 1px solid var(--button-secondary);
+  z-index: 10;
+  outline: 0;
+}
+
+.modalContent select {
+  font-size: 1.6rem;
+  width: 100%;
+  letter-spacing: 1px;
+  color: var(--accent-6);
+  background: none;
+  border: 1px solid var(--accent-4);
+  padding: 10px;
+}
+
+.modalContent select:focus {
+  border: 1px solid var(--button-secondary);
+  z-index: 10;
+  outline: 0;
+}
+
+.modalName {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.modalContentClose {
+  display: flex;
+  justify-content: start;
+  align-items: start;
+}
+
+.modalContentCloseIcon {
+  background: none;
+  border: none;
+  margin: -20px;
+  border-radius: var(--button-radius);
+  text-align: center;
+  font-size: 2.8rem;
+  color: var(--button-secondary);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.modalSubmitButton {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.modalDetail {
+  margin-top: 50px;
+}
+
+.img {
+  border-radius: 50%;  
+  width:  180px;       
+  height: 180px;       
+}
+
+.wrapper {
+  display: flex;
+  justify-content: center
+}
+
+.box1 {
+  grid-column: 2 / 4;
+  grid-row: 1;
+  margin-right:50px;
+}
+
+.box2 {
+  grid-column: 1;
+  grid-row: 1 / 3;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.username {
+  border-bottom: solid 2px #000000;
+  font-size: 40px;
+  font-weight: bold;
+}
+
+.userrole {
+  margin-top: 10px;
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.userProjects h3 {
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.userProjects p {
+  font-size: 16px;
+  font-weight: lighter;
+}
+
+.userSkills h3 {
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.userSkills p {
+  font-size: 16px;
+  font-weight: lighter;
+}
+
+.userRecords h3 {
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.userRecords p {
+  font-size: 16px;
+  font-weight: lighter;
+}
+
+.box3 {
+  display: flex;
+  width: 90%;
+  margin: 0 auto;
+  flex-wrap: wrap;
+}
+
+.box4 {
+  display: flex;
+  width: 90%;
+  margin: 0 auto;
+  flex-wrap: wrap;
+}
+
+.card {
+  padding: 0.5em 1em;
+  margin: 0.75em 1rem;
+  font-weight: bold;
+  color: #505050;
+  background: #FFF9F5;
+  border: solid 4px #FFAC5D;
+  border-radius: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center
+}
+
+.card p {
+  margin: 0; 
+  padding: 0;
+}
+
+.box5 {
+  width: 86%;
+  margin: 0 auto;
+}
+
+.record_card {
+  padding: 0.5em 1em;
+  margin: 2em 0;
+  font-weight: bold;
+  color: #505050;
+  background: #FFF9F5;
+  border-bottom: dashed 2px #FFAC5D;
+  width: 100%;
+}
+
+.record_card p {
+  margin: 0; 
+  padding: 0;
+}