From: Tomas Sedovic <[email protected]> This is the first step towards migrating to Compass[1] / Blueprint[2] for our CSS needs.
You need to install the `compass` gem. Run `rake gems:install`. This removes our CSS files from src/public/stylesheets and replaces them with SASS[3] alternatives. However, this is just a framework change -- UI stays the same for now. Note that this update makes changes to the stylesheet location: src/app/stylesheets/*.sass - the stylesheet sources in the SASS language src/stylesheets/compiled/ - CSS files generated from the SASS sources src/stylesheets/ - third-party CSS (like jQueryUI stuff) Compass watches the *.sass files for changes and updates the compiled CSS automatically. [1]: http://compass-style.org/ [2]: http://blueprintcss.org/ [3]: http://sass-lang.com/ --- .gitignore | 5 + src/app/stylesheets/components.sass | 415 ++++++++++++++++++++++++ src/app/stylesheets/dcloud.sass | 241 ++++++++++++++ src/app/stylesheets/layout.sass | 239 ++++++++++++++ src/app/stylesheets/screen.sass | 8 + src/app/views/layouts/aggregator.haml | 10 +- src/config/compass.rb | 11 + src/config/environment.rb | 1 + src/config/initializers/compass.rb | 5 + src/public/stylesheets/components.css | 565 --------------------------------- src/public/stylesheets/dcloud.css | 303 ------------------ src/public/stylesheets/ie.css | 1 - src/public/stylesheets/layout.css | 250 --------------- 13 files changed, 930 insertions(+), 1124 deletions(-) create mode 100644 src/app/stylesheets/components.sass create mode 100644 src/app/stylesheets/dcloud.sass create mode 100644 src/app/stylesheets/layout.sass create mode 100644 src/app/stylesheets/screen.sass create mode 100644 src/config/compass.rb create mode 100644 src/config/initializers/compass.rb delete mode 100644 src/public/stylesheets/components.css delete mode 100644 src/public/stylesheets/dcloud.css delete mode 100644 src/public/stylesheets/ie.css delete mode 100644 src/public/stylesheets/layout.css diff --git a/.gitignore b/.gitignore index 0444368..b70174c 100644 --- a/.gitignore +++ b/.gitignore @@ -20,6 +20,11 @@ database.yml *~ *.swp + +# compass compiled and temporary files +src/tmp +src/public/stylesheets/compiled + # databases automatically generated by Rails migrations development.sqlite3 production.sqlite3 diff --git a/src/app/stylesheets/components.sass b/src/app/stylesheets/components.sass new file mode 100644 index 0000000..f3e59cf --- /dev/null +++ b/src/app/stylesheets/components.sass @@ -0,0 +1,415 @@ +/* header style + +.header_logo + position: absolute + top: 10px + left: 10px + color: #B5B5B5 + span + text-transform: uppercase + margin-left: 5px + font-weight: bold + letter-spacing: -0.02em + +ul.nav + padding: 0 + padding-top: 1em + margin: 0 + white-space: nowrap + list-style-type: none + li + display: inline + font-size: 120% + padding: 3px 15px + color: #b3b3b3 + a + color: #313a3d + text-shadow: 0 1px 1px #FFF + &.selected + background: #cbd6db !important + border-radius: 16px + -moz-border-radius: 16px + -webkit-border-radius: 16px + -moz-box-shadow: 0 1px 1px #efefef + &:hover + background: #dedede + border-radius: 16px + -moz-border-radius: 16px + -webkit-border-radius: 16px + +.header_menu_wrapper + padding: 0 + margin: 35px 0 0 0 + float: left + height: 35px + width: 230px + background: #CCCCCC + +.header_menu + padding: 5px 0 0 10px + margin: 1px + background: #cccccc url(/images/bg_navtoolbar.png) repeat-x top + font-size: 110% + line-height: 1.5 + height: 26px + width: 216px + border: #FFFFFF solid 1px + +.header_menu_greybox + padding: 0 + margin: 35px 0 0 0 + float: left + height: 35px + width: 230px + background: #CCCCCC + +#hi-username + margin-right: 15px + float: left + +/* dashboard style + +.dashboard_column + float: left + width: 50% + +.dashboard_section_summary + background: #F2F2F2 + font-size: 0.8em + font-weight: bolder + margin: 10px 0 + padding: 5px 0px 5px 5px + p + display: inline + float: left + margin: 3px 0 3px 0 + img + &:first-child + padding-right: 5px + vertical-align: middle + float: right + +#getting_started_dashboard_section + background: #F2F2F2 + width: 850px + font-size: .9em + padding: 10px + margin: 10px 0px 10px 5px + border: 1px solid black + -moz-border-radius: 5px + -webkit-border-radius: 5px + p + padding-bottom: 5px + ul + width: 100% + height: 120px + padding-left: 7px + li + display: inline + float: left + width: 205px + padding: 0 7px 0 10px + border-right: 1px solid black + &:last-child + border-right: none + width: 150px + img + height: 91px + +#getting_started_links a + float: right + +#actions_dashboard_section + height: 100px + border: 1px solid #DDD + padding: 15px + margin: 5px 15px 15px 0px + -moz-border-radius: 5px + -webkit-border-radius: 5px + -moz-box-shadow: 0 1px 3px #ccc + h2 + padding: 0 + margin: 0 0 15px + letter-spacing: -0.02em + color: #4b5d63 + a + display: block + float: left + margin: 0px 15px 5px 0px + color: #0075c0 + text-decoration: underline + +#service_quality_dashboard_section + border: 1px solid #DDD + padding: 15px + margin: 0 15px 15px 0px + -moz-border-radius: 5px + -webkit-border-radius: 5px + -moz-box-shadow: 0 1px 3px #ccc + h2 + padding: 0 + margin: 0 0 15px + letter-spacing: -0.02em + color: #4b5d63 + +.provider_service_quality_graph + width: 100px + height: 50px + float: left + margin: 0px 5px 0px 5px + +.provider_service_quality_graph_summary + float: left + width: 60px + height: 15px + padding: 20px 0 24px 0 + +#key_indicators_dashboard_section + height: 220px + border: 1px solid #DDD + padding: 15px + margin: 0 15px 15px 0px + -moz-border-radius: 5px + -webkit-border-radius: 5px + -moz-box-shadow: 0 1px 3px #ccc + h2 + padding: 0 + margin: 0 0 15px + letter-spacing: -0.02em + color: #4b5d63 + ul + float: left !important + width: 195px + margin: 0 + padding: 0 + list-style: none + li + width: 80% + margin: 0 + padding-bottom: 10px + .count + float: right + .instance_graph + float: left + +#provider_instances_graph + width: 250px + float: left + +#quota_usage_dashboard_section + border: 1px solid #DDD + padding: 15px + margin: 5px 15px 15px 0px + -moz-border-radius: 5px + -webkit-border-radius: 5px + border-radius: 5px + -moz-box-shadow: 0 1px 3px #ccc + h2 + padding: 0 + margin: 0 0 15px + letter-spacing: -0.02em + color: #4b5d63 + +.account_quota_usage_graph_summary + padding: 15px 15px + display: inline + float: left + width: 45% + +.account_quota_usage_graph_key + float: right + vertical-align: top + font-size: 0.8em + text-align: right + width: 100% + height: 20px + padding: 0 15px 0 0 + +.account_quota_usage_history_graph + display: inline + float: left + margin-left: 10px + border: 1px solid black + width: 120px + height: 20px + +.account_quota_usage_current_graph + display: inline + float: left + margin: 0 0 10px 10px + width: 140px + height: 50px + +.pool_quota_usage_summary + display: inline + float: left + padding-left: 15px + width: 15% + +.pool_quota_usage_limit + display: inline + float: left + width: 33% + height: 25px + border: 1px solid black + margin-left: 17px + +.pool_quota_usage_instances + display: inline + float: left + width: 33% + height: 25px + border: 1px solid black + margin-left: 17px + margin-bottom: 15px + +#image_descriptor_nav + margin: 2px 0px 0 0px + width: 98% + h2 + height: 29px + font-weight: normal + padding: 10px 10px 0px 10px + margin: 0px + ul + margin: 20px + width: 100% + li + display: inline + float: left + width: 200px + border: 1px solid #ccc + border-top: none + border-right: none + padding-left: 10px + clear: none + font-size: 1em + h4 + margin-top: 0px + margin-bottom: 0.5em + p + margin-top: 0 + margin-bottom: 2em + color: #808080 + &.selected p + color: #000 + +#image_descriptor_form + border: none + padding: 1em 0 + background: none + width: 800px + margin: 20px + display: inline-block + input + width: auto + ul li + textarea, select, input[type=text] + width: 302px + float: left + border-top: 1px solid #7f7f7f + background: #fff + border-bottom: 1px solid #7f7f7f + border-left: 1px solid #000 + border-right: 1px solid #000 + -moz-border-radius: 4px + .description + float: left + width: 300px + font-size: 95% + padding-left: 1em + padding-bottom: 20px + label + color: #000 + font-size: 90% + font-weight: bold + &.plain + font-weight: normal + .pkglist + float: left + width: 380px + height: 300px + overflow: auto + background-color: white + border: 2px solid #ccc + -moz-border-radius: 6px + .submit + padding-top: 20px + .pkglist .action_link + float: right + width: 60px !important + color: blue + .closed_folder + background-image: url(/images/dir_closed.png) + background-repeat: no-repeat + .opened_folder + background-image: url(/images/dir_open.png) + background-repeat: no-repeat + .groupname + cursor: pointer + .hidden + display: none + .selection_list > li + padding-bottom: 10px + .group, .groupkgs + padding-left: 20px + .pkglist .ui-tabs + padding: 0 + .ui-tabs-panel + padding: 1em 0.5em + .left-pkglist .ui-widget-header + height: 26px + padding: 10px + .pkglist + ul.ui-tabs-nav + background-color: white + width: 379px + height: 44px + .select_repository + float: right + padding: 5px 0px 5px 0px + select + width: 150px + .selection_list + padding: 10px + .side_panel + width: 150px + float: left + border: 1px solid #ccc + margin: 5px + padding: 10px + min-height: 300px + label + float: none + font-size: 1em + padding: 5px + li + padding-bottom: 20px + .main_panel + width: 580px + float: left + border: 1px solid #ccc + margin: 5px + min-height: 300px + padding: 10px + .image_build_panel + border-bottom: 1px solid #ccc + padding: 10px + input + font-size: 1em + .expand_target_list_button + float: right + display: none + .target_list + li + border: 1px solid #ccc + margin: 20px + padding: 5px + .status, .actions + float: right + width: 100px + .empty + text-align: center + padding: 30px + +/* dcloud form redefines all input fields diff --git a/src/app/stylesheets/dcloud.sass b/src/app/stylesheets/dcloud.sass new file mode 100644 index 0000000..841dda4 --- /dev/null +++ b/src/app/stylesheets/dcloud.sass @@ -0,0 +1,241 @@ +form + border: none + margin: 0 + padding: 0 + display: inline-block + +fieldset + border: 3px solid #efeff0 + border-right: none + border-left: none + border-bottom: none + padding: 18px 0 10px 10px + +ul li input + border: 2px solid #becfe4 + color: #333 + display: block + float: left + outline-color: -moz-use-text-color + outline-style: none + outline-width: medium + padding: 3px + width: 302px + +legend + text-transform: uppercase + color: #9a9a9a + font-weight: bold + +input, select + font-family: "Lucida Grande","Luxi Sans","Bitstream Vera Sans","Trebuchet MS",helvetica,verdana,arial,sans-serif + font-size: 1.4em + +.fieldWithErrors + display: inline-block + padding: 3px + background: #fff7b2 + border: 3px solid #fff7b2 + +.errorExplanation + margin: 0 0 24px 0 + padding: 9px + background: #fff7b2 + color: #867a5e + -moz-border-radius: 3px + +#errorExplanation h2 + font-size: 14px + font-weight: bold + color: #867a5e + +.dcloud_form + background: #e8e8e8 + border: solid 8px #f5f5f5 + -moz-border-radius: 10px + -webkit-border-radius: 10px + margin-top: 54px + width: 550px + margin-left: auto + margin-right: auto + padding: 36px + h2 + font-size: 1.9em + font-weight: normal + color: #43728e + margin: 0 0 24px 0 + padding: 0 + ul + list-style-image: none + list-style-position: outside + list-style-type: none + margin: 0 + padding: 0 + label + display: block + float: left + padding: 3px 0 24px 0 + width: 175px + font-size: 1.4em + color: #616161 + span + display: block + float: left + width: 160px + font-size: .8em + color: #9a9a9a + li + clear: both + .txtfield + border: 2px solid #becfe4 + color: #333 + display: block + float: left + outline-color: -moz-use-text-color + outline-style: none + outline-width: medium + padding: 3px + width: 318px + .submit + float: right + display: inline + clear: both + +/* Styles for table + +#content_area table + width: 100% + border-collapse: collapse + th, td + border: 1px solid #e1e2e3 + border-right: 0 + border-left: 0 + padding: 0 + text-align: left + font-size: 14px + line-height: 24px + padding-left: 18px + th + background: none + border-top: none + a + display: block + text-decoration: none + &:hover + text-decoration: underline + +.actionlink + color: #0075c0 !important + line-height: 36px + font-size: 14px + padding-left: 18px + +ul#providers + a.actionlink + display: block + border-bottom: 1px solid #ccc + +.submit_link + background: none + border: 0 + text-decoration: underline + color: #0075c0 + line-height: 36px + font-size: 14px + padding-left: 10px + &:hover + cursor: pointer + +/* Styles for the left navigator + +#side + padding: 0 + width: 229px + a.actionlink + color: #0075c0 + line-height: 36px + font-size: 14px + padding-left: 10px + + +$provider_icon: "/images/icon_provider.png" +$pool_icon: "/images/icon_vmpool.png" + +ul + &#providers + list-style-type: none + margin: 0 + padding: 0 0 0 10px + li a + display: block + line-height: 36px + padding-left: 32px + &:hover + background: #efefef url($provider_icon) no-repeat 2px 50% + color: #000 + &#pools + list-style-type: none + line-height: 36px + margin: 0 + padding: 0 0 0 10px + li + border-bottom: none + a + display: block + line-height: 36px + padding-left: 32px + border-bottom: none + &:hover + background: #efefef url($pool_icon) no-repeat 2px 50% + color: #000 + +.providername, .poolname + font-size: 14px + +.providername + background: url($provider_icon) no-repeat 2px 50% + &.selected + background: #5599b8 url($provider_icon) no-repeat 2px 50% + color: #FFF + +.poolname + background: url($pool_icon) no-repeat 2px 50% + +.selected + background: #f2a922 + color: #FFF + +.poolname.selected + background: #5599b8 url($pool_icon) no-repeat 2px 50% + color: #FFF + +.instance_action_list + padding: 0 + li + padding: 0 0.3em + border-left: 1px solid #000 + display: inline + &.first + border-left: none + +#instances_table_wrapper + min-height: 0 + margin-bottom: 1em + +/* Style for button links + +a.button_link + border: 1px solid black + text-decoration: none + padding: 4px + margin-bottom: 3px + display: block + background: #666666 + color: white + -moz-border-radius: 5px + -webkit-border-radius: 5px + +#dashboard-tabs, #provider-tabs, #pool-tabs + border: none + +#dashboard-tabs ul, #provider-tabs ul, #pool-tabs ul + float: none diff --git a/src/app/stylesheets/layout.sass b/src/app/stylesheets/layout.sass new file mode 100644 index 0000000..7a0667f --- /dev/null +++ b/src/app/stylesheets/layout.sass @@ -0,0 +1,239 @@ +...@charset "UTF-8" + +html + font-size: small + min-width: 900px + min-height: 400px + +body + font-family: "Lucida Grande","Luxi Sans","Bitstream Vera Sans","Trebuchet MS",helvetica,verdana,arial,sans-serif + padding: 0 + margin: 0 + width: 100% + height: 100% + background-color: #333333 + font-size: 90% + +img + border-style: none + +a + color: #000000 + text-decoration: none + +h2, h3 + font-weight: normal + +#header + padding: 0 + margin: 0 + position: absolute + top: 0px + left: 0px + width: 100% + height: 90px + overflow: hidden + background: #535353 url(/images/bg_header.png) repeat-x top + +#side + padding: 5px 0 0 5px + margin: 0 + position: absolute + top: 70px + left: 0px + bottom: 0px + overflow: auto + width: 224px + background-color: #FFFFFF + border-right: 1px #CCCCCC solid + h3 + color: #999999 + font-size: 1em + margin: 1em 1em .5em 1em + text-transform: uppercase + +#main + padding: 0 + margin-left: 0 + position: absolute + top: 70px + left: 230px + right: 0px + bottom: 0px + overflow: auto + background-color: #FFFFFF + border-left: #CCCCCC solid 0px + +/* ----- Right side of Header -------- + +.header_info + padding: 10px 31px 0px 10px + margin: 0 + float: right + text-align: right + font-size: 100% + color: #B5B5B5 + a + font-weight: bold + &:link, &:active, &:visited, &:hover + color: #000 + text-decoration: none + +#textfield_effect + border-width: 1px + border-style: solid + border-color: #7A7A7A + padding-left: 5px + background: #4A4A4A + font-size: 100% + color: #FFFFFF + width: 100px + height: 16px + +/* ----- Blue Tabbed Navigation -------- + +.ui-tabs-nav + margin: 0 + padding: 0 + background: none + list-style-type: none + float: left + font-size: 110% + li + margin: 0 1px 0 1px + padding: 0 + float: left + a + float: left + padding: 0 15px 0 15px + color: #CCCCCC + text-decoration: none + line-height: 2.3 + height: 24px + text-align: center + background: none + &:hover + color: #FFFFFF + border-bottom: 5px solid #537585 + &:focus, &:active + outline-style: none + +.ui-tabs-selected a + color: #FFFFFF + outline-style: none + height: 24px + line-height: 1.6 + border-bottom: 5px solid #5599B8 + +.ui-tabs-hide + /*display:none; + +/* ----- PopUp Dialog -------- + +.dialog_title + background: #DEE7EB + padding: 15px + width: 600px + +.dialog_title_small + background: #DEE7EB + padding: 15px + min-width: 500px + +.header + font-size: 180% + line-height: 1.6 + +.dialog_body + overflow: auto + height: 350px + +.confirm_dialog_title + width: 400px + padding: 15px + font-size: 110% + background: url(/images/bg_warningMessage.png) top repeat-x + +.confirm_dialog_header + background: url(/images/icon_warning.png) top left no-repeat + padding: 0 0 0 45px + min-height: 36px + +.confirm_dialog_footer + height: 37px + text-align: right + padding: 5px 9px 0 0 + +.button + padding: 0 0 0 2px + float: right + +.button_left_blue + background: url(/images/button_left.png) no-repeat + width: 6px + height: 29px + float: left + +.button_middle_blue + background: url(/images/button_middle.png) repeat-x + height: 29px + float: left + color: #FFFFFF + line-height: 2.3 + font-size: 105% + display: block + +.button_right_blue + background: url(/images/button_right.png) no-repeat + width: 6px + height: 29px + float: left + +.button_middle_blue a + color: #FFFFFF + text-decoration: none + display: block + padding: 0 10px 0 10px + &:hover + color: #E7EFF6 + text-decoration: none + padding: 0 10px 0 10px + +.button_left_grey + background: url(/images/button_left_grey.png) no-repeat + width: 6px + height: 29px + float: left + +.button_middle_grey + background: url(/images/button_middle_grey.png) repeat-x + height: 29px + float: left + color: #FFFFFF + line-height: 2.3 + font-size: 105% + display: block + +.button_right_grey + background: url(/images/button_right_grey.png) no-repeat + width: 6px + height: 29px + float: left + +.button_middle_grey a + color: #FFFFFF + text-decoration: none + display: block + padding: 0 10px 0 10px + &:hover + color: #E7EFF6 + text-decoration: none + padding: 0 10px 0 10px + +.fieldWithErrors + background-color: #FFB2B2 + border: 3px solid #FFB2B2 + +.errorExplanation + color: #333333 + padding: 2px diff --git a/src/app/stylesheets/screen.sass b/src/app/stylesheets/screen.sass new file mode 100644 index 0000000..af6e229 --- /dev/null +++ b/src/app/stylesheets/screen.sass @@ -0,0 +1,8 @@ +/* This is a placeholder for the Compass/Blueprint stuff. It shows how it's + * supposed to work. Uncomment the last lines to enable the Compass Reset + * plugin and the Blueprint Typography. + +// @import compass/reset +// @import blueprint + +// +blueprint-typography diff --git a/src/app/views/layouts/aggregator.haml b/src/app/views/layouts/aggregator.haml index 0a187bb..8243ba1 100644 --- a/src/app/views/layouts/aggregator.haml +++ b/src/app/views/layouts/aggregator.haml @@ -5,11 +5,11 @@ %title Deltacloud = yield :title - = stylesheet_link_tag 'layout' - = stylesheet_link_tag 'components' - = stylesheet_link_tag 'dcloud' - /[if IE] - = stylesheet_link_tag 'ie' + + = stylesheet_link_tag 'compiled/screen.css', :media => 'screen, projection' + = stylesheet_link_tag 'compiled/layout' + = stylesheet_link_tag 'compiled/components' + = stylesheet_link_tag 'compiled/dcloud' = stylesheet_link_tag 'facebox' = stylesheet_link_tag 'jquery.ui-1.8.1/jquery-ui-1.8.1.custom.css' = stylesheet_link_tag 'jquery-datatables/demo_table_jui.css' diff --git a/src/config/compass.rb b/src/config/compass.rb new file mode 100644 index 0000000..3e772ab --- /dev/null +++ b/src/config/compass.rb @@ -0,0 +1,11 @@ +# This configuration file works with both the Compass command line tool and within Rails. +# Require any additional compass plugins here. +project_type = :rails +project_path = Compass::AppIntegration::Rails.root +# Set this to the root of your project when deployed: +http_path = "/" +css_dir = "public/stylesheets/compiled" +sass_dir = "app/stylesheets" +environment = Compass::AppIntegration::Rails.env +# To enable relative paths to assets via compass helper functions. Uncomment: +# relative_assets = true diff --git a/src/config/environment.rb b/src/config/environment.rb index 3b49fbc..7863031 100644 --- a/src/config/environment.rb +++ b/src/config/environment.rb @@ -50,6 +50,7 @@ Rails::Initializer.run do |config| config.gem "nokogiri", :version => ">= 1.4.0" config.gem "gnuplot" config.gem "scruffy" + config.gem "compass", :version => ">= 0.10.2" config.active_record.observers = :instance_observer, :task_observer # Only load the plugins named here, in the order given. By default, all plugins diff --git a/src/config/initializers/compass.rb b/src/config/initializers/compass.rb new file mode 100644 index 0000000..4375914 --- /dev/null +++ b/src/config/initializers/compass.rb @@ -0,0 +1,5 @@ +require 'compass' +rails_root = (defined?(Rails) ? Rails.root : RAILS_ROOT).to_s +Compass.add_project_configuration(File.join(rails_root, "config", "compass.rb")) +Compass.configure_sass_plugin! +Compass.handle_configuration_change! diff --git a/src/public/stylesheets/components.css b/src/public/stylesheets/components.css deleted file mode 100644 index 88ab05b..0000000 --- a/src/public/stylesheets/components.css +++ /dev/null @@ -1,565 +0,0 @@ -/* header style */ - -.header_logo { - position:absolute; - top:10px; - left:10px; - color: #B5B5B5; -} - -.header_logo span { - text-transform: uppercase; - margin-left: 5px; - font-weight: bold; - letter-spacing: -0.02em; -} - -ul.nav { - padding: 0; - padding-top: 1em; - margin: 0; - white-space: nowrap; - list-style-type: none; -} - -ul.nav li { - display: inline; - font-size: 120%; - padding: 3px 15px; - color : #b3b3b3; -} - -ul.nav li a { - color: #313a3d; - text-shadow: 0 1px 1px #FFF; -} - -ul.nav li.selected { - background: #cbd6db !important; - border-radius: 16px; - -moz-border-radius: 16px; - -webkit-border-radius: 16px; - -moz-box-shadow: 0 1px 1px #efefef; -} - -ul.nav li:hover { - background: #dedede; - border-radius: 16px; - -moz-border-radius: 16px; - -webkit-border-radius: 16px; -} - -.header_menu_wrapper { - padding: 0; - margin: 35px 0 0 0; - float:left; - height: 35px; - width: 230px; - background: #CCCCCC; -} - -.header_menu { - padding: 5px 0 0 10px; - margin: 1px; - background: #CCCCCC url(../images/bg_navtoolbar.png) repeat-x top; - font-size: 110%; - line-height:1.5; - height: 26px; - width: 216px; - border: #FFFFFF solid 1px; -} - -.header_menu_greybox { - padding: 0; - margin: 35px 0 0 0; - float:left; - height: 35px; - width: 230px; - background: #CCCCCC; -} - -#hi-username{ - margin-right: 15px; - float: left; -} - -/* dashboard style */ -.dashboard_column{ - float: left; - width: 50%; -} - -.dashboard_section_summary { - background: #F2F2F2; - font-size: 0.8em; - font-weight: bolder; - margin: 10px 0; - padding: 5px 0px 5px 5px; -} - -.dashboard_section_summary p { - display: inline; - float: left; - margin: 3px 0 3px 0; -} - -.dashboard_section_summary img:first-child { - padding-right: 5px; -} - -.dashboard_section_summary img { - vertical-align: middle; - float: right; -} - -#getting_started_dashboard_section { - background: #F2F2F2; - width: 850px; - font-size: .9em; - padding: 10px; - margin: 10px 0px 10px 5px; - border: 1px solid black; - -moz-border-radius: 5px; - -webkit-border-radius: 5px; -} - -#getting_started_dashboard_section p { - padding-bottom: 5px; -} - -#getting_started_dashboard_section ul { - width: 100%; - height: 120px; - padding-left: 7px; -} - -#getting_started_dashboard_section ul li{ - display: inline; - float: left; - width: 205px; - padding: 0 7px 0 10px; - border-right: 1px solid black; -} - -#getting_started_dashboard_section ul li:last-child { - border-right: none; - width: 150px; -} - -#getting_started_dashboard_section img { - height: 91px; -} - -#getting_started_links a { - float: right; -} - -#actions_dashboard_section { - height: 100px; - border: 1px solid #DDD; - padding: 15px; - margin: 5px 15px 15px 0px; - -moz-border-radius: 5px; - -webkit-border-radius: 5px; - -moz-box-shadow: 0 1px 3px #ccc; -} - -#actions_dashboard_section h2 { - padding: 0; - margin: 0 0 15px; - letter-spacing: -0.02em; - color: #4b5d63; -} - -#actions_dashboard_section a { - display: block; - float: left; - margin: 0px 15px 5px 0px; - color: #0075c0; - text-decoration: underline; -} - -#service_quality_dashboard_section { - border: 1px solid #DDD; - padding: 15px; - margin: 0 15px 15px 0px; - -moz-border-radius: 5px; - -webkit-border-radius: 5px; - -moz-box-shadow: 0 1px 3px #ccc; -} - -#service_quality_dashboard_section h2 { - padding: 0; - margin: 0 0 15px; - letter-spacing: -0.02em; - color: #4b5d63; -} - -.provider_service_quality_graph { - width: 100px; - height: 50px; - float: left; - margin: 0px 5px 0px 5px; -} - -.provider_service_quality_graph_summary { - float: left; - width: 60px; - height: 15px; - padding: 20px 0 24px 0; -} - -#key_indicators_dashboard_section { - height: 220px; - border: 1px solid #DDD; - padding: 15px; - margin: 0 15px 15px 0px; - -moz-border-radius: 5px; - -webkit-border-radius: 5px; - -moz-box-shadow: 0 1px 3px #ccc; -} - -#key_indicators_dashboard_section h2 { - padding: 0; - margin: 0 0 15px; - letter-spacing: -0.02em; - color: #4b5d63; -} - -#key_indicators_dashboard_section ul { - float: left !important; - width: 195px; - margin: 0; - padding: 0; - list-style: none; -} - -#key_indicators_dashboard_section ul li { - width: 80%; - margin: 0; - padding-bottom: 10px; -} - -#key_indicators_dashboard_section .count { - float: right; -} - -#key_indicators_dashboard_section .instance_graph { - float: left; -} - -#provider_instances_graph { - width: 250px; - float: left; -} - -#quota_usage_dashboard_section { - border: 1px solid #DDD; - padding: 15px; - margin: 5px 15px 15px 0px; - -moz-border-radius: 5px; - -webkit-border-radius: 5px; - border-radius: 5px; - -moz-box-shadow: 0 1px 3px #ccc; -} - -#quota_usage_dashboard_section h2 { - padding: 0; - margin: 0 0 15px; - letter-spacing: -0.02em; - color: #4b5d63; -} - -.account_quota_usage_graph_summary { - padding: 15px 15px; - display: inline; - float: left; - width: 45% -} - -.account_quota_usage_graph_key { - float: right; - vertical-align: top; - font-size: 0.8em; - text-align: right; - width: 100%; - height: 20px; - padding: 0 15px 0 0; -} - -.account_quota_usage_history_graph { - display: inline; - float: left; - margin-left: 10px; - border: 1px solid black; - width: 120px; - height: 20px; -} - -.account_quota_usage_current_graph { - display: inline; - float: left; - margin: 0 0 10px 10px; - width: 140px; - height: 50px; -} - -.pool_quota_usage_summary { - display: inline; - float: left; - padding-left: 15px; - width: 15%; -} - -.pool_quota_usage_limit { - display: inline; - float: left; - width: 33%; - height: 25px; - border: 1px solid black; - margin-left: 17px; -} - -.pool_quota_usage_instances { - display: inline; - float: left; - width: 33%; - height: 25px; - border: 1px solid black; - margin-left: 17px; - margin-bottom: 15px; -} - -#image_descriptor_nav { - margin: 2px 0px 0 0px; - width: 98%; -} - -#image_descriptor_nav h2 { - height : 29px; - font-weight : normal; - padding : 10px 10px 0px 10px; - margin : 0px; -} - -#image_descriptor_nav ul { - margin : 20px; - width: 100%; -} - -#image_descriptor_nav ul li { - display: inline; - float: left; - width: 200px; - border: 1px solid #ccc; - border-top : none; - border-right : none; - padding-left: 10px; - clear: none; - font-size: 1em; -} - -#image_descriptor_nav ul li h4 { - margin-top : 0px; - margin-bottom : 0.5em; -} - -#image_descriptor_nav ul li p { - margin-top : 0; - margin-bottom : 2em; - color : #808080; -} - -#image_descriptor_nav ul li.selected p { - color : #000; -} - -#image_descriptor_form { - border : none; - padding : 1em 0; - background : none; - width: 800px; - margin: 20px; - display: inline-block; -} - -/* dcloud form redefines all input fields */ -#image_descriptor_form input { - width: auto; -} - -#image_descriptor_form ul li textarea, -#image_descriptor_form ul li select, -#image_descriptor_form ul li input[type=text] { - width: 302px; - float : left; - border-top: 1px solid #7f7f7f; - background : #fff; - border-bottom: 1px solid #7f7f7f; - border-left : 1px solid #000; - border-right : 1px solid #000; - -moz-border-radius : 4px; -} - -#image_descriptor_form .description { - float : left; - width : 300px; - font-size : 95%; - padding-left : 1em; - padding-bottom: 20px; -} - -#image_descriptor_form label { - color : #000; - font-size : 90%; - font-weight : bold; -} - -#image_descriptor_form label.plain { - font-weight : normal; -} - -#image_descriptor_form .pkglist { - float: left; - width: 380px; - height: 300px; - overflow: auto; - background-color: white; - border: 2px solid #ccc; - -moz-border-radius: 6px; -} - -#image_descriptor_form .submit { - padding-top: 20px; -} - -#image_descriptor_form .pkglist .action_link { - float:right; - width: 60px !important; - color: blue; -} - -#image_descriptor_form .closed_folder { - background-image: url(/images/dir_closed.png); - background-repeat: no-repeat; -} - -#image_descriptor_form .opened_folder { - background-image: url(/images/dir_open.png); - background-repeat: no-repeat; -} - -#image_descriptor_form .groupname { - cursor: pointer; -} - -#image_descriptor_form .hidden { - display: none; -} - -#image_descriptor_form .selection_list > li { - padding-bottom: 10px; -} - -#image_descriptor_form .group { - padding-left: 20px; -} - -#image_descriptor_form .groupkgs { - padding-left: 20px; -} - -#image_descriptor_form .pkglist .ui-tabs { - padding : 0; -} - -#image_descriptor_form .pkglist .ui-tabs .ui-tabs-panel { - padding : 1em 0.5em; -} - -#image_descriptor_form .left-pkglist .ui-widget-header { - height : 26px; - padding : 10px; -} - -#image_descriptor_form .pkglist ul.ui-tabs-nav { - background-color: white; - width : 379px; - height : 44px; -} - -#image_descriptor_form .pkglist .select_repository { - float:right; - padding: 5px 0px 5px 0px; -} - -#image_descriptor_form .pkglist .select_repository select { - width:150px; -} - -#image_descriptor_form .selection_list { - padding: 10px; -} - -#image_descriptor_form .side_panel { - width: 150px; - float: left; - border: 1px solid #ccc; - margin: 5px; - padding: 10px; - min-height: 300px; -} - -#image_descriptor_form .side_panel label { - float: none; - font-size: 1em; - padding: 5px; -} - -#image_descriptor_form .side_panel li { - padding-bottom: 20px; -} - -#image_descriptor_form .main_panel { - width: 580px; - float: left; - border: 1px solid #ccc; - margin: 5px; - min-height: 300px; - padding: 10px; -} - -#image_descriptor_form .main_panel .image_build_panel { - border-bottom: 1px solid #ccc; - padding: 10px; -} - -#image_descriptor_form .main_panel .image_build_panel input { - font-size: 1em; -} - -#image_descriptor_form .expand_target_list_button { - float: right; - display: none; -} - -#image_descriptor_form .target_list li { - border: 1px solid #ccc; - margin: 20px; - padding: 5px; -} - -#image_descriptor_form .target_list li .status { - float: right; - width: 100px; -} - -#image_descriptor_form .target_list li .actions { - float: right; - width: 100px; -} - -#image_descriptor_form .target_list .empty { - text-align: center; - padding: 30px; -} diff --git a/src/public/stylesheets/dcloud.css b/src/public/stylesheets/dcloud.css deleted file mode 100644 index b643754..0000000 --- a/src/public/stylesheets/dcloud.css +++ /dev/null @@ -1,303 +0,0 @@ -/* Styles for forms */ -form { - border: none; - margin: 0; - padding: 0; - display: inline-block; -} - -fieldset { - border: 3px solid #efeff0; - border-right: none; - border-left: none; - border-bottom: none; - padding: 18px 0 10px 10px; -} - -ul li input { - border:2px solid #becfe4; - color:#333; - display:block; - float:left; - outline-color:-moz-use-text-color; - outline-style:none; - outline-width:medium; - padding:3px; - width:302px;} - -legend { - text-transform: uppercase; - color: #9a9a9a; - font-weight: bold; -} - -input, select { - font-family: "Lucida Grande","Luxi Sans","Bitstream Vera Sans","Trebuchet MS",helvetica,verdana,arial,sans-serif; - font-size: 1.4em; -} - -.fieldWithErrors { - display:inline-block; - padding: 3px; - background: #fff7b2; - border: 3px solid #fff7b2; -} - -.errorExplanation { - margin: 0 0 24px 0; - padding: 9px; - background: #fff7b2; - color: #867a5e; - -moz-border-radius: 3px; -} - -#errorExplanation h2 { - font-size: 14px; - font-weight: bold; - color: #867a5e; -} - -.dcloud_form { - background: #e8e8e8; - border: solid 8px #f5f5f5; - -moz-border-radius: 10px; - -webkit-border-radius: 10px; - margin-top: 54px; - width: 550px ; - margin-left: auto ; - margin-right: auto ; - padding: 36px; -} - -.dcloud_form h2 { - font-size: 1.9em; - font-weight: normal; - color: #43728e; - margin: 0 0 24px 0; - padding: 0; -} - -.dcloud_form ul { - list-style-image: none; - list-style-position: outside; - list-style-type: none; - margin: 0; - padding: 0; -} - -.dcloud_form ul label { - display: block; - float: left; - padding: 3px 0 24px 0; - width: 175px; - font-size: 1.4em; - color: #616161; -} - -.dcloud_form ul label span { - display: block; - float: left; - width: 160px; - font-size: .8em; - color: #9a9a9a; -} - -.dcloud_form ul li { - clear:both; -} - -.dcloud_form .txtfield { - border:2px solid #becfe4; - color:#333; - display:block; - float:left; - outline-color:-moz-use-text-color; - outline-style:none; - outline-width:medium; - padding:3px; - width:318px; -} - -.dcloud_form .submit { - float: right; - display: inline; - clear:both; -} - -/* Styles for table */ -#content_area table { - width:100%; - border-collapse: collapse; -} - -#content_area table th, #content_area table td { - border:1px solid #e1e2e3; - border-right: 0; - border-left: 0; - padding:0; - text-align:left; - font-size: 14px; - line-height: 24px; - padding-left: 18px; -} - -#content_area table th { - background: none; - border-top: none; -} - -#content_area table th a { - display: block; - text-decoration: none; -} - -#content_area table th a:hover { - text-decoration: underline; -} - -.actionlink { - color: #0075c0 !important; - line-height: 36px; - font-size: 14px; - padding-left: 18px; -} - -ul#providers + a.actionlink { - display: block; - border-bottom: 1px solid #ccc; -} - -.submit_link { - background: none; - border:0; - text-decoration: underline; - color: #0075c0; - line-height: 36px; - font-size: 14px; - padding-left: 10px; -} - -.submit_link:hover {cursor:pointer;} - - -/* Styles for the left navigator */ - -#side { - padding: 0; - width: 229px; -} - -#side a.actionlink { - color: #0075c0; - line-height: 36px; - font-size: 14px; - padding-left: 10px; -} - -ul#providers { - list-style-type: none; - margin: 0; - padding: 0 0 0 10px; -} - -ul#providers li a { - display: block; - line-height: 36px; - padding-left: 32px; -} - -ul#providers li a:hover { - background: #efefef url(../images/icon_provider.png) no-repeat 2px 50%; - color: #000; -} - -ul#pools { - list-style-type: none; - line-height: 36px; - margin: 0; - padding: 0 0 0 10px; -} - -ul#pools li { - border-bottom: none; -} - -ul#pools li a { - display: block; - line-height: 36px; - padding-left: 32px; - border-bottom: none; -} - -ul#pools li a:hover { - background: #efefef url(../images/icon_vmpool.png) no-repeat 2px 50%; - color: #000; -} - - -.providername, .poolname { - font-size: 14px; -} - -.providername { - background: url(../images/icon_provider.png) no-repeat 2px 50%; -} - -.providername.selected { - background: #5599B8 url(../images/icon_provider.png) no-repeat 2px 50%; - color: #FFF; -} - -.poolname { - background: url(../images/icon_vmpool.png) no-repeat 2px 50%; -} - -.selected { - background: #f2a922; - color: #FFF; -} - -.poolname.selected { - background: #5599B8 url(../images/icon_vmpool.png) no-repeat 2px 50%; - color: #FFF; -} - -.instance_action_list { - padding: 0; -} - -.instance_action_list li { - padding: 0 0.3em; - border-left: 1px solid #000; - display: inline; -} - -.instance_action_list li.first { - border-left: none; -} - -#instances_table_wrapper { - min-height: 0; - margin-bottom: 1em; -} - -/* Style for button links */ -a.button_link { - border: 1px solid black; - text-decoration : none; - padding : 4px; - margin-bottom: 3px; - display: block; - background: #666666; - color: white; - -moz-border-radius: 5px; - -webkit-border-radius: 5px; -} - -#dashboard-tabs, #provider-tabs, #pool-tabs{ - border: none; -} - -#dashboard-tabs ul, #provider-tabs ul, #pool-tabs ul{ - float: none; -} diff --git a/src/public/stylesheets/ie.css b/src/public/stylesheets/ie.css deleted file mode 100644 index 50a1ece..0000000 --- a/src/public/stylesheets/ie.css +++ /dev/null @@ -1 +0,0 @@ -/* ie only style here */ diff --git a/src/public/stylesheets/layout.css b/src/public/stylesheets/layout.css deleted file mode 100644 index 872440d..0000000 --- a/src/public/stylesheets/layout.css +++ /dev/null @@ -1,250 +0,0 @@ -...@charset "UTF-8"; - -/**************** -html elements - **/ - -html { - /*overflow: hidden;*/ - font-size: small; - min-width: 900px; - min-height: 400px; -} - -body { - /*overflow: hidden;*/ - font-family:"Lucida Grande","Luxi Sans","Bitstream Vera Sans","Trebuchet MS",helvetica,verdana,arial,sans-serif; - padding: 0; - margin: 0; - width: 100%; - height: 100%; - background-color:#333333; - font-size: 90%; -} - -img { - border-style: none; -} - - -a { color:#000000; text-decoration: none;} - -h2, h3 { - font-weight: normal; -} - -/************************** -oVirt layout components - **/ - -#header { - padding: 0; - margin: 0; - position: absolute; - top: 0px; - left: 0px; - width: 100%; - height: 90px; - overflow: hidden; - background:#535353 url(../images/bg_header.png) repeat-x top; -} - -#side { - padding: 5px 0 0 5px; - margin: 0; - position: absolute; - top: 70px; - left: 0px; - bottom: 0px; - overflow: auto; - width: 224px; - background-color:#FFFFFF; - border-right: 1px #CCCCCC solid; -} - -#side h3 { - color: #999999; - font-size: 1em; - margin: 1em 1em .5em 1em; - text-transform: uppercase; -} - - -#main { - padding: 0; - margin-left: 0; - position: absolute; - top: 70px; - left: 230px; - right: 0px; - bottom: 0px; - overflow: auto; - background-color:#FFFFFF; - border-left:#CCCCCC solid 0px; -} - -/* ----- Right side of Header -------- */ - -.header_info { - padding: 10px 31px 0px 10px; - margin: 0; - float: right; - text-align: right; - font-size: 100%; - color: #B5B5B5; -} -.header_info a { font-weight: bold; } -.header_info a:link { color: #000; text-decoration: none; } -.header_info a:active { color: #000; text-decoration: none; } -.header_info a:visited { color: #000; text-decoration: none; } -.header_info a:hover { color: #000; text-decoration: none; } - -#textfield_effect { - border-width: 1px; - border-style: solid; - border-color: #7A7A7A; - padding-left: 5px; - background: #4A4A4A; - font-size: 100%; - color: #FFFFFF; - width: 100px; - height: 16px; -} - -/* ----- Blue Tabbed Navigation -------- */ -.ui-tabs-nav { - margin:0; - padding: 0; - background: none; - list-style-type: none; - float: left; - font-size: 110%; -} -.ui-tabs-nav li { - margin: 0 1px 0 1px; - padding: 0; - float: left; -} -.ui-tabs-nav a { - float:left; - padding: 0 15px 0 15px; - color: #CCCCCC; - text-decoration: none; - line-height: 2.3; - height: 24px; - text-align: center; - background: none; - -} -.ui-tabs-nav a:hover {color:#FFFFFF; border-bottom: 5px solid #537585;} -.ui-tabs-nav a:focus, .ui-tabs-nav a:active {outline-style: none;} -.ui-tabs-selected a {color:#FFFFFF; outline-style: none; height: 24px; line-height:1.6; border-bottom: 5px solid #5599B8;} - -.ui-tabs-hide {/*display:none;*/} - -/* ----- PopUp Dialog -------- */ - - -.dialog_title { - background:#DEE7EB; - padding:15px; - width:600px; -} - -.dialog_title_small { - background:#DEE7EB; - padding:15px; - min-width: 500px; -} - -.header { - font-size: 180%; - line-height: 1.6; -} - -.dialog_body { - overflow: auto; - height: 350px; -} - -.confirm_dialog_title { - width:400px; - padding: 15px; - font-size: 110%; - background:url(../images/bg_warningMessage.png) top repeat-x; -} -.confirm_dialog_header { - background:url(../images/icon_warning.png) top left no-repeat; - padding: 0 0 0 45px; - min-height:36px; - -} -.confirm_dialog_footer { - height: 37px; - text-align:right; - padding: 5px 9px 0 0; -} - -.button { - padding: 0 0 0 2px; - float:right; - } - - .button_left_blue { - background:url(../images/button_left.png) no-repeat; - width: 6px; - height: 29px; - float: left; -} -.button_middle_blue { - background:url(../images/button_middle.png) repeat-x; - height: 29px; - float: left; - color:#FFFFFF; - line-height: 2.3; - font-size: 105%; - display:block; -} -.button_right_blue { - background:url(../images/button_right.png) no-repeat; - width: 6px; - height: 29px; - float: left; -} -.button_middle_blue a {color:#FFFFFF; text-decoration: none; display:block; padding: 0 10px 0 10px;} -.button_middle_blue a:hover {color:#E7EFF6; text-decoration:none; padding: 0 10px 0 10px;} - -.button_left_grey { - background:url(../images/button_left_grey.png) no-repeat; - width: 6px; - height: 29px; - float: left; -} -.button_middle_grey { - background:url(../images/button_middle_grey.png) repeat-x; - height: 29px; - float: left; - color:#FFFFFF; - line-height: 2.3; - font-size: 105%; - display:block; -} -.button_right_grey { - background:url(../images/button_right_grey.png) no-repeat; - width: 6px; - height: 29px; - float: left; -} -.button_middle_grey a {color:#FFFFFF; text-decoration: none; display:block; padding: 0 10px 0 10px;} -.button_middle_grey a:hover {color:#E7EFF6; text-decoration:none; padding: 0 10px 0 10px;} - - -.fieldWithErrors { - background-color:#FFB2B2; - border:3px solid #FFB2B2; -} - -.errorExplanation { - color:#333333; - padding: 2px; -} -- 1.7.1.1 _______________________________________________ deltacloud-devel mailing list [email protected] https://fedorahosted.org/mailman/listinfo/deltacloud-devel
