Subversion Repositories Integrator Subversion

$font-size:20px;
$text-align:right;

// widget 1
$widget1-icon-color: darken(#C9F0EE, 10%);

.mt-widget-1 {
        border: 1px solid $general-panel-border-color;
        text-align: center;     
        position: relative;

        .mt-icon {
                position: absolute;
                right: 10px;
                top: 10px;
                margin: 7px;
                font-size: 20px;

                > a {
                        > i {
                                color: $widget1-icon-color;
                        }

                        &:hover {
                                > i {
                                        color: darken($widget1-icon-color, 10%);
                                }
                        }
                }
        }
        
        .mt-img {
                display: inline-block;
                border-radius: 50% !important;
                border:4px solid $general-panel-border-color;
                margin: 40px 0 30px 0;

                > img {
                        border:1px solid trnsparent;
                        border-radius: 50% !important;
                }
        }

        .mt-body {

                .mt-username {
                        text-align: center;
                        margin: 5px 10px;
                        font-weight: 600;
                        font-size: 16px;
                }

                .mt-user-title {
                        text-align: center;
                        margin: 10px 10px 10px 10px;
                        color: lighten(#000000, 40%);
                        font-size: 13px;
                }

                .mt-stats {
                        margin: 30px 0px 0px 0px;
                        
                        .btn-group {
                                border-top: 1px solid $general-panel-border-color;
                                
                                
                                .btn {                                  
                                        padding: 10px 10px;
                                        font-size: 14px;
                                        border-right:1px solid $general-panel-border-color;
                                        
                                        &:hover {
                                                background-color:$general-panel-border-color;
                                        }

                                        &:last-child {
                                                border: 0;
                                        }

                                        > i {
                                                position: relative;
                                                top: 3px;
                                                right: 2px;
                                                font-size: 16px;
                                        }

                                        &:first-child {
                                                border-bottom-left-radius: $general-border-radius !important;
                                        
                                        }

                                        &:last-child {
                                                border-bottom-right-radius:  $general-border-radius !important;
                                                
                                        }
                                }
                        }
                }
        }
}

.mt-widget-2 {  
        border: 1px solid $general-panel-border-color;   
        position:relative;
    
        .mt-head {
            position:absolute;          
                width: 100%;         
                background-size:100% 100%;
                                                          
                .mt-head-label {
                    position:absolute;                  
                        top: 8px;
                        right:8px;                                               
                        cursor: pointer;
                        
                        > button {
                                font-size: 13px;
                                border-radius: 2px !important;
                        }
                }

                .mt-head-user {                                         
                        
                        .mt-head-user-img {
                                position:relative;
                                float: left;                            
                                margin:165px 32px 18px 35px;
                                 
                                &::after {
                                        content: "";
                                        position: absolute;
                                        top: 90%;
                                        left: 50%;
                                        margin-left: -15px;
                                        border-width: 13px;
                                        border-style: solid;
                                        border-color: transparent transparent white  transparent;
                                }                                
                                        
                                > img { 
                                        width: 65px;
                                        border-radius:50% !important;

                        }
                        } 
                        
                        .mt-head-user-info {            
                                margin: 175px 0 0 -9px;                                                         
                                color: white;                                                           
                                display: inline-block; 

                                .mt-user-name {                                 
                                        display: block; 
                                        font-size: 15px;
                                }

                                .mt-user-time { 
                                        font-size: 13px;

                                        >  i {
                                                position: relative;
                                                top: 1px;
                                                font-size: 13px;
                                        }

                                        display: block;                                 
                                }                               
                        }
                }       
        }

        .mt-body {              
                padding-top:160px;
                text-align:center;

                .mt-body-title {                                                
                        margin-top:130px;
                        font-weight: 600;
                        font-size: 16px;
                }  

                .mt-body-description {
                        margin-top: 10px;
                        display: inline-block;          
                        color: lighten(#000000, 40%);   
                        font-size: 13px;        
                        padding: 0 10px;                
                }

                .mt-body-stats {                        
                        @include clearfix();                                              
                        padding: 0; 

                        > li {                          
                                margin: 15px;
                                list-style: none;
                                display: inline-block;                                  
                        }
                }

                .mt-body-actions {                              
                        border-top: 1px solid $general-panel-border-color;
                                
                        > i {
                                font-size: 18px;
                        }

                        .btn {
                                font-size: 14px;                                        
                                border-right: 1px solid $general-panel-border-color;
                                padding:12px 0 12px 0;
                                text-align: center;

                                &:last-child {
                                        border:0;
                                }
                        }                                       
                }
        }        
}

.mt-widget-3 {
        border: 1px solid $general-panel-border-color;   
        .mt-head {
                background-color:#5DC9E6;
                margin-bottom: 20px;
                color: white;
                padding: 15px 0;

                .mt-head-icon { 
                        font-size: 35px;                         
                        text-align: center; 
                        padding-top: 20px;              
                        margin-bottom: 10px;             
                }

                .mt-head-desc {
                        margin-left: 10px;
                        margin-right: 10px;
                        text-align: center;
                        color: #fff;
                        @include opacity(0.8);
                }

                .mt-head-date {
                        text-align: center;
                        margin-top: 20px;
                        display: block;
                        color: darken(#fff, 5%);
                }

                .mt-head-button {
                        margin: 10px 0;
                        text-align: center;
                        padding:20px;


                        > button {
                                width: 90px;
                        }
                }
        }

        .mt-body-actions-icons {
         
                .btn-group {
                        margin-bottom: 20px;

                        .mt-icon {
                                display: block;
                                position:relative;
                                padding:5px;
                                font-size: 15px;                                 
                        }
                } 
                .btn {
                        border-right: 1px solid $general-panel-border-color;
                        font-size: 11px;
                        text-align: center;
                        padding: 0;
                                 

                        &:last-child {
                                border-right:0;
                                
                        }
                }
        }
} 

.mt-widget-4 {  
        min-height: 250px;       
        color:white;
        background-color:#26C0B8;

        .mt-img-container {                      
                position:relative;

                > img {
                        height: 250px; 
                        width: 100%;                            
                }
        }

        .mt-container {
                width:150px;
                background-color:#26C0B8;
                min-height: 250px;
                position:absolute;               
                right:15px;
                top:0;          

                .mt-head-title {
                        text-align: center;                     
                        margin-top: 20px;               
                        padding: 10px;
                }

                .mt-body-icons {        
                        margin-top: 30px;                
                        text-align: center;             
                        
                        > a {
                                color: darken(#fff, 10%);
                                display: inline-block;
                                padding:10px;
                                font-size: 17px;                

                                &:hover {
                                        color: #fff;
                                }       
                        }
                }

                .mt-footer-button {                     
                        margin-top: 30px;
                        position:absolute;
                        right:0;        

                        > .btn {                                 
                                width: 90px;
                                border-top-right-radius:0 !important;
                                border-bottom-right-radius:0 !important;
                                border:none !important; 

                        }
                }
        }
}