<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container">
<div class="view-account">
<section class="module">
<div class="module-inner">
<div class="side-bar">
<div class="user-info">
<img class="img-profile img-circle img-responsive center-block" src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="">
<ul class="meta list list-unstyled">
<li class="name">Rebecca Sanders
<label class="label label-info">UX Designer</label>
</li>
<li class="email"><a href="#">Rebecca.S@website.com</a></li>
<li class="activity">Last logged in: Today at 2:18pm</li>
</ul>
</div>
<nav class="side-menu">
<ul class="nav">
<li><a href="#"><span class="fa fa-user"></span> Profile</a></li>
<li><a href="#"><span class="fa fa-cog"></span> Settings</a></li>
<li class="active"><a href="#"><span class="fa fa-credit-card"></span> Billing</a></li>
<li><a href="#"><span class="fa fa-envelope"></span> Messages</a></li>
<li><a href="user-drive.html"><span class="fa fa-th"></span> Drive</a></li>
<li><a href="#"><span class="fa fa-clock-o"></span> Reminders</a></li>
</ul>
</nav>
</div>
<div class="content-panel">
<div class="content-header-wrapper">
<h2 class="title">My Drive</h2>
<div class="actions">
<button class="btn btn-success"><i class="fa fa-plus"></i> Upload New Item</button>
</div>
</div>
<div class="content-utilities">
<div class="page-nav">
<span class="indicator">View:</span>
<div class="btn-group" role="group">
<button class="active btn btn-default" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Grid View" id="drive-grid-toggle"><i class="fa fa-th-large"></i></button>
<button class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="List View" id="drive-list-toggle"><i class="fa fa-list-ul"></i></button>
</div>
</div>
<div class="actions">
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button" aria-expanded="false">All Items <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#"><i class="fa fa-file"></i> Documents</a></li>
<li><a href="#"><i class="fa fa-file-image-o"></i> Images</a></li>
<li><a href="#"><i class="fa fa-file-video-o"></i> Media Files</a></li>
<li><a href="#"><i class="fa fa-folder"></i> Folders</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button" aria-expanded="false"><i class="fa fa-filter"></i> Sorting <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Newest first</a></li>
<li><a href="#">Oldest first</a></li>
</ul>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Refresh"><i class="fa fa-refresh"></i></button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Archive"><i class="fa fa-archive"></i></button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Report spam"><i class="fa fa-exclamation-triangle"></i></button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Delete"><i class="fa fa-trash-o"></i></button>
</div>
</div>
</div>
<div class="drive-wrapper drive-grid-view">
<div class="grid-items-wrapper">
<div class="drive-item module text-center">
<div class="drive-item-inner module-inner">
<div class="drive-item-title"><a href="#">Meeting Notes.txt</a></div>
<div class="drive-item-thumb">
<a href="#"><i class="fa fa-file-text-o text-primary"></i></a>
</div>
</div>
<div class="drive-item-footer module-footer">
<ul class="utilities list-inline">
<li><a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Download"><i class="fa fa-download"></i></a></li>
<li><a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Delete"><i class="fa fa-trash"></i></a></li>
</ul>
</div>
</div>
<div class="drive-item module text-center">
<div class="drive-item-inner module-inner">
<div class="drive-item-title"><a href="#">Stock Image DC3214.JPG</a></div>
<div class="drive-item-thumb">
<a href="#"><img class="img-responsive" src="https://bootdey.com/img/Content/avatar/avatar6.png" alt=""></a>
</div>
</div>
<div class="drive-item-footer module-footer">
<ul class="utilities list-inline">
<li><a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Download"><i class="fa fa-download"></i></a></li>
<li><a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Delete"><i class="fa fa-trash"></i></a></li>
</ul>
</div>
</div>
<div class="drive-item module text-center">
<div class="drive-item-inner module-inner">
<div class="drive-item-title"><a href="#">Deck Lorem Ipsum.ppt</a></div>
<div class="drive-item-thumb">
<a href="#"><i class="fa fa-file-powerpoint-o text-warning"></i></a>
</div>
</div>
<div class="drive-item-footer module-footer">
<ul class="utilities list-inline">
<li><a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Download"><i class="fa fa-download"></i></a></li>
<li><a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Delete"><i class="fa fa-trash"></i></a></li>
</ul>
</div>
</div>
<div class="drive-item module text-center">
<div class="drive-item-inner module-inner">
<div class="drive-item-title"><a href="#">Project Tasks.csv</a></div>
<div class="drive-item-thumb">
<a href="#"><i class="fa fa-file-excel-o text-success"></i></a>
</div>
</div>
<div class="drive-item-footer module-footer">
<ul class="utilities list-inline">
<li><a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Download"><i class="fa fa-download"></i></a></li>
<li><a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Delete"><i class="fa fa-trash"></i></a></li>
</ul>
</div>
</div>
<div class="drive-item module text-center">
<div class="drive-item-inner module-inner">
<div class="drive-item-title"><a href="#">Project Brief.pdf</a></div>
<div class="drive-item-thumb">
<a href="#"><i class="fa fa-file-pdf-o text-danger"></i></a>
</div>
</div>
<div class="drive-item-footer module-footer">
<ul class="utilities list-inline">
<li><a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Download"><i class="fa fa-download"></i></a></li>
<li><a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Delete"><i class="fa fa-trash"></i></a></li>
</ul>
</div>
</div>
<div class="drive-item module text-center">
<div class="drive-item-inner module-inner">
<div class="drive-item-title"><a href="#">Image DS1341.JPG</a></div>
<div class="drive-item-thumb">
<a href="#"><img class="img-responsive" src="https://bootdey.com/img/Content/avatar/avatar2.png" alt=""></a>
</div>
</div>
<div class="drive-item-footer module-footer">
<ul class="utilities list-inline">
<li><a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Download"><i class="fa fa-download"></i></a></li>
<li><a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Delete"><i class="fa fa-trash"></i></a></li>
</ul>
</div>
</div>
<div class="drive-item module text-center">
<div class="drive-item-inner module-inner">
<div class="drive-item-title"><a href="#">Image DS3214.JPG</a></div>
<div class="drive-item-thumb">
<a href="#"><img class="img-responsive" src="https://bootdey.com/img/Content/avatar/avatar3.png" alt=""></a>
</div>
</div>
<div class="drive-item-footer module-footer">
<ul class="utilities list-inline">
<li><a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Download"><i class="fa fa-download"></i></a></li>
<li><a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Delete"><i class="fa fa-trash"></i></a></li>
</ul>
</div>
</div>
<div class="drive-item module text-center">
<div class="drive-item-inner module-inner">
<div class="drive-item-title"><a href="#">UX Resource</a></div>
<div class="drive-item-thumb">
<a href="#"><i class="fa fa-folder text-primary"></i></a>
</div>
</div>
<div class="drive-item-footer module-footer">
<ul class="utilities list-inline">
<li><a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Download"><i class="fa fa-download"></i></a></li>
<li><a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Delete"><i class="fa fa-trash"></i></a></li>
</ul>
</div>
</div>
<div class="drive-item module text-center">
<div class="drive-item-inner module-inner">
<div class="drive-item-title"><a href="#">Prototypes</a></div>
<div class="drive-item-thumb">
<a href="#"><i class="fa fa-folder text-primary"></i></a>
</div>
</div>
<div class="drive-item-footer module-footer">
<ul class="utilities list-inline">
<li><a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Download"><i class="fa fa-download"></i></a></li>
<li><a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Delete"><i class="fa fa-trash"></i></a></li>
</ul>
</div>
</div>
<div class="drive-item module text-center">
<div class="drive-item-inner module-inner">
<div class="drive-item-title"><a href="#">Sketch-source-files.zip</a></div>
<div class="drive-item-thumb">
<a href="#"><i class="fa fa-file-zip-o text-primary"></i></a>
</div>
</div>
<div class="drive-item-footer module-footer">
<ul class="utilities list-inline">
<li><a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Download"><i class="fa fa-download"></i></a></li>
<li><a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Delete"><i class="fa fa-trash"></i></a></li>
</ul>
</div>
</div>
<div class="drive-item module text-center">
<div class="drive-item-inner module-inner">
<div class="drive-item-title"><a href="#">Quisque.doc</a></div>
<div class="drive-item-thumb">
<a href="#"><i class="fa fa-file-word-o text-info"></i></a>
</div>
</div>
<div class="drive-item-footer module-footer">
<ul class="utilities list-inline">
<li><a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Download"><i class="fa fa-download"></i></a></li>
<li><a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Delete"><i class="fa fa-trash"></i></a></li>
</ul>
</div>
</div>
<div class="drive-item module text-center">
<div class="drive-item-inner module-inner">
<div class="drive-item-title"><a href="#">Aenean imperdiet.doc</a></div>
<div class="drive-item-thumb">
<a href="#"><i class="fa fa-file-word-o text-info"></i></a>
</div>
</div>
<div class="drive-item-footer module-footer">
<ul class="utilities list-inline">
<li><a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Download"><i class="fa fa-download"></i></a></li>
<li><a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Delete"><i class="fa fa-trash"></i></a></li>
</ul>
</div>
</div>
<div class="drive-item module text-center">
<div class="drive-item-inner module-inner">
<div class="drive-item-title"><a href="#">demo.html</a></div>
<div class="drive-item-thumb">
<a href="#"><i class="fa fa-file-code-o text-primary"></i></a>
</div>
</div>
<div class="drive-item-footer module-footer">
<ul class="utilities list-inline">
<li><a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Download"><i class="fa fa-download"></i></a></li>
<li><a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Delete"><i class="fa fa-trash"></i></a></li>
</ul>
</div>
</div>
<div class="drive-item module text-center">
<div class="drive-item-inner module-inner">
<div class="drive-item-title"><a href="#">Image DS2314.JPG</a></div>
<div class="drive-item-thumb">
<a href="#"><img class="img-responsive" src="https://bootdey.com/img/Content/avatar/avatar6.png" alt=""></a>
</div>
</div>
<div class="drive-item-footer module-footer">
<ul class="utilities list-inline">
<li><a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Download"><i class="fa fa-download"></i></a></li>
<li><a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Delete"><i class="fa fa-trash"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="drive-wrapper drive-list-view">
<div class="table-responsive drive-items-table-wrapper">
<table class="table">
<thead>
<tr>
<th class="type"></th>
<th class="name truncate">Name</th>
<th class="date">Uploaded</th>
<th class="size">Size</th>
</tr>
</thead>
<tbody>
<tr>
<td class="type"><i class="fa fa-file-text-o text-primary"></i></td>
<td class="name truncate"><a href="#">Meeting Notes.txt</a></td>
<td class="date">Sep 23, 2015</td>
<td class="size">18 KB</td>
</tr>
<tr>
<td class="type"><i class="fa fa-file-image-o text-primary"></i></td>
<td class="name truncate"><a href="#">Stock Image DC3214.JPG</a></td>
<td class="date">Sep 21, 2015</td>
<td class="size">235 MB</td>
</tr>
<tr>
<td class="type"><i class="fa fa-file-powerpoint-o text-warning"></i></td>
<td class="name truncate"><a href="#">Deck Lorem Ipsum.ppt</a></td>
<td class="date">Sep 20, 2015</td>
<td class="size">136 MB</td>
</tr>
<tr>
<td class="type"><i class="fa fa-file-excel-o text-success"></i></td>
<td class="name truncate"><a href="#">Project Tasks.csv</a></td>
<td class="date">Aug 16, 2015</td>
<td class="size">32 KB</td>
</tr>
<tr>
<td class="type"><i class="fa fa-file-pdf-o text-warning"></i></td>
<td class="name truncate"><a href="#">Project Brief.pdf</a></td>
<td class="date">Aug 15, 2015</td>
<td class="size">73 MB</td>
</tr>
<tr>
<td class="type"><i class="fa fa-file-image-o text-primary"></i></td>
<td class="name truncate"><a href="#">Image DS1341.JPG</a></td>
<td class="date">Aug 15, 2015</td>
<td class="size">171 MB</td>
</tr>
<tr>
<td class="type"><i class="fa fa-file-image-o text-primary"></i></td>
<td class="name truncate"><a href="#">Image DS3214.JPG</a></td>
<td class="date">Aug 15, 2015</td>
<td class="size">171 MB</td>
</tr>
<tr>
<td class="type"><i class="fa fa-folder text-primary"></i></td>
<td class="name truncate"><a href="#">UX Resource</a></td>
<td class="date">Feb 07, 2015</td>
<td class="size">--</td>
</tr>
<tr>
<td class="type"><i class="fa fa-folder text-primary"></i></td>
<td class="name truncate"><a href="#">Prototypes</a></td>
<td class="date">Jan 03, 2015</td>
<td class="size">--</td>
</tr>
<tr>
<td class="type"><i class="fa fa-file-word-o text-info"></i></td>
<td class="name truncate"><a href="#">Quisque.doc</a></td>
<td class="date">Oct 21, 2014</td>
<td class="size">27 KB</td>
</tr>
<tr>
<td class="type"><i class="fa fa-file-word-o text-info"></i></td>
<td class="name truncate"><a href="#">Aenean imperdiet.doc</a></td>
<td class="date">Oct 16, 2014</td>
<td class="size">23 KB</td>
</tr>
<tr>
<td class="type"><i class="fa fa-file-code-o text-primary"></i></td>
<td class="name truncate"><a href="#">demo.html</a></td>
<td class="date">Aug 23, 2014</td>
<td class="size">10 KB</td>
</tr>
<tr>
<td class="type"><i class="fa fa-file-image-o text-success"></i></td>
<td class="name truncate"><a href="#">Image DS2314.JPG</a></td>
<td class="date">Aug 06, 2014</td>
<td class="size">325 MB</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
body{
background:#f9f9fb;
}
.view-account{
background:#FFFFFF;
margin-top:20px;
}
.view-account .pro-label {
font-size: 13px;
padding: 4px 5px;
position: relative;
top: -5px;
margin-left: 10px;
display: inline-block
}
.view-account .side-bar {
padding-bottom: 30px
}
.view-account .side-bar .user-info {
text-align: center;
margin-bottom: 15px;
padding: 30px;
color: #616670;
border-bottom: 1px solid #f3f3f3
}
.view-account .side-bar .user-info .img-profile {
width: 120px;
height: 120px;
margin-bottom: 15px
}
.view-account .side-bar .user-info .meta li {
margin-bottom: 10px
}
.view-account .side-bar .user-info .meta li span {
display: inline-block;
width: 100px;
margin-right: 5px;
text-align: right
}
.view-account .side-bar .user-info .meta li a {
color: #616670
}
.view-account .side-bar .user-info .meta li.activity {
color: #a2a6af
}
.view-account .side-bar .side-menu {
text-align: center
}
.view-account .side-bar .side-menu .nav {
display: inline-block;
margin: 0 auto
}
.view-account .side-bar .side-menu .nav>li {
font-size: 14px;
margin-bottom: 0;
border-bottom: none;
display: inline-block;
float: left;
margin-right: 15px;
margin-bottom: 15px
}
.view-account .side-bar .side-menu .nav>li:last-child {
margin-right: 0
}
.view-account .side-bar .side-menu .nav>li>a {
display: inline-block;
color: #9499a3;
padding: 5px;
border-bottom: 2px solid transparent
}
.view-account .side-bar .side-menu .nav>li>a:hover {
color: #616670;
background: none
}
.view-account .side-bar .side-menu .nav>li.active a {
color: #40babd;
border-bottom: 2px solid #40babd;
background: none;
border-right: none
}
.theme-2 .view-account .side-bar .side-menu .nav>li.active a {
color: #6dbd63;
border-bottom-color: #6dbd63
}
.theme-3 .view-account .side-bar .side-menu .nav>li.active a {
color: #497cb1;
border-bottom-color: #497cb1
}
.theme-4 .view-account .side-bar .side-menu .nav>li.active a {
color: #ec6952;
border-bottom-color: #ec6952
}
.view-account .side-bar .side-menu .nav>li .icon {
display: block;
font-size: 24px;
margin-bottom: 5px
}
.view-account .content-panel {
padding: 30px
}
.view-account .content-panel .title {
margin-bottom: 15px;
margin-top: 0;
font-size: 18px
}
.view-account .content-panel .fieldset-title {
padding-bottom: 15px;
border-bottom: 1px solid #eaeaf1;
margin-bottom: 30px;
color: #616670;
font-size: 16px
}
.view-account .content-panel .avatar .figure img {
float: right;
width: 64px
}
.view-account .content-panel .content-header-wrapper {
position: relative;
margin-bottom: 30px
}
.view-account .content-panel .content-header-wrapper .actions {
position: absolute;
right: 0;
top: 0
}
.view-account .content-panel .content-utilities {
position: relative;
margin-bottom: 30px
}
.view-account .content-panel .content-utilities .btn-group {
margin-right: 5px;
margin-bottom: 15px
}
.view-account .content-panel .content-utilities .fa {
font-size: 16px;
margin-right: 0
}
.view-account .content-panel .content-utilities .page-nav {
position: absolute;
right: 0;
top: 0
}
.view-account .content-panel .content-utilities .page-nav .btn-group {
margin-bottom: 0
}
.view-account .content-panel .content-utilities .page-nav .indicator {
color: #a2a6af;
margin-right: 5px;
display: inline-block
}
.view-account .content-panel .mails-wrapper .mail-item {
position: relative;
padding: 10px;
border-bottom: 1px solid #f3f3f3;
color: #616670;
overflow: hidden
}
.view-account .content-panel .mails-wrapper .mail-item>div {
float: left
}
.view-account .content-panel .mails-wrapper .mail-item .icheck {
background-color: #fff
}
.view-account .content-panel .mails-wrapper .mail-item:hover {
background: #f9f9fb
}
.view-account .content-panel .mails-wrapper .mail-item:nth-child(even) {
background: #fcfcfd
}
.view-account .content-panel .mails-wrapper .mail-item:nth-child(even):hover {
background: #f9f9fb
}
.view-account .content-panel .mails-wrapper .mail-item a {
color: #616670
}
.view-account .content-panel .mails-wrapper .mail-item a:hover {
color: #494d55;
text-decoration: none
}
.view-account .content-panel .mails-wrapper .mail-item .checkbox-container,
.view-account .content-panel .mails-wrapper .mail-item .star-container {
display: inline-block;
margin-right: 5px
}
.view-account .content-panel .mails-wrapper .mail-item .star-container .fa {
color: #a2a6af;
font-size: 16px;
vertical-align: middle
}
.view-account .content-panel .mails-wrapper .mail-item .star-container .fa.fa-star {
color: #f2b542
}
.view-account .content-panel .mails-wrapper .mail-item .star-container .fa:hover {
color: #868c97
}
.view-account .content-panel .mails-wrapper .mail-item .mail-to {
display: inline-block;
margin-right: 5px;
min-width: 120px
}
.view-account .content-panel .mails-wrapper .mail-item .mail-subject {
display: inline-block;
margin-right: 5px
}
.view-account .content-panel .mails-wrapper .mail-item .mail-subject .label {
margin-right: 5px
}
.view-account .content-panel .mails-wrapper .mail-item .mail-subject .label:last-child {
margin-right: 10px
}
.view-account .content-panel .mails-wrapper .mail-item .mail-subject .label a,
.view-account .content-panel .mails-wrapper .mail-item .mail-subject .label a:hover {
color: #fff
}
.view-account .content-panel .mails-wrapper .mail-item .mail-subject .label-color-1 {
background: #f77b6b
}
.view-account .content-panel .mails-wrapper .mail-item .mail-subject .label-color-2 {
background: #58bbee
}
.view-account .content-panel .mails-wrapper .mail-item .mail-subject .label-color-3 {
background: #f8a13f
}
.view-account .content-panel .mails-wrapper .mail-item .mail-subject .label-color-4 {
background: #ea5395
}
.view-account .content-panel .mails-wrapper .mail-item .mail-subject .label-color-5 {
background: #8a40a7
}
.view-account .content-panel .mails-wrapper .mail-item .time-container {
display: inline-block;
position: absolute;
right: 10px;
top: 10px;
color: #a2a6af;
text-align: left
}
.view-account .content-panel .mails-wrapper .mail-item .time-container .attachment-container {
display: inline-block;
color: #a2a6af;
margin-right: 5px
}
.view-account .content-panel .mails-wrapper .mail-item .time-container .time {
display: inline-block;
text-align: right
}
.view-account .content-panel .mails-wrapper .mail-item .time-container .time.today {
font-weight: 700;
color: #494d55
}
.drive-wrapper {
padding: 15px;
background: #f5f5f5;
overflow: hidden
}
.drive-wrapper .drive-item {
width: 130px;
margin-right: 15px;
display: inline-block;
float: left
}
.drive-wrapper .drive-item:hover {
box-shadow: 0 1px 5px rgba(0, 0, 0, .1);
z-index: 1
}
.drive-wrapper .drive-item-inner {
padding: 15px
}
.drive-wrapper .drive-item-title {
margin-bottom: 15px;
max-width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.drive-wrapper .drive-item-title a {
color: #494d55
}
.drive-wrapper .drive-item-title a:hover {
color: #40babd
}
.theme-2 .drive-wrapper .drive-item-title a:hover {
color: #6dbd63
}
.theme-3 .drive-wrapper .drive-item-title a:hover {
color: #497cb1
}
.theme-4 .drive-wrapper .drive-item-title a:hover {
color: #ec6952
}
.drive-wrapper .drive-item-thumb {
width: 100px;
height: 80px;
margin: 0 auto;
color: #616670
}
.drive-wrapper .drive-item-thumb a {
-webkit-opacity: .8;
-moz-opacity: .8;
opacity: .8
}
.drive-wrapper .drive-item-thumb a:hover {
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1
}
.drive-wrapper .drive-item-thumb .fa {
display: inline-block;
font-size: 36px;
margin: 0 auto;
margin-top: 20px
}
.drive-wrapper .drive-item-footer .utilities {
margin-bottom: 0
}
.drive-wrapper .drive-item-footer .utilities li:last-child {
padding-right: 0
}
.drive-list-view .name {
width: 60%
}
.drive-list-view .name.truncate {
max-width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.drive-list-view .type {
width: 15px
}
.drive-list-view .date,
.drive-list-view .size {
max-width: 60px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.drive-list-view a {
color: #494d55
}
.drive-list-view a:hover {
color: #40babd
}
.theme-2 .drive-list-view a:hover {
color: #6dbd63
}
.theme-3 .drive-list-view a:hover {
color: #497cb1
}
.theme-4 .drive-list-view a:hover {
color: #ec6952
}
.drive-list-view td.date,
.drive-list-view td.size {
color: #a2a6af
}
@media (max-width:767px) {
.view-account .content-panel .title {
text-align: center
}
.view-account .side-bar .user-info {
padding: 0
}
.view-account .side-bar .user-info .img-profile {
width: 60px;
height: 60px
}
.view-account .side-bar .user-info .meta li {
margin-bottom: 5px
}
.view-account .content-panel .content-header-wrapper .actions {
position: static;
margin-bottom: 30px
}
.view-account .content-panel {
padding: 0
}
.view-account .content-panel .content-utilities .page-nav {
position: static;
margin-bottom: 15px
}
.drive-wrapper .drive-item {
width: 100px;
margin-right: 5px;
float: none
}
.drive-wrapper .drive-item-thumb {
width: auto;
height: 54px
}
.drive-wrapper .drive-item-thumb .fa {
font-size: 24px;
padding-top: 0
}
.view-account .content-panel .avatar .figure img {
float: none;
margin-bottom: 15px
}
.view-account .file-uploader {
margin-bottom: 15px
}
.view-account .mail-subject {
max-width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.view-account .content-panel .mails-wrapper .mail-item .time-container {
position: static
}
.view-account .content-panel .mails-wrapper .mail-item .time-container .time {
width: auto;
text-align: left
}
}
@media (min-width:768px) {
.view-account .side-bar .user-info {
padding: 0;
padding-bottom: 15px
}
.view-account .mail-subject .subject {
max-width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
}
@media (min-width:992px) {
.view-account .content-panel {
min-height: 800px;
border-left: 1px solid #f3f3f7;
margin-left: 200px
}
.view-account .mail-subject .subject {
max-width: 280px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.view-account .side-bar {
position: absolute;
width: 200px;
min-height: 600px
}
.view-account .side-bar .user-info {
margin-bottom: 0;
border-bottom: none;
padding: 30px
}
.view-account .side-bar .user-info .img-profile {
width: 120px;
height: 120px
}
.view-account .side-bar .side-menu {
text-align: left
}
.view-account .side-bar .side-menu .nav {
display: block
}
.view-account .side-bar .side-menu .nav>li {
display: block;
float: none;
font-size: 14px;
border-bottom: 1px solid #f3f3f7;
margin-right: 0;
margin-bottom: 0
}
.view-account .side-bar .side-menu .nav>li>a {
display: block;
color: #9499a3;
padding: 10px 15px;
padding-left: 30px
}
.view-account .side-bar .side-menu .nav>li>a:hover {
background: #f9f9fb
}
.view-account .side-bar .side-menu .nav>li.active a {
background: #f9f9fb;
border-right: 4px solid #40babd;
border-bottom: none
}
.theme-2 .view-account .side-bar .side-menu .nav>li.active a {
border-right-color: #6dbd63
}
.theme-3 .view-account .side-bar .side-menu .nav>li.active a {
border-right-color: #497cb1
}
.theme-4 .view-account .side-bar .side-menu .nav>li.active a {
border-right-color: #ec6952
}
.view-account .side-bar .side-menu .nav>li .icon {
font-size: 24px;
vertical-align: middle;
text-align: center;
width: 40px;
display: inline-block
}
}
.module {
border: 1px solid #f3f3f3;
border-bottom-width: 2px;
background: #fff;
margin-bottom: 30px;
position: relative;
border-radius: 4px;
background-clip: padding-box;
}
.module .module-footer {
background: #fff;
border-top: 1px solid #f3f3f7;
padding: 15px;
}
.module .module-footer a {
color: #9499a3;
}
$(function(){
$("[data-toggle='tooltip']").tooltip();
})
