PHP Classes

File: assets/css/main.css

Recommend this page to a friend!
  Classes of Ahmed Saad   Simple PHP MVC Framework   assets/css/main.css   Download  
File: assets/css/main.css
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: Simple PHP MVC Framework
Developing Web applications using the MVC pattern
Author: By
Last change:
Date: 2 years ago
Size: 29,795 bytes
 

Contents

Class file image Download
/*Sticky Footer*/ html { position: relative; min-height: 100% !important; width: 100% !important; } body{ /* Margin bottom by footer height */ /*margin-bottom: 30px;*/ height: 100% !important; width: 100% !important; box-sizing: border-box; } #footer { position: absolute; bottom: 0px; width: 100%; padding: 10px 0; background-color: #555; /*background-color: rgba( 40, 160,90, 1 );*/ border-top: 1px solid #222; left: 0; right: 0; color: #cacaca; } /*------------------------------------------------*/ /* General Styles /*------------------------------------------------*/ body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; color: #555; background: #ececec; } body[dir="rtl"] { font-family: "Hacen Liner Screen"; } h1, h2 { font-family: "latolight"; } body[dir="rtl"] h1, body[dir="rtl"] h2 { font-family: "GE SS Unique Bold"; } h3, h4, h5, h6 { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } body[dir="rtl"] h3, body[dir="rtl"] h4, body[dir="rtl"] h5, body[dir="rtl"] h6 { font-family: "GE SS Medium", Helvetica, Arial, sans-serif; } hr { border-top-color: #ddd; } hr.inner-separator { border-style: dashed; } label { font-weight: 300; } blockquote { border-color: #e4e4e4; } input { border-radius: 0; } ol, ul{ list-style-type: none; padding: 0; } @media screen and (min-width: 768px) { .container { max-width: 100%; width: 100%; } } #wrapper { width: 100%; margin: 0 auto; height: 100% !important; } body.topnav-fixed #wrapper { padding-top: 44px; } .red-font { color: #E60404 !important; } .yellow-font { color: #FFB800 !important; } .green-font { color: #3E9C1A !important; } .red-bg { background-color: #E60404 !important; } .yellow-bg { background-color: #FFB800 !important; } .green-bg { background-color: #3E9C1A !important; } .link-disabled { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); opacity: 0.5; pointer-events: none; cursor: not-allowed; } .no-padding { padding: 0 !important; } .no-margin { margin: 0 !important; } .bottom-30px { margin-bottom: 30px !important; } .bottom-60px { margin-bottom: 60px !important; } .padding-l10{ padding-left: 10px !important; } .padding-r10{ padding-right: 10px !important; } .padding-t10 { padding-top: 10px !important; } .padding-b10 { padding-bottom: 10px !important; } .padding-0-10 { padding: 0 10px !important; } .padding-10-0 { padding: 10px 0 !important; } .padding-10 { padding: 10px !important; } .padding-l5 { padding-left: 5px !important; } .padding-r5 { padding-right: 5px !important; } .padding-t5 { padding-top: 5px !important; } .padding-b5 { padding-bottom: 5px !important; } .padding-0-5 { padding: 0 5px !important; } .padding-5-0 { padding: 5px 0 !important; } .padding-5{ padding: 5px !important; } .margin-l10{ margin-left: 10px !important; } .margin-r10{ margin-right: 10px !important; } .margin-t10 { margin-top: 10px !important; } .margin-b10 { margin-bottom: 10px !important; } .margin-0-10 { margin: 0 10px !important; } .margin-10-0 { margin: 10px 0 !important; } .margin-10 { margin: 10px !important; } .margin-l5 { margin-left: 5px !important; } .margin-r5 { margin-right: 5px !important; } .margin-t5 { margin-top: 5px !important; } .margin-b5 { margin-bottom: 5px !important; } .margin-0-5 { margin: 0 5px !important; } .margin-5-0 { margin: 5px 0 !important; } .margin-5{ margin: 5px !important; } .font-size-p1 { font-size: 1.1em !important; } .font-size-p2 { font-size: 1.2em !important; } .font-size-p4 { font-size: 1.4em !important; } .font-size-p6 { font-size: 1.6em !important; } .font-size-p8 { font-size: 1.8em !important; } .font-size-m1 { font-size: .9em !important; } .font-size-m2 { font-size: .8em !important; } .font-size-m4 { font-size: .6em !important; } .font-size-m6 { font-size: .4em !important; } .font-size-m8 { font-size: .2em !important; } .font-size-d2 { font-size: 2em !important; } .font-size-d3 { font-size: 3em !important; } .font-size-d4 { font-size: 4em !important; } .font-size-d5 { font-size: 5em !important; } .text-left { text-align: left !important; } .text-right { text-align: right !important; } .no-underline{ text-decoration: none !important; } /*------------------------------------------------*/ /* Top /*------------------------------------------------*/ .top-bar { padding: 5px 0; background-color: #555; /*background-color: rgba( 40, 160,90, 1 );*/ } .top-bar .logo { position: relative; top: 7px; } .top-bar .top-bar-right { text-align: right; position: relative; top: 5px; float: right; padding-left: 15px; padding-right: 15px; } body[dir="rtl"] .top-bar .top-bar-right { float: left; } .top-bar .top-bar-right .btn-link { color: #ddd; } .top-bar .top-bar-right .btn-link:hover { color: #fff; } .top-bar .searchbox { display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; width: 16em; position: relative; top: 3px; } .top-bar .searchbox input[type="search"] { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; padding: 3px 6px; height: 28px; font-size: 0.85em; color: #fff; background-color: #4d4d4d; border-color: #484848; -webkit-appearance: none; } .top-bar .searchbox .btn { padding: 3px 6px; background: #4d4d4d; border-color: #484848; outline: none; } .top-bar .searchbox .btn i { color: #666; } .top-bar .searchbox .btn:hover { border-color: #484848; } .top-bar .searchbox .btn:hover i { color: #1a1a1a; } @media screen and (max-width: 850px) { .top-bar .searchbox { display: none; } } .top-bar .notifications, .top-bar .logged-user { display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; text-align: left; } .top-bar .logged-user img { max-width: 26px; max-height: 26px; } .top-bar .dropdown-menu { padding: 0; } .top-bar .dropdown-menu > li > a { padding: 8px; } .top-bar .dropdown-menu > li > a:hover { background-color: #fafafa; } .top-bar .notifications { margin-left: 10px; margin-right: 28px; } .top-bar .notifications .notification-item { position: relative; margin-left: 25px; } .top-bar .notifications .notification-item .open .circle { -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; width: 5px; height: 5px; position: absolute; top: 19px; left: 4px; background-color: #fff; } .top-bar .notifications .notification-item .btn-group.open > a { color: #fff; } .top-bar .notifications .notification-item .btn-group > a { color: #fff; } .top-bar .notifications .notification-item .btn-group > a:hover { color: #fff; text-decoration: none; } .top-bar .notifications .btn-group.open .dropdown-toggl-e { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .top-bar .notifications > ul { list-style-type: none; } .top-bar .notifications > ul, .top-bar .notifications > ul li { margin: 0; padding: 0; display: inline; } .top-bar .notifications > ul > li li { display: block; padding: 0; border-top: 1px solid #f1f1f1; } .top-bar .notifications > ul > li li:first-child { border-top: none; } .top-bar .notifications .count { position: absolute; top: -7px; left: 58%; padding: 0px 5px; border-radius: 30px; line-height: 16px; text-align: center; font-size: 10px; border-width: 2px; border-style: solid; color: #fff; background: #E60404 !important; border-color: #555; } .top-bar .notifications .dropdown-menu { top: 27px; width: 350px; } .top-bar .notifications .dropdown-menu .notification-header { font-size: 0.85em; font-weight: 700; line-height: 2; padding: 5px 8px; } .top-bar .notifications .dropdown-menu .notification-footer a { text-align: center; font-size: 0.85em; } .top-bar .notifications .dropdown-menu .notification-footer a:hover { background: none; text-decoration: underline; } .top-bar .notifications .dropdown-menu .text { font-size: 0.85em; margin-bottom: 0; color: #888888; } .top-bar .notifications .dropdown-menu .timestamp { font-size: 0.75em; color: #888888; } .top-bar .notifications .inbox .dropdown-menu { left: -141px; } body[dir="rtl"] .top-bar .notifications .inbox .dropdown-menu { right: -165px; } /*@media screen and (max-width: 480px) { .top-bar .notifications .inbox .dropdown-menu { left: -7.5em; } }*/ .top-bar .notifications .inbox .inbox-item { display: block; } .top-bar .notifications .inbox .inbox-item.unread { background-color: #E7E7E7; } .top-bar .notifications .inbox img { width: 32px; } .top-bar .notifications .inbox .name { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 0.85em; color: #555; font-weight: 700; margin-bottom: 0; } body:not([dir="rtl"]) .top-bar .notifications .general .dropdown-menu { left: -183px; } body[dir="rtl"] .top-bar .notifications .general .dropdown-menu { right: -206px; } .top-bar .notifications .general .dropdown-menu li a i { min-width: 14px; } .top-bar .notifications .general .dropdown-menu li a .timestamp { float: right; } body[dir="rtl"] .top-bar .notifications .general .dropdown-menu li a .timestamp { float: left; } /*@media screen and (max-width: 480px) { .top-bar .notifications .general .dropdown-menu { left: -10.5em; } } */@media screen and (max-width: 620px) { .top-bar .notifications { display: none; } } .top-bar .logged-user .btn { padding: 0; border: none; font-size: 0.9em; font-weight: 700; text-decoration: none; color: #fff; } .top-bar .logged-user .btn .name { font-weight: 400; } .top-bar .logged-user .btn .caret { border-top-color: #fff; } .top-bar .logged-user .btn:hover { color: #fff; text-decoration: none; } .top-bar .logged-user .btn img { border: 1px solid #5e5e5e; } .top-bar .logged-user .open .btn { color: #fff; } .top-bar .logged-user .dropdown-menu { top: 31px; padding: 0; } body:not([dir="rtl"]) .top-bar .logged-user .dropdown-menu { left: -38px; } body[dir="rtl"] .top-bar .logged-user .dropdown-menu { right: -44px; } .top-bar .logged-user .dropdown-menu > li { border-top: 1px solid #f1f1f1; } .top-bar .logged-user .dropdown-menu > li:first-child { border-top: none; } .top-bar .logged-user .dropdown-menu > li > a { color: #555; font-size: 0.9em; } @media screen and (max-width: 991px) { .top-bar.navbar-fixed-top + .bottom { margin-top: 112px; } } /*------------------------------------------------*/ /* Main Navigation ( Side Bar ) /*------------------------------------------------*/ /* main menu */ ul.main-menu { padding-right: 0; padding-left: 0; list-style-type: none; } ul.main-menu > li a { display: block; position: relative; padding: 13px 0px 13px 15px; font-size: 14px; color: #555; background-color: #ececec; border-top: 1px solid #dfdfdf; text-decoration: none; } body[dir="rtl"] ul.main-menu > li a { padding: 13px 15px 13px 0px; } ul.main-menu > li a:hover { text-decoration: none; background-color: #f1f1f1; } ul.main-menu > li.active > a { background-color: #dfdfdf; } ul.main-menu > li:first-child > a { border-top: none; } ul.main-menu > li i { width: 14px; text-align: center; } ul.main-menu > li .text { padding-left: 8px; font-size: 0.9em; } body[dir="rtl"] ul.main-menu > li .text { padding-left: 0px; padding-right: 8px; } ul.main-menu > li .toggle-icon { font-size: 14px; width: 10px; position: absolute; top: 16px; text-shadow: none; } body:not([dir="rtl"]) .main-menu > li .toggle-icon { right: 10px; } body[dir="rtl"] .main-menu > li .toggle-icon { left: 10px !important; } ul.main-menu .sub-menu { position: relative; display: none; padding-left: 0; list-style-type: none; } body[dir="rtl"] ul.main-menu .sub-menu { padding-right: 0; } ul.main-menu .sub-menu li a { padding-left: 33px; -webkit-transition: background-color .2s ease-in-out, font-weight .1s linear; -moz-transition: background-color .2s ease-in-out, font-weight .1s linear; -o-transition: background-color .2s ease-in-out, font-weight .1s linear; -ms-transition: background-color .2s ease-in-out, font-weight .1s linear; transition: background-color .2s ease-in-out, font-weight .1s linear; } body[dir="rtl"] ul.main-menu .sub-menu li a { padding-left: 0px; padding-right: 33px; } ul.main-menu .sub-menu li.active > a { font-weight: 700; } ul.main-menu .sub-menu.open { overflow: visible; display: block; } ul.main-menu .sub-menu .sub-menu li a { padding-left: 50px; } body[dir="rtl"] ul.main-menu .sub-menu .sub-menu li a { padding-right: 50px; } ul.main-menu .sub-menu li.active > a { background-color: #e9e9e9; } ul.main-menu > li > a, .content-wrapper { -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .sidebar { -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; width: 230px; padding-right: 0; padding-left: 0; position: absolute; float: none; z-index: 9990; background-color: #ececec; border-right: 1px solid #dedede; } body[dir="rtl"] .sidebar { border-right: none; border-left: 1px solid #dedede; } @media screen and (max-width: 992px) { .sidebar { -webkit-transform: translateX(-230px); -moz-transform: translateX(-230px); -o-transform: translateX(-230px); -ms-transform: translateX(-230px); transform: translateX(-230px); } body[dir="rtl"] .sidebar { -webkit-transform: translateX(230px); -moz-transform: translateX(230px); -o-transform: translateX(230px); -ms-transform: translateX(230px); transform: translateX(230px); } } body.sidebar-float .sidebar { -moz-box-shadow: 1px 4px 5px 4px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 1px 4px 5px 4px rgba(0, 0, 0, 0.3); box-shadow: 1px 4px 5px 4px rgba(0, 0, 0, 0.3); } .sidebar.sidebar-hide, body.sidebar-float .sidebar { -webkit-transform: translateX(-230px); -moz-transform: translateX(-230px); -o-transform: translateX(-230px); -ms-transform: translateX(-230px); transform: translateX(-230px); } body[dir="rtl"] .sidebar.sidebar-hide, body.sidebar-float[dir="rtl"] .sidebar { -webkit-transform: translateX(230px); -moz-transform: translateX(230px); -o-transform: translateX(230px); -ms-transform: translateX(230px); transform: translateX(230px); } .sidebar, body.sidebar-float .sidebar.sidebar-float-active { -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -o-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px); } body.sidebar-fixed .sidebar { position: fixed; height: calc( 100% - 44px ); /* Exclude Top Bar Height */ } .toggle-sidebar-collapse { color: #fff; font-size: 22px; margin-right: 15px; line-height: 34px; } body[dir="rtl"] .toggle-sidebar-collapse { margin-right: 0px; margin-left: 15px; } .toggle-sidebar-collapse:hover, .toggle-sidebar-collapse:active, .toggle-sidebar-collapse:focus { color: #fff; } .sidebar .current a { color: rgb( 10, 130, 200 ); font-size: 1.12em; } /*------------------------------------------------*/ /* Main Content /*------------------------------------------------*/ .content-wrapper { visibility: hidden; /*To Animate Appearance*/ opacity: 0; /*To Animate Appearance*/ padding: 15px 30px; margin-left: 230px; margin-right: 0px; -webkit-transition: margin .3s ease-in-out, visibility .2s ease-in-out, opacity .2s ease-in-out; -moz-transition: margin .3s ease-in-out, visibility .2s ease-in-out, opacity .2s ease-in-out; -o-transition: margin .3s ease-in-out, visibility .2s ease-in-out, opacity .2s ease-in-out; -ms-transition: margin .3s ease-in-out, visibility .2s ease-in-out, opacity .2s ease-in-out; transition: margin .3s ease-in-out, visibility .2s ease-in-out, opacity .2s ease-in-out; position: relative; min-height: 100% !important; /* Important to fill page height for sticky footer */ } body[dir="rtl"] .content-wrapper { margin-left: 0px; margin-right: 230px; } .content-wrapper.expanded { width: 100%; padding-left: 70px; margin-left: 0; } body[dir="rtl"] .content-wrapper.expanded { margin-right: 0px; } .content-wrapper.expanded-full { margin-left: 0; padding: 15px; } body[dir="rtl"] .content-wrapper.expanded-full { margin-right: 0px; } @media screen and (max-width: 480px) { .content-wrapper { padding: 15px; } } body.sidebar-float .content-wrapper { margin-left: 0; padding: 15px; } body.sidebar-float[dir="rtl"] .content-wrapper { margin-right: 0; } /*---------------------------------------------*/ /* Media /*---------------------------------------------*/ .media .media-left, .media .media-right, .media .media-body { display: inline-block; vertical-align: top; } .media .media-left{ padding-right: 5px; } body[dir="rtl"] .media .media-left{ padding-left: 5px; padding-right: 0px; } .media .media-right{ padding-right: 5px; } body[dir="rtl"] .media .media-right{ padding-right: 5px; padding-left: 0px; } .media .media-object { width: 42px !important; height: 42px; border: 1px solid transparent; border-radius: 3px; } /*---------------------------------------------*/ /* Breadcrumb /*---------------------------------------------*/ .breadcrumb li .breadcrumb-item { background: rgb( 100, 200, 230 ); color: #fff; padding: 5px 10px; position: relative; z-index:1; text-decoration: none; -webkit-transition: background .2s ease-in-out, color .2s ease-in-out; -moz-transition: background .2s ease-in-out, color .2s ease-in-out; -o-transition: background .2s ease-in-out, color .2s ease-in-out; -ms-transition: background .2s ease-in-out, color .2s ease-in-out; transition: background .2s ease-in-out, color .2s ease-in-out; outline: none; display: block; height: 28px !important; } .breadcrumb li .breadcrumb-item:hover, .breadcrumb li span.breadcrumb-item { background: #888; color: #eaeaea; } .breadcrumb li:before { content:none !important; } .breadcrumb li { margin: 2px 8px; } .breadcrumb li .breadcrumb-item:before, .breadcrumb li .breadcrumb-item:after { content: ""; position: absolute; top: 0; z-index:-1; border-style: solid; border-width: 14px; border-right-width: 12px; border-left: none; -webkit-transition: border-color .2s ease-in-out; -moz-transition: border-color .2s ease-in-out; -o-transition: border-color .2s ease-in-out; -ms-transition: border-color .2s ease-in-out; transition: border-color .2s ease-in-out; } .breadcrumb li .breadcrumb-item:before { right: -12px; border-color: rgb( 100, 200, 230 ); border-right-color: transparent; } .breadcrumb li .breadcrumb-item:after { left: -12px; border-color: transparent; border-right-color: rgb( 100, 200, 230 ); } .breadcrumb li .breadcrumb-item:hover:before, .breadcrumb li span.breadcrumb-item:before { border-top-color: #888; border-bottom-color: #888; } .breadcrumb li .breadcrumb-item:hover:after, .breadcrumb li span.breadcrumb-item:after { border-right-color: #888; } .breadcrumb li span.breadcrumb-item { cursor: default; } /*------------------------------------------------------------------------------------------------*/ /* Others /*------------------------------------------------------------------------------------------------*/ /* 2 column data presentation */ .data-row:not(:last-child) { margin-bottom: 10px; } .data-row .data-name, .data-row .data-value { display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; padding: 5px 10px; } .data-row .data-name { width: 12em; background-color: #ececec; color: #b9b9b9; color: #999; font-size: 0.9em; vertical-align: top; border-bottom: 1px solid #aaa; } .data-row .data-value { padding-left: 0px; padding-right: 0px; border-bottom: 1px dotted #999; margin-right: 10px; } .control-inline { display: -moz-inline-stack !important; display: inline-block !important; vertical-align: middle !important; zoom: 1 !important; margin-right: 10px; } .profile-photo-label{ text-align: left; } .photo-side { padding-top: 15px; } .photo-side figure, .form-photo figure{ max-width: 200px } @media screen and (max-width: 480px) { .data-row .data-name, .data-row .data-value { display: block; } .photo-side figure{ max-width: 100% } } @media all and ( max-width: 767px ) { .profile-photo-label{ text-align: right; } } input#upload_image{ display: none; } @media screen and (min-width:768px) { .photo-side { background: #efefef; min-height: 100%; } .photo-side .data-name{ width: 80px; background: #fff; vertical-align: middle; } .photo-side .data-value{ border-bottom: none; color: #888; } } /*------------------------ Spinning Keyframes ------------------------*/ .spinning{ -webkit-animation-name: spin; animation-name: spin; } .spin { display: inline-block !important; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-duration: 1s; animation-duration: 1s; animation-timing-function: linear; -webkit-animation-fill-mode: both; animation-fill-mode: both; transform-origin: center; text-align: center; outline: none; font-size: 13px !important; line-height: 22px !important; padding: 1px 0px 0px 0px !important; } @keyframes spin { from { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } /*------------------------ End Spinning Keyframes ------------------------*/ /*----------------------------- Uploader -----------------------------*/ .files-upload{ padding: 5px; /*display: none;*/ width: 350px; } .files-upload .file{ position: relative !important; padding: 5px; border: 1px solid #ddd; border-radius: 4px; height: 100px; /*background: #f0f0f0;*/ color: #777; } .files-upload .file:not(:first-child){ margin-top: 5px; } .file .logo-side, .file .info-side { display: inline-block; vertical-align: middle; box-sizing: border-box; padding: 5px; } .file .logo-side{ /*border: 1px solid blue;*/ width: 70px; text-align: center; } body[dir="rtl"] .file .logo-side{ border-left: 2px dotted #ccc; } body:not( [dir="rtl"] ) .file .logo-side{ border-right: 2px dotted #ccc; font-size: 12px; font-family: 'Monaco', Arial, sans-serif; } .file .logo-side img{ opacity: .7; } .file .info-side{ position: relative !important; /*border: 1px solid grey;*/ width: calc( 100% - 73px ); /* 70px + 3px for white-space */ min-height: 100%; } body:not( [dir="rtl"] ) .file .info-side{ font-family: 'Monaco', Arial, sans-serif; font-size: 11px; } body[dir="rtl"] .file .info-side{ font-family: 'Hacen Liner Screen'; font-size: 12px; } .file-name .name{ /*background: #e0e0e0;*/ background: #f1f1f1; display: block; padding: 4px; border-bottom: 2px solid #ccc; } .file-name{ text-align: center; font-size: 14px; font-family: Arial, sans-serif; } .file .actions { text-align: center; display: inline-block; position: absolute; /*overflow: hidden;*/ top: -1px; right: -1px; height: 0px; line-height: 20px; width: 50px; visibility: hidden; opacity: 0; -webkit-transition: visibility .2s linear, opacity .2s linear, top .2s linear, height .2s linear; -moz-transition: visibility .2s linear, opacity .2s linear, top .2s linear, height .2s linear; -o-transition: visibility .2s linear, opacity .2s linear, top .2s linear, height .2s linear; -ms-transition: visibility .2s linear, opacity .2s linear, top .2s linear, height .2s linear; transition: visibility .2s linear, opacity .2s linear, top .2s linear, height .2s linear; background: #aaa; border: 1px solid #ddd; border-top: none; border-left: none; border-radius: 0px 4px 0px 7px; } .file .actions .edit, .file .actions .remove { font-size: 12px; color: #f9f9f9; margin: 0 4px; -webkit-transition: color .2s linear; -moz-transition: color .2s linear; -o-transition: color .2s linear; -ms-transition: color .2s linear; transition: color .2s linear; } .file .actions .remove:hover { color: #dd5555; cursor: pointer; } .file .actions .edit:hover { color: #1166ff; cursor: pointer; } .file:hover .actions:not(.hide) { visibility: visible; opacity: 1; height: 22px; } .percent, .speed, .estimated, .elapsed{ position: absolute; color: #999; /* font-size: 12px;*/ } .file .percent, .file .speed{ bottom: 10px; } .file .estimated, .file .elapsed{ bottom: 25px; } body:not([dir="rtl"]) .file .percent, body:not([dir="rtl"]) .file .estimated{ right: 5px; } body[dir="rtl"] .file .percent, body[dir="rtl"] .file .estimated{ left: 5px; } .status { text-align: center; padding-top: 2px; margin-top: 2px; } .status .text { padding: 0px 5px; font-size: 12px;} body[dir="rtl"] .status .text { font-size: 12px} .file .progress1{ height: 5px; /*border: 1px solid rgba( 170, 170, 170, .5 );*/ border: 1px solid rgba( 100, 170, 170, .5 ); width: calc( 100% - 10px ); position: absolute; bottom: 5px; border-radius: 3px; /*background: rgba( 150, 150, 150, .2 );*/ background: rgba( 50, 150, 250, .1 ); /*z-index: 10000;*/ } body:not([dir="rtl"]) .file .progress1{ left: 5px; } body[dir="rtl"] .file .progress1{ right: 5px; } .file .info-side .progress1 .progress-bar1{ width: 0px; height: 100%; /*background: rgba( 100, 170, 230, 1 );*/ background: rgba( 50, 150, 250, 1 ); -webkit-transition: width .3s linear; -moz-transition: width .3s linear; -o-transition: width .3s linear; -ms-transition: width .3s linear; transition: width .3s linear; } /*----------------------------- END Uploader -----------------------------*/ .btn-success{ background: #2ecc71; border-color: #27ae60; } .btn-success:hover{ background: #26A65B; border-color: #27ae60; } .btn-danger{ background: #e74c3c; border-color: #F64747; } .btn-danger:hover{ background: #D91E18; border-color: #F64747; } .btn-primary{ background: #3498db; border-color: #4183D7; } .btn-primary:hover{ background: #1E8BC3; border-color: #3498DB; } .btn-info{ background: #19B5FE; border-color: #52B3D9; } .panel-default .panel-heading{ background: none; color: #6C7A89; margin-bottom: 15px; } .alert.alert-success{ background: #C8F7C5; border-color: #C8f0cc; } .alert.alert-danger{ background: #FCC9B9; border-color: #FFB3A7; } /*****************************| LEVEL |******************************/ .level { /*border-top: 1px dashed red;*/ margin-left: 20px; margin-top: 10px; position: relative; /*background: rgba( 10, 10, 10, .2 );*/ /*border-left: 1px dotted red;*/ padding: 0; } body[dir="rtl"] .level { /*border-top: 1px dashed red;*/ margin-right: 20px; margin-left: 0; } /* Add Level Vertical Line */ .level:before{ content:""; position: absolute; width: 10px; height: 100%; top: -8px; left: -10px; border-left: 1px dotted #999; background: #fff; } body[dir="rtl"] .level:before{ right: -10px; left: 0; border-right: 1px dotted #999; border-left: none; background: #fff; } /* Add Level Horizontal pointer to Childs */ .level > li:before { content:""; position: absolute; width: 10px; height: 50%; bottom: 0px; left: -11px; border-top: 1px dotted #999; background: #fff; } body[dir="rtl"] .level > li:before { right: -11px; left: 0; } /* Remove Background from childs Horizontal pointer of all li except last one to show vertical level line */ .level > li:not(:last-of-type):before{ background: none; } /* For level of last child li Last Childs that Containing Childs to clip vertical level line */ .level > li:last-of-type + .level:after{ content:""; position: absolute; width: 3px; height: calc(100% + 10px ); /* 10px of top margin */ bottom: 0px; left: -30px; background: #fff; } body[dir="rtl"] .level > li:last-of-type + .level:after{ right: -30px; left: 0; } .list-group-item:not(:first-of-type){ margin-top: 10px; } ul.level ~ .list-group-item{ margin-top: 20px; } ul.list-group > ul.level ~ .list-group-item{ margin-top: 30px; } .no-decoration{ text-decoration: none !important; } .key-value { background: #22A7F0; color: #fff; display: inline-block; padding: 0px; border-radius: 3px; white-space: nowrap; overflow: hidden; font-size: 14px; } .key-value > .key, .key-value > .value{ display: inline-block !important; vertical-align: middle; /*width: 50%;*/ margin: 0; padding: 10px; } .key-value.fixed > .key{ width: 100px; } /*.key-value.fixed > .value{ width: 140px; }*/ .key-value > .key{ text-transform: capitalize; letter-spacing: 1px; } .key-value > .value{ background: #29C5FF; } .ajax-loader{ background: url( '../images/ajax-loader-32.gif' ) no-repeat 50%rgba( 255, 255, 255, .5 ); width: calc( 100% - 30px ); height: 50px; position: absolute; bottom: 0; display: none; } .relative { position: relative; }