github/vesta
1
0
Fork 0
mirror of https://github.com/serghey-rodin/vesta.git synced 2025-08-20 13:24:24 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improved css style

Browse source
This commit is contained in:
Serghey Rodin 2014-07-30 15:44:06 +03:00
commit 0797ddfddb
2 changed files with 337 additions and 86 deletions
Download patch file Download diff file Expand all files Collapse all files

12
web/css/jquery-custom-dialogs.css
View file

@ -35,7 +35,7 @@
----------------------------------*/ ----------------------------------*/
/* Overlays */ /* Overlays */
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #e6e6e6;} .ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #999;}
/*! /*!
@ -58,7 +58,7 @@
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; } .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; }
.ui-widget-content { border: 1px solid #aaaaaa; color: #222222; } .ui-widget-content { border: 1px solid #aaaaaa; color: #222222; }
.ui-widget-content a { color: #222222; } .ui-widget-content a { color: #222222; }
.ui-widget-header { background: #505050; color: #444; font-size: 10pt; font-weight: bold;} .ui-widget-header { background: #777; color: #444; font-size: 10pt; font-weight: bold;}
.ui-widget-header a { color: #222222; } .ui-widget-header a { color: #222222; }
/* Interaction Cues /* Interaction Cues
@ -75,14 +75,14 @@
/* Icons /* Icons
----------------------------------*/ ----------------------------------*/
/* states and images */ /* states and images
.ui-icon { width: 16px; height: 16px; } .ui-icon { width: 16px; height: 16px; }
.ui-state-default .ui-icon { background-image: url(images/ui-icons_888888_256x240.png); } .ui-state-default .ui-icon { background-image: url(images/ui-icons_888888_256x240.png); }
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(images/ui-icons_454545_256x240.png); } .ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(images/ui-icons_454545_256x240.png); }
.ui-state-active .ui-icon {background-image: url(images/ui-icons_454545_256x240.png); } .ui-state-active .ui-icon {background-image: url(images/ui-icons_454545_256x240.png); }
.ui-state-highlight .ui-icon {background-image: url(images/ui-icons_2e83ff_256x240.png); } .ui-state-highlight .ui-icon {background-image: url(images/ui-icons_2e83ff_256x240.png); }
.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(images/ui-icons_cd0a0a_256x240.png); } .ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(images/ui-icons_cd0a0a_256x240.png); }
*/
/* positioning */ /* positioning */
.ui-icon-carat-1-n { background-position: 0 0; } .ui-icon-carat-1-n { background-position: 0 0; }
@ -376,8 +376,8 @@
* http://docs.jquery.com/UI/Button#theming * http://docs.jquery.com/UI/Button#theming
*/ */
.ui-button { display: inline-block; position: relative; padding: 0; margin-right: .10pt; text-decoration: none !important; cursor: pointer; text-align: center; zoom: 1; overflow: visible; } /* the overflow property removes extra width in IE */ .ui-button { display: inline-block; position: relative; padding: 0; margin-right: .10pt; text-decoration: none !important; cursor: pointer; text-align: center; zoom: 1; overflow: visible; } /* the overflow property removes extra width in IE */
.ui-button { filter:chroma(color=#000000); cursor: pointer; color: #555; background-color: #ececec; border: 1px solid #e0e0e0; border-radius: 3px 3px 3px 3px; font-weight: bold; font-size: 14px; padding: 2px 16px; width: 108px; height: 34px; } .ui-button { filter:chroma(color=#000000); cursor: pointer; color: #fff; background-color: #f79b44; border: 1px solid #f79b44; border-radius: 3px 3px 3px 3px; font-weight: bold; font-size: 14px; padding: 2px 16px; width: 108px; height: 34px; }
.ui-button:hover { border: 1px solid #f79b44; background-color: #f79b44; color: #fff;} .ui-button:hover { border: 1px solid #9e9e9e; background-color: #9e9e9e; color: #fff;}
.ui-button:active { background-color: #ccc; color: #fff; border: 1px solid #ccc; } .ui-button:active { background-color: #ccc; color: #fff; border: 1px solid #ccc; }
.ui-button-icon-only { width: 2.2em; } /* to make room for the icon, a width needs to be set here */ .ui-button-icon-only { width: 2.2em; } /* to make room for the icon, a width needs to be set here */
button.ui-button-icon-only { width: 2.4em; } /* button elements seem to need a little more width */ button.ui-button-icon-only { width: 2.4em; } /* button elements seem to need a little more width */

395
web/css/main.css
View file

@ -1,6 +1,6 @@
body { body {
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
background-color: #e1e8e8; background-color: #75b0c5;
margin: 0; margin: 0;
padding: 0; padding: 0;
border: 0; border: 0;
@ -19,6 +19,9 @@ td {
padding: 0; padding: 0;
} }
label {
cursor: pointer;
}
.hidden { .hidden {
display: none; display: none;
@ -26,13 +29,33 @@ td {
.top { .top {
width: 1000px; width: 1000px;
position: fixed; background: #fff;
border-bottom: 1px solid #e1e8e8;
} }
.top.small .submenu{
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.10);
}
.top .nav-logo .logo-container{
background-color: #fff;
width: 167px;
}
.top.small-logo .nav-logo .logo-container{
position: fixed;
}
.top.small-logo .nav-logo img{
margin: 29px 0 -4px 10px;
padding: 0 0 10px;
}
.top-menu { .top-menu {
height: 24px; height: 24px;
background-color: #505050; background-color: #505050;
width: 1000px;
position: fixed;
z-index: 10;
} }
.top-link { .top-link {
@ -53,7 +76,7 @@ td {
.top-link:active { .top-link:active {
color: #333; color: #333;
background-color: #f1f1f1; background-color: #eee;
} }
.top-selected-link { .top-selected-link {
@ -65,7 +88,7 @@ td {
line-height: 22px; line-height: 22px;
padding: 0 20px 2px; padding: 0 20px 2px;
color: #333; color: #333;
background-color: #f0f0f0; background-color: #eee;
} }
.top-selected-link:hover { .top-selected-link:hover {
@ -75,7 +98,7 @@ td {
.top-selected-link:active { .top-selected-link:active {
color: #2361a1; color: #2361a1;
background-color: #f1f1f1; background-color: #eee;
} }
.top-user { .top-user {
@ -120,12 +143,21 @@ td {
background-color: #999; background-color: #999;
} }
.main-menu{
display: block;
float: left;
margin-bottom: 1px;
}
.nav-logo { .nav-logo {
float: left; float: left;
height: 111px; height: 139px;
width: 167px; width: 167px;
margin: 0; margin: 0 0 0px;
border-bottom: 1px solid #e1e8e8; }
.nav-logo img{
margin: 56px 0 0 10px;
} }
.nav-lnk { .nav-lnk {
@ -145,59 +177,96 @@ td {
width: 119px; width: 119px;
float:left; float:left;
cursor: pointer; cursor: pointer;
border-bottom: 1px solid #e1e8e8; padding-bottom: 2px;
} }
.nav-block:hover { .nav-block:hover {
height:108px; height:108px;
border-bottom: 4px solid #f79b44; padding-bottom: 0;
} }
.nav-selected-block { .nav-selected-block {
padding-bottom: 0;
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
margin: 0; margin: 0;
color: #2361a1; color: #4a82be;
height: 108px; height: 108px;
width: 119px; width: 119px;
float: left; float: left;
border-bottom: 4px solid #777777;
cursor: pointer; cursor: pointer;
} }
.nav-selected-block:hover { .nav-selected-block:hover {
height:108px; height:108px;
border-bottom: 4px solid #f79b44;
} }
.nav-selected-block:active { .nav-selected-block:active {
color: #f79b44; color: #f79b44;
} }
.nav-header { .top .nav-block .marker,
padding: 14px 0 0 6px; .top .nav-selected-block .marker {
margin: 0; -webkit-transition: background .1s ease-in-out;
letter-spacing: -1.0px; -moz-transition: background .1s ease-in-out;
font-size: 16pt; -o-transition: background .1s ease-in-out;
font-weight: bold; transition: background .1s ease-in-out;
padding: 0;
height: 4px;
margin: 12px 0 0 0;
width: 100%;
background-color: #fff;
} }
.nav-selected-header { .top .nav-selected-block .marker {
padding: 14px 0 0 6px; background-color: #777;
margin: 0; border-bottom: 1px solid #777;
letter-spacing: -1.0px; }
.top.small .marker{
position: fixed;
top: 66px;
width: 119px;
}
.nav-block:hover .marker{
background-color: #f79b44;
border-bottom: 1px solid #f79b44;
}
.nav-selected-block:hover .marker{
background-color: #f79b44;
border-bottom: 1px solid #f79b44;
}
.nav-header, .nav-selected-header {
background-color: #FFF;
font-size: 16pt; font-size: 16pt;
font-weight: bold; font-weight: bold;
height: 27px;
letter-spacing: -1px;
margin: 0;
padding: 16px 0 0 6px;
position: fixed;
top: 24px;
width: 113px;
z-index: 10;
}
.top.small .nav-header, .top.small .nav-selected-header{
height: 38px;
} }
.nav-counters { .nav-counters {
padding: 1px 0 0 6px; padding: 1px 0 0 6px;
margin: 0; margin: 65px 0 0 0;
height: 58px; height: 58px;
line-height: 1.4em; line-height: 1.4em;
font-size: 9pt; font-size: 9pt;
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
color: #333; color: #333;
decoration: none; decoration: none;
overflow: hidden;
opacity: 0.8;
} }
.submenu { .submenu {
@ -205,6 +274,19 @@ td {
vertical-align: middle; vertical-align: middle;
float: left; float: left;
width: 1000px; width: 1000px;
border-bottom: 1px solid #e1e8e8;
border-top: 1px solid #e1e8e8;
background-color: #fff;
margin-bottom: -1px;
}
.top.small .submenu{
position: fixed;
top: 82px;
}
.submenu .wrapper{
padding: 11px 10px 14px 10px;
} }
.submenu-button-block { .submenu-button-block {
@ -226,7 +308,7 @@ td {
} }
.submenu-button-select { .submenu-button-select {
width: 20px; width: 28px;
height: 28px; height: 28px;
cursor: pointer; cursor: pointer;
color: #555; color: #555;
@ -273,16 +355,26 @@ td {
} }
.submenu-button-main:hover { .submenu-button-main:hover {
border: 1px solid #999; border: 1px solid #aaa;
background-color: #999; background-color: #adaeae;
-webkit-transition: background .1s ease-in-out;
-moz-transition: background .1s ease-in-out;
-o-transition: background .1s ease-in-out;
transition: background .1s ease-in-out;
} }
.submenu-button-select:hover { .submenu-button-select:hover {
border: 1px solid #f79b44; border: 1px solid #adaeae;
background-color: #adaeae;
color: #fff;
} }
.submenu-button-search:hover { .submenu-button-search:hover {
border: 1px solid #f79b44; border: 1px solid #adaeae;
background-color: #adaeae;
color: #fff;
} }
.submenu-button-main:active { .submenu-button-main:active {
@ -308,7 +400,7 @@ td {
} }
.submenu-select-link { .submenu-select-link {
color: #6A6A6A; color: #6a6a6a;
display: block; display: block;
float: left; float: left;
font-size: 8pt; font-size: 8pt;
@ -331,21 +423,34 @@ td {
.submenu-select-dropdown { .submenu-select-dropdown {
font-family:Arial, Helvetica, sans-serif; font-family:Arial, Helvetica, sans-serif;
font-size: 9pt; font-size: 9pt;
color: #333333; color: #333;
display: block; display: block;
float: left; float: left;
height: 28px; height: 28px;
margin: 0 4px 0 0; margin: 0 4px 0 0;
min-width: 138px; min-width: 138px;
background-color: #FFFFFF; background-color: #fff;
border: 1px solid #CCCCCC; border: 1px solid #ccc;
border-radius: 3px 3px 3px 3px; border-radius: 3px 3px 3px 3px;
padding: 4px 5px; padding: 4px 5px;
} }
.submenu-select-dropdown:hover {
border: 1px solid #909090;
}
.submenu-select-dropdown:focus {
border: 1px solid #f79b44;
background-color: #fffcd2;
color: #333;
}
.submenu-select-dropdown option { .submenu-select-dropdown option {
padding: 5px 5px 5px 8px; padding: 5px 5px 5px 8px;
} }
.submenu-search-block { .submenu-search-block {
display: block; display: block;
text-align: right; text-align: right;
@ -366,11 +471,13 @@ td {
} }
.submenu-search-field:hover { .submenu-search-field:hover {
border: 1px solid #f79b44; border: 1px solid #909090;
} }
.submenu-search-field:focus { .submenu-search-field:focus {
border: 1px solid #f79b44; border: 1px solid #f79b44;
background-color: #FFFCD2;
color: #333;
} }
.bottom { .bottom {
@ -404,11 +511,11 @@ td {
} }
.vst { .vst {
padding: 4px 4px 0 4px; padding: 5px 7px 0 7px;
margin: 0; margin: 0;
text-decoration: none; text-decoration: none;
color: #999; color: #999;
font-size: 12pt; font-size: 11pt;
float: left; float: left;
} }
@ -422,11 +529,11 @@ td {
} }
.vst-selected { .vst-selected {
padding: 4px 4px 0 4px; padding: 5px 7px 0 7px;
margin: 0; margin: 0;
text-decoration: none; text-decoration: none;
color: #2361a1; color: #2361a1;
font-size: 12pt; font-size: 11pt;
float: left; float: left;
} }
@ -449,21 +556,18 @@ td {
font-size: 12pt; font-size: 12pt;
text-align: left; text-align: left;
vertical-align:top; vertical-align:top;
margin: 0; margin: 1px 0 0 0;
behavior:url("/css/csshover3.htc"); behavior:url("/css/csshover3.htc");
background-color: #fff
} }
.data a { .data a {
text-decoration: none; text-decoration: none;
} }
.data-row:hover {
margin: 0;
background-color: #f0f0f0;
}
.data-row:active { .data-row.selected, .data-row.selected.suspended{
background-color: #f7f7d8; background-color: #e4e9e9;
} }
.datarowhover { .datarowhover {
@ -530,7 +634,7 @@ td {
.data-date { .data-date {
letter-spacing: 0.3em; letter-spacing: 0.3em;
font-size: 8pt; font-size: 8pt;
color: #6A6A6A color: #6a6a6a
} }
.data-active { .data-active {
@ -550,26 +654,36 @@ td {
height: 16px; height: 16px;
border-left: 1px solid #d3d3d3; border-left: 1px solid #d3d3d3;
font-size: 8pt; font-size: 8pt;
padding: 2px 12px 1px 6px; padding: 6px 11px 2px;
letter-spacing: 0.1em; letter-spacing: 0.1em;
color: #2361a1; color: #3e7c91;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
} }
.data-controls.edit{
font-weight: bold;
letter-spacing: 0;
}
.data-controls:hover { .data-controls:hover {
color: #fff; color: #fff;
background-color: #f79b44; background-color: #f79b44;
} }
.data-controls:active { .data-controls:active {
background-color: #999 background-color: #999;
} }
.data-controls img { .data-controls img {
border: 0px; border: 0px;
} }
.ch-toggle {
cursor: pointer;
}
.data-count { .data-count {
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
color: #505050; color: #505050;
@ -599,6 +713,14 @@ td {
padding: 1px 0 2px 0; padding: 1px 0 2px 0;
} }
.suspended .domain {
color: #777;
}
.domain.hostname {
font-size: 16pt;
}
.cron { .cron {
color: #222; color: #222;
font-size: 18px; font-size: 18px;
@ -675,17 +797,17 @@ td {
.vst-ok { .vst-ok {
font-size: 12pt; font-size: 12pt;
color: #62a358; color: #33691e;
padding: 4px; padding: 4px;
} }
.vst-ok a { .vst-ok a {
color: #58934f; color: #33691e;
text-decoration: none;
} }
.vst-ok a:hover { .vst-ok a:hover {
text-decoration: underline; background: #f79b44;
color: #fff;
} }
.vst-error { .vst-error {
@ -713,11 +835,13 @@ td {
} }
.vst-textinput:hover { .vst-textinput:hover {
border: 1px solid #f79b44; border: 1px solid #909090;
} }
.vst-textinput:focus { .vst-textinput:focus {
border: 1px solid #f79b44; border: 1px solid #f79b44;
background-color: #fffcd2;
color: #333;
} }
.vst-textinput:disabled { .vst-textinput:disabled {
@ -737,17 +861,23 @@ td {
} }
.vst-input:hover { .vst-input:hover {
border: 1px solid #f79b44; border: 1px solid #909090;
} }
.vst-input:focus { .vst-input:focus {
border: 1px solid #f79b44; border: 1px solid #f79b44;
background-color: #fffcd2;
color: #333;
} }
.vst-input:disabled { .vst-input:disabled {
background-color: #f1f1f1; background-color: #f1f1f1;
} }
.vst-input.long{
width: 580px;
}
.vst-list { .vst-list {
font-family:Arial, Helvetica, sans-serif; font-family:Arial, Helvetica, sans-serif;
font-size: 12pt; font-size: 12pt;
@ -767,7 +897,7 @@ td {
padding: 5px; padding: 5px;
font-size: 12pt; font-size: 12pt;
border: 1px solid #f7f6ed; border: 1px solid #f7f6ed;
margin: 2px 6px 0 0; margin: 2px 6px 0 3px;
} }
.vst-checkbox:hover { .vst-checkbox:hover {
@ -775,23 +905,23 @@ td {
} }
.button { .button {
filter:chroma(color=#000000); filter:chroma(color=#000);
cursor: pointer; cursor: pointer;
border-radius: 3px 3px 3px 3px; border-radius: 3px 3px 3px 3px;
font-size: 14px; font-size: 13px;
font-weight: bold; font-weight: bold;
padding: 2px 16px; padding: 1px 16px 3px 16px;
width: 108px; width: 108px;
height: 34px; height: 34px;
color: #555; color: #fafafa;
background-color: #fff; border: 1px solid #f79b44;
border: 1px solid #ccc; background-color: #f79b44;
} }
.button:hover { .button:hover {
color: #fff; color: #fff;
border: 1px solid #f79b44; border: 1px solid #999;
background-color: #f79b44; background-color: #999;
} }
.button:active { .button:active {
@ -800,7 +930,7 @@ td {
} }
.login-button { .login-button {
filter:chroma(color=#000000); filter:chroma(color=#000);
cursor: pointer; cursor: pointer;
border-radius: 3px 3px 3px 3px; border-radius: 3px 3px 3px 3px;
font-size: 14px; font-size: 14px;
@ -809,14 +939,13 @@ td {
width: 108px; width: 108px;
height: 34px; height: 34px;
color: #fff; color: #fff;
background-color: #999; background-color: #f79b44;
border: 1px solid #999; border: 1px solid #f79b44;
} }
.login-button:hover { .login-button:hover {
color: #fff; border: 1px solid #adaeae;
border: 1px solid #f79b44; background-color: #adaeae;
background-color: #f79b44;
} }
.login-button:active { .login-button:active {
@ -919,10 +1048,132 @@ td {
.error { .error {
font-size: 10pt; font-size: 10pt;
color: #dE6c5d; color: #de6c5d;
} }
.hint { .hint {
font-size: 14pt; font-size: 14pt;
color: #7fa1cb; color: #7fa1cb;
} }
.step-top {
padding-top: 42px;
}
.step-bottom {
padding-bottom: 20px;
}
.step-left {
padding-left: 50px;
}
.input-label {
padding-top: 20px;
}
.additional-control {
margin-left: 20px;
color: #2361a1;
border-bottom: 1px solid #f79b44;
font-size: 10pt;
letter-spacing: 0.1em;
cursor: pointer;
}
.additional-control:hover {
color: #7fa1cb;
}
.additional-control:active {
color: #fff;
background-color: #f79b44;
}
.ftp-path-prefix {
color: #848483;
font-size: 13px;
}
.ftp-path-value {
color: #333;
font-size: 13px;
font-weight: bold;
}
.data .suspended {
background: url(/images/disabled_bg.png);
}
.timer-container .refresh-timer {
border: 2px solid #c0d4a6;
border-radius: 14px;
height: 14px;
width: 14px;
margin: 10px;
float: left;
margin: 7px 10px 0 0;
}
.timer-container .refresh-timer.paused{
border: 2px solid #9f9f9f;
}
.timer-container .refresh-timer.paused .loader-half.right,
.timer-container .refresh-timer.paused .loader-half.dark{
background-color: #9F9F9F;
}
.timer-container .loader-half {
border-radius: 0 14px 14px 0;
height: 14px;
width: 7px;
float: left;
}
.timer-container .loader-half.left {
border-radius: 14px 0 0 14px;
background-color: #fff;
}
.timer-container .loader-half.right {
margin-left: 7px;
background-color: #c0d4a6;
}
.timer-container .loader-half.dark{
background-color: #c0d4a6;
}
.timer-container .movement{
float: left;
width: 14px;
height: 14px;
position: absolute;
}
.timer-container .movement.left {
z-index: 10;
}
.timer-container .movement.right{
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
}
.timer-container .timer-button{
cursor: pointer;
text-decotation: underline;
margin: 11px 0 0 38px;
width: 15px;
float: left;
height: 10px;
}
.timer-container .timer-button.pause{
background: url(/images/pause.png) no-repeat ;
}
.timer-container .timer-button.play{
background: url(/images/start.png) no-repeat;
}