style.css
unknown
css
4 years ago
28 kB
5
Indexable
@import url(font.css); * { font-family: "Poppins", Quicksand, sans-serif; } /*****************************************************************************************/ /* Material Icons */ /*****************************************************************************************/ .material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; } /*****************************************************************************************/ /* Sidebar */ /*****************************************************************************************/ .sidebar { border: none; background-color: #001e3f; } .sidebar .mdl-layout-title { padding-left: 0; } .sidebar .mdl-layout-title > img { height: 65px; margin: 21px; } .sidebar nav { flex-grow: 1; } .sidebar nav a { color: #5e6a81 !important; cursor: pointer; font-weight: 600; line-height: 30px; } .sidebar nav a:hover { color: white !important; background-color: transparent !important; } .sidebar nav a > i { margin: -3px 7px 0 0; } .selected-menu { border-left: 3px solid white; background: linear-gradient(to right, #a2cafa75 0%, rgba(238, 242, 244, 0) 100%); } .selected-menu > * { color: white; } .logout { margin-bottom: 17px !important; } .logout > * { color: rgb(255 57 69); } .mdl-layout__drawer-button { height: 35px; width: 35px; top: 0; left: 0; background-color: rgb(63 81 181 / 14%); color: #002854; line-height: 40px; border-radius: 3px; } /*****************************************************************************************/ /* Content */ /*****************************************************************************************/ .content { background-color: #F2F7FF; } .page-content { height: 100%; } /*****************************************************************************************/ /* Modal */ /*****************************************************************************************/ .modal-mask { display: flex; overflow-y: auto; position: fixed; align-items: center; justify-content: center; z-index: 9998; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); transition: opacity 0.3s ease; } .modal-wrapper { display: block; vertical-align: middle; align-items: center; justify-content: center; max-height: 100%; margin: 0 auto; } .modal-container { width: fit-content; min-width: 450px; margin: 0px auto; text-align: center; background-color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33); transition: all 0.3s ease; color: rgba(0,0,0,.54); overflow-y: hidden; height: fit-content; max-height: 900px; } .modal-header { margin: 0; background-color: white; height: 60px; cursor: default; display: block; border-bottom: 2px solid #eee; } .modal-header i { display: inline-block; padding: 19px 20px 17px 5px; cursor: pointer; float: right; color: rgba(0,0,0,.54); } .modal-header p { text-align: left; text-transform: uppercase; margin: 0px; font-weight: 500; display: inline-block; float: left; font-size: 18px; padding: 17px 0px 20px 20px; color: rgb(0, 40, 85); } .modal-body { margin: 20px 0; position: relative; overflow-y: hidden; max-height: 700px; padding: 15px; } .modal-footer { margin: 20px; height: 37px; } .modal-button { float: right; font-weight: 600; color: white !important; background-color: #05bdc7 !important; } /* Password-Change Modal */ .password-icon { right: 0px; bottom: 25px; position: absolute; cursor: pointer; } .password-input { display: inherit; width: 100%; } .password-label { width: 100%; } /*****************************************************************************************/ /* Search and Datepicker */ /*****************************************************************************************/ .datepicker-content { display: inline-block; float: right; width: 275px; height: 37px; transition: all 1s ease; margin-top: 14px; } .search, .datepicker { width: 203px; position: relative; display: block; justify-content: center; float: right; } .datepicker > i { position: absolute; top: 8px; right: 0; color: gray; cursor: pointer; font-size: 21px; } .search { width: 99%; margin-right: 3px; } .search i { position: absolute; width: 10px; font-size: 24px; top: 6px; right: 35px; color: gray; cursor: pointer; } .search i:hover, .datepicker > i:hover { color: #04438a; transition: all 0.5s; } .search > input { width: 85%; } .search-input, .datepicker-input { background: #fff; height: 23px; width: 170px; color: rgb(66 66 66); border: none; margin-bottom: 0px; display: inline-block; text-align: left; font-weight: 400; font-size: 16px; float: left; font-family: "Poppins", Quicksand, sans-serif; padding: 7px 35px 7px 10px; } .datepicker-input { -webkit-appearance: none; } .search-input:focus, .datepicker-input:focus { outline: none; } .datepicker-input::placeholder { color: rgb(47 66 87); opacity: 0.5; } .datepicker .datepicker-layout { position: absolute; z-index: 1; top: 30px; width: 100%; display: flex; flex-direction: column; animation: appear 0.3s ease forwards; } .datepicker .datepicker-layout .datepicker-header { width: 100%; background-color: rgb(0, 40, 84); height: 60px; display: flex; flex-direction: column; align-items: center; color: #fff; padding: 0 4px; } .datepicker .datepicker-layout .datepicker-header .row { width: 100%; height: 50px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .datepicker .datepicker-layout .datepicker-header .row .datepicker-title { font-size: 16px; font-weight: 600; font-family: "Poppins", Quicksand, sans-serif; } .datepicker .datepicker-layout .datepicker-header .row i { font-size: 16px; cursor: pointer; } .datepicker .datepicker-layout .datepicker-header .datepicker-days { display: flex; justify-content: space-between; width: 100%; font-size: 14px; } .datepicker .datepicker-layout .datepicker-header .datepicker-days .day { max-width: calc(100% / 7); padding: 5px; text-overflow: ellipsis; overflow: hidden; font-family: "Poppins", Quicksand, sans-serif; } .datepicker .datepicker-layout .datepicker-body { display: flex; flex-direction: column; background-color: #fff; overflow: hidden; } .datepicker .datepicker-layout .datepicker-body .datepicker-row { display: flex; flex-direction: row; transition: all 0.15s ease; } .datepicker .datepicker-layout .datepicker-body .datepicker-row .datepicker-day { width: calc(100% / 7); display: flex; justify-content: center; align-items: center; border: 1px solid #f9f9f9; font-size: 14px; color: #606060; position: relative; cursor: pointer; padding: 5px; transition: all 0.3s ease; } .datepicker .datepicker-layout .datepicker-body .datepicker-row .datepicker-day.disabled { background-color: #f3f3f3 !important; } .datepicker .datepicker-layout .datepicker-body .datepicker-row .datepicker-day.selected { color: rgb(0, 40, 84) } .datepicker .datepicker-layout .datepicker-body .datepicker-row .datepicker-day.selected:after { width: 100%; } .datepicker .datepicker-layout .datepicker-body .datepicker-row .datepicker-day:after { content: ''; height: 3px; width: 0px; background: rgb(0, 40, 84); position: absolute; bottom: 0; transition: all 0.3s ease; } .datepicker .datepicker-layout .datepicker-body .datepicker-row .datepicker-day:hover { color: rgb(0, 40, 84); } .datepicker .datepicker-layout .datepicker-body .datepicker-row .datepicker-day:hover:after { width: 100%; } .datepicker .datepicker-layout .datepicker-body .datepicker-row.swipe-left { opacity: 0; transform: translateX(10px); } .datepicker .datepicker-layout .datepicker-body .datepicker-row.swipe-right { opacity: 0; transform: translateX(-10px); } @keyframes appear { from { transform: translateY(-10px); opacity: 0; } to { transform: translateY(5px); opacity: 1; } } .datepicker-hyphen { color: #b7b7b7; margin: 14px 0px 0px 10px; } /*****************************************************************************************/ /* Conference List */ /*****************************************************************************************/ .conference-tab { border: none; width: auto; margin: 0 8px; } .conference-tab > a { width: 50%; color: rgb(159 165 195); cursor: pointer; text-transform: unset; font-size: 16px; } .conference-tab > a:after { background: none !important; } .conference-tab-content { border: 2px solid #E9F0FB; padding: 15px; margin-top: 0; background-color: #E9F0FB; min-height: 655px; } .conference-tab-content > table { background-color: #E9F0FB; } .conference-panel-title { font-size: 23px; margin: 25px 30px 22px 30px; font-weight: 500; color: #002854; } .conference-list-grid { padding: 0 8px; } .conference-list-grid > .mdl-cell { width: auto; } .conference-list-search { margin: 8px 35px 8px 20px; } .participant-list-search { margin: 8px 20px; width: 100% !important; } .participant-list-search > .search > input { position: relative; width: 90%; } .search-icon-group { position: absolute; } .active-conference-list-table, .conference-list-table, .participant-list-table { width: 98%; background-color: #F2F7FF; border: none; margin: auto; } .active-conference-list-table, .conference-list-table { background-color: rgb(233, 240, 251); } .active-conference-list-table th, .conference-list-table th, .participant-list-table th { text-align: left; color: rgb(159 165 195); } .active-conference-list-table th:nth-child(1) { padding-left: 50px; width: 52%; } .active-conference-list-table th:nth-child(2) { padding-left: 24px; } .conference-list-table th:nth-child(1) { padding-left: 43px; width: 240px; } .conference-list-table th:nth-child(2) { width: 185px; } .conference-list-table th:nth-child(3) { width: 120px; padding-left: 10px; } .conference-list-table th:nth-child(4) { width: 200px; padding-left: 33px; } .conference-list-table th:nth-child(5) { width: 115px; } .participant-list-table th:nth-child(1) { width: 55%; padding-left: 5em; } .conference-list, .participant-list { min-height: auto; margin: 0 auto 6px auto; width: 98%; overflow: visible; z-index: inherit; cursor: pointer; } .participant-list { width: 94%; } .active-conference-list-title, .conference-list-title, .participant-list-title { background-color: white; padding: 0px; cursor: pointer; } .active-conference-list-title > h2, .conference-list-title > h2, .participant-list-title > h2 { padding: 10px; font-size: 15px; font-weight: 300; font-family: "Poppins", Quicksand, sans-serif; width: 39%; margin: auto; } .active-conference-list-title > h2:nth-child(1) { width: 50%; padding-left: 50px; } .selected-active-conference.active-conference-list-title > h2:nth-child(2) { margin-left: 7px; width: 50%; } .conference-list-title > h2:nth-child(1) { padding-left: 43px; width: 215px; } .conference-list-title > h2:nth-child(2) { padding: 0 25px 0 0; width: 70px; } .conference-list-title > h2:nth-child(3) { padding: 0 25px; width: 85px; } .conference-list-title > h2:nth-child(4) { width: 145px; } .conference-list-title > h2:nth-child(5) { width: 75px; } .participant-list-title > h2 { margin: 0 3em; } .conference-list:hover .conference-list-title, .participant-list:hover .participant-list-title { background-color: rgb(63 81 181 / 9%) !important; } .conference-list-title .mdl-layout-spacer > h2, .participant-list-title .mdl-layout-spacer > h2 { cursor: pointer; margin-left: 33px; word-break: break-word; font-size: 19px; font-weight: 300; font-family: "Poppins", Quicksand, sans-serif; } /* For Select Conference */ /*.selected-conference { padding:0; background-color: rgb(63 81 181 / 9%); }*/ .selected-active-conference > h2:nth-child(1) { padding-left: 40px; } .selected-conference > h2:nth-child(2) { width: 222px; padding-left: 7px; padding-right: 7px; } .selected-conference > h2:nth-child(3) { padding: 0 25px 0 0; width: 70px; } .selected-conference > h2:nth-child(4) { padding: 0 25px; width: 90px; } .selected-conference > h2:nth-child(5) { width: 145px; } .selected-conference > h2:nth-child(6) { width: 75px; } .selected-participant > h2:nth-child(2) { margin: 0 20px; padding-left: 0; } .selected-participant > h2:nth-child(3) { padding-left: 2em; } .selected-conference > h2, .selected-participant > h2 { color: #0082c9; } .selected-conference-arrow, .selected-participant-arrow { width: 0; height: 0; border-top: 21px solid transparent; border-bottom: 21px solid transparent; border-left: 35px solid #0082c9; } .conference-detail-panel { padding-right: 15px; } /*****************************************************************************************/ /* Conference Detail */ /*****************************************************************************************/ .conference-detail-title { font-size: 23px; margin: 25px 10px; font-weight: 500; color: #002854; } .conference-detail-grid { padding: 0; margin: 5px; /*min-height: 402px; height: 100%;*/ } .conference-detail-list { border-right: 2px solid rgb(63 81 181 / 16%); height: 100%; overflow-y: auto; margin: auto; } .conference-detail-participant-list { padding: 0px 25px; width: 94%; } .conference-detail-participant-list > ul { max-height: 305px; overflow-y: auto; } .conference-detail-participant-list > ul > li { padding: 0px 12px; } .conference-detail-participant-list > ul > li > i { margin-right: 5px; } .search-participant { width: 94%; } .search-participant-input { width: 90% !important; background-color: #F2F7FF; } /*****************************************************************************************/ /* Pagination */ /*****************************************************************************************/ .pagination { list-style-type: none; display: flex; justify-content: center; height: 40px; margin: auto; padding: 0; width: auto; } .pagination li { cursor: pointer; } .pagination a { text-decoration: none; color: rgba(0, 0, 0, 0.79); padding: 0.5rem 0.5rem 0.70rem 0.5rem; background-color: #04438a52; display: inline-block; margin-left: 5px; border-radius: 10%; transition: all 1s ease; height: 20px; cursor: pointer; } .pagination > .disabled a{ background-color: rgb(63 81 181 / 14%); pointer-events: none } .pagination a:hover { color: rgba(0, 0, 0, 0.79); } .page-item.active > a { transition: all 1s ease; background-color: #04438a; color: white; padding: 0.6em 1.1em; height: 21px; cursor: pointer; } /*****************************************************************************************/ /* Chart */ /*****************************************************************************************/ .chart { height: 263px; background: white; } .chart-title { font-size: 23px; font-weight: 500; margin: 22px 0px 22px 5px; color: #002854; } .chart-hide { background-color: rgb(0, 40, 84); color: white; margin: 15px 0px !important; } .chart-hide-icon { background-color: rgb(63 81 181 / 14%); border-radius: 3px; padding: 8px; float: right; font-size: 20px; cursor: pointer; margin: 17px 5px; } .chart-show-icon { background-color: rgb(63 81 181 / 14%); border-radius: 3px; padding: 2px; float: right; font-size: 20px; cursor: pointer; margin: 10px; } .chart-monthly-button { color: rgb(242 210 0); background-color: rgb(255 221 0 / 14%); box-shadow: none; float: right; margin: 20px 5px 22px 5px; } .chart-monthly-button:hover { color: white; background-color: rgb(255 222 0); } .chart-weekly-button { color: rgb(194 207 0); background-color: #cedc0026; box-shadow: none; float: right; margin: 20px 5px 22px 5px; } .chart-weekly-button:hover { color: white; background-color: #cedc00; } .chart-daily-button { color: #05bdc7; background-color: #05bdc729; box-shadow: none; float: right; margin: 20px 5px 22px 5px; } .chart-daily-button:hover { color: white; background-color: #05bdc7; } /*****************************************************************************************/ /* Scrollbar */ /*****************************************************************************************/ /* Firefox */ * { scrollbar-width: thin; scrollbar-color: rgb(67, 67, 67) #e0e0e0; } /* Chrome/Edge/Safari */ *::-webkit-scrollbar { width: 5px; height: 5px; } *::-webkit-scrollbar-track { background: rgb(0 40 84 / 15%); } *::-webkit-scrollbar-thumb { background-color: rgb(0 40 84); border-radius: 15px; } /*****************************************************************************************/ /* Error Card */ /*****************************************************************************************/ .error-card, .default-detail-card { width: 97%; margin: auto; z-index: 0; } .error-card i { font-size: 150px; margin: 1.45em auto 0 auto; color: #d2dff4; } .error-card h2 { font-family: 'Poppins', Quicksand, sans-serif; font-weight: 500; color: rgb(159 165 195 / 34%); margin: 0 auto 9em auto; text-align: center; } .default-detail-card i { font-size: 132px; color: #dee9fa; } .default-detail-card h2 { font-family: 'Poppins', Quicksand, sans-serif; color: #c9d9f2; font-weight: 500; text-align: center; } /*****************************************************************************************/ /* Paticipant Detail Card */ /*****************************************************************************************/ .participant-detail { width: 94%; height: 100%; max-height: 330px; min-height: 200px; overflow-y: auto; border-top: 2px solid rgba(63, 81, 181, 0.16); } .participant-conference-list-card { padding: 10px 0px; width: 100%; } .participant-container { padding: 10px; } .participant-conference-list-card > .participant-container > .search > i { right: 75px; } .participant-conference-list-card > .participant-container > .search > input { width: 90% !important; } .participant-conference-list { padding: 0px 9px; width: 100%; max-height: 413px; height: 100%; overflow-y: auto; } .participant-conference-list-table { border: none; width: 100%; margin: auto; } .participant-conference-list-table > thead > tr > th { color: rgb(205 212 252); line-height: 0px; text-align: left; } .participant-conference-list-table > thead > tr > th:nth-child(1) { padding-left: 22px; } .participant-conference-list-table > thead > tr > th:nth-child(2) { padding-left: 16px; } .participant-conference-list-table > tbody > tr:hover { background-color: rgb(63 81 181 / 6%) !important; } .participant-conference-list-table > tbody > tr > td { font-size: 15px; font-weight: 400; text-align: left !important; border: none !important; color: rgba(0,0,0,.87); } .participant-detail-button:hover { color: #04438a; transition: all 0.5s; cursor: pointer; } .participant-conference-list ul { min-height: 235px; max-height: 235px; overflow: auto; height: 100%; } .participant-conference-list ul li { height: 30px; } .participant-conference-list ul li > span:nth-child(1) { margin-left: 15px; width: 35px; } /*****************************************************************************************/ /* Top-10 Page */ /*****************************************************************************************/ .top-10-title { text-align: center; font-size: 23px; font-weight: 500; color: #002854; padding-top: 90px; padding-bottom: 45px; } .mdl-data-table td { text-align: center; color: black; } .mdl-data-table tr { font-size: 16px; font-weight: 300; } .mdl-data-table th { font-size: 13px; } .mdl-card-top{ min-width: 350px; } .mdl-card__supporting-text { width: 95%; margin: auto; } /*****************************************************************************************/ /* Language Modal */ /*****************************************************************************************/ .language-container { display: flex; justify-content: center; align-items: center; align-content: center; flex-wrap: wrap; margin: 0 auto; text-align: center; padding: 0px; max-width: 850px; width: 100%; } .language-container ul { flex-direction: row; margin: 10px; padding: 0; } .language-container ul li { list-style: none; display: inline-block; } .language-container .language-button { display: flex; align-items: center; justify-content: center; position: relative; width: 170px; height: 80px; margin: 13px 10px; background-color: white; cursor: pointer; } .language-container .language-button:hover { box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2); transition: box-shadow 0.1s ease; } .language-container .language-button > img { width: 45px; height: 45px; object-position: center; object-fit: cover; position: absolute; bottom: 0; left: 30%; top: 75%; transform: translateX(-50%) translateY(-42px); } .language-container .language-button > h2 { position: absolute; bottom: 17%; font-size: 11px; white-space: nowrap; font-weight: 600; opacity: 0.7; text-transform: uppercase; letter-spacing: 1.5px; margin: 0; left: 67%; transform: translateX(-50%) translateY(-7px); line-height: 34px; } .language-container .language-button > i { content: ""; position: absolute; top: -13px; right: -13px; border-radius: 50%; font-weight: 800; font-size: 25px; color: white; cursor: pointer; } .language-container .language-button input { -moz-appearance: none; -webkit-appearance: none; -o-appearance: none; appearance: none; position: absolute; display: inline-block; width: 170px; height: 80px; border: 3px solid #dcdcdc; outline: none; } .language-container .language-button:hover { box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2); transition: box-shadow 0.1s ease; } .selected-language { border: 3px solid #cedc00 !important; } .selected-language + .material-icons::before { content: "check"; display: flex; align-items: center; justify-content: center; background-color: #cedc00; border: 3px solid #cedc00; border-radius: 50%; color: white; } /*****************************************************************************************/ /* Accordion */ /*****************************************************************************************/ .mdl-accordion { padding: 10px 25px; cursor: pointer; } .mdl-accordion a { width: 100%; display: block; padding: 5px 0px; } .mdl-accordion__content-wrapper { border-top: 2px solid #e0e0e0; } /*****************************************************************************************/ /* Responsive */ /*****************************************************************************************/ @media (min-width: 300px) and (max-width: 1300px) { .conference-list-panel, .participant-container, .conference-detail-list { width: 100%; } .search-participant-input { width: 88% !important; } .conference-detail-list { border-right: none; border-bottom: 2px solid rgb(63 81 181 / 16%); margin: 25px; padding: 25px; max-height: 100%; } .conference-detail-participant-list { padding: 0px 47px; } .conference-detail-panel { width: 93%; padding-right: 0; margin: auto; } .datepicker { margin-left: 13px; } .chart-hide { width: 50% !important; } .search-participant > i { right: 70px; } } @media screen and (max-width: 1024px) { .sidebar nav a { padding: 16px 40px !important; } } @media (min-width: 840px) and (max-width: 1300px) { .chart-hide { width: 65% !important; } } @media screen and (max-width: 750px) { .conference-list-table th:nth-child(5), .conference-list-title > h2:nth-child(5) { display: none; } .participant-conference-list-table > thead > tr > th:nth-child(3), .participant-conference-list-table > tbody > tr > td:nth-child(3), .participant-conference-list-table > thead > tr > th:nth-child(4), .participant-conference-list-table > tbody > tr > td:nth-child(4), .participant-conference-list-table > thead > tr > th:nth-child(6), .participant-conference-list-table > tbody > tr > td:nth-child(6) { display: none; } } @media screen and (max-width: 600px) { .conference-list-table th:nth-child(3), .conference-list-title > h2:nth-child(3), .conference-list-table th:nth-child(4), .conference-list-title > h2:nth-child(4) { display: none; } .chart-title-col{ width: 50% !important; } } @media screen and (max-width: 840px) { .chart-button-col { width: 50% !important; } .participant-conference-list-card > .participant-container > .search > input { width: 86% !important; } .participant-conference-list-card > .participant-container > .search > i { right: 40px; } } @media (min-width: 520px) and (max-width: 840px) { .participant-conference-list-card > .participant-container > .search > i { right: 70px; } } @media screen and (max-width: 1874px) { .datepicker { margin-left: 13px; } @media (min-width: 575px) and (max-width: 1875px) { .conference-list-search { width: 100% !important; margin: 8px 32px 8px 15px; } .conference-list-search > .search > input { width: 453px; } .conference-list-search > .search > i { left: 460px; } } @media (min-width: 300px) and (max-width: 575px) { .conference-list-search { width: 100% !important; margin: 8px 32px 8px 15px; } .conference-list-search > .search > input { width: 380px; } .conference-list-search > .search > i { left: 390px; } } @media (min-width: 1301px) and (max-width: 1690px) { .conference-list-table th:nth-child(5), .conference-list-title > h2:nth-child(5) { display: none; } } label { word-break: break-word; }
Editor is loading...