463 lines
9.5 KiB
CSS
463 lines
9.5 KiB
CSS
|
|
.operations-btns {
|
|
padding: 15px;
|
|
width: 97%;
|
|
margin: 0 auto 10px;
|
|
display: none;
|
|
border-radius: 0px 0px 8px 8px;
|
|
background: #F1F5F9;
|
|
box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.03) inset;
|
|
}
|
|
|
|
.operations-btns .card-btn {
|
|
border: 1px solid #E8E8E8;
|
|
transition: ease-in-out .3s;
|
|
}
|
|
|
|
.operations-btns .card-btn.disable {
|
|
background: #e2e8f0;
|
|
-webkit-filter: grayscale(100%);
|
|
filter: grayscale(100%);
|
|
color: #94a3b8;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.operations-btns .card-btn:hover {
|
|
border: 1px solid #097575;
|
|
background-color: #ECFFFF;
|
|
}
|
|
|
|
.operations-btns .personal-profile {
|
|
border-radius: 15px;
|
|
border: 0.7px solid #E0E0E0;
|
|
background: #F1F5F9;
|
|
padding: 12px;
|
|
}
|
|
|
|
.operations-btns .personal-profile img {
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 100%;
|
|
background-color: #009EE2;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.operations-btns .personal-profile h5 {
|
|
color: #0B5959;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.operations-btns .personal-profile span {
|
|
display: block;
|
|
color: #0B5959;
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
}
|
|
|
|
.operations-btns .personal-operation-btn {
|
|
text-align: justify;
|
|
padding: 7px;
|
|
height: 100px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
transition: ease-in-out .4s;
|
|
}
|
|
|
|
.small + .operations-btns .personal-operation-btn {
|
|
padding: 10px 5px;
|
|
}
|
|
|
|
.operations-btns .personal-operation-btn h4 {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
margin: 0 7px 0 0;
|
|
}
|
|
|
|
.operations-btns .personal-operation-btn p {
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
line-height: normal;
|
|
margin: 0 7px 0 0;
|
|
}
|
|
|
|
/* .operations-btns .personal-operation-btn:hover.detail {
|
|
background: rgba(0, 0, 0, 1);
|
|
opacity: 0.3;
|
|
} */
|
|
|
|
|
|
|
|
.operations-btns .personal-operation-btn.detail {
|
|
border-radius: 15px;
|
|
border: 0.7px solid #86D489;
|
|
background: rgba(170, 249, 157, 0.30);
|
|
}
|
|
|
|
.operations-btns .personal-operation-btn.detail h4 {
|
|
color: #258029;
|
|
}
|
|
|
|
.operations-btns .personal-operation-btn.detail p {
|
|
color: #52A955;
|
|
}
|
|
|
|
.operations-btns .personal-operation-btn.working-time {
|
|
border-radius: 15px;
|
|
border: 0.7px solid #B0B0B0;
|
|
background: rgba(205, 205, 207, 0.40);
|
|
}
|
|
|
|
.operations-btns .personal-operation-btn.working-time h4 {
|
|
color: #4B4949;
|
|
}
|
|
|
|
.operations-btns .personal-operation-btn.working-time p {
|
|
color: #787676;
|
|
}
|
|
|
|
.operations-btns .personal-operation-btn.start-left-gharardad {
|
|
border-radius: 15px;
|
|
border: 0.7px solid #C997A1;
|
|
background: rgba(255, 24, 24, 0.07);
|
|
}
|
|
|
|
.operations-btns .personal-operation-btn.start-left-gharardad h4 {
|
|
color: #940B28;
|
|
}
|
|
|
|
.operations-btns .personal-operation-btn.start-left-gharardad p {
|
|
color: #C23A57;
|
|
}
|
|
|
|
.operations-btns .personal-operation-btn.start-left-bime {
|
|
border-radius: 15px;
|
|
border: 0.7px solid #7B89AD;
|
|
background: rgba(0, 56, 255, 0.06);
|
|
}
|
|
|
|
.operations-btns .personal-operation-btn.start-left-bime h4 {
|
|
color: #940B28;
|
|
}
|
|
|
|
.operations-btns .personal-operation-btn.start-left-bime p {
|
|
color: #C23A57;
|
|
}
|
|
|
|
|
|
.operations-btns .personal-operation-btn.morakhasi-estelaji {
|
|
border-radius: 15px;
|
|
border: 0.7px solid #C0C38A;
|
|
background: rgba(255, 245, 16, 0.15);
|
|
}
|
|
|
|
.operations-btns .personal-operation-btn.morakhasi-estelaji h4 {
|
|
color: #757B1E;
|
|
}
|
|
|
|
.operations-btns .personal-operation-btn.morakhasi-estelaji p {
|
|
color: #AAAF57;
|
|
}
|
|
|
|
.operations-btns .personal-operation-btn.morakhasi-estehghaghi {
|
|
border-radius: 15px;
|
|
border: 0.7px solid #C7B28E;
|
|
background: rgba(242, 156, 27, 0.15);
|
|
}
|
|
|
|
.operations-btns .personal-operation-btn.morakhasi-estehghaghi h4 {
|
|
color: #6C5732;
|
|
}
|
|
|
|
.operations-btns .personal-operation-btn.morakhasi-estehghaghi p {
|
|
color: #9F8B66;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/****************************** Start Responsive Operation Button ***************************************/
|
|
|
|
/* XX-Large devices (larger desktops, 1400px) */
|
|
@media (max-width: 1400px) {
|
|
}
|
|
|
|
/* X-Large devices (desktops, 1366px) */
|
|
@media (min-width: 1366px) {
|
|
.table-workshop .operations-btns img {
|
|
max-width: auto;
|
|
}
|
|
}
|
|
|
|
/* X-Large devices (desktops, 1366px) */
|
|
@media (max-width: 1366px) {
|
|
|
|
.table-workshop .operations-btns .card {
|
|
padding: 3px;
|
|
}
|
|
|
|
.table-workshop .operations-btns img {
|
|
max-width: 32px;
|
|
}
|
|
|
|
.table-workshop .operations-btns .card-title {
|
|
font-weight: 500;
|
|
font-size: 13px;
|
|
text-align:start;
|
|
}
|
|
|
|
/* operation btn in personal */
|
|
.table-personals .operations-btns .personal-operation-btn h4 {
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.table-personals .operations-btns .personal-operation-btn p {
|
|
font-size: 11px;
|
|
font-weight: 300;
|
|
}
|
|
|
|
/* End operation btn in personal */
|
|
|
|
}
|
|
|
|
/* X-Large devices (desktops, 1200) */
|
|
@media (max-width: 1200px) {
|
|
|
|
.table-workshop .operations-btns .card {
|
|
padding: 5px;
|
|
}
|
|
|
|
.table-workshop .operations-btns img {
|
|
max-width: 35px;
|
|
}
|
|
|
|
.table-workshop .operations-btns .card-title {
|
|
font-weight: 400;
|
|
font-size: 12px;
|
|
/*white-space:nowrap;*/
|
|
}
|
|
}
|
|
|
|
|
|
/* Large devices (desktops, 992px and up) */
|
|
@media (min-width: 992px) {
|
|
|
|
}
|
|
|
|
|
|
/* Large devices (desktops, 992px and down) */
|
|
@media (max-width: 992px) {
|
|
|
|
}
|
|
|
|
/* Medium devices (tablets, 768px and down) */
|
|
@media (max-width: 767px) {
|
|
|
|
.operations-btns {
|
|
padding: 10px;
|
|
background: #F1F5F9;
|
|
}
|
|
|
|
/*************** Start Table Workshop *************/
|
|
.table-workshop .operations-btns img {
|
|
max-width: 30px;
|
|
}
|
|
|
|
.table-workshop .operations-btns .card-title {
|
|
font-weight: 500;
|
|
font-size: 10px;
|
|
white-space: normal;
|
|
}
|
|
/*************** End Table Workshop *************/
|
|
|
|
|
|
|
|
/*************** Start Table Personals *************/
|
|
.table-personals .operations-btns {
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.table-personals .operations-btns .personal-profile img {
|
|
width: 50px;
|
|
height: 50px;
|
|
margin-bottom: auto;
|
|
}
|
|
|
|
.table-personals .operations-btns .personal-profile h5 {
|
|
font-size: 11px;
|
|
}
|
|
|
|
.table-personals .operations-btns .personal-profile span {
|
|
font-size: 11px;
|
|
line-height: 18px;
|
|
}
|
|
|
|
.table-personals .operations-btns .personal-profile {
|
|
padding: 8px;
|
|
border-radius: 12px !important;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.table-personals .operations-btns .personal-operation-btn {
|
|
text-align: center;
|
|
flex-direction: column;
|
|
border-radius: 12px !important;
|
|
}
|
|
|
|
.table-personals .operations-btns .personal-operation-btn h4 {
|
|
font-size: 10px !important;
|
|
font-weight: 300;
|
|
margin: auto;
|
|
}
|
|
|
|
.table-personals .operations-btns .personal-operation-btn p {
|
|
font-size: 8px !important;
|
|
font-weight: 300;
|
|
margin: auto;
|
|
}
|
|
/*************** End Table Personals *************/
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.table-personals .operations-btns {
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.table-personals .operations-btns .personal-profile img {
|
|
width: 50px;
|
|
height: 50px;
|
|
margin-bottom: auto;
|
|
}
|
|
|
|
.table-personals .operations-btns .personal-profile h5 {
|
|
font-size: 11px;
|
|
}
|
|
|
|
.table-personals .operations-btns .personal-profile span {
|
|
font-size: 11px;
|
|
line-height: 18px;
|
|
}
|
|
|
|
.table-personals .operations-btns .personal-profile {
|
|
padding: 8px;
|
|
border-radius: 12px !important;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.table-personals .operations-btns .personal-operation-btn {
|
|
text-align: center;
|
|
flex-direction: column;
|
|
border-radius: 12px !important;
|
|
}
|
|
|
|
.table-personals .operations-btns .personal-operation-btn h4 {
|
|
font-size: 10px !important;
|
|
font-weight: 300;
|
|
margin: auto;
|
|
}
|
|
|
|
.table-personals .operations-btns .personal-operation-btn p {
|
|
font-size: 8px !important;
|
|
font-weight: 300;
|
|
margin: auto;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
@media all and (max-width: 750px) {
|
|
|
|
}
|
|
|
|
|
|
/* Small devices (landscape phones, 576px and down) */
|
|
@media (max-width: 576px) {
|
|
|
|
}
|
|
|
|
|
|
/*
|
|
X-Small devices (portrait phones, less than 576px)
|
|
No media query for `xs` since this is the default in Bootstrap
|
|
*/
|
|
@media (max-width: 416px) {
|
|
}
|
|
|
|
.grid-personal {
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
}
|
|
|
|
@media (max-width: 1066px) {
|
|
.grid-personal {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
}
|
|
|
|
/*************** Start Area & RollCall Button for Workshop *************/
|
|
.btn-area-workshop {
|
|
grid-template-columns: repeat(6, minmax(0, 1fr));
|
|
}
|
|
|
|
.btn-rollcall-workshop {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
|
|
@media (max-width: 1442px) {
|
|
.btn-area-workshop {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1366px) {
|
|
.btn-area-workshop {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.btn-rollcall-workshop {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
}
|
|
|
|
@media (max-width: 576px) {
|
|
.btn-area-workshop {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.btn-rollcall-workshop {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
/*.btn-area-workshop .card-btn:last-child {
|
|
grid-column: span 2 / span 2;
|
|
}*/
|
|
|
|
.grid-personal {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
}
|
|
/*************** Start Area Button for Workshop *************/ |