default.css 14 KB

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