diff options
author | Thomas Park <thomas@thomaspark.me> | 2012-02-18 12:22:56 -0500 |
---|---|---|
committer | Thomas Park <thomas@thomaspark.me> | 2012-02-18 12:22:56 -0500 |
commit | c05d1fb37305fba16dd9fed123ecf667a18b9f8b (patch) | |
tree | f1f4083b95e0b3cc209b544c3d816292fad42aa5 /cyborg | |
parent | 4f86f04aeae7b6e52e60c28d16d138ed9137ac87 (diff) |
tweaked Cyborg alerts and form inputs
Diffstat (limited to 'cyborg')
-rw-r--r-- | cyborg/bootstrap.css | 88 | ||||
-rw-r--r-- | cyborg/bootstrap.min.css | 25 | ||||
-rwxr-xr-x | cyborg/bootswatch.less | 88 |
3 files changed, 172 insertions, 29 deletions
diff --git a/cyborg/bootstrap.css b/cyborg/bootstrap.css index 8809d712..4dc84a84 100644 --- a/cyborg/bootstrap.css +++ b/cyborg/bootstrap.css @@ -3517,11 +3517,11 @@ textarea { font-family: 'Droid Sans', sans-serif; color: #999999; } -.navbar .search-query::-moz-placeholder { +.navbar .search-query:-moz-placeholder { font-family: 'Droid Sans', sans-serif; color: #999999; } -.navbar .search-query:::-webkit-input-placeholder { +.navbar .search-query::-webkit-input-placeholder { font-family: 'Droid Sans', sans-serif; } blockquote { @@ -3561,12 +3561,20 @@ body { .navbar .brand { padding: 12px 20px 8px; } -.navbar .search-query { - background: #000000; +.navbar .search-query, .navbar .search-query:focus, .navbar .search-query.focused { + color: #adafae; + text-shadow: none; + background-color: #222; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } +.navbar .search-query :-moz-placeholder, .navbar .search-query:focus :-moz-placeholder, .navbar .search-query.focused :-moz-placeholder { + color: #999999; +} +.navbar .search-query::-webkit-input-placeholder, .navbar .search-query:focus::-webkit-input-placeholder, .navbar .search-query.focused::-webkit-input-placeholder { + color: #999999; +} .navbar .nav .active > a, .navbar .nav li > a:hover, .navbar .brand:hover { border-bottom: 3px solid #33b5e5; } @@ -3944,13 +3952,55 @@ select, .btn.disabled, .btn[disabled] { background-color: #adafae; } -.form-actions { - background: transparent; +input, textarea, select { + background-color: #ccc; + border-color: #bbb; + border-width: 2px; +} +input :-moz-placeholder, textarea :-moz-placeholder, select :-moz-placeholder { + color: #999999; +} +input::-webkit-input-placeholder, textarea::-webkit-input-placeholder, select::-webkit-input-placeholder { + color: #999999; } legend, label { color: #999999; border-bottom: 0px solid #222; } +input[disabled], +select[disabled], +textarea[disabled], +input[readonly], +select[readonly], +textarea[readonly], +.uneditable-input { + background-color: #555; + border-color: #444; +} +input:focus, +textarea:focus, +input.focused, +textarea.focused { + border-color: #52a8ec; + outline: 0; + outline: thin dotted \9; + /* IE6-9 */ + +} +input[type="file"]:focus, +input[type="radio"]:focus, +input[type="checkbox"]:focus, +select:focus { + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + outline: thin dotted #333; + outline: 5px auto -webkit-focus-ring-color; + outline-offset: -2px; +} +.form-actions { + background: transparent; +} .form-actions, footer.footer { border-top: 1px solid #222; } @@ -3962,9 +4012,15 @@ legend, label { border-radius: 0; } .label { + color: #eeeeee; +} +.label, .alert { background-color: #666666; } -.label-important { +.label:hover { + background-color: #4d4d4d; +} +.label-important, .alert-danger, .alert-error { background-color: #cc0000; } .label-important:hover { @@ -3976,15 +4032,29 @@ legend, label { .label-warning:hover { background-color: #995200; } -.label-success { +.label-success, .alert-success { background-color: #5c8a00; } .label-success:hover { background-color: #3a5700; } -.label-info { +.label-info, .alert-info { background-color: #007399; } .label-info:hover { background-color: #004d66; } +.alert, +.alert .alert-heading, +.alert-success, +.alert-success .alert-heading, +.alert-danger, +.alert-error, +.alert-danger .alert-heading, +.alert-error .alert-heading, +.alert-info, +.alert-info .alert-heading { + color: #eeeeee; + text-shadow: none; + border: none; +} diff --git a/cyborg/bootstrap.min.css b/cyborg/bootstrap.min.css index 2226334a..34920925 100644 --- a/cyborg/bootstrap.min.css +++ b/cyborg/bootstrap.min.css @@ -634,15 +634,16 @@ a.thumbnail:hover{border-color:#33b5e5;-webkit-box-shadow:0 1px 4px rgba(0, 105, h1,h2,h3,h4,h5,.navbar .brand,.navbar .nav-collapse.collapse .nav li>a{color:#eeeeee;font-weight:normal;text-shadow:none;} .navbar{font-size:16px;} label,input,button,select,textarea{font-family:'Droid Sans',sans-serif;color:#999999;} -.navbar .search-query::-moz-placeholder{font-family:'Droid Sans',sans-serif;color:#999999;} -.navbar .search-query:::-webkit-input-placeholder{font-family:'Droid Sans',sans-serif;} +.navbar .search-query:-moz-placeholder{font-family:'Droid Sans',sans-serif;color:#999999;} +.navbar .search-query::-webkit-input-placeholder{font-family:'Droid Sans',sans-serif;} blockquote{border-left:5px solid #33b5e5;}blockquote.pull-right{border-right:5px solid #33b5e5;} body{background-color:#060606;background-color:#121417;background-image:-moz-linear-gradient(top, #060606, #252a30);background-image:-ms-linear-gradient(top, #060606, #252a30);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#060606), to(#252a30));background-image:-webkit-linear-gradient(top, #060606, #252a30);background-image:-o-linear-gradient(top, #060606, #252a30);background-image:linear-gradient(top, #060606, #252a30);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#060606', endColorstr='#252a30', GradientType=0);} .page-header{border-bottom:2px solid #33b5e5;} .navbar-inner{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;border-bottom:2px solid #33b5e5;} .navbar .nav li>a{padding:13px 10px 8px;border-bottom:3px solid rgba(0, 0, 0, 0);} .navbar .brand{padding:12px 20px 8px;} -.navbar .search-query{background:#000000;-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px;} +.navbar .search-query,.navbar .search-query:focus,.navbar .search-query.focused{color:#adafae;text-shadow:none;background-color:#222;-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px;}.navbar .search-query :-moz-placeholder,.navbar .search-query:focus :-moz-placeholder,.navbar .search-query.focused :-moz-placeholder{color:#999999;} +.navbar .search-query::-webkit-input-placeholder,.navbar .search-query:focus::-webkit-input-placeholder,.navbar .search-query.focused::-webkit-input-placeholder{color:#999999;} .navbar .nav .active>a,.navbar .nav li>a:hover,.navbar .brand:hover{border-bottom:3px solid #33b5e5;} .navbar .nav>li>a{border-left:1px solid #222;} .dropdown-menu{background-color:#191A1A;border-left:solid 1px rgba(256, 256, 256, 0.1);-webkit-box-shadow:0 2px 4px rgba(0, 0, 0, 0.8);-moz-box-shadow:0 2px 4px rgba(0, 0, 0, 0.8);box-shadow:0 2px 4px rgba(0, 0, 0, 0.8);} @@ -698,16 +699,24 @@ input,textarea,select,.uneditable-input{color:#282828;} .btn .caret{border-top:4px solid black;opacity:0.3;} .btn-group>.dropdown-menu>li>a:hover{border-bottom:0;} .btn.disabled,.btn[disabled]{background-color:#adafae;} -.form-actions{background:transparent;} +input,textarea,select{background-color:#ccc;border-color:#bbb;border-width:2px;}input :-moz-placeholder,textarea :-moz-placeholder,select :-moz-placeholder{color:#999999;} +input::-webkit-input-placeholder,textarea::-webkit-input-placeholder,select::-webkit-input-placeholder{color:#999999;} legend,label{color:#999999;border-bottom:0px solid #222;} +input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly],.uneditable-input{background-color:#555;border-color:#444;} +input:focus,textarea:focus,input.focused,textarea.focused{border-color:#52a8ec;outline:0;outline:thin dotted \9;} +input[type="file"]:focus,input[type="radio"]:focus,input[type="checkbox"]:focus,select:focus{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;} +.form-actions{background:transparent;} .form-actions,footer.footer{border-top:1px solid #222;} .progress{background-color:#060606;background-image:none;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;} -.label{background-color:#666666;} -.label-important{background-color:#cc0000;} +.label{color:#eeeeee;} +.label,.alert{background-color:#666666;} +.label:hover{background-color:#4d4d4d;} +.label-important,.alert-danger,.alert-error{background-color:#cc0000;} .label-important:hover{background-color:#990000;} .label-warning{background-color:#cc6d00;} .label-warning:hover{background-color:#995200;} -.label-success{background-color:#5c8a00;} +.label-success,.alert-success{background-color:#5c8a00;} .label-success:hover{background-color:#3a5700;} -.label-info{background-color:#007399;} +.label-info,.alert-info{background-color:#007399;} .label-info:hover{background-color:#004d66;} +.alert,.alert .alert-heading,.alert-success,.alert-success .alert-heading,.alert-danger,.alert-error,.alert-danger .alert-heading,.alert-error .alert-heading,.alert-info,.alert-info .alert-heading{color:#eeeeee;text-shadow:none;border:none;} diff --git a/cyborg/bootswatch.less b/cyborg/bootswatch.less index 6c505489..950daa90 100755 --- a/cyborg/bootswatch.less +++ b/cyborg/bootswatch.less @@ -23,12 +23,12 @@ label, input, button, select, textarea { color: @gray; } -.navbar .search-query&::-moz-placeholder { +.navbar .search-query:-moz-placeholder { font-family: 'Droid Sans', sans-serif; color: @gray; } -.navbar .search-query&:::-webkit-input-placeholder { +.navbar .search-query::-webkit-input-placeholder { font-family: 'Droid Sans', sans-serif; } @@ -71,9 +71,14 @@ body { padding: 12px 20px 8px; } -.navbar .search-query { - background: @black; +.navbar .search-query, +.navbar .search-query:focus, +.navbar .search-query.focused { + color: @grayLight; + text-shadow: none; + background-color: #222; .border-radius(1px); + .placeholder(@gray); } .navbar .nav .active > a, @@ -402,16 +407,44 @@ input, textarea, select, .uneditable-input { // FORMS // ----------------------------------------------------- - -.form-actions { - background: transparent; -} +input, textarea, select { + background-color: #ccc; + border-color: #bbb; + border-width: 2px; + .placeholder(@gray); +} legend, label { color: @textColor; border-bottom: 0px solid #222; } +input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly], .uneditable-input { + background-color: #555; + border-color: #444; +} + +input:focus, +textarea:focus, +input.focused, +textarea.focused { + border-color: rgba(82,168,236,1); + outline: 0; + outline: thin dotted \9; /* IE6-9 */ +} + +input[type="file"]:focus, +input[type="radio"]:focus, +input[type="checkbox"]:focus, +select:focus { + .box-shadow(none); // override for file inputs + .tab-focus(); +} + +.form-actions { + background: transparent; +} + .form-actions, footer.footer { border-top: 1px solid #222; } @@ -427,12 +460,43 @@ legend, label { .border-radius(0); } -.label { background-color: darken(@gray, 20%); } -.label-important { background-color: @red; } +.label { + color: @grayLighter; +} + +.label, .alert { background-color: darken(@gray, 20%); } + +.label:hover { background-color: darken(@gray, 30%); } + + +.label-important, .alert-danger, +.alert-error { background-color: @red; } + .label-important:hover { background-color: darken(@red, 10%); } + .label-warning { background-color: darken(@orange, 10%); } + .label-warning:hover { background-color: darken(@orange, 20%); } -.label-success { background-color: darken(@green, 3%); } + +.label-success, .alert-success { background-color: darken(@green, 3%); } + .label-success:hover { background-color: darken(@green, 13%); } -.label-info { background-color: darken(@blueDark, 10%); } + +.label-info, .alert-info { background-color: darken(@blueDark, 10%); } + .label-info:hover { background-color: darken(@blueDark, 20%); } + +.alert, +.alert .alert-heading, +.alert-success, +.alert-success .alert-heading, +.alert-danger, +.alert-error, +.alert-danger .alert-heading, +.alert-error .alert-heading, +.alert-info, +.alert-info .alert-heading { + color: @grayLighter; + text-shadow: none; + border: none; +} |