File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
/* 테블릿 가로 (해상도 768px ~ 1023px)*/
@media all and (min-width:768px) and (max-width:1023px) {
/* 메인 */
.content-box:nth-child(3)>div {
display: flex;
}
.temp p {
font-size: 2rem;
}
.main-battery-title {
font-size: 1.4rem;
justify-content: flex-start;
padding-right: 1rem;
}
.battery::after {
content: " 남았습니다.";
font-size: 1.4rem;
margin-left: 0;
}
.battery p {
font-size: 2rem;
padding-left: 0;
padding-right: 1rem;
}
.menuicon {
display: block;
}
.usericon {
display: none;
}
/* 공통 */
#layout{grid-template-columns: 0px 1fr;}
header {
padding: 1rem 2rem;
}
.header-info-id{margin-left: 5rem;}
nav {
position: absolute;
left: -293px;
top: 86px;
z-index: 10;
transition: 0.5s;
box-shadow:12px -6px 10px -10px rgb(0 0 0 / 20%);
height:91vh;
}
nav.on {
left: 0;
transition: 0.5s;
}
.bottom-section{padding: 0 ; bottom: 6rem;}
/* 시니어 정보 상세 조회 */
.senior-detail {
border: 0;
}
.senior-detail th {
display: block;
width: 34%;
}
.senior-detail td {
padding: 0;
}
.senior-detail td span {
text-align: center;
}
/* 검색창 */
.mobile-area-wrap {
display: block;
margin-top: 1rem;
}
.mobile-area-wrap div {
width: 100%;
margin-top: 1rem;
}
.mobile-area-wrap div label {
width: 30%;
font-size: 1.6rem;
}
.mobile-area-wrap div select {
width: 70%;
}
.area-wrap {
display: none;
}
.search-area {
padding: 1rem;
}
.detail-search table tr,
.detail-search table th,
.detail-search table td {
display: block;
}
.detail-search table th {
width: 100%;
}
.detail-search table td::before {
display: none;
}
.detail-search table td {
padding: 0;
border: 0;
}
.detail-search table tr {
border: 0;
}
.detail-search tbody tr:nth-of-type(3) td {
width: 50%;
display: flex;
}
/* 복약 수정 페이지 */
.modal-main table th {
width: 100%;
display: block;
}
.modal-main table td {
padding: 0.5rem 0;
}
.medicine-revise tr {
border: 0;
}
.medicine-revise tr:nth-child(3)>td div,
.medicine-revise tr:nth-child(4)>td div,
.medicine-revise tr:nth-child(5)>td div {
width: 50%;
}
.medicine-revise tr:nth-child(3)>td div input,
.medicine-revise tr:nth-child(4)>td div input,
.medicine-revise tr:nth-child(5)>td div input {
width: 20%;
}
.medicine-revise tr:nth-child(3)>td div label,
.medicine-revise tr:nth-child(4)>td div label,
.medicine-revise tr:nth-child(5)>td div label {
width: 50%;
}
}
/* 모바일 가로, 테블릿 세로 (해상도 480px ~ 767px)*/
@media all and (min-width:480px) and (max-width:767px) {
.menuicon {
display: block;
}
.usericon {
display: none;
}
/* 공통 */
#layout{grid-template-columns: 0px 1fr;}
header {
padding: 1rem 2rem;
}
.header-info-id{margin-left: 5rem;}
nav {
position: absolute;
left: -293px;
top: 87px;
z-index: 10;
transition: 0.5s;
box-shadow:12px -6px 10px -10px rgb(0 0 0 / 20%);
height:91vh;
}
nav.on {
left: 0;
transition: 0.5s;
}
.bottom-section{padding: 0 ; bottom: 14rem;}
/* 권한관리 */
.authority-table-pc {
display: none;
}
.authority-table-mobile thead tr:nth-child(1) {
display: flex;
}
.authority-table-mobile thead tr:nth-child(1)>div {
font-size: 1.6rem;
width: 100%;
}
.authority-table-mobile select {
margin: 1rem 0;
}
.authority-table-mobile {
display: block;
}
.authority-table-mobile thead {
display: inline-table;
width: 100%;
}
.authority-table-mobile tr,
.authority-table-mobile td {
display: revert;
}
.authority-table-mobile tr {
width: 100%;
}
.authority-table-mobile tr:nth-child(2) th:nth-child(1) {
width: 50%;
}
.authority-table-mobile td {
padding: 1rem;
width: 10%;
}
.authority-table-mobile tbody td input {
margin-right: 1rem;
}
.authority-table-mobile tbody td label {}
.authority-table-mobile th {
width: 50%;
}
/* 사용자 관리 */
.tab-menu-mobile {
display: block;
padding: 1rem;
background-color: #ffffff;
}
.tab-menu {
display: none;
}
/* 공통 */
/* 보호자 메인 그리드 */
.pc {
display: none;
}
.mobile {
display: block;
}
.mobile .main-grid-guardian {
gap: 0.5rem;
}
.mobile .main-grid-guardian .content-box {
padding: 0.5rem;
}
.mobile .main-grid-guardian .content-box:nth-child(2)>div p {
font-size: 1.8rem;
}
.mobile .main-grid-guardian .content-box:nth-child(7)>div {
justify-content: flex-start;
}
.mobile .main-grid-guardian .combine-right-government,
.mobile .main-grid-guardian .combine-left {
grid-column: 1;
}
.mobile .main-grid-guardian .combine-bottom-government {
grid-column: 0;
}
/* button */
.btn-large {
font-size: 1.4rem;
width: 20%;
}
/* 로그인 */
.login-wrap h1 {
font-size: 1.8rem;
line-height: 1rem;
}
.login-wrap h3 {
margin: 20% 0 5% 0;
font-size: 2rem;
text-align: center;
}
.login-form .login-inner .content {
width: 80%;
margin: 1rem auto;
}
.container {
width: 100%;
margin: 0;
padding: 2rem;
}
.container .btn-wrap {
margin-top: 5rem;
}
.container button {
width: 30%;
}
/* 검색창 */
.mobile-area-wrap {
display: block;
margin-top: 1rem;
}
.mobile-area-wrap div {
width: 100%;
margin-top: 1rem;
}
.mobile-area-wrap div label {
width: 30%;
font-size: 1.6rem;
}
.mobile-area-wrap div select {
width: 70%;
}
.area-wrap {
display: none;
}
.search-area {
padding: 1rem;
}
.detail-search table tr,
.detail-search table th,
.detail-search table td {
display: block;
}
.detail-search table th {
width: 100%;
}
.detail-search table td::before {
display: none;
}
.detail-search table td {
padding: 0;
border: 0;
}
.detail-search table tr {
border: 0;
}
.detail-search tbody tr:nth-of-type(3) td {
width: 50%;
display: flex;
}
/* 시니어 정보 상세 조회 */
.senior-detail {
border: 0;
}
.senior-detail th {
display: block;
width: 34%;
}
.senior-detail td span {
text-align: center;
}
/* 시니어 등록창 */
.senior-insert th {
font-size: 1.4rem;
}
/* 복약 수정 페이지 */
.medicine-revise tr {
border: 0;
}
.medicine-revise tr:nth-child(3)>td div,
.medicine-revise tr:nth-child(4)>td div,
.medicine-revise tr:nth-child(5)>td div {
width: 50%;
}
.medicine-revise tr:nth-child(3)>td div input,
.medicine-revise tr:nth-child(4)>td div input,
.medicine-revise tr:nth-child(5)>td div input {
width: 20%;
}
.medicine-revise tr:nth-child(3)>td div label,
.medicine-revise tr:nth-child(4)>td div label,
.medicine-revise tr:nth-child(5)>td div label {
width: 50%;
}
/* 복약 상세페이지 */
.medicine-detail-graph {
display: block;
}
/* 복약 수정 페이지 */
.modal-main table th {
width: 100%;
display: block;
}
.modal-main table td {
padding: 0.5rem 0;
}
/* 최근 일주일 댁내 온도(모달창) */
.temperature-modal td:nth-of-type(1) {
font-weight: 900;
padding: 1rem;
}
.temperature-modal td:nth-of-type(2):before {
content: "날짜";
}
.temperature-modal td:nth-of-type(3):before {
content: "02:00";
}
.temperature-modal td:nth-of-type(4):before {
content: "10:00";
}
.temperature-modal td:nth-of-type(5):before {
content: "14:00";
}
.temperature-modal td:nth-of-type(6):before {
content: "23:00";
}
/* 방문 관리 상세 페이지 */
/* 방문 수정 페이지 */
.visit-revise th {
width: 40%;
font-size: 1.4rem;
}
.visit-revise tr:nth-child(3) td {
display: block;
}
.visit-revise tr:nth-child(3) td>div {
display: flex;
margin: 0.5rem 0;
}
/* 방문 등록 */
.user-list {
display: none;
}
.insert {
display: block;
}
.insert table tr:nth-child(6) td {
display: block;
}
.insert tr:nth-child(6) td>div {
display: flex;
margin: 0.5rem 0;
}
.insert tr:nth-child(6) td>div input {
width: 50%;
}
/* 장비조회 */
/* 장비 상세 조회 */
/* 장비등록 */
.equipment-insert tr:nth-child(5) td {
width: 28%;
}
.equipment-insert tr:nth-child(6) td {
width: 100%;
}
.equipment-insert tr:nth-child(5) td select {
display: flex;
justify-content: flex-start;
width: 100%;
}
.equipment-insert tr:nth-child(5) td input {
display: table;
width: 90%;
}
.equipment-insert tr:nth-child(6) td select {
display: flex;
justify-content: flex-start;
width: 100%;
}
/* 내정보수정 */
.join-inner {
width: 100%;
}
}
/* 모바일 세로 (해상도 ~ 479px)*/
@media all and (max-width:479px) {
.menuicon {
display: block;
position: fixed;
}
.usericon {
display: none;
}
/* 공통 */
#layout{display: block;}
#pages{padding: 1rem;}
header {
padding: 1rem;
position: fixed;
}
nav {
position: fixed;
left: -310px;
top: 86px;
z-index: 10;
transition: 0.5s;
box-shadow:12px -6px 10px -10px rgb(0 0 0 / 20%);
height:91vh;
}
main{padding-top: 9rem;}
nav.on {
left: 0;
transition: 0.5s;
}
.bottom-section{padding: 0.9rem ; bottom: 6rem;}
.content-wrap{padding: 1rem;}
th,td,tr{display: block;}
/* 권한관리 */
.authority-table-pc {
display: none;
}
.authority-table-mobile thead tr:nth-child(1) {
display: flex;
}
.authority-table-mobile thead tr:nth-child(1)>div {
font-size: 1.6rem;
width: 100%;
}
.authority-table-mobile select {
margin: 1rem 0;
}
.authority-table-mobile {
display: block;
}
.authority-table-mobile thead {
display: inline-table;
width: 100%;
}
.authority-table-mobile tr,
.authority-table-mobile td {
display: revert;
}
.authority-table-mobile tr {
width: 100%;
}
.authority-table-mobile tr:nth-child(2) th:nth-child(1) {
width: 50%;
}
.authority-table-mobile td {
padding: 1rem;
width: 10%;
}
.authority-table-mobile tbody td input {
margin-right: 1rem;
}
.authority-table-mobile tbody td label {}
.authority-table-mobile th {
width: 50%;
}
/* 사용자관리 */
.tab-menu-mobile {
display: block;
padding: 1rem;
background-color: #ffffff;
}
.tab-menu {
display: none;
}
.search-management {
justify-content: space-between;
}
.search-management select {
width: 22%;
}
.search-management input {
width: 30%;
margin-right: 1rem;
}
.search-management button {
width: 20%;
}
/* 공통 */
.header-flex {
display: flex;
justify-content: flex-start;
}
/* 보호자 메인 그리드 */
.pc {
display: none;
}
.mobile {
display: block;
}
.mobile .main-grid-guardian {
gap: 0.5rem;
}
.mobile .main-grid-guardian .content-box {
padding: 0.5rem;
}
.mobile .main-grid-guardian .content-box:nth-child(2)>div p {
font-size: 1.8rem;
}
.mobile .main-grid-guardian .content-box:nth-child(7)>div {
justify-content: flex-start;
}
.mobile .main-grid-guardian {
grid-template-columns: 1fr;
grid-template-rows: none;
}
.mobile .main-grid-guardian .combine-right-government,
.mobile .main-grid-guardian .combine-left {
grid-column: 1;
}
.mobile .main-grid-guardian .combine-bottom-government {
grid-column: 0;
}
/* button */
.btn-large {
font-size: 1.4rem;
width: 20%;
}
/* 로그인 */
.login-wrap h1 {
font-size: 1.8rem;
line-height: 1rem;
}
.login-wrap h3 {
margin: 20% 0 5% 0;
font-size: 2rem;
text-align: center;
}
.login-form .login-inner .content {
width: 80%;
margin: 1rem auto;
}
.container {
width: 100%;
margin: 0;
padding: 2rem;
}
.container .btn-wrap {
margin-top: 5rem;
}
.container button {
width: 30%;
}
/* 메인 */
.temp p {
font-size: 2rem;
}
.main-battery-title {
font-size: 1.4rem;
justify-content: flex-start;
padding-right: 1rem;
}
.battery::after {
content: " 남았습니다.";
font-size: 1.4rem;
margin-left: 0;
}
.battery p {
font-size: 2rem;
padding-left: 0;
padding-right: 1rem;
}
#chartdiv1 {
height: 25vh;
}
.statistics li p:nth-of-type(1),
.statistics li p:nth-of-type(2) {
font-size: 1.4rem;
}
.weather-info {
width: 70%;
}
.recent-visit {
border: 0;
}
.recent-visit td {
padding-left: 12rem;
}
.recent-visit td:nth-of-type(1) {
font-weight: bold;
padding: 0.5rem;
}
.recent-visit td:nth-of-type(1)::before {
content: "";
}
.recent-visit td:nth-of-type(2):before {
content: "방문목적";
}
.recent-visit td:nth-of-type(3):before {
content: "방문 상세 이유";
}
/* 검색창 */
.mobile-area-wrap {
display: block;
margin-top: 1rem;
}
.mobile-area-wrap div {
width: 100%;
margin-top: 1rem;
}
.mobile-area-wrap div label {
width: 30%;
font-size: 1.6rem;
}
.mobile-area-wrap div select {
width: 70%;
}
.area-wrap {
display: none;
}
.search-area {
padding: 1rem;
}
.detail-search table tr,
.detail-search table th,
.detail-search table td {
display: block;
}
.detail-search table th {
width: 100%;
margin: 1rem 0;
}
.detail-search table td::before {
display: none;
}
.detail-search table tr {
border: 0;
}
.detail-search table td {
padding: 0;
border: 0;
}
.detail-search tbody tr:nth-of-type(3) td {
width: 50%;
display: flex;
}
.detail-search tbody tr:nth-of-type(3) th:nth-child(3) {
width: 100%;
}
/* 시니어 정보 상세 조회 */
.senior-detail th,
.senior-detail td {
display: block;
}
.senior-detail th {
font-size: 1.2rem;
width: 100%;
}
.senior-detail td {
width: 100%;
font-size: 1.2rem;
}
.senior-detail td span {
width: 100%;
font-size: 1.2rem;
text-align: center;
}
/* 시니어 등록창 */
.senior-insert {
display: grid;
}
.senior-insert th {
font-size: 1.4rem;
width: 50%;
padding: 1rem 10rem;
}
.senior-insert td {
display: list-item;
padding-top: 1rem;
}
.senior-insert select {
width: 100%;
}
.senior-insert input {
width: 100%;
}
.senior-insert tr:nth-child(2) .gender {
padding: 1rem 1rem;
display: flex;
flex: 0 0 25%;
}
.senior-insert tr:nth-child(2) .gender input {
width: 25%;
}
.senior-insert td::marker {
content: "";
}
/* 복약조회*/
/* 복약 상세페이지 */
.medicine-detail-graph {
display: block;
}
/* 복약 수정 페이지 */
.modal-main table th,
.modal-main table td {
display: block;
}
.modal-main table th {
width: 100%;
}
.modal-main table td {
padding: 0.5rem 0 0 12rem;
}
.medicine-revise tr {
border: 0;
}
.medicine-revise tr:nth-child(3)>td div,
.medicine-revise tr:nth-child(4)>td div,
.medicine-revise tr:nth-child(5)>td div {
width: 50%;
}
.medicine-revise tr:nth-child(3)>td div input,
.medicine-revise tr:nth-child(4)>td div input,
.medicine-revise tr:nth-child(5)>td div input {
width: 20%;
}
.medicine-revise tr:nth-child(3)>td div label,
.medicine-revise tr:nth-child(4)>td div label,
.medicine-revise tr:nth-child(5)>td div label {
width: 50%;
}
/* 댁내 온도 조회 */
/* 최근 일주일 댁내 온도(모달창) */
.temperature-modal td:nth-of-type(1) {
font-weight: 900;
padding: 1rem;
}
.temperature-modal td:nth-of-type(2):before {
content: "날짜";
}
.temperature-modal td:nth-of-type(3):before {
content: "02:00";
}
.temperature-modal td:nth-of-type(4):before {
content: "10:00";
}
.temperature-modal td:nth-of-type(5):before {
content: "14:00";
}
.temperature-modal td:nth-of-type(6):before {
content: "23:00";
}
/* 방문 조회 */
/* 방문 관리 상세 페이지 */
.senior-detail tr:nth-of-type(6) td {
display: flex;
justify-content: center;
}
.senior-detail td {
padding: 0;
}
/* 방문 수정 페이지 */
.visit-revise th {
width: 40%;
font-size: 1.4rem;
}
.visit-revise tr:nth-child(3) td {
display: block;
}
.visit-revise tr:nth-child(3) td>div {
display: flex;
margin: 0.5rem 0;
}
/* 방문 등록 */
.user-list {
display: none;
}
.insert {
display: block;
}
.insert table tr:nth-child(6) td {
display: block;
}
.insert tr:nth-child(6) td>div {
display: flex;
margin: 0.5rem 0;
}
.insert tr:nth-child(6) td>div input {
width: 50%;
}
/* 장비조회 */
/* 장비 상세 조회 */
/* 장비등록창 */
.equipment-modal tbody td {
padding: 0.5rem;
}
}