@import url("font.css"); @import url("color.css"); ::-webkit-scrollbar { display: none; } .link { color: var(--main-color); text-decoration: none; } body{ display: flex; border: none; margin-top: 0px; margin-bottom: 0px; margin-left: auto; margin-right: 0px; background-color: var(--background-color); /* 画像を常に天地左右の中央に配置 */ background-position: center center; /* 画像をタイル状に繰り返し表示しない */ background-repeat: no-repeat; /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */ background-attachment: fixed; /* 表示するコンテナの大きさに基づいて、背景画像を調整 */ background-size: cover; } .leftbox{ margin-top: 0px; margin-bottom: 0px; background-color: var(--main-color); width: 600px; min-height: 100dvh; height: fit-content; margin-left: 0px; padding: 32px; } .leftbox h1{ margin-left: 20px; color:var(--background-color); font-size: 2em; } .leftbox .logo{ display: flex; } .leftbox .logo img{ margin-left: 16px; margin-top: 16px; width: 200px; } .leftbox .logo p{ color:var(--background-color); font-family: var(--Text-fonts), sans-serif; font-weight: bold; font-size: 32px; margin-left: 8px; margin-top: auto; margin-bottom: -4px; } .leftbox2{ margin-top: 0px; margin-bottom: 0px; background-color: var(--main-color); width: 600px; height: 100vh; margin-left: 0px; padding: 32px; } .leftbox2 h1{ margin-left: 20px; color:var(--background-color); font-size: 2em; } .leftbox2 .logo{ display: flex; } .leftbox2 .logo img{ margin-left: 16px; margin-top: 16px; width: 200px; } .leftbox2 .logo p{ color:var(--background-color); font-family: var(--Text-fonts), sans-serif; font-weight: bold; font-size: 32px; margin-left: 8px; margin-top: auto; margin-bottom: -4px; } .textbox{ padding: 32px; width: auto; margin-left: 24px; margin-right: 24px; margin-top: 64px; margin-bottom: 100px; border-radius: 25px; background-color: var(--tl-color); box-shadow:0 0px 48px 0 rgba(0, 0, 0, .15); } .textbox h1{ word-wrap: break-word; margin: 0px; color: var(--main-color); font-size: 32px; font-family: var(--Head-fonts), sans-serif; margin-bottom: 12px; } .textbox h2{ word-wrap: break-word; margin: 0px; color: var(--text-color); text-align: center; font-size: 32px; font-family: var(--Head-fonts), sans-serif; } .textbox h3{ word-wrap: break-word; margin: 0px; color: var(--text-color); text-align: center; font-size: 18px; font-family: var(--Head-fonts), sans-serif; font-weight: normal; } .textbox p{ word-wrap: break-word; line-height: 20px; color: var(--text-color); font-size: 16px; font-family: var(--Text-fonts), sans-serif; font-weight: normal; } .textbox .p2{ margin-top: 4px; margin-bottom: 4px; word-wrap: break-word; line-height: 16px; color: var(--subtext-color); font-size: 12px; font-family: var(--Text-fonts), sans-serif; font-weight: normal; } .textbox .p2c{ margin-top: 4px; margin-bottom: 4px; text-align: center; word-wrap: break-word; line-height: 16px; color: var(--subtext-color); font-size: 12px; font-family: var(--Text-fonts), sans-serif; font-weight: normal; } .textbox .p3{ margin-top: 12px; text-align: center; word-wrap: break-word; line-height: 24px; color: var(--text-color); font-size: 22px; font-family: var(--Text-fonts), sans-serif; font-weight: bold; } .textbox .maillink{ word-wrap: break-word; line-height: 20px; color: var(--link-color); text-decoration: none; font-size: 16px; font-family: var(--Text-fonts), sans-serif; font-weight: normal; } .textbox .cntzone{ display: flex; width: 100%; padding: 0px; justify-content: space-between; } .textbox .cntzone .usercnt{ margin-top: 24px; margin-left: 0px; margin-right: 0px; width: calc(50% - 52px); height: 5dvh; border-radius: 15px; background-color: var(--background-color); border: solid 1px var(--border-color); padding: 18px; } .textbox .cntzone .usercnt .p1{ display: block; margin-top: 0px; margin-bottom: 6px; text-align: left; word-wrap: break-word; color: var(--subtext-color); font-size: 12px; font-family: var(--Text-fonts), sans-serif; font-weight: normal; } .textbox .cntzone .usercnt p{ margin-top: 0px; margin-bottom: 8px; text-align: left; word-wrap: break-word; line-height: 24px; color: var(--text-color); font-size: 24px; font-family: var(--Mono-fonts), sans-serif; font-weight: bold; } .serverhead{ width: 100%; margin-left: auto; margin-right: auto; display: flex; text-align: center; } .serverhead img{ object-fit: cover; width: 100%; height: 180px; border-radius: 15px; margin: 0px; } .servericon{ width: fit-content; margin-left: auto; margin-right: auto; display: flex; text-align: center; } .servericon .up{ margin-top: -74px; border-radius: 18px; } .servericon img{ object-fit: cover; width: 100px; height: 100px; border-radius: 15px; box-shadow:0 0px 48px 0 rgba(0, 0, 0, .05); margin: 0px; } .servericon .textzone{ margin-top: auto; margin-bottom: auto; display: block; } .servericon .textzone .p3{ margin-left: 24px; margin-bottom: 6px; text-align: left; word-wrap: break-word; line-height: 24px; color: var(--text-color); font-size: 24px; font-family: var(--Text-fonts), sans-serif; font-weight: bold; } .servericon .textzone .p2c{ margin-left: 24px; margin-top: 6px; text-align: left; word-wrap: break-word; line-height: 20px; color: var(--subtext-color); font-size: 14px; font-family: var(--Text-fonts), sans-serif; font-weight: normal; } .btnbox{ padding-top: 16px; padding-bottom: 16px; padding-left: 32px; padding-right: 32px; border-radius: 15px; background-color: var(--background-color); border: 1px solid var(--border-color); margin-top: 32px; text-align: center; margin-left: auto; margin-right: auto; } label > input { display:none; /* アップロードボタンのスタイルを無効にする */ } .irobutton{ cursor: pointer; border: none; display: block; width: fit-content; margin: 32px; padding: 8px 20%; margin-left: auto; margin-right: auto; background-color: var(--main-color); text-align: center; border-radius: 50px; color:var(--background-color); font-size: 22px; font-family: var(--Head-fonts), sans-serif; font-weight: normal; text-decoration:none; text-align: center; transition: all 250ms ease-in-out; } .irobutton:hover{ padding: 8px 22%; } .irobutton:active{ padding: 8px 18%; } .sirobutton{ cursor: pointer; border: none; display: block; width: fit-content; margin: 32px; padding: 8px 20%; margin-left: auto; margin-right: auto; text-align: center; background-color: var(--dark-subtext-color); color: var(--dark-text-color); border-radius: 50px; font-size: 22px; font-family: var(--Head-fonts), sans-serif; font-weight: normal; text-decoration:none; transition: all 250ms ease-in-out; } .sirobutton:hover{ padding: 8px 22%; } .sirobutton:active{ padding: 8px 18%; } .formarea{ padding-top: 16px; padding-bottom: 16px; padding-left: 32px; padding-right: 32px; border-radius: 15px; background-color: var(--background-color); border: 1px solid var(--border-color); margin-top: 64px; text-align: left; margin-left: auto; margin-right: auto; } .formarea .iconimg{ margin-left: auto; margin-right: auto; text-align: center; } .formarea .iconimg img{ margin-left: auto; margin-right: auto; text-align: center; width: 100px; height:100px; border-radius: 50%; box-shadow:0 0px 48px 0 rgba(0, 0, 0, .15); object-fit: cover; } .formarea label{ overflow-wrap: break-word; font-size: 16px; color:var(--text-color); text-decoration: none; font-family: var(--Text-fonts), sans-serif; font-weight: normal; } .myarea{ padding-top: 16px; padding-bottom: 32px; padding-left: 32px; padding-right: 32px; border-radius: 15px; background-color: var(--background-color); box-shadow:0 0px 48px 0 rgba(0, 0, 0, .05) inset; margin-top: 64px; text-align: center; margin-left: auto; margin-right: auto; } .myarea img{ margin-left: auto; margin-right: auto; text-align: center; width: 100px; height:100px; border-radius: 50%; box-shadow:0 0px 48px 0 rgba(0, 0, 0, .15); } .myarea p{ margin-top: 32px; margin-bottom: 10px; word-wrap: break-word; line-height: 20px; color: var(--subtext-color); font-size: 12px; font-family: var(--Text-fonts), sans-serif; font-weight: normal; } .ueuse2 a{ margin-top: auto; margin-bottom: auto; margin-left: 6px; font-size: 16px; color:var(--link-color); text-decoration: none; font-family: var(--Text-fonts), sans-serif; font-weight: bold; } .inbox { width: calc(100% - 20px); padding: 8px 10px; border: none; border-radius: 10px; background: var(--background-color); font-family: var(--Head-fonts), sans-serif; color: var(--text-color); font-size: 16px; line-height: 1.5; white-space: nowrap; overflow-x: scroll; overflow-y : scroll ; transition: border 350ms ease-in-out; transition: border-bottom 150ms ease-out; border: 1px solid var(--border-color); } .inbox::placeholder { color: #999; } .inbox:hover { outline: none; border: 1px solid var(--main-color); } .inbox:focus { outline: none; border: 1px solid var(--main-color); border-bottom: 3px solid var(--main-color); } textarea { height: 100px; resize: vertical; } .errmsg{ padding-top: 16px; padding-bottom: 16px; padding-left: 32px; padding-right: 32px; border-radius: 15px; background-color: #ffebeb; box-shadow:0 0px 48px 0 rgba(0, 0, 0, .05) inset; margin-top: 64px; text-align: left; margin-left: auto; margin-right: auto; color:#ff4848; font-family: var(--Text-fonts), sans-serif; word-wrap: break-word; line-height: 20px; border: 1px solid #FF4848; } .flexbtn{ display: flex; } .flexbtn .irobutton{ border: none; display: block; width:20%; margin: 32px; padding: 8px 10%; margin-left: auto; margin-right: auto; padding-top: 8px; padding-bottom: 8px; background-color: var(--main-color); border-radius: 50px; color:var(--background-color); font-size: 26px; font-family: var(--Head-fonts), sans-serif; font-weight: normal; text-decoration:none; box-shadow:0 0px 48px 0 rgba(0, 0, 0, .15); transition: box-shadow 250ms ease-in-out; transition: width 250ms ease-out; } .flexbtn.irobutton:hover{ box-shadow:0 0px 48px 0 rgba(0, 0, 0, .2); width:55%; } .flexbtn.irobutton:active{ box-shadow:0 0px 48px 0 rgba(0, 0, 0, .05); width:45%; } .flexbtn.sirobutton{ border: none; display: block; width:50%; margin: 32px; padding: 8px 10%; margin-left: auto; margin-right: auto; padding-top: 8px; padding-bottom: 8px; background-color: var(--sub-color); border-radius: 50px; color:var(--main-color); font-size: 26px; font-family: var(--Head-fonts), sans-serif; font-weight: normal; text-decoration:none; box-shadow:0 0px 48px 0 rgba(0, 0, 0, .15); transition: box-shadow 250ms ease-in-out; transition: width 250ms ease-out; } .flexbtn.sirobutton:hover{ box-shadow:0 0px 48px 0 rgba(0, 0, 0, .2); width:55%; } .flexbtn.sirobutton:active{ box-shadow:0 0px 48px 0 rgba(0, 0, 0, .05); width:45%; } .roleboxes { margin-left: auto; margin-right: auto; max-width: 70%; display: flex; padding: auto; flex-wrap: wrap; justify-content: center; } .rolebox { margin: 4px 6px 4px 6px; width: auto; padding-left: auto; padding-right: auto; border-radius: 25px; box-shadow:0 0px 48px 0 rgba(0, 0, 0, .15); } .rolebox p { margin: 2px 10px 2px 10px; font-size: 16px; font-family: var(--Head-fonts), sans-serif; font-weight: normal; } .shine { position: relative; overflow: hidden; } .shine:after { content: ""; position: absolute; top: -50%; left: -50%; width: 10%; height: 150%; background: #fff; transform: rotate(45deg); animation: reflect 3s ease-in-out infinite; } @keyframes reflect { 0%, 75% { transform: rotate(45deg) scale(0); opacity: 1; } 100% { transform: rotate(45deg) scale(100); opacity: 0; } } .cyclingmark { display: flex; } .cyclingmark p::before { content: ""; display: inline-block; width: 16px; height: 16px; vertical-align: middle; margin-right: 5px; background: url("/img/uwuzuicon.png") no-repeat; background-size: contain; animation: cycling 2s infinite; margin: -6px 0px 0px -2px; } @keyframes cycling { from { animation-timing-function: ease-in-out; transform: translate(0px, 0px) scale(1, 1) rotate(0deg) skew(0deg, 0deg); opacity: 1; } to { animation-timing-function: ease-in-out; transform: translate(0px, 0px) scale(1, 1) rotate(360deg) skew(0deg, 0deg); opacity: 1; } 25% { animation-timing-function: ease-in-out; transform: translate(0px, 0px) scale(1, 1) rotate(400deg) skew(0deg, 0deg); opacity: 1; } 40% { animation-timing-function: ease-in-out; transform: translate(0px, 0px) scale(1, 1) rotate(330deg) skew(0deg, 0deg); opacity: 1; } 60% { animation-timing-function: ease-in-out; transform: translate(0px, 0px) scale(1, 1) rotate(360deg) skew(0deg, 0deg); opacity: 1; } } .rainbow { animation: rain 5s infinite; } @keyframes rain { 0% { border: 1px solid magenta; color: magenta; } 33% { border: 1px solid yellow; color: yellow; } 66% { border: 1px solid cyan; color: cyan; } 100% { border: 1px solid magenta; color: magenta; } } .userleftbox{ margin-top: 0px; margin-bottom: 0px; background-color: var(--main-color); width: 10%; height: 100%; margin-left: 0px; padding: 32px; } .userleftbox h1{ font-family: var(--Head-fonts), sans-serif; margin-left: 20px; color:var(--background-color); font-size: 32px; } .userleftbox .logo{ display: flex; } .userleftbox .logo img{ margin-left: 16px; margin-top: 16px; width: 72%; } .userleftbox .logo p{ color:var(--background-color); font-family: var(--Text-fonts), sans-serif; font-weight: bold; font-size: 32px; margin-left: 8px; margin-top: auto; margin-bottom: -4px; } .leftbutton{ cursor: pointer; border: none; display: block; width:70%; margin: 32px; padding: 8px 10%; margin-left: auto; margin-right: auto; padding-top: 8px; padding-bottom: 8px; background-color: var(--main-color); border-radius: 50px; color:var(--sub-color); font-size: 20px; font-family: var(--Head-fonts), sans-serif; font-weight: normal; text-decoration:none; text-align: center; transition: box-shadow 250ms ease-in-out; transition: width 250ms ease-out; transition: all 250ms ease-out; } .leftbutton:hover{ background-color: var(--sub-color); color: var(--main-color); box-shadow:0 0px 48px 0 rgba(0, 0, 0, .2); width:75%; } .leftbutton:active{ box-shadow:0 0px 48px 0 rgba(0, 0, 0, .05); width:65%; } main{ border-radius: 25px; margin-top: 24px; margin-left: 24px; margin-right: 24px; width: 80%; background-color: var(--background-color); padding: 24px; box-shadow:0 0px 48px 0 rgba(0, 0, 0, .05); } main h1{ color:var(--text-color); font-size: 32px; font-family: var(--Head-fonts), sans-serif; } .btn_area{ display: flex; width: 100%; margin-left: auto; margin-right: auto; } .fbtn{ cursor: pointer; border: none; display: block; width:50%; padding: 8px auto; margin-top: 12px; margin-left: 12px; margin-right: 12px; margin-bottom: 0px; padding-top: 6px; padding-bottom: 6px; background-color: var(--main-color); border-radius: 50px; color:var(--sub-color); font-size: 16px; text-align: center; font-family: var(--Head-fonts), sans-serif; font-weight: normal; text-decoration:none; text-align: center; transition: box-shadow 250ms ease-in-out; transition: width 250ms ease-out; transition: all 250ms ease-out; } .fbtn:hover{ background-color: var(--main-color); color: var(--sub-color); width:55%; } .fbtn:active{ width:45%; } .textbox .authzone{ width: 100%; margin-top: 64px; margin-left: auto; margin-right: auto; text-align: center; } .textbox .authzone img{ width: 30%; } p img{ margin-top: auto; margin-bottom: auto; margin-left: 4px; margin-right: 4px; height: 24px; width: 24px; vertical-align: middle; border-radius: 5px; } .myarea h2 img{ margin-top: auto; margin-bottom: auto; margin-left: 4px; margin-right: 4px; height: 32px; width: 32px; vertical-align: middle; border-radius: 5px; } .captcha_zone{ margin-top: 32px; width: 100%; margin-left: auto; margin-right: auto; border-radius: 12px; text-align: center; } .captcha_zone .p2{ text-align: left; } .switch_input { position: absolute; left: 0; top: 0; width: 64%; height: 64%; z-index: 5; opacity: 0; cursor: pointer; } .switch_label { margin-top: 0px; margin-bottom: 0px; width: 48px; height: 24px; background: var(--dark-subtext-color); position: relative; display: inline-block; border-radius: 25px; transition: 0.4s; box-sizing: border-box; } .switch_label:after { content: ""; position: absolute; margin-top: 2px; margin-left: 2px; width: 20px; height: 20px; border-radius: 50%; left: 0; top: 0; z-index: 2; background: var(--background-color); box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); transition: 0.2s; } .switch_input:checked + .switch_label { background-color: var(--main-color); } .switch_input:checked + .switch_label:after { left: 24px; } .switch_button { position: relative; width: 48px; height: 24px; margin-left: 0px; } .switch_flexbox{ display: flex; margin-top: 12px; margin-bottom: 12px; height: fit-content; } .switch_flexbox p{ margin: 0px; margin-top: 6px; margin-left: 6px; margin-right: 6px; text-align: left; word-wrap: break-word; line-height: 14px; color: var(--subtext-color); font-size: 14px; font-family: var(--Text-fonts), sans-serif; font-weight: normal; } .module_chk{ padding-top: 16px; padding-bottom: 16px; padding-left: 16px; padding-right: 16px; border-radius: 15px; background-color: var(--background-color); border: 1px solid var(--border-color); margin-top: 12px; text-align: left; margin-left: auto; margin-right: auto; } .module_chk p{ margin: 0px; line-height: 24px; } /*------------------------------------------------------------------------------------------------------------*/ /*--------------------------------------------------スマホ向け--------------------------------------------------*/ /*--------------------------------------------------ここから--------------------------------------------------*/ /*------------------------------------------------------------------------------------------------------------*/ @media screen and (max-width:1010px) { body{ backdrop-filter: blur(10px); } .formarea{ padding: 12px; border-radius: 15px; background-color: none; margin-top: 32px; } .leftbox{ margin-top: 0px; margin-bottom: 0px; background-color: transparent; width: 100%; height: 100%; margin-left: 0px; padding: 16px; } .leftbox h1{ margin-left: 20px; color:var(--background-color); font-size: 2em; } .leftbox .logo{ display: flex; background-color: var(--main-color); border-radius: 15px; } .leftbox .logo img{ margin-left: 16px; margin-top: 16px; width: 200px; } .leftbox .logo p{ color:var(--background-color); font-family: var(--Text-fonts), sans-serif; font-weight: bold; font-size: 32px; margin-left: 8px; margin-top: auto; margin-bottom: -4px; } .serverhead img{ height: 110px; } .textbox{ padding: 32px; width: auto; margin-left: 0px; margin-right: 0px; margin-top: 64px; margin-bottom: 8px; border-radius: 25px; background-color: var(--background-color); box-shadow:0 0px 48px 0 rgba(0, 0, 0, .15); } .textbox h1{ word-wrap: break-word; margin: 0px; color: var(--main-color); font-size: 32px; font-family: var(--Head-fonts), sans-serif; } .btnbox{ padding-top: 12px; padding-bottom: 12px; padding-left: 12px; padding-right: 12px; border-radius: 15px; background-color: var(--background-color); margin-top: 32px; text-align: center; margin-left: auto; margin-right: auto; } .irobutton{ padding: 8px 5%; } .irobutton:hover{ padding: 8px 6%; } .irobutton:active{ padding: 8px 4%; } .sirobutton{ padding: 8px 5%; } .sirobutton:hover{ padding: 8px 6%; } .sirobutton:active{ padding: 8px 4%; } .btn_area{ display: block; width: 100%; margin-left: auto; margin-right: auto; } .fbtn{ cursor: pointer; border: none; display: block; width:100%; padding: 8px auto; margin-top: 12px; margin-left: auto; margin-right: auto; margin-bottom: 0px; padding-top: 6px; padding-bottom: 6px; background-color: var(--main-color); border-radius: 50px; color:var(--sub-color); font-size: 16px; text-align: center; font-family: var(--Head-fonts), sans-serif; font-weight: normal; text-decoration:none; text-align: center; transition: box-shadow 250ms ease-in-out; transition: width 250ms ease-out; transition: all 250ms ease-out; } .fbtn:hover{ background-color: var(--main-color); color: var(--sub-color); box-shadow:0 0px 48px 0 rgba(0, 0, 0, .2); width: 100%; } .fbtn:active{ box-shadow:0 0px 48px 0 rgba(0, 0, 0, .05); width: 100%; } .leftbox2{ margin-top: 0px; margin-bottom: 0px; background-color: var(--main-color); width: 100%; height: 100vh; margin-left: 0px; padding: 32px; } .textbox .authzone img{ width: 80%; } } /*------------------------------------------------------------------------------------------------------------*/ /*--------------------------------------------------ダークモード--------------------------------------------------*/ /*--------------------------------------------------ここから--------------------------------------------------*/ /*------------------------------------------------------------------------------------------------------------*/ @media (prefers-color-scheme: dark) { body{ background-color: var(--dark-background-color); } .leftbox{ background-color: var(--main-color); } .leftbox h1{ color:var(--background-color); } .leftbox .logo p{ color:var(--background-color); } .leftbox2{ background-color: var(--main-color); } .leftbox2 h1{ color:var(--background-color); } .leftbox2 .logo p{ color:var(--background-color); } .textbox{ background-color: var(--dark-background-color); } .textbox h1{ color: var(--dark-text-color); } .textbox h2{ color: var(--dark-text-color); } .textbox h3{ color: var(--dark-text-color); } .textbox p{ color: var(--dark-text-color); } .textbox .p2{ color: var(--subtext-color); } .textbox .p2c{ color: var(--dark-subtext-color); } .textbox .p3{ color: var(--dark-text-color); } .servericon .textzone .p3{ color: var(--dark-text-color); } .servericon .textzone .p2c{ color: var(--dark-subtext-color); } .textbox .maillink{ color: var(--main-color); } .textbox .cntzone .usercnt{ background-color: var(--dark-sub-color); border: solid 1px var(--dark-border-color); } .textbox .cntzone .usercnt .p1{ color: var(--dark-subtext-color); } .textbox .cntzone .usercnt p{ color: var(--dark-text-color); } .btnbox{ background-color: var(--dark-sub-color); border: solid 1px var(--dark-border-color); } .irobutton{ background-color: var(--main-color); color:var(--dark-background-color); } .sirobutton{ background-color: var(--dark-background-color); color:var(--main-color); border: solid 1px var(--dark-border-color); } .formarea{ background-color: var(--dark-sub-color); border: 1px solid var(--dark-border-color); } .formarea label{ color:var(--dark-text-color); } .myarea{ background-color: var(--dark-background-color); } .myarea p{ color: var(--dark-subtext-color); } .ueuse2 a{ color:var(--main-color); } .inbox { background: var(--dark-background-color); color: var(--dark-text-color); border: 1px solid var(--dark-border-color); } .flexbtn .irobutton{ background-color: var(--main-color); color:var(--dark-background-color); } .flexbtn.sirobutton{ background-color: var(--dark-sub-color); color:var(--main-color); } .rolebox{ background-color: var(--dark-background-color); border: 1px solid var(--main-color); } .rolebox p{ color:var(--main-color); } .fbtn{ background-color: var(--main-color); color:var(--dark-sub-color); } .fbtn:hover{ background-color: var(--main-color); color: var(--dark-sub-color); } .errmsg p{ color:#ff4848; } .module_chk{ background-color: var(--dark-background-color); border: none; padding: 0px; } }