1/* New Toaster custom css file for Bootstrap 3 */ 2 3/* Set required top body padding for the fixed top navbard */ 4body { padding-top: 50px; } 5 6/* Style the Yocto Project logo */ 7img.logo { height: 30px; vertical-align: bottom; } 8 9/* Style the Yocto Project logo and the Toaster name in the top navbar */ 10.toaster-navbar-brand { float: left; margin: 7px 25px 0 0; } 11.toaster-navbar-brand a.brand { color: #777; height: 50px; padding: 15px 5px 15px 15px; font-size: 20px; line-height: 25px; display: inline; } 12.toaster-navbar-brand > a { text-decoration: none; } 13.toaster-navbar-brand > a.brand:hover { color: #5e5e5e; } 14 15/* Style the debugging information in the top navbar */ 16.glyphicon-info-sign { color: #777; font-size: 16px; } 17.glyphicon-info-sign:hover { color: #999; cursor: pointer; } 18 19/* Override the negative right margin for the navbar-right class */ 20#new-project-button { margin-right: 0; } 21 22/* Increase popovers width to fit commit SHAs */ 23.popover { max-width: 350px; } 24 25/* Set a limit to popover height to handle long dependency lists */ 26.popover-content { max-height: 350px; overflow: scroll; } 27 28/* Set a limit to modal dialogs height to handle long variable history */ 29[id^="variable-"] .modal-content { max-height: 550px; overflow-y: scroll; } 30 31/* Make sure long values in variable history do not make the modal dialogs 32 * scroll horizontally */ 33[id^="variable-"] .modal-content p { word-break: break-all; } 34 35/* Increase bottom margin of definition lists inside popovers for the Toaster version information in the top navbar, and also inside the right hand columns of our details pages */ 36.popover-content dd, 37.item-info dd { margin-bottom: 15px; } 38 39/* Style the horizontal definition lists */ 40.dl-horizontal dt { width: 200px; line-height: 25px; } 41.dl-horizontal dd { margin-left: 220px; line-height: 25px; } 42 43/* Style our build results */ 44.build-result .progress { margin-bottom: 0; } 45.alert-link.build-warnings, 46.glyphicon-warning-sign.build-warnings { color: #8a6d3b; } 47.build-result .project-name { margin-top: -10px; margin-bottom: 5px; } 48.rebuild-btn, .cancel-build-btn { cursor: pointer; } 49 50/* Styles for the help information */ 51.get-help { color: #CCCCCC; } 52.get-help:hover { color: #999999; cursor: pointer; } 53.get-help-green { color: #3c763d; } 54.get-help-green:hover { color: #2b542c; cursor: pointer; } 55.get-help-blue { color: #3A87AD; } 56.get-help-blue:hover { color: #005580; cursor: pointer; } 57.get-help-red { color: #a94442; } 58.get-help-red:hover { color: #843534; cursor: pointer; } 59 60/* Styles for our table controls */ 61.form-control[id^="search-input-"], 62.form-control[id^="new-search-input-"], 63#search{ width: 30em; } 64#search-input-selectpackagestable, 65#search-input-packagestable, 66.form-control[id^="no-results-search-input-"] { width: 20em; } 67#edit-columns-button { margin-right: 30px; } 68.navbar-default[id^="table-chrome-"], 69#variables .navbar-default { background-color: transparent; } 70[id^="table-chrome-collapse-"] .navbar-form { margin-left: -15px; } 71.dropdown-menu.editcol { padding-left: 10px; min-width: 200px; } 72span[class^="remove-search-btn-"] { position: absolute; right: 5px; top: 0; bottom: 0; height: 14px; margin: auto; font-size: 14px; cursor: pointer; color: #777;} 73span[class^="remove-search-btn-"]:hover { color: #333; } 74#no-results-special-selectpackagestable .form-inline { margin-top: 20px; } 75[id^="pagination-"] .pagination, 76[id^="pagination-"] .navbar-form { margin-top: 0; } 77[id^="table-chrome-"] .navbar-form { margin-left: -15px; margin-right: -15px; } 78[id^="table-chrome-"] .detail-page-contols, 79#packages-built .detail-page-controls { padding-left: 0; padding-right: 0; } 80 81/* Override the default font-weight for labels: it's a bit too much */ 82label { font-weight: normal; } 83 84/* Firefox workaround for awkward fieldset styling. See http://getbootstrap.com/css/#tables-responsive */ 85@-moz-document url-prefix() { fieldset { display: table-cell; } } 86 87/* Table heading sortable / not sortable states */ 88thead > tr > th > a { font-weight: normal; } 89thead > tr > th > a.sorted { font-weight: bold; color: #333; } 90 91/* Give some extra space to the 'clear filter' buttons */ 92.tooltip .btn { margin: 5px; } 93 94/* In table headings, separate the help bubble from the column heading */ 95thead > tr > th > .glyphicon-question-sign { margin-right: 5px; } 96 97/* Style build outcome in tables, download, remove and change icons */ 98tbody > tr > td > .glyphicon-ok-circle, 99dd > .glyphicon-ok-circle { color: #3c763d; } 100tbody > tr > td > .glyphicon-minus-sign { color: #a94442; } 101.glyphicon-download-alt, 102.glyphicon-edit { color: #337ab7; } 103.failed_tasks .glyphicon-download-alt { margin-left: 5px; } 104.glyphicon-download-alt:hover, 105.glyphicon-edit:hover { color: #23527c; cursor: pointer; text-decoration: none; } 106.glyphicon-trash { color: #a94442; } 107.btn-danger > .glyphicon-trash, 108.btn-danger > .glyphicon-trash:hover { color: #fff; } 109.glyphicon-trash:hover { color: #843534; cursor: pointer; } 110 111/* Set the font size for icons inside headings, lead paragraphs and definition lists */ 112h1 > .glyphicon-edit, 113p.lead .glyphicon { font-size: 16px; } 114h2 > .glyphicon-question-sign, 115h3 > .glyphicon-question-sign, 116.heading-help { font-size: 14px; } 117 118/* Create a class for wells without background colour */ 119.well-transparent { background-color: transparent; } 120 121/* Create a class for the left navigation headers */ 122.nav-header { display: block; font-size: 12px; font-weight: bold; line-height: 20px; color: #999; text-transform: uppercase; margin-top: 20px !important; margin-bottom: 15px; padding-left: 15px; } 123 124/* Increase the tabs padding and margin in the project pages to fit the build form and the main content */ 125#project-topbar .nav-tabs > li > a { padding: 15px; } 126#project-topbar { margin-bottom: 20px; } 127 128/* Style the project name change form in the project pages */ 129#project-name-change-input { width: 20em; } 130 131/* Style the build form in the project pages */ 132#project-topbar .input-lg { width: 18em; } 133#project-topbar form .glyphicon { top: 15px; right: 4px; } 134#build-button { padding: 10px 30px; } 135 136/* Style the form links in the project page (all machines, all layers, etc) */ 137.form-link { margin-top: 10px; } 138 139/* Style the most built recipes list in the project page */ 140#freq-build-list .checkbox input[type="checkbox"] { position: relative; margin: 0 10px 0 0; vertical-align: middle; } 141#freq-build-list.lead > li { line-height: 25px; } 142#freq-build-list { margin-top: 20px; } 143#freq-build-list label { padding-left: 0; } 144#freq-build-btn { margin-top: 10px; } 145#no-most-built { margin-top: 20px; } 146 147/* Style the layers section in the project page and the layer dependencies in the import layer form */ 148#layer-container .form-inline { margin-top: 20px; } 149#layer-add-input { width: 17em; } 150ul.lead { margin-top: 20px; } 151ul.lead > li { line-height: 38px; } 152ul.lead .glyphicon-trash, 153ul.lead .glyphicon-trash { font-size: 16px; margin-left: 7px; } 154#layers-in-project-list .tooltip-inner { max-width: 600px; } 155#no-layers-in-project { margin-top: 20px; } 156#no-layers-in-project ul { margin-top: 10px; } 157 158/* Style the layer information icons in the layer details pages */ 159dd .glyphicon-trash, 160dd .glyphicon-edit { margin-left: 5px; } 161 162/* Style the forms and definition lists in the layer details pages */ 163#change-repo-form .form-control { width: 17em; } 164#information { margin-bottom: 5em; } 165#information dd > form { margin-bottom: 5px; margin-top: 5px; } 166#edit-layer-source-form fieldset { margin-top: 20px; } 167#directory-info, 168#git-repo-info { margin-top: 20px; } 169#layer-dir-path-in-details { width: 55%; } 170.add-deps .form-control { width: 15em; } 171 172/* Style the forms and definition lists in the BitBake variables page */ 173.variable-list { margin-bottom: 20px; } 174dd.variable-list form { margin-top: 10px; } 175#new-dl_dir, 176#filter-image_fstypes, 177#new-image_install, 178#new-sstate_dir, 179#new-imagefs_types { width: 20em; } 180#package_classes-select { width: 10em; } 181.scrolling { border: 1px solid #dddddd; height: 154px; overflow: auto; padding: 0 10px; width: 27.5%; margin-bottom: 10px; margin-top: 10px; } 182.scrolling.has-error { border-color: #a94442; } 183.help-block.text-danger { color: #a94442; } 184.tooltip-inner code { color: #fff; } 185.text-danger > code { color: #a94442; } 186dd.variable-list .glyphicon-question-sign { font-size: 14px; } 187dd.variable-list .glyphicon-edit { font-size: 16px; } 188dt .glyphicon-trash { margin-left: 5px; font-size: 16px; } 189#change-package_classes-form .checkbox { margin-top: 5px; } 190#variable-form h5 { margin-top: 0; } 191#variable-form .col-md-5 { padding-left: 45px; } 192 193/* Create a class for additional top margin that we can use in headings */ 194.top-air { margin-top: 40px; } 195 196/* Add some bottom margin to our h2's */ 197h2 { margin-bottom: 25px; } 198 199/* Style the typeahead */ 200.tt-menu { min-width: 400px; padding-bottom: 10px; } 201.tt-suggestion { padding: 5px 10px; } 202.tt-suggestion:hover, 203.tt-suggestion:active { background-color: #f5f5f5; cursor: pointer; } 204 205/* Style the import layer form controls*/ 206legend { border: none; } 207fieldset.fields-apart-from-layer-name { margin-top: 20px; } 208.radioLegend { margin-bottom: 0; } 209#layer-name-ctrl { margin-top: 20px; } 210#import-layer-name, 211#layer-subdir { width: 20%; } 212#layer-git-repo-url { width: 40%; } 213#local-dir-path { width: 45%; } 214#layer-dependency { width: 16em; } 215#layer-deps-list { margin-top: 0; } 216#form-actions { margin-bottom: 30px; } 217#duplicate-layer-info dl { margin-top: 10px; } 218#duplicate-layer-info dd { margin-bottom: 10px; } 219.help-inline { color: #737373; margin-left: 10px; } 220.radio-help { width: 50%; margin-left: 20px; } 221#repo-select div:nth-of-type(2) { margin-top: 15px; } 222 223/* Give some padding to the in-cell tooltips we use for notifications in tables */ 224td > .tooltip-inner, 225.inline-notification { padding: 10px; } 226 227/* Set sane widths for table columns */ 228#newcustomimagestable .get_description_or_summary, 229#imagerecipestable .get_description_or_summary, 230#softwarerecipestable .get_description_or_summary, 231#layerstable .layer__summary { width: 30%; } 232#recipestable .get_description_or_summary { width: 40%; } 233#machinestable .name { white-space: nowrap; } 234#machinestable .description { width: 45%; } 235#otable .variable_value, 236#otable .file { word-break: break-all; width: 25%; } 237[id^="variable-"] .file { word-break: break-all; } 238 239/* For the tables still not ported to ToasterTables, style the table headings 240 * that are not sortable */ 241th > span.text-muted { font-weight: normal; } 242 243/* Override the rather ugly default code styles */ 244code { color: #333; background-color: transparent; } 245 246/* Style our breadcrumbs */ 247.breadcrumb > li + li::before { content: none; } 248.breadcrumb { background-color: transparent; padding-left: 0; padding-top: 15px; } 249.breadcrumb .divider { color: #777; margin: 0 5px; } 250 251/* Reduce top margin for the page-header class */ 252.page-header { margin-top: 30px; } 253 254/* Set some space around the layer button in the layer details pages */ 255.tab-content { margin-top: 20px; } 256.tab-pane { margin-top: 20px; } 257 258/* Style the new window icons */ 259.glyphicon-new-window:hover { text-decoration: none; } 260.dl-horizontal > dd > .glyphicon-new-window { margin-left: 5px; } 261 262/* Style the special no results message in the custom image details page */ 263[id^="no-results-special-"] > .alert-warning > ol { margin-top: 10px; } 264 265/* style the loading spinner in the new custom image dialog */ 266#create-new-custom-image-btn [data-role="loading-state"] { 267 padding-left: 16px; 268} 269 270/* icon has to be absolutely positioned, otherwise the spin animation doesn't work */ 271#create-new-custom-image-btn [data-role="loading-state"] .icon-spinner { 272 position: absolute; 273 left: 26px; 274 bottom: 26px; 275} 276 277/* Style the content of modal dialogs */ 278.modal-footer { text-align: left; } 279.date-filter-controls { margin-top: 10px; } 280.date-filter-controls span { margin: 0 10px; } 281 282/* Style the fixed positioned notifications */ 283#loading-notification { position: fixed; z-index: 1101; top: 3%; left: 40%; right: 40%; -webkit-box-shadow: 0 0 10px #c09853; -moz-box-shadow: 0 0 10px #c09853; box-shadow: 0 0 10px #c09853; } 284 285.change-notification { position: fixed; z-index: 1101; top: 4%; left: 30%; right: 30%; -webkit-box-shadow: 0 0 10px #3a87ad; -moz-box-shadow: 0 0 10px #3a87ad; box-shadow: 0 0 10px #3a87ad; } 286 287.alert-success.change-notification { -webkit-box-shadow: 0 0 10px #3c763d; -moz-box-shadow: 0 0 10px #3c763d; box-shadow: 0 0 10px #3c763d; } 288 289/* Style the new project form */ 290#new-project-name { width: 33%; } 291#projectversion { width: 20%; margin-bottom: 10px; } 292 293/* Style the Toaster screenshot in the landing page */ 294.img-thumbnail { padding: 0; } 295 296/* Set the layout for the build information pages */ 297 298#nav { margin-top: 10px; } 299.page-header.build-data { margin-top: 0px; } 300.build-data > h1 { margin-top: 8px; } 301 302/* Style the build outcome information in the build dashboard */ 303.log { margin-left: 30px; } 304.show-warnings { font-weight: 700; color: #8a6d3b; } 305.show-warnings:hover { color: #66512c; } 306 307/* Style the errors and warnings information in the build dashboard */ 308#errors .panel-heading { background-color: transparent; color: #843534; } 309#warnings .panel-heading { background-color: transparent; color: #8a6d3b; } 310#warnings .panel-heading a:hover { color: #66512c; } 311h2.panel-title { font-size: 30px; } 312.alert-danger pre, 313.alert-warning pre { background-color: transparent; border: none; } 314.alert-danger pre { color: #a94442; } 315#error-info pre, 316#warning-info pre { white-space: pre-wrap; } 317.alert-warning pre { color: #8a6d3b; } 318 319/* Style the wells in the build dashboard */ 320.dashboard-section h3 { margin-top: 10px; margin-bottom: 20px; } 321.col-md-4.dashboard-section dd { margin-bottom: 10px; } 322 323/* Make the help in tables insivisble until you hover over the right cell */ 324.hover-help { visibility: hidden; } 325 326#add-remove-layer-btn { margin-bottom: 20px; } 327 328/* Blue hightlight animation for tasks and directory structure tables */ 329.highlight { -webkit-animation: target-fade 15s 1; -moz-animation: target-fade 15s 1; animation: target-fade 15s 1; } 330@-webkit-keyframes target-fade { 0% { background-color: #D9EDF7; } 25% { background-color: #D9EDF7; } 100% { background-color: white; } } 331@-moz-keyframes target-fade { 0% { background-color: #D9EDF7; } 25% { background-color: #D9EDF7; } 100% { background-color: white; } } 332@keyframes target-fade { 0% { background-color: #D9EDF7; } 25% { background-color: #D9EDF7; } 100% { background-color: white; } } 333 334/* Copied in from newer version of Font-Awesome 4.3.0 */ 335.fa-spin { 336 -webkit-animation: fa-spin 2s infinite linear; 337 animation: fa-spin 2s infinite linear; 338 display: inline-block; 339} 340.fa-pulse { 341 -webkit-animation: fa-spin 1s infinite steps(8); 342 animation: fa-spin 1s infinite steps(8); 343 display: inline-block; 344} 345 346@-webkit-keyframes fa-spin { 347 0% { 348 -webkit-transform: rotate(0deg); 349 transform: rotate(0deg); 350 } 351 100% { 352 -webkit-transform: rotate(359deg); 353 transform: rotate(359deg); 354 } 355} 356 357@keyframes fa-spin { 358 0% { 359 -webkit-transform: rotate(0deg); 360 -moz-transform: rotate(0deg); 361 transform: rotate(0deg); 362 } 363 100% { 364 -webkit-transform: rotate(359deg); 365 -moz-transform: rotate(359deg); 366 transform: rotate(359deg); 367 } 368} 369/* End copied in from newer version of Font-Awesome 4.3.0 */ 370