Edit File - File Manager

Edit File: statics.scss

$main1 : #41B8B4;
$main1-hover : #3dadaa;
$main2 : #FFB72B;
$main2-hover : #f5b128;
$not-completed : #B6B8B3;
$gray-bg : #8A8A8A;
$gray-light : #f5f5f5;
$gray-hover : #080808;
$transition : all .3s ease-in-out;

$direction2 : ltr;
$direction : rtl;

$text-align : right;
$text-align2 : left;

$colorA:$main1;
$colorB:#F79520;
$colorC:$main2;
$colorD:#41ACE1;

$nav-height : 60px;
// colors
.color1{
    color: $main1!important;
}

.color2{
    color: $main2!important;
}

.color-white{
    color: #fff;
}

.color-red{
    color: #FF0000!important;
}

.error{
    color: #FF8888;
}

.color-yellow{
    color: #e4e42f;
}

.color-gray{
    color: #8A8A8A;
}

.gray{
    color: #BFBFBF;
}
.color-black{
    color: #000!important;
}
.color-ques{
    color: #0C72AE;
}

.color-gray2{
    color : #8A8A8A;
}

// backgrounds 
.gray-bg{
    background: $gray-bg;
}

.gray-bg2{
    background: #00a79c33;
}

.bg1{
    background: $main1!important;
}

.bg2{
    background: $main2!important;
}

.bgA{
    background: $colorA!important;
    color: #fff;
}

.bgB{
    background: $colorB!important;
    color: #fff;
}

.bgC{
    background: $colorC!important;
    color: #fff;
}

.bgD{
    background: $colorD!important;
    color: #fff;
}
.bg-none{
    background: none;
}

.question-error{
    background: #FF8888!important;
    color: #fff;
}

.bg-not{
    background: $not-completed;
}

.orange-bg{
    background: #F79520;
}

.blue-bg{
    background: #41ACE1;
}
.white-bg{
    background: #fff;
}
.red-bg2{
    background: #FF8888;
}

.gray-light{
    color: $gray-light;
}

.gray-light-bg{
    background: $gray-light;
}
// font-sizes
.font8{
    font-size: 8px;
}

.font10{
    font-size: 10px;
}

.font12{
    font-size: 12px;
}

.font14{
    font-size: 14px;
}

.font16{
    font-size: 16px;
}

.font18{
    font-size: 18px;
}

.font20{
    font-size: 20px;
}

.font22{
    font-size: 22px;
}

.font24{
    font-size: 24px;
}

.font26{
    font-size: 26px;
}

.font30{
    font-size: 30px;
}

.font32{
    font-size: 32px;
}

.font34{
    font-size: 34px;
}

.font36{
    font-size: 36px;
}

.font38{
    font-size: 38px;
}

.font40{
    font-size: 40px!important;
}

.font60{
    font-size: 60px!important;
}

// round border
.round0{
    border-radius: 0!important;
}
.round5{
    border-radius: 5px;
}

.round7{
    border-radius: 7px;
}
.round10{
    border-radius: 10px 10px 10px 10px;
}

.round15{
    border-radius: 15px;
}

.round20{
    border-radius: 20px;
}

.round25{
    border-radius: 25px;
}

.round50{
    border-radius: 50%;
}

// font weight
.bold100{
    font-weight: 100!important;
}

.bold200{
    font-weight: 200!important;
}

.bold300{
    font-weight: 300!important;
}

.bold400{
    font-weight: 400!important;
}

.bold500{
    font-weight: 500!important;
}

.bold600{
    font-weight: 600!important;
}

.bold700{
    font-weight: 700!important;
}

.bold800{
    font-weight: 800!important;
}

.bold900{
    font-weight: 900!important;
}

.bold{
    font-weight: bold!important;
}

.bolder{
    font-weight: bolder!important;
}
.lighter{
    font-weight: lighter!important;
}

.normal{
    font-weight:normal!important;
}

// links
.dn{
    text-decoration: none!important;
}
.dl{
    text-decoration:underline!important;
}

// icons
.icon10{
    width: 10px;
}

.icon15{
    width: 15px;
}

.icon20{
    width: 20px;
}

.cp{
    cursor: pointer;
}

.p2{
    color: $main2!important;
}

// height
.h-100{
    height: 100%;
}

.row{
    margin: 0!important;
}

.w-md-10{
    width: 10%;
}

.w-md-20{
    width: 20%;
}

.w-md-25{
    width: 25%;
}

.w-md-30{
    width: 30%;
}

.w-md-40{
    width: 40%;
}

.w-md-50{
    width: 50%;
}

.w-md-65{
    width: 65%;
}

.w-md-75{
    width: 75%;
}

.w-md-85{
    width: 75%;
}

.w-400{
    width: 400px!important;
}

.w-90{
    width: 90%;
}

@media (max-width:768px) {
    .w-md-50 ,.w-md-10 ,.w-md-20 ,.w-md-30 ,.w-md-40, .w-md-75 ,.w-md-65 ,.w-md-85{
        width: 100%;
    }
}

.title1{
    padding: 15px;
    display: flex;
    justify-content: center;
    
    h4{
        padding: 10px;
        background: $main1;
        color: #fff;
    }
}

.title2{
    padding: 15px;
    display: flex;
    justify-content: center;
    
    h4{
        padding: 10px;
        background: $main2;
        color: #fff;
    }
}

.sub-title{
    direction: $direction2;
    padding: 10px 5px;
    border-right:  3px solid $main1;
}

.card-cont{
    background: #fff;
    box-shadow: 0px 0px 20px #00000033;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

// buttons 
.button1{
    border: none;
    padding: 10px 15px;
    font-size: 14px ;
    background: $main1;
    color: #fff!important;
    border-radius: 5px;
    transition: all .3s ease-in-out;
    text-decoration: none!important;
}

.button1:hover{
    background: $main1-hover;
}

.button3{
    border: none;
    padding: 10px 15px;
    font-size: 14px ;
    background: #F8F8F8;
    color: #000!important;
    border-radius: 5px;
    transition: all .3s ease-in-out;
    text-decoration: none!important;
}

.button3:hover{
    background: #e6e0e0;
}

.button4{
    border: none;
    padding: 10px 15px;
    font-size: 14px ;
    background: #EC2F2F;
    color: #fff!important;
    border-radius: 5px;
    transition: all .3s ease-in-out;
    text-decoration: none!important;
}

.button4:hover{
    background: #cc2f2f;
}

.button5{
    border: none;
    padding: 10px 15px;
    font-size: 14px ;
    background: #2AC43F;
    color: #fff!important;
    border-radius: 5px;
    transition: all .3s ease-in-out;
    text-decoration: none!important;
}

.button5:hover{
    background: #29b13b;
}

.button2{
    border: none;
    padding: 10px 15px;
    font-size: 14px ;
    background: $main2;
    color: #fff!important;
    border-radius: 5px;
    transition: all .3s ease-in-out;
    text-decoration: none!important;
}
.button2:hover{
    background: $main2-hover;
}

.button-error{
    border: none;
    padding: 10px 15px;
    font-size: 14px ;
    background: #ff3333;
    color: #fff!important;
    border-radius: 5px;
    transition: all .3s ease-in-out;
    text-decoration: none!important;
}
.button-error:hover{
    background: #ce2a2a;
}

.material-button{
    position: relative;
    user-select: none;
    border: 0;
    transition: all 200ms ease-in-out;
    cursor: pointer;
    overflow: hidden;
    &:hover{
        box-shadow: 0px 6px 8px -3px rgba(0,0,0,0.3);
        transform: translateY(-3px);
    }
    &:focus{
        outline: none;
    }
    .taint{
        display: block;
        position: absolute;
        background: rgba(53, 158, 132, 0.5);
        border-radius: 100%;
        transform: scale(0);

&.drop{
            animation: ripple 0.65s linear;
        }
    }
    
    
    @keyframes ripple{
        100% {
            opacity: 0;
            transform: scale(2.5);
        }
    }
}

*{
    padding: 0;
    margin: 0;
    outline: none!important;
}

body{
    font-family: "URW DIN Arabic";
}

// input img 
.input-img-cont{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ECECEC;
    position: relative;
    &::after{
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: -1;
        transform: translate(-50%,-50%);
        background: #F6F6F6;
        width: calc(100% + 15px);
        height: calc(100% + 15px);
        border-radius: 50%;
    }
    .input-img-camera{
        position: absolute;
        top: calc(100% - 10px);
    }
    .input-img{
        max-width: 80px;
        max-height: 80px;
    }
}

input[type="date"] {
    position: relative;
    // padding: 10px;
  }
  
  input[type="date"]::-webkit-calendar-picker-indicator {
    // color: transparent;
    // background: none;
    z-index: 1;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    // d############
    left: -5px;
    color: $main1;
  }

.transition{
      transition: all .3s ease-in-out;
  }

input {
      font-size: 12px!important;
      padding: 20px 15px!important;
  }

textarea{
    font-size: 12px!important;
    padding: 10px 15px!important;
  }

input[type="checkbox"]{
      height: 15px;
      width: 15px;
      padding: 10px;
  }

input[type="file"]{
    height: 40px;
}

.background{
      position: fixed;
      z-index: -1;
      width: 100%;
      height: calc(100% + 100px);
      bottom: -100px;

img{
          position: absolute;
          bottom: 0;
      }
  }

.hover-shadow:hover{
      transition: all .3s ease-in-out;
      box-shadow: 3px 3px 10px 1px #00000055;
      transform: translateX(-10px);
  }
  
  .hover-scale:hover{
      transition: all .3s ease-in-out;
      transform: scale(1.1);
  }

.shadow1{
      box-shadow: 0px 0px 5px 1px #00000011;
  }

p{
    font-size: 12px;
    color: $gray-bg ;
}

.gray-a{
    color: $gray-bg;
    text-decoration: none;
    transition: $transition;
    font-size: 12px;
    &:hover{
        color: $gray-hover;
    }
}

.dashboard-button{
    padding: 3px;
    min-width: 35px;
    min-height: 35px;
    border-radius: 8px;
    border: none;

&:hover{
        background: #e9e5e5;
    }
}

.sm-img{
    max-width: 35px;
    height: 35px;
}

.sm-img2{
    max-width: 50px;
    height: 50px;
}

.gradient-bg{
    background-image:linear-gradient(-90deg ,#3BAEAA ,#4AA7CB);
    background-repeat: no-repeat;
}

// DATA table 
.table{
    font-size: 12px;
    border-radius: 7px;
    border: none;
    background: #fff;
    // padding-bottom: 15px;
}

.table-striped tbody tr:nth-of-type(odd){
    background: none;
}

.table-cont{
    
    .table-head{
        background: $main1!important;
        color: #fff;

tr{
            border-radius: 10px!important;
        }

*{
            border: none;
        }
    }

tbody{
        color: $gray-bg;
    
        tr{
            transition: $transition;
            &:hover{
                background: $gray-light!important;
            }
        }
    }

.dataTables_scrollBody{
        margin-top: 15px;
        border-radius: 5px;
        overflow: unset !important;

*{
            border: none;
        }
        
    }

.dataTables_filter{
        display: none;
    }

.dataTables_paginate {
        background: #fff;
        border-radius:5px ;
        // transform: translateY(-5px);
        padding: 15px;
        border-top:1px dotted #aaaaaa ;
        direction: rtl;
        text-align: $text-align2!important;
        left: 0;        
        .paginate_button{
            border-radius: 50%;
            background: #fff;
            border: 1px solid #aaaaaa55;
            font-size: 12px;
            width: 22px;
            height: 22px;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            margin : 5px;
            cursor: pointer;
            &.current{
                background: $main1;
                color: #fff;
            }
            &.next ,&.previous{
                background: #eceaea;
                border: none;
            }
        }
    }

#dataTable1_filter{
        position: absolute;
        top: 0;
    }

}

.sn::selection{
    background: none;
    color: transparent;
}

.time-remove-button{
    display: block;
}
.time-add-button{
    display: block;
}

option{
    padding: 10px!important;
}

hr{
    opacity: .5;
}

// .line-between{
//     background: $gray-light!important;
// }

Back to File Manager