Просмотр архива Databasr MySQL Administration Interface

@import
url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);
@import
url(http://fonts.googleapis.com/css?family=Roboto:400,300,100,700,500,300italic,100italic,400italic,500italic);

ul
{
    margin-left: 15px;
    padding: 0;
}

* {
    box-sizing:
border-box;
}

body {
    padding: 0;
    margin: 0;
    font: 12px
"Open Sans", "Helvetica Neue", Helvetica, Arial,
sans-serif;
    font-weight: normal;
    font-style: normal;
   
line-height: 28px;
    position: relative;
    z-index: 0;
    cursor:
default;
    overflow-x: hidden;
    height: auto;
    color: #939292;
   
background: #F0F0F0;
}

/* Sidebar */
.sidebar {
    width: 300px;
   
height: 100%;
    position: fixed;
    background: #495468;
    z-index:
1000;
}

.sidebar .brand {
    padding-top: 15px;
    padding-left: 25px;
 
  height: 60px;

    background: #D7665A;
}

.sidebar .navigation {
   
height: 100%;
    overflow-y: auto;
}

.sidebar .navigation ul {
   
list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar .navigation ul
li {
    display: block;
}

.sidebar .navigation ul li a {
    display:
block;
    position: relative;
    padding: 8px 25px;
    color:
#cbced5;


    -webkit-transition: all 300ms;
    -moz-transition: all
300ms;
    -o-transition: all 300ms;
    transition: all 300ms;
}

.sidebar
.navigation ul li a:hover, .sidebar .navigation ul li a.active {
   
text-decoration: none;
    background-color: #3f485a;
    padding-left:
32px;
}

.sidebar .navigation ul li i {
    padding-right:
10px;
}

.sidebar .navigation ul li ul {
    display: none;
}

.sidebar
.navigation ul.active {
    display: block;
    background-color:
#3f485a;
}

.sidebar .navigation ul li.active a {
    /*background-color:
#3f485a;*/
    /*padding-left: 32px;*/
}

.sidebar .navigation ul li ul li
a {
    display: block;
    position: relative;
    padding: 5px 0 5px
55px;
    color: #cbced5;


    -webkit-transition: all 300ms;
   
-moz-transition: all 300ms;
    -o-transition: all 300ms;
    transition:
all 300ms;
}

.sidebar .navigation ul li ul li a:hover {
    padding: 5px 0
5px 60px;
    background-color: #394151;
}

/* Header */
.container {
   
width: 100%;
}

.header {
    background: #fff;
    position: fixed;
   
top: 0;
    height: 60px;
    padding-left: 300px;
    margin-left:
-300px;
    width: 100%;

    box-shadow: 0 1px 2px rgba(0,0,0,.1);

   
z-index: 500;
}

.header .breadcrumb {
    background: none;
    height:
60px;
    line-height: 60px;
    margin: 0;
    padding: 0 25px;
}

.header
.header-controls {
    list-style: none;
    margin: 0;
    padding: 0;
   
text-align: right;
}

.header .header-controls li a {
    display:
inline-block;
    padding: 0 20px;
    height: 60px;
    line-height:
60px;
    color: #6c6c6c;

    -webkit-transition: background 300ms,color
300ms;
    -moz-transition: background 300ms,color 300ms;
   
-o-transition: background 300ms,color 300ms;
    transition: background
300ms,color 300ms;
}

.header .header-controls li a:hover {
   
background-color: #f1f0f0;
    color: #484747;
}

.header .header-controls
li a i {
    font-size: 20px;
    line-height: 60px;
}

/* Wrapper
*/
.wrapper {
    margin-left: 300px;
}

.wrapper .content {
   
padding-top: 90px;
}


.panel {
    border-radius: 0;
    box-shadow: 0;
  
 border: 0;
}

.panel .panel-heading {
    position: relative;
    padding:
10px 20px 0px 20px;
    border-radius: 0;
    border: 0;
    font-size:
13px;
    text-transform: uppercase;
    font-weight:
600;
}

.panel-heading.border:after {
    content: '';
    display: block;

   height: 1px;
    left: 20px;
    right: 20px;
    bottom: 0;
   
margin-top: 10px;
    border-bottom: 1px solid rgba(0,0,0,.1);
}

.panel
.panel-body {
    padding: 20px;
}

/* tables */
table {
    width:
100%;
}

table tr th {
    background: none;
    border-bottom: 2px solid
#ddd;
}

table tr:hover ul.table-options {
    opacity: 1;
}

table tr td
{
    padding: 5px 0;
    padding-right: 15px;
    /*border-bottom: 1px
solid #e7e6e6;*/
}

table tr:nth-child(odd) {
    background:
#fbfafa;
}

table tr:first-child {
    background: none;
   
text-transform: uppercase;
}

.tabledit-input {
    box-shadow: 0;
   
border-radius: 0;
    border: 1px solid #58C3D6;

    box-shadow:  0
!important;
}

ul.table-options {
    margin: 0;
    padding: 0;
   
list-style: none;
    text-align: right;
    opacity: 0.2;

   
-webkit-transition: all 300ms;
    -moz-transition: all 300ms;
   
-o-transition: all 300ms;
    transition: all 300ms;
}

ul.table-options li
{
    display: inline-block;
}

ul.table-options li a {
    color:
#939292;
    padding: 0 15px 0 0;
}

ul.table-options li a:hover {
   
color: #495467;
}

ul.table-options li a i {
    font-size: 14px;
}

/*
Colors */
.panel-info .panel-heading {
    background-color: #52C3D7;
   
color: #fff;
}

.pill {
    display: block;
    width: 10px;
    height:
10px;
    border-radius: 100%;
}

.pill.pill-green { background: #9b3
}
.pill.pill-yellow { background: #fb5 }
.pill.pill-red { background: #f44
}

.btn-group .btn {
    border-radius: 0;
}

.btn {
    padding: 5px 10px
!important;
    border: 0;
}

.btn-danger {
    background: #D5675D;
   
color: #fff !important;
}



.widget, .widget .widget-body, .widget
.widget-footer, .widget .widget-header {
    position: relative
}

.widget
{
    margin-bottom: 20px;
    display: table;
    width: 100%;
   
padding: 15px;
    -webkit-border-radius: 1px;
    -moz-border-radius:
1px;
    border-radius: 1px
}

.widget .widget-body::after, .widget
.widget-body::before, .widget .widget-footer::after, .widget
.widget-footer::before, .widget .widget-header::after, .widget
.widget-header::before {
    content: " ";
    display:
table
}

.widget .widget-header {
    border-top-left-radius: 1px;
   
border-top-right-radius: 1px
}

.widget .widget-footer {
   
border-bottom-right-radius: 1px;
    border-bottom-left-radius:
1px
}

.widget p {
    margin: 0
}

.widget .widget-icon {
    display:
inline-block;
    vertical-align: middle;
    width: 40px;
    height:
40px;
    border-radius: 20px;
    text-align: center;
    font-size:
16px;
    line-height: 40px
}

.widget .widget-icon.pull-left {
   
margin-right: 15px
}

.widget .widget-icon.pull-right {
    margin-left:
15px
}

.widget .widget-bg-icon {
    position: absolute;
    right: 15px;

   top: 0;
    line-height: 80px;
    font-size: 60px
}

.widget
.widget-bg-icon i {
    -moz-opacity: .2;
    -khtml-opacity: .2;
   
-webkit-opacity: .2;
    opacity: .2;
    filter: alpha(opacity=.2 * 100);

   -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
   
-o-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
   
transform: rotate(-5deg)
}

.widget .widget-details {
    display:
table-cell;
    vertical-align: middle
}

.widget .widget-title {
   
display: block;
    font-size: 20px;
    line-height: 1;
    color:
#484848
}

.widget .widget-subtitle {
    font-size: 12px;
    color:
#7a7a7a
}

.widget .widget-stats {
    position: relative
}

.widget
.widget-row {
    display: table-row
}

.widget .stats-value {
    margin:
0;
    line-height: 1
}

.widget .stats-caption {
    font-size: 80%;
   
text-transform: uppercase
}

.widget .stats-change {
    position:
absolute;
    top: 0;
    right: 0;
    text-align:
right
}

.widget.widget-weather {
    padding-left: 0;
    padding-right:
0;
    text-align: center
}

.widget.widget-weather .climacon {
   
display: block;
    font-size: 20px;
    margin-top:
5px
}

.widget.widget-weather .widget-weather-icon {
    font-size:
70px
}

.widget.widget-weather .degree-value {
    margin-top: 5px;
   
margin-bottom: 5px
}

.widget.widget-weather .widget-weather-footer {
   
display: table;
    width: 100%;
    border-top: 1px solid rgba(0, 0, 0,
.05);
    padding-top: 25px
}

.widget.widget-weather
.widget-weather-footer>div {
    display: table-cell;
   
vertical-align: middle;
    text-align: center
}

.widget .percent {
   
position: relative
}

.widget .percent:after {
    position: absolute;
   
top: 0;
    content: '%';
    font-size: .5em;
    font-family: Georgia,
serif
}

.widget .widget-list {
    vertical-align: top
}

.widget
.widget-list .widget-list-item {
    position: relative;
    display:
block;
    padding: 10px 0;
    color: #616161;
    border-top: 1px solid
rgba(0, 0, 0, .05)
}

.widget>.list-group {
    margin-bottom:
0
}

.widget>.list-group .list-group-item {
    border-width: 1px 0;
   
border-radius: 0
}

.widget>.list-group:first-child
.list-group-item:first-child {
    border-top: 0;
   
border-top-left-radius: 1px;
    border-top-right-radius:
1px
}

.widget>.list-group:last-child .list-group-item:last-child {
   
border-bottom: 0;
    border-bottom-right-radius: 1px;
   
border-bottom-left-radius: 1px
}

.widget .widget-progress.progress {
   
margin: 10px 0;
    background-color: rgba(0, 0, 0, .2);
    height:
2px
}

.widget .widget-progress .progress-bar {
    background-color:
#fff
}

.widget.todo {
    padding: 0
}

.widget .todo-title {
    margin:
0 15px;
    padding: 10px 0;
    font-size: 20px;
    border-bottom: 1px
solid rgba(0, 0, 0, .05)
}

.jumbotron .jumbotron-sub-heading, .widget
.todo-body>ul {
    margin-bottom: 0
}

.widget .todo-body {
   
padding: 15px
}

.widget .todo-footer {
    background-color: rgba(0, 0, 0,
.05);
    padding: 10px 15px;
    border-bottom-right-radius: 1px;
   
border-bottom-left-radius: 1px
}

.widget-chart {
    position: relative;
 
  margin-bottom: 15px;
    display: block;
    width: 100%;
    padding:
15px;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
   
border-radius: 1px
}

.widget-chart::after, .widget-chart::before {
   
content: " ";
    display: table
}

.widget-chart::after {
   
clear: both
}

.bg-white {
    color: #616161;
    background-color:
#fff;
}

.bg-blue {
    color: #fff;
    background-color:
#2196f3;
}

textarea.form-control {
    border-radius: 0;
    outline:
none;
    border: 1px solid #e4e4e4;
    box-shadow: none;
   
-moz-box-shadow: none;
    -webkit-box-shadow: none;
    height: 100px;
   
resize: none;
    border-radius: 2px;
}

textarea.form-control:focus {
   
outline: none;
    box-shadow: none;
    -moz-box-shadow: none;
   
-webkit-box-shadow: none;
}

.table-form input, textarea {
   
border-radius: 2px;
    border: 1px solid #f1f1f1;
    padding: 2px 10px;


   box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow:
none;
    outline: none;
    width: 100%;
}

.table-form select {
   
border-radius: 2px;
    border: 1px solid #f1f1f1;
    padding: 2px 10px;


   box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow:
none;
    outline: none;
    background: #fff;
    -webkit-appearance:
none;
    width: 100%;
}

.btn {
    border-radius: 0;
    font-size:
12px;

    -webkit-transition: background 300ms,color 300ms;
   
-moz-transition: background 300ms,color 300ms;
    -o-transition:
background 300ms,color 300ms;
    transition: background 300ms,color
300ms;
}

.btn-info {
    background: none;
    border: 1px solid #48BBD1;

   color: #48BBD1;
    border-radius: 2px 2px 2px 2px;
}

.btn-info:hover
{
    border: 1px solid #48BBD1;
    color: #fff;
}

.list-actions {
   
list-style: none;
    margin: 0;
    padding: 0;
}

.list-actions li a {
  
 color: #7a7a7a;
}

.list-actions li a:hover {
    color: #2196f3;
   
text-decoration: none;
}

.list-actions li a i, .list-actions li i {
   
padding-right: 10px;
}

/* Paddings */
.padding-small { padding: 0 5px;
}
.with-padding { padding: 10px 20px; }

.margin-bottom-small {
margin-bottom: 10px; }
.margin-top-small { margin-top: 10px; }

.form-row
{
    border-bottom: 1px solid #f1f1f1;
    padding-bottom: 15px;
   
margin-bottom: 15px;
}


@media (max-width: 768px) {

    .sidebar {
display: none; }

    .wrapper { margin-left: 0; }

    .header {
       
padding-left: 0;
        margin-left: -0;
    }

}


/* LOGIN */

.login
.container {
    width: 400px;
    background: #fff;
    margin-top:
100px;
    box-shadow: 0 1px 2px rgba(0,0,0,.1);
    border-radius:
0;
}

.login .container .col-head {
    margin: 50px 0;
}

.login
.container h1 {
    font: 28px "Roboto", "Open Sans",
"Helvetica Neue", Helvetica, Arial, sans-serif;
   
text-transform: uppercase;
    color: #495468;
    margin-bottom:
0;
}

.login .container input {
    width: 100%;
    margin-bottom: 10px;
 
  padding: 8px 15px;
    border: 1px solid #e4e4e4;
    border-radius:
2px;
    color: #555;
}

.login .container input:focus  {
    outline:
none;
}

.login .container button {
    width: 100%;
    margin-bottom:
20px;
    padding: 8px 15px;
    border-radius: 2px;
    text-transform:
uppercase;
    font-weight: 600;

    background: #fff;
    border: 1px
solid #39CA74;
    color: #39CA74;

    -webkit-transition: all 300ms;
   
-moz-transition: all 300ms;
    -o-transition: all 300ms;
    transition:
all 300ms;
}

.login .container button:hover {
    background: #39CA74;
   
color: #fff;
}