application.less 42 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325
  1. /**
  2. * Licensed to the Apache Software Foundation (ASF) under one
  3. * or more contributor license agreements. See the NOTICE file
  4. * distributed with this work for additional information
  5. * regarding copyright ownership. The ASF licenses this file
  6. * to you under the Apache License, Version 2.0 (the
  7. * "License"); you may not use this file except in compliance
  8. * with the License. You may obtain a copy of the License at
  9. *
  10. * http://www.apache.org/licenses/LICENSE-2.0
  11. *
  12. * Unless required by applicable law or agreed to in writing, software
  13. * distributed under the License is distributed on an "AS IS" BASIS,
  14. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  15. * See the License for the specific language governing permissions and
  16. * limitations under the License.
  17. */
  18. .gradient(@color: #FAFAFA, @start: #FFFFFF, @stop: #F2F2F2) {
  19. background: @color;
  20. background: -webkit-gradient(linear, left top, left bottom, color-stop(0, @start), color-stop(1, @stop));
  21. background: -ms-linear-gradient(top, @start, @stop);
  22. background: -moz-linear-gradient(center top, @start 0%, @stop 100%);
  23. }
  24. html, body {
  25. height: 100%;
  26. }
  27. #wrapper {
  28. min-height: 100%;
  29. }
  30. @footer-height: 100px;
  31. #main {
  32. overflow: visible;
  33. padding-bottom: @footer-height;
  34. }
  35. footer {
  36. position: relative;
  37. border-top: 1px solid #e5e5e5;
  38. padding: 30px 0;
  39. background-color: #fff;
  40. color: #666666;
  41. margin-top: -1 * @footer-height;
  42. height: @footer-height - 60px;
  43. }
  44. #content {
  45. padding: 20px 0;
  46. }
  47. #top-nav {
  48. .navbar {
  49. font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  50. }
  51. .navbar {
  52. .brand {
  53. color: #666666;
  54. display: block;
  55. font-size: 16px;
  56. font-weight: normal;
  57. line-height: 1;
  58. margin-left: 0;
  59. margin-top: 3px;
  60. padding: 14px 5px 14px 10px;
  61. }
  62. .brand.cluster-name {
  63. padding-left: 0px;
  64. }
  65. }
  66. /*
  67. .navbar-inner {
  68. background: linear-gradient(#FAFAFA, #EAEAEA) repeat scroll 0 0 transparent;
  69. background: -moz-linear-gradient(#FAFAFA, #EAEAEA) repeat scroll 0 0 transparent;
  70. background: -webkit-linear-gradient(#FAFAFA, #EAEAEA) repeat scroll 0 0 transparent;
  71. border-radius: 0;
  72. border: 1px solid #bbb;
  73. border-width: 0 0 1px 0;
  74. }
  75. */
  76. .navbar .nav {
  77. float: none;
  78. overflow: hidden;
  79. }
  80. .navbar .nav .active > a, .navbar .nav .active > a:hover {
  81. /*background-color: #999999;*/
  82. color: #FFFFFF;
  83. text-decoration: none;
  84. }
  85. .navbar .nav > li > a {
  86. border-radius: 8px;
  87. -webkit-border-radius: 8px;
  88. -moz-border-radius: 8px;
  89. font-size: 13px;
  90. font-weight: bold;
  91. line-height: 19px;
  92. margin: 6px 10px 6px 0;
  93. padding: 8px 14px;
  94. text-decoration: none;
  95. text-shadow: none;
  96. }
  97. .navbar .nav > li > a:hover {
  98. background-color: transparent;
  99. color: #999999;
  100. text-decoration: none;
  101. }
  102. .navbar #logo {
  103. float: left;
  104. padding-top: 7px;
  105. height: 36px;
  106. }
  107. .navbar .nav > li.right {
  108. float: right;
  109. }
  110. }
  111. #main-nav {
  112. .brand {
  113. font-size: 17px;
  114. border-right: 1px solid rgba(0, 0, 0, 0.08);
  115. color: #555555;
  116. }
  117. .operations-count {
  118. background-color: #006DCC;
  119. }
  120. li {
  121. font-size: 15px;
  122. border-left: 1px solid #fefefe;
  123. border-right: 1px solid #f0f0f0;
  124. text-align: center;
  125. }
  126. li.span2 {
  127. padding: 0;
  128. margin: 0;
  129. width: 140px;
  130. }
  131. margin-bottom: 20px;
  132. }
  133. .pre-scrollable {
  134. overflow-y: auto;
  135. }
  136. @green: #69BE28;
  137. @blue: #0572ff;
  138. h1 {
  139. color: @green;
  140. }
  141. .login.well.span4 {
  142. margin: 20px auto;
  143. padding: 25px;
  144. float: none;
  145. }
  146. .login {
  147. h2 {
  148. margin-top: 0;
  149. margin-bottom: 20px;
  150. }
  151. .btn {
  152. margin-top: 15px;
  153. }
  154. }
  155. .hide {
  156. visibility: hidden;
  157. }
  158. .show {
  159. visibility: visible;
  160. }
  161. /***************
  162. * Ambari wide icon colors
  163. ***************/
  164. .icon-ok {
  165. color: #5AB400;
  166. }
  167. .icon-warning-sign {
  168. color: #FDB82F;
  169. }
  170. .icon-empty {
  171. height: 21px;
  172. display: inline-block;
  173. width: 8px;
  174. }
  175. .icon-caret-right {
  176. min-width:8px;
  177. padding-top: 2px;
  178. }
  179. .icon-caret-left {
  180. min-width:8px;
  181. padding-top: 2px;
  182. }
  183. .icon-remove {
  184. color: #FF4B4B;
  185. }
  186. .tooltip {
  187. z-index: 1050;
  188. }
  189. .tooltip-inner {
  190. text-align: left;
  191. }
  192. .popover {
  193. z-index: 1050;
  194. }
  195. #installer, #add-host, #add-service {
  196. h2 {
  197. margin-top: 0;
  198. }
  199. .btn.btn-success {
  200. /* float: right; */
  201. }
  202. .btn-area {
  203. margin-top: 20px;
  204. }
  205. #installer-content, #add-host-content, #add-service-content {
  206. padding: 25px;
  207. background-color: #fff;
  208. }
  209. .nav-header {
  210. font-size: 13px;
  211. padding-left: 0;
  212. }
  213. #installOptions {
  214. .sshKey-file-view {
  215. width: 486px;
  216. height: 200px;
  217. overflow-y: auto;
  218. border: 1px solid #ccc;
  219. margin-top: 5px;
  220. padding: 8px;
  221. font-family: Consolas, "Liberation Mono", Courier, monospace;
  222. }
  223. .sshKey-file-view.disabled {
  224. background-color: #eee;
  225. }
  226. .manual-install {
  227. margin-top: 10px;
  228. width: 504px;
  229. height: auto;
  230. }
  231. #targetHosts {
  232. }
  233. .span6 {
  234. min-width: 504px;
  235. }
  236. #hostConnectivity {
  237. margin-top: 20px;
  238. .control-group {
  239. margin-bottom: 0;
  240. }
  241. }
  242. .advancedOptions {
  243. margin-top: 20px;
  244. margin-bottom: 30px;
  245. label{
  246. margin-bottom: 10px;
  247. }
  248. label.disabled{
  249. color: #ccc;
  250. }
  251. }
  252. .java-home {
  253. margin-bottom: 10px
  254. }
  255. }
  256. #confirm-hosts {
  257. #host-filter {
  258. margin-top: 3px;
  259. ul {
  260. margin: 3px;
  261. font-size: 12px;
  262. li {
  263. list-style: none;
  264. display: block;
  265. float: left;
  266. padding: 0 2px;
  267. a {
  268. text-decoration: underline;
  269. }
  270. }
  271. li.first {
  272. font-weight: bold;
  273. }
  274. li.active a {
  275. text-decoration: none;
  276. color: #000000;
  277. }
  278. }
  279. }
  280. .progress {
  281. margin-bottom: 0;
  282. }
  283. }
  284. #step4, #step6 {
  285. a.selected {
  286. color: #333;
  287. }
  288. a.deselected {
  289. }
  290. i.icon-asterisks {
  291. color: #FF4B4B;
  292. }
  293. }
  294. #step6 .pre-scrollable {
  295. max-height: 440px;
  296. }
  297. #deploy {
  298. #overallProgress {
  299. }
  300. #deploy-status-by-host {
  301. th.host {
  302. width: 30%;
  303. }
  304. th.status {
  305. width: 30%;
  306. }
  307. th.messgage {
  308. width: 40%;
  309. }
  310. .progress-bar {
  311. width: 80%;
  312. .progress {
  313. margin-bottom: 0;
  314. }
  315. }
  316. .progress-percentage {
  317. margin-left: 10px;
  318. width: 20% - 10px;
  319. }
  320. }
  321. }
  322. }
  323. #host-log {
  324. .stderr, .stdout {
  325. background-color: #f0f0f0;
  326. /* max-height: 300px;
  327. overflow-y: auto; */
  328. border-radius: 4px;
  329. padding: 8px;
  330. }
  331. }
  332. #serviceConfig {
  333. margin-top: 20px;
  334. .spinner {
  335. width:36px;
  336. height:36px;
  337. background: url("/img/spinner.gif");
  338. margin: 0 auto;
  339. }
  340. .accordion-heading {
  341. background-color: #f0f0f0;
  342. }
  343. .accordion-group {
  344. margin-bottom: 20px;
  345. .control-label {
  346. text-align: left;
  347. }
  348. .control-group {
  349. margin: 10px 0;
  350. }
  351. form {
  352. margin-bottom: 0;
  353. }
  354. }
  355. .accordion-group.Advanced {
  356. .control-label {
  357. float: none;
  358. text-align: left;
  359. width: auto;
  360. }
  361. .controls {
  362. margin-left: 0;
  363. }
  364. }
  365. .badge {
  366. margin-left: 4px;
  367. }
  368. .slave-component-group-menu {
  369. float: left;
  370. .nav {
  371. margin-bottom: 10px;
  372. }
  373. .nav li {
  374. position: relative;
  375. a {
  376. padding-right: 24px;
  377. }
  378. .icon-remove {
  379. border: 1px solid white;
  380. position: absolute;
  381. right: 7px;
  382. top: 10px;
  383. z-index: 2;
  384. cursor: default;
  385. color: #555555;
  386. }
  387. .icon-remove:hover {
  388. border: 1px solid grey;
  389. }
  390. }
  391. }
  392. .remove-group-error {
  393. display: none;
  394. }
  395. .add-slave-component-group {
  396. margin-bottom: 10px;
  397. }
  398. .master-host, .master-hosts, .slave-hosts {
  399. padding-top: 5px;
  400. line-height: 20px;
  401. }
  402. #attention {
  403. margin: 20px 0;
  404. }
  405. .retyped-password {
  406. margin-left: 14px;
  407. }
  408. #slave-hosts-popup {
  409. ul {
  410. list-style-type: none;
  411. }
  412. }
  413. }
  414. a:focus {
  415. outline: none;
  416. }
  417. @status-live-marker: url("/img/health-status-live.png");
  418. @status-dead-marker: url("/img/health-status-dead.png");
  419. @status-dead-orange-marker: url("/img/health-status-dead-orange.png");
  420. @status-dead-yellow-marker: url("/img/health-status-dead-yellow.png");
  421. @status-ok-marker: url("/img/status-ok.jpg");
  422. @status-corrupt-marker: url("/img/status-corrupt.jpg");
  423. @arrow-right: url("/img/arrow-right.png");
  424. /*Rack images*/
  425. @rack-status-live: url("/img/rack-status-live.png");
  426. @rack-status-critical: url("/img/rack-status-critical.png");
  427. @rack-status-dead: url("/img/rack-status-dead.png");
  428. @rack-state-toggler: url("/img/rack-state-toggler.png");
  429. @rack-state-plus: url("/img/rack-state-plus.png");
  430. @rack-state-minus: url("/img/rack-state-minus.png");
  431. /*****start styles for boxes*****/
  432. .box {
  433. border: 1px solid #D4D4D4;
  434. border-radius: 4px;
  435. margin-bottom: 20px;
  436. .box-header {
  437. border-bottom: 1px solid #D4D4D4;
  438. border-radius: 4px 4px 0 0;
  439. }
  440. .box-header,
  441. .box-footer {
  442. padding: 4px 4px 4px 10px;
  443. /*background: #dedede;*/
  444. .gradient(#dedede, #ffffff, #dedede)
  445. }
  446. .box-header:after,
  447. .box-footer:after {
  448. content: "";
  449. display: table;
  450. clear: both;
  451. }
  452. .box-header {
  453. .btn-group {
  454. float: right;
  455. }
  456. h4 {
  457. float: left;
  458. margin: 5px;
  459. font-size: 15px;
  460. color: #777;
  461. }
  462. }
  463. .box-footer {
  464. hr {
  465. margin: 0px;
  466. }
  467. }
  468. }
  469. /*****end styles for boxes*****/
  470. /*90% width modal window start*/
  471. .full-width-modal {
  472. .modal {
  473. width: 90%;
  474. margin: -350px 0 0 -45%;
  475. }
  476. .clear {
  477. clear:both;
  478. }
  479. > div > .dataTable {
  480. border: 1px solid silver;
  481. th {
  482. border-top:none;
  483. }
  484. }
  485. .content {
  486. padding: 0;
  487. }
  488. //fix stripped in inner table
  489. .table-striped tbody tr:nth-child(odd)
  490. td .table-striped tbody
  491. tr:nth-child(odd) td,
  492. tr:nth-child(even) th{
  493. background-color: none;
  494. }
  495. }
  496. /*90% width modal window end*/
  497. /*60% width modal window start*/
  498. .sixty-percent-width-modal {
  499. .modal {
  500. width: 60%;
  501. margin: 0 0 0 -30%;
  502. max-height: 526px;
  503. top:5%;
  504. overflow: hidden;
  505. .modal-body{
  506. max-height: 461px;
  507. overflow-y: auto;
  508. }
  509. }
  510. .clear {
  511. clear:both;
  512. }
  513. > div > .dataTable {
  514. border: 1px solid silver;
  515. th {
  516. border-top:none;
  517. }
  518. }
  519. .content {
  520. padding: 0;
  521. }
  522. //fix stripped in inner table
  523. .table-striped tbody tr:nth-child(odd)
  524. td .table-striped tbody
  525. tr:nth-child(odd) td,
  526. tr:nth-child(even) th{
  527. background-color: none;
  528. }
  529. }
  530. /*60% width modal window end*/
  531. /*****start styles for install tasks logs*****/
  532. .task-list-main-warp, .task-detail-info {
  533. i {
  534. font-size: 20px;
  535. vertical-align: middle;
  536. }
  537. .pending, .queued{
  538. color: #999999;
  539. }
  540. .in_progress{
  541. color: #367FE6;
  542. }
  543. .completed{
  544. color: #0EA31C;
  545. }
  546. .failed {
  547. color: #DF5F5F;
  548. }
  549. .aborted{
  550. }
  551. .timedout{
  552. color: #FF9C09;
  553. }
  554. }
  555. .task-list-main-warp{
  556. .task-list-line-cursor{
  557. cursor:pointer;
  558. }
  559. .task-top-wrap{
  560. width:100%;
  561. border-bottom: 1px solid #CCC;
  562. text-align:center;
  563. font-size:15px;
  564. padding: 0 0 10px 0;
  565. .select-wrap{
  566. float: right;
  567. margin-top: -8px;
  568. select{
  569. width:140px;
  570. }
  571. }
  572. }
  573. #host-log, {
  574. .log-list-wrap{
  575. padding: 10px 10px 10px 20px;
  576. border-top: 1px solid #CCC;
  577. border-bottom: 1px solid #CCC;
  578. .show-details{
  579. float: right;
  580. cursor: pointer;
  581. font-size: 16px;
  582. i{
  583. color: #333;
  584. }
  585. }
  586. }
  587. }
  588. }
  589. .task-detail-info{
  590. .task-detail-log-clipboard{
  591. display: none;
  592. resize: none;
  593. overflow: hidden;
  594. }
  595. .task-top-wrap{
  596. width:100%;
  597. border-bottom: 1px solid #CCC;
  598. text-align:center;
  599. font-size:15px;
  600. padding: 0 0 10px 0;
  601. .task-detail-back{
  602. float: left;
  603. }
  604. .task-detail-log-rolename{
  605. position: relative;
  606. left: 0;
  607. top: 0;
  608. }
  609. .task-detail-status-ico{
  610. content: "";
  611. margin-top: -4px;
  612. box-shadow: none;
  613. margin-bottom: 0px;
  614. font-size:24px;
  615. }
  616. .task-detail-ico-wrap{
  617. font-size: 24px;
  618. float:right;
  619. margin-top:-26px;
  620. div{
  621. cursor: pointer;
  622. }
  623. .task-detail-copy{
  624. margin-right: 12px;
  625. float: left;
  626. }
  627. .task-detail-open-dialog{
  628. float: right;
  629. }
  630. }
  631. }
  632. }
  633. /*****end styles for install tasks logs*****/
  634. /*****start styles for dashboard page*****/
  635. /*start services summary*/
  636. .services {
  637. margin-left: 0;
  638. margin-top: 0;
  639. position: relative;
  640. .tab-marker-position {
  641. background-position: 6px 5px;
  642. background-repeat: no-repeat;
  643. list-style: none;
  644. min-height: 20px;
  645. min-width: 20px;
  646. margin-left: 0;
  647. }
  648. .health-status-LIVE, .health-status-STARTING {
  649. .tab-marker-position;
  650. background-image: @status-live-marker;
  651. }
  652. .health-status-DEAD, .health-status-STOPPING {
  653. .tab-marker-position;
  654. background-image: @status-dead-marker;
  655. }
  656. .health-status-DEAD-ORANGE {
  657. .tab-marker-position;
  658. background-image: @status-dead-orange-marker;
  659. }
  660. .health-status-DEAD-YELLOW {
  661. .tab-marker-position;
  662. background-image: @status-dead-yellow-marker;
  663. }
  664. dt {
  665. text-align: left;
  666. width: 120px;
  667. }
  668. dd {
  669. margin-left: 145px;
  670. }
  671. .like_pointer {
  672. cursor: pointer;
  673. }
  674. .service {
  675. position: relative;
  676. margin-top: 10px;
  677. border-bottom: 1px solid #b8b8b8;
  678. padding-left: 10px;
  679. margin-right: 20px;
  680. .name {
  681. line-height: 21px;
  682. margin-left: 0;
  683. width: 145px;
  684. a {
  685. margin-left: 5px
  686. }
  687. }
  688. .summary {
  689. line-height: 21px;
  690. }
  691. .clearfix {
  692. padding-bottom: 8px;
  693. }
  694. #hdfs-info, #mapreduce-info, #hbase-info {
  695. display: none;
  696. position: relative;
  697. }
  698. table.table {
  699. margin-top: 14px;
  700. color: #666;
  701. font-size: 13px;
  702. //width: 80%;
  703. tr > td:first-child {
  704. padding-right: 10px;
  705. text-align: right !important;
  706. }
  707. th, td {
  708. padding: 4px;
  709. }
  710. }
  711. .dashboard-mini-chart {
  712. right: 0;
  713. float: right;
  714. top: 7px;
  715. position: absolute;
  716. overflow: visible; // for quick links
  717. text-align: center;
  718. //width: 180px;
  719. height: 200px;
  720. .dropdown-menu {
  721. text-align: left;
  722. }
  723. .chart-container{
  724. .chart-x-axis{
  725. left: 0%;
  726. width: 100%;
  727. text-align: left;
  728. }
  729. }
  730. .chartLabel {
  731. font-size: 11px;
  732. color: #7b7b7b;
  733. }
  734. .chart-legend {
  735. left: -205px;
  736. text-align: left;
  737. top: 0;
  738. width: 185px;
  739. }
  740. }
  741. }
  742. }
  743. #summary-info {
  744. border-top: none;
  745. border-collapse: collapse;
  746. color: #666;
  747. font-size: 13px;
  748. td.summary-label {
  749. width: 180px;
  750. text-align: right;
  751. }
  752. /*
  753. td {
  754. border-top: 1px solid #eee;
  755. }
  756. */
  757. tr td:first-child {
  758. text-align: right;
  759. }
  760. a {
  761. text-decoration: underline;
  762. &:hover {
  763. text-decoration: none;
  764. }
  765. }
  766. }
  767. .more-stats {
  768. display: block;
  769. width: 100%;
  770. padding: 7px 0;
  771. text-align: center;
  772. color: #333333;
  773. &:hover {
  774. background-color: #eee;
  775. color: #333;
  776. text-decoration: none;
  777. }
  778. }
  779. /*end services summary*/
  780. /*start alerts summary*/
  781. .alerts {
  782. border: 1px solid #ddd;
  783. margin: 0px;
  784. max-height: 500px;
  785. overflow-y: auto;
  786. li {
  787. border-bottom: 1px solid #eee;
  788. list-style: none;
  789. padding: 5px 5px 5px 5px;
  790. background-position: 14px 9px;
  791. background-repeat: no-repeat;
  792. .date-time {
  793. float: right;
  794. }
  795. p {
  796. margin-bottom: 2px;
  797. }
  798. .container-fluid {
  799. padding-left: 10px;
  800. padding-right: 10px;
  801. }
  802. .title {
  803. font-weight: normal;
  804. font-size: 14px;
  805. }
  806. .row-fluid [class*="span"] {
  807. min-height: 0px;
  808. }
  809. .status-icon {
  810. padding-top: 7px;
  811. }
  812. .date-time {
  813. color: #999;
  814. font-style: italic;
  815. font-size: small;
  816. text-align: right;
  817. }
  818. .message {
  819. font-size: 13px;
  820. color: #777;
  821. }
  822. .serviceLink {
  823. padding-left: 7px;
  824. }
  825. }
  826. .alert{
  827. margin: 7px;
  828. }
  829. }
  830. .go-to {
  831. float: right;
  832. background-position: right center;
  833. background-repeat: no-repeat;
  834. background-image: @arrow-right;
  835. padding-right: 40px;
  836. margin-top: 4px;
  837. }
  838. .modal-graph-line {
  839. width: 790px;
  840. .modal-body {
  841. min-height: 420px !important;
  842. overflow: hidden;
  843. }
  844. }
  845. /*end alerts summary*/
  846. /*Alerts popup*/
  847. .alertsPopupLinks {
  848. padding: 20px 40px 0px;
  849. text-align: right;
  850. a:first-child {
  851. float: left;
  852. }
  853. }
  854. .modal-footer.align-center {
  855. text-align: center;
  856. }
  857. /*start chart/style graphs*/
  858. .chart-container {
  859. cursor: pointer;
  860. cursor:-moz-zoom-in;
  861. cursor:-webkit-zoom-in;
  862. &.chart-container-popup {
  863. cursor: auto !important;
  864. margin-left: 0;
  865. overflow: visible;
  866. width: 650px;
  867. .chart {
  868. left: 60px;
  869. overflow: visible;
  870. position: relative;
  871. }
  872. .chart-y-axis {
  873. position: absolute;
  874. top: -15px;
  875. bottom: 0;
  876. width: 60px;
  877. }
  878. .chart-legend {
  879. left: 60px;
  880. top: 245px;
  881. }
  882. .x_tick {
  883. .title {
  884. margin-top: 35px !important;
  885. }
  886. }
  887. }
  888. position: relative;
  889. margin: 20px 15px 0px 15px;
  890. .chart {
  891. position: relative;
  892. z-index: 1;
  893. }
  894. .chart-y-axis {
  895. position: absolute;
  896. top: 0;
  897. bottom: 0px;
  898. width: 100px;
  899. z-index: 2;
  900. margin-top: 15px;
  901. }
  902. .chart-x-axis {
  903. position: absolute;
  904. top: 180px;
  905. left: 35%;
  906. width: 30%;
  907. z-index: 2;
  908. }
  909. .x_tick {
  910. margin-top: 5px;
  911. .title {
  912. padding: 0 2px 0 2px;
  913. opacity: 1 !important;
  914. top: 148px;
  915. }
  916. }
  917. svg {
  918. g {
  919. g:nth-child(1) {
  920. display: none;
  921. }
  922. }
  923. }
  924. text{
  925. font-weight: 700;
  926. opacity: 1 !important;
  927. }
  928. .chart-legend {
  929. font-family: 'Courier New';
  930. position: absolute;
  931. top: 180px;
  932. z-index: 3;
  933. }
  934. .rickshaw_legend {
  935. background-color: #999999 !important;
  936. }
  937. .rickshaw_graph {
  938. .x_tick{
  939. .title {
  940. bottom: -6px;
  941. opacity: 0.75;
  942. }
  943. }
  944. }
  945. .chart-overlay {
  946. position: absolute;
  947. top: 0;
  948. bottom: 0;
  949. width: 100%;
  950. z-index: 5;
  951. }
  952. .chart-title {
  953. text-align: center;
  954. font-size: small;
  955. }
  956. }
  957. .mini-chart{
  958. position: absolute;
  959. .chart-container{
  960. width: 130px;
  961. height: 130px;
  962. }
  963. }
  964. /*end chart/graph styles*/
  965. /*****end styles for dashboard page*****/
  966. /*Services*/
  967. #services-menu {
  968. .nav-list {
  969. .tab-marker-position {
  970. background-position: 6px 5px;
  971. background-repeat: no-repeat;
  972. list-style: none;
  973. height: 20px;
  974. width: 20px;
  975. margin-left: 0;
  976. // padding-left: 30px;
  977. // padding-right: 30px;
  978. // background-position: 12px 9px;
  979. // background-repeat: no-repeat;
  980. }
  981. .health-status-LIVE , .health-status-STARTING {
  982. .tab-marker-position;
  983. background-image: @status-live-marker;
  984. }
  985. .health-status-DEAD, .health-status-STOPPING {
  986. .tab-marker-position;
  987. background-image: @status-dead-marker;
  988. }
  989. .health-status-undefined {
  990. .tab-marker-position;
  991. }
  992. li {
  993. line-height: 24px;
  994. a {
  995. padding: 3px 10px;
  996. }
  997. }
  998. li.clients {
  999. a {
  1000. padding-left: 37px;
  1001. }
  1002. }
  1003. }
  1004. .add-service-button {
  1005. margin: 20px 20px 10px;
  1006. }
  1007. .operations-count{
  1008. background: #953B39;
  1009. }
  1010. }
  1011. .nav-pills.move {
  1012. float: right;
  1013. margin-top: -48px;
  1014. }
  1015. .service-content {
  1016. #summary-info {
  1017. margin-bottom: 0;
  1018. }
  1019. }
  1020. .service-block {
  1021. margin-top: 20px;
  1022. }
  1023. .service-configuration {
  1024. padding: 10px;
  1025. }
  1026. .service-summary {
  1027. background: #F6FAFD;
  1028. .service-block.span8 {
  1029. margin-left: 0;
  1030. border-right: 1px solid #5fa3c3;
  1031. }
  1032. .service-block.span3 {
  1033. padding-left: 0;
  1034. }
  1035. .service-content {
  1036. padding: 5px 0 0 10px;
  1037. .service-links {
  1038. padding: 5px 0;
  1039. }
  1040. }
  1041. h5 {
  1042. color: #0088CC;
  1043. font-size: 14px;
  1044. }
  1045. .service-links {
  1046. padding: 5px 0 10px 0;
  1047. }
  1048. .service-configuration .dl-horizontal {
  1049. dt {
  1050. width: 90px;
  1051. line-height: 19px;
  1052. }
  1053. dd {
  1054. margin-left: 100px;
  1055. line-height: 19px;
  1056. }
  1057. }
  1058. }
  1059. .service-button {
  1060. text-align: right;
  1061. margin-bottom: 5px;
  1062. margin-top: -55px;
  1063. ul.dropdown-menu {
  1064. li {
  1065. text-align: left;
  1066. }
  1067. a {
  1068. cursor: pointer;
  1069. }
  1070. }
  1071. }
  1072. .summary-metric-graphs {
  1073. [class*="span"] {
  1074. float: left;
  1075. margin-left: 10px;
  1076. }
  1077. .chart-container {
  1078. .chart-x-axis {
  1079. left: 0%;
  1080. width: 100%;
  1081. }
  1082. }
  1083. }
  1084. /*End Services*/
  1085. /*Hosts*/
  1086. #hosts {
  1087. .health-status-HEALTHY{
  1088. background-image: @status-live-marker;
  1089. }
  1090. .health-status-LIVE {
  1091. background-image: @status-live-marker;
  1092. }
  1093. .health-status-DEAD {
  1094. background-image: @status-dead-marker;
  1095. }
  1096. .health-status-DEAD-ORANGE {
  1097. background-image: @status-dead-orange-marker;
  1098. }
  1099. .health-status-DEAD-YELLOW {
  1100. background-image: @status-dead-yellow-marker;
  1101. }
  1102. .host-name-search {
  1103. position: relative;
  1104. top: 0px;
  1105. left: 10px;
  1106. }
  1107. .host-name-pos {
  1108. position: relative;
  1109. top: 10px;
  1110. }
  1111. .box-header {
  1112. .btn-group {
  1113. float: left;
  1114. }
  1115. .btn.decommission {
  1116. margin-left: 5px;
  1117. }
  1118. .btn.add-host-button {
  1119. float: right;
  1120. }
  1121. }
  1122. .table {
  1123. //margin-bottom: 0;
  1124. thead {
  1125. //background: #EDF5FC;
  1126. }
  1127. th {
  1128. border-top: none;
  1129. }
  1130. th, td {
  1131. width: 82px;
  1132. border-left-width: 0;
  1133. }
  1134. th.first, td.first {
  1135. width: 10px !important;
  1136. border-left-width: 1px;
  1137. }
  1138. td.first label {
  1139. padding-top: 3px;
  1140. }
  1141. td.first span {
  1142. display: block;
  1143. float: left;
  1144. height: 13px;
  1145. margin: 4px 5px 0 0;
  1146. width: 13px;
  1147. }
  1148. ul#filter-dropdown {
  1149. padding: 5px 0;
  1150. li {
  1151. display: block;
  1152. padding: 3px 0 3px 5px;
  1153. line-height: 20px;
  1154. label.checkbox {
  1155. padding-left: 3px;
  1156. }
  1157. input[type="checkbox"] {
  1158. margin-top: 0;
  1159. margin-right: 2px;
  1160. margin-bottom: 2px;
  1161. margin: 0 2px 2px;
  1162. }
  1163. }
  1164. &>li {
  1165. &>ul {
  1166. height: 250px;
  1167. margin-left: 0;
  1168. overflow-y: scroll;
  1169. }
  1170. }
  1171. }
  1172. .sorting_asc { background: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAZAAA/+4ADkFkb2JlAGTAAAAAAf/bAIQAAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQICAgICAgICAgICAwMDAwMDAwMDAwEBAQEBAQECAQECAgIBAgIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMD/8AAEQgAEwATAwERAAIRAQMRAf/EAHgAAAMBAQAAAAAAAAAAAAAAAAAFCAYKAQACAQUAAAAAAAAAAAAAAAAABQMCBAYHCBAAAQUAAQMEAwAAAAAAAAAAAwECBAUGABESByExIghBMxQRAAIBAwMDAwUAAAAAAAAAAAECAwAEBRESBiExUUHhB2GBIhMU/9oADAMBAAIRAxEAPwDvA8k+Qc54sxGj32qlNi0ucrjTj/JqGlmROyJXQ2u/bOsZTmBExPd70/HXmQcW41lOX5+145h0L391KEHhR3Z28Ii6sx9AKgubiO1gaeU6Io19h9TUg/S/7eP+wia3NbBIFbuqiyn3VTCjIMArHHTJarEDGGiNU8vOKVsc7/VxBuGR3yV683X86/Cq/GpssrhP2S8emiSKRm1JS5VfyLH0WfQug7KwZR0CilWHy39++ObQTgkgeV9ux+xq9uc6U8pLfZzP6mClZpKWrvq1DilJAt4Mewh/0hRyBOsaUMoVKLvXtVU6t6+nL/HZTJYi4/rxU81tdbSu+N2Rtp7jcpB0OnUa9aoeOOVdsgDL4I1pFS+NPHmcsQ2+fw+UpLWOwwwWNVQ1kCaIcgaiONkmLGEZrDDXtcnXo5PfjC+5VybKWrWWSyF5cWbEEpJNI6kqdQSrMRqD1B9KjS2t423xoqt5AArb8QVPRwoo4UUcKK//2Q==) no-repeat 85% 50%; }
  1173. .sorting_desc { background: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAZAAA/+4ADkFkb2JlAGTAAAAAAf/bAIQAAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQICAgICAgICAgICAwMDAwMDAwMDAwEBAQEBAQECAQECAgIBAgIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMD/8AAEQgAEwATAwERAAIRAQMRAf/EAIEAAAIDAQAAAAAAAAAAAAAAAAAGBwgJCgEBAAIDAQAAAAAAAAAAAAAAAAMFBAYHCBAAAAUDAwMFAAAAAAAAAAAAAQIDBAUABgcSNTYRFQgTZFUWZhEAAAQEAggGAwAAAAAAAAAAAAECAxEhBAYSMjFBYRMzFDQFUZFSYmMHJFRk/9oADAMBAAIRAxEAPwDv4oAKACgCKc1tMmusb3Eph6cSgsgx7fucEZxGRks2llGIGVWgVm8q1dt0+6ogKaapSgdNbQPXTqAdwsN602bopk3vTnUW24rduwccbU2S5E8Sm1JM92czSZwNOKUYDFrCqTp1corDUFMpEcYap+Ipb4P5O8n81y9xXXlG50yY+thR3AEivqFvRDmduvSUrhuLtrFNXqCFvJm1LAQ5RMuchB6gBy13f7+tP6lsOipuz2jSGdy1ZJeNzmXnEtU+pWFTikmbxyTEjgglKKZpMU3ZanudYtTtSr8dMoYSKKvKMte0aUV5YGxgoASbD2iQ4Tyi6uB7Rvz/AHD9R8r7/wBWr64uta6/pKfq+JwUZP5/1/hwCFjIeTMrLo0np93q2xDtVCJh/9k=) no-repeat 85% 50%; }
  1174. .sorting { background: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAZAAA/+4ADkFkb2JlAGTAAAAAAf/bAIQAAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQICAgICAgICAgICAwMDAwMDAwMDAwEBAQEBAQECAQECAgIBAgIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMD/8AAEQgAEwATAwERAAIRAQMRAf/EAGgAAAIDAQAAAAAAAAAAAAAAAAUHAAYICgEBAQAAAAAAAAAAAAAAAAAAAAEQAAEEAQIFAgcAAAAAAAAAAAECAwQFABEGIRI0NQcTFDFBMmNUZRYRAQEBAQAAAAAAAAAAAAAAAAABEUH/2gAMAwEAAhEDEQA/AO93cd/XbXpLC9tHQ1Dr46nljUBby/gzGZB+p+Q6QhA+ZOApfDnllW/ha1tv6Ee7iyH5kRlvlbTIqHndWkNJ0HO7XFQbWeJUkpUeOpySrZh65UUnyFUW1ztaexRmIbaPyzoLE6vg2UWW9GC1e0XHnsSGEqfQohCwApK9OIGuAjfBP9VuG0m39vGqINVUe4r2xF21TVsuXZOI9N9lMmLBYkttQ21auBKhqtSUngCMkW5xqjKiYASh6SR2Tulr2HpOvf6j9p+V9/mwDeB//9k=) no-repeat 85% 50%; }
  1175. a.paginate_disabled_next, a.paginate_disabled_previous {
  1176. color: gray;
  1177. &:hover {
  1178. color: gray;
  1179. text-decoration: none;
  1180. }
  1181. }
  1182. a.paginate_enabled_next, a.paginate_enabled_previous {
  1183. &:hover {
  1184. text-decoration: none;
  1185. }
  1186. }
  1187. div.view-wrapper {
  1188. float: left;
  1189. .btn-group{
  1190. margin-bottom: 9px;
  1191. }
  1192. }
  1193. a.ui-icon-circle-close {
  1194. float: right;
  1195. opacity: 0.2;
  1196. padding: 1px;
  1197. position: relative;
  1198. &:hover {
  1199. opacity: 0.7;
  1200. }
  1201. }
  1202. .notActive {
  1203. a.ui-icon-circle-close {
  1204. visibility: hidden;
  1205. }
  1206. }
  1207. }
  1208. .page-bar {
  1209. border: 1px solid silver;
  1210. text-align:right;
  1211. div {
  1212. display: inline-block;
  1213. margin:0 10px;
  1214. }
  1215. .dataTables_length {
  1216. label {
  1217. display:inline;
  1218. }
  1219. select {
  1220. margin-bottom: 4px;
  1221. margin-top: 4px;
  1222. width:70px;
  1223. }
  1224. }
  1225. .dataTables_paginate {
  1226. a {
  1227. padding:0 5px;
  1228. }
  1229. }
  1230. }
  1231. .open-group > .dropdown-menu {
  1232. display: block;
  1233. }
  1234. .nav-pills li.disabled {
  1235. display: block;
  1236. margin: 2px 0;
  1237. padding: 8px 12px;
  1238. line-height: 14px;
  1239. }
  1240. .box-footer .footer-pagination {
  1241. float: right;
  1242. .nav {
  1243. margin-bottom: 0;
  1244. }
  1245. .dropdown {
  1246. margin-top: 3px;
  1247. }
  1248. .dropdown {
  1249. margin-top: 3px;
  1250. }
  1251. .dropdown select {
  1252. width: 60px;
  1253. }
  1254. .page-listing a {
  1255. line-height: 0;
  1256. border: none;
  1257. margin: 0;
  1258. margin-right: 10px;
  1259. cursor: pointer;
  1260. color: #0088CC;
  1261. padding: 8px 0;
  1262. float: left;
  1263. text-decoration: underline;
  1264. }
  1265. .page-listing a:hover {
  1266. text-decoration: none;
  1267. }
  1268. .page-listing {
  1269. width: 100px;
  1270. .table {
  1271. th.name {
  1272. width: 300px;
  1273. a.filter-label {
  1274. width: 57px;
  1275. display: block;
  1276. float: left;
  1277. }
  1278. }
  1279. }
  1280. }
  1281. }
  1282. }
  1283. #host-details {
  1284. margin-top: 27px;
  1285. /*
  1286. .component-operation-button {
  1287. background-color: #E5E5E5;
  1288. background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#E5E5E5), to(#F1F1F1));
  1289. background-image: -webkit-linear-gradient(top, #E5E5E5, #F1F1F1);
  1290. background-image: -o-linear-gradient(top, #E5E5E5, #F1F1F1);
  1291. background-image: linear-gradient(to bottom, #E5E5E5, #F1F1F1);
  1292. background-image: -moz-linear-gradient(top, #E5E5E5, #F1F1F1);
  1293. background-repeat: repeat-x;
  1294. color: #000000;
  1295. }
  1296. */
  1297. .caret {
  1298. border-top-color: #000000;
  1299. border-bottom-color: #000000;
  1300. }
  1301. //hack to apply style only for firefox
  1302. @-moz-document url-prefix() {
  1303. .host-components .caret{
  1304. margin-top:-12px !important;
  1305. }
  1306. }
  1307. .marker {
  1308. background-repeat: no-repeat;
  1309. display: inline-block;
  1310. height: 13px;
  1311. width: 13px;
  1312. }
  1313. .health-status-started, .health-status-starting {
  1314. background-image: @status-live-marker;
  1315. .marker;
  1316. }
  1317. .health-status-installed, .health-status-stopping {
  1318. background-image: @status-dead-marker;
  1319. .marker;
  1320. }
  1321. .health-status-LIVE {
  1322. background-image: @status-live-marker;
  1323. .marker;
  1324. }
  1325. .health-status-DEAD {
  1326. background-image: @status-dead-marker;
  1327. .marker;
  1328. }
  1329. .health-status-DEAD-ORANGE {
  1330. background-image: @status-dead-orange-marker;
  1331. .marker;
  1332. }
  1333. .health-status-DEAD-YELLOW {
  1334. background-image: @status-dead-yellow-marker;
  1335. .marker;
  1336. }
  1337. .back {
  1338. display: block;
  1339. width: 105px;
  1340. margin-bottom: 5px;
  1341. }
  1342. .box-header .host-title {
  1343. margin: 0;
  1344. padding-left: 17px;
  1345. }
  1346. .box-header .button-section {
  1347. margin-bottom: 5px;
  1348. }
  1349. hr {
  1350. margin-bottom: 0;
  1351. clear: both;
  1352. }
  1353. .content {
  1354. padding: 10px;
  1355. }
  1356. .host-configuration .dl-horizontal dt {
  1357. width: 90px;
  1358. line-height: 20px;
  1359. }
  1360. .host-configuration .dl-horizontal dd {
  1361. margin-left: 100px;
  1362. line-height: 20px;
  1363. }
  1364. .host-metrics {
  1365. [class*="span"] {
  1366. float: left;
  1367. margin-left: 5px;
  1368. }
  1369. .chart-container {
  1370. .chart-x-axis {
  1371. left: 30%;
  1372. width: 40%;
  1373. }
  1374. }
  1375. }
  1376. .host-components {
  1377. padding: 10px;
  1378. padding-bottom: 0;
  1379. border: 1px solid #DEDEDE;
  1380. border-radius: 4px;
  1381. background: #FFF;
  1382. }
  1383. .host-components .btn-group {
  1384. margin: 0 5px 10px 0;
  1385. }
  1386. }
  1387. .background-operations {
  1388. .progress {
  1389. margin-bottom: 5px;
  1390. .bar {
  1391. width: 100%;
  1392. }
  1393. }
  1394. .open-details {
  1395. clear: left;
  1396. display: block;
  1397. float: left;
  1398. text-decoration: none;
  1399. width: 16px;
  1400. }
  1401. .operation-details {
  1402. padding-left: 16px;
  1403. padding-top: 5px;
  1404. display: none;
  1405. }
  1406. margin-bottom: 10px;
  1407. }
  1408. .background-operations.is-open {
  1409. .operation-details {
  1410. display: block;
  1411. }
  1412. }
  1413. /*End Hosts*/
  1414. /*assign masters*/
  1415. .assign-masters {
  1416. .select-hosts {
  1417. width: 50%;
  1418. float: left;
  1419. white-space: nowrap;
  1420. }
  1421. label.host-name {
  1422. padding-top: 5px;
  1423. }
  1424. .round-corners {
  1425. border-radius: 8px;
  1426. -webkit-border-radius: 8px;
  1427. -moz-border-radius: 8px;
  1428. }
  1429. .host-assignments {
  1430. float: right;
  1431. width: 45%;
  1432. }
  1433. .remaining-hosts {
  1434. padding: 25px;
  1435. border-top: solid 1px #cccccc;
  1436. border-left: solid 1px #cccccc;
  1437. border-right: groove 5px #cccccc;
  1438. border-bottom: groove 5px #cccccc;
  1439. margin-top: 20px;
  1440. background-color: #FCF8E3;
  1441. color: #C09853;
  1442. }
  1443. .host-assignments .mapping-box {
  1444. border: solid 1px #cccccc;
  1445. padding: 8px;
  1446. margin-bottom: 10px;
  1447. background-color: #fafafa;
  1448. }
  1449. .host-assignments .assignedService {
  1450. padding: 2px 8px;
  1451. border: solid 1px #cccccc;
  1452. margin: 2px;
  1453. background-color: @green;
  1454. color: white;
  1455. white-space: nowrap;
  1456. font-size: 0.9em;
  1457. display: inline-block;
  1458. }
  1459. .form-horizontal .controls {
  1460. margin-left: 110px;
  1461. }
  1462. .form-horizontal .control-label {
  1463. width: 120px;
  1464. padding-right: 10px;
  1465. }
  1466. .form-horizontal .control-group select {
  1467. width: 75%;
  1468. min-width: 100px;
  1469. max-width: 250px;
  1470. }
  1471. .hostString {
  1472. margin-bottom: 5px;
  1473. }
  1474. .controls .badge {
  1475. background-color: @green;
  1476. color: #ffffff;
  1477. cursor: pointer;
  1478. font-weight: bold;
  1479. text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  1480. }
  1481. .assign-master .controls .badge:hover {
  1482. background-color: @green;
  1483. }
  1484. .alertFlag {
  1485. font-size: 1.3em;
  1486. color: #B94A48;
  1487. font-weight: bold;
  1488. vertical-align: middle;
  1489. }
  1490. }
  1491. /*end assign masters*/
  1492. .assign-clients {
  1493. .round-corners {
  1494. border-radius: 8px;
  1495. -webkit-border-radius: 8px;
  1496. -moz-border-radius: 8px;
  1497. }
  1498. .assignedService {
  1499. padding: 2px 8px;
  1500. border: solid 1px #cccccc;
  1501. margin: 2px;
  1502. background-color: @blue;
  1503. color: white;
  1504. white-space: nowrap;
  1505. font-size: 0.9em;
  1506. display: inline-block;
  1507. }
  1508. }
  1509. /*Dashboard*/
  1510. .alerts-count {
  1511. margin-left: 5px;
  1512. }
  1513. ul.filter {
  1514. background: #ffffff;
  1515. list-style: none;
  1516. position: absolute;
  1517. padding: 10px;
  1518. }
  1519. #main-admin-menu {
  1520. padding: 8px 0;
  1521. ul {
  1522. margin-bottom: 0;
  1523. li {
  1524. line-height: 24px;
  1525. }
  1526. }
  1527. }
  1528. #user-auth-method select {
  1529. width: 320px;
  1530. }
  1531. /*start charts rack*/
  1532. .rack {
  1533. width: 98%;
  1534. display: inline-block;
  1535. vertical-align: top;
  1536. border: 1px solid #D4D4D4;
  1537. border-radius: 5px;
  1538. margin-right: 4px;
  1539. margin-bottom: 10px;
  1540. .rackHeader {
  1541. background-color: #F7F7F7;
  1542. border-top-right-radius: 5px;
  1543. border-top-left-radius: 5px;
  1544. padding: 5px 5px 5px 10px;
  1545. border-bottom: 1px solid #D4D4D4;
  1546. .statusName {
  1547. font-size: 15px;
  1548. color: #006F9F;
  1549. text-shadow: #ffffff 0px 0px 1px;
  1550. font-weight: bold;
  1551. vertical-align: top;
  1552. }
  1553. .toggler {
  1554. background-repeat: no-repeat;
  1555. background-image: @rack-state-toggler;
  1556. display: block;
  1557. height: 22px;
  1558. position: relative;
  1559. width: 32px;
  1560. float: right;
  1561. span {
  1562. background-repeat: no-repeat;
  1563. background-image: @rack-state-plus;
  1564. display: block;
  1565. height: 17px;
  1566. left: 7px;
  1567. position: absolute;
  1568. top: 3px;
  1569. width: 18px;
  1570. }
  1571. span.isActive {
  1572. background-image: @rack-state-minus !important;
  1573. top: 10px;
  1574. }
  1575. }
  1576. }
  1577. .hostsSummary {
  1578. border-left: 1px solid #CDCDCD;
  1579. border-right: 1px solid #CDCDCD;
  1580. border-bottom: 1px solid #9f9f9f;
  1581. background-color: #f7f8fa;
  1582. font-size: 12px;
  1583. padding: 4px 0 4px 9px;
  1584. .textBlock {
  1585. color: #000000;
  1586. padding-right: 10px;
  1587. div {
  1588. height: 12px;
  1589. margin: 0 3px 0 0;
  1590. width: 12px;
  1591. display: inline-block;
  1592. }
  1593. }
  1594. }
  1595. .indicatorR {
  1596. background-color: #E2001A;
  1597. }
  1598. .indicatorY {
  1599. background-color: #F29400;
  1600. }
  1601. .indicatorG {
  1602. background-color: #88BF67;
  1603. }
  1604. .statusIndicator {
  1605. display: inline-block;
  1606. width: 20px;
  1607. height: 19px;
  1608. margin-right: 10px;
  1609. margin-top: 4px;
  1610. float: left;
  1611. background-repeat: no-repeat;
  1612. }
  1613. .rackName {
  1614. margin-top: 4px;
  1615. float: left;
  1616. }
  1617. .statusIndicator.LIVE {
  1618. background-image: @rack-status-live;
  1619. }
  1620. .statusIndicator.CRITICAL {
  1621. background-image: @rack-status-critical;
  1622. }
  1623. .statusIndicator.DEAD {
  1624. background-image: @rack-status-dead;
  1625. }
  1626. .hosts {
  1627. padding: 4px;
  1628. overflow: hidden;
  1629. display: none;
  1630. .ember-view {
  1631. float: left;
  1632. width: 100%;
  1633. height: 43px;
  1634. .hostBlock {
  1635. height: 38px;
  1636. position: relative;
  1637. border: 1px solid #D4D4D4;
  1638. margin-right: 3px;
  1639. }
  1640. }
  1641. .hostBlock {
  1642. border-radius: 4px;
  1643. }
  1644. .hostBlock.HEALTHY {
  1645. background-color: #87BE73;
  1646. }
  1647. .hostBlock.UNHEALTHY {
  1648. background-color: #E40024;
  1649. }
  1650. .hostBlock.CRITICAL {
  1651. background: #F39236;
  1652. }
  1653. .ember-view:hover {
  1654. }
  1655. }
  1656. .hosts.isActive {
  1657. display: block;
  1658. }
  1659. }
  1660. .heatmap_host_details {
  1661. font-size: 10px;
  1662. line-height: 1.6em;
  1663. border: 1px solid #006F9F;
  1664. background: #fff;
  1665. width: 73px;
  1666. height: 79px;
  1667. padding: 10px 10px;
  1668. position: absolute;
  1669. z-index: 1000;
  1670. }
  1671. /*Start Heatmap*/
  1672. .heatmap {
  1673. #heatmap-metric-title{
  1674. margin-left: 23px;
  1675. }
  1676. .rack.rack-5-2 {
  1677. .hosts {
  1678. height: 86px;
  1679. }
  1680. }
  1681. .rack.rack-5-4 {
  1682. .hosts {
  1683. height: 172px;
  1684. }
  1685. }
  1686. .rack.rack-5-6 {
  1687. .hosts {
  1688. height: 258px;
  1689. }
  1690. }
  1691. .rack.rack-5-8 {
  1692. .hosts {
  1693. height: 344px;
  1694. }
  1695. }
  1696. .rack.rack-5-10 {
  1697. .hosts {
  1698. height: 430px;
  1699. }
  1700. }
  1701. .heatmap_host_details {
  1702. font-size: 12px;
  1703. line-height: 1.6em;
  1704. border: 1px solid #D9D9D9;
  1705. background: #f9f9f9;
  1706. width: 280px;
  1707. height: 170px;
  1708. padding: 10px 10px;
  1709. position: absolute;
  1710. z-index: 1000;
  1711. }
  1712. .container-fluid{
  1713. padding: 0px;
  1714. }
  1715. .row-fluid [class*="span"]{
  1716. margin-left: 0px;
  1717. }
  1718. .legend{
  1719. margin-top: 20px;
  1720. margin-bottom: 20px;
  1721. .tile{
  1722. width: 50px;
  1723. height: 1em;
  1724. padding: 4px;
  1725. border: 1px solid #D4D4D4;
  1726. border-radius: 5px;
  1727. margin-right: 10px;
  1728. }
  1729. }
  1730. h4{
  1731. color: #777777;
  1732. margin-top: 5px;
  1733. }
  1734. .heatmap-host {
  1735. display: block;
  1736. width: 100%;
  1737. height: 100%;
  1738. }
  1739. }
  1740. /*End Heatmap*/
  1741. .noDisplay {
  1742. display: none !important;
  1743. }
  1744. .display {
  1745. display: block !important;
  1746. }
  1747. .display-inline-block {
  1748. display: inline-block !important;
  1749. }
  1750. /* CHARTS */
  1751. .chart {
  1752. overflow: hidden;
  1753. /*padding-bottom: 25px;*/
  1754. .attributes {
  1755. width: 75px;
  1756. float: left;
  1757. margin: 45px 0 0 0;
  1758. p {
  1759. margin-bottom: 9px;
  1760. }
  1761. }
  1762. .hostName {
  1763. font-weight: bold;
  1764. }
  1765. .horizon {
  1766. border-bottom: 1px solid #000000;
  1767. overflow: hidden;
  1768. position: relative;
  1769. }
  1770. .horizon {
  1771. border-bottom: 1px solid #000000;
  1772. border-top: 1px solid #000000;
  1773. }
  1774. .horizon + .horizon {
  1775. border-top: medium none;
  1776. }
  1777. .horizon canvas {
  1778. display: block;
  1779. }
  1780. .horizon .title, .horizon .value {
  1781. bottom: 0;
  1782. line-height: 30px;
  1783. margin: 0 6px;
  1784. position: absolute;
  1785. text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  1786. white-space: nowrap;
  1787. }
  1788. .horizon .title {
  1789. left: 0;
  1790. }
  1791. .horizon .value {
  1792. right: 0;
  1793. }
  1794. .rule {
  1795. display: none;
  1796. width: 30px;
  1797. height: 124px;
  1798. padding-top: 27px;
  1799. position: absolute;
  1800. border-left: 1px dashed #a52a2a;
  1801. .stateValue {
  1802. margin: 15px 0 0 3px;
  1803. line-height: 15px;
  1804. }
  1805. }
  1806. .axis {
  1807. font: 10px sans-serif;
  1808. path {
  1809. display: none;
  1810. }
  1811. line {
  1812. shape-rendering: crispedges;
  1813. stroke: #000000;
  1814. }
  1815. }
  1816. .line {
  1817. background: none repeat scroll 0 0 #000000;
  1818. /* opacity: 0.2; */
  1819. z-index: 2;
  1820. }
  1821. ul.dropdown-menu {
  1822. li {
  1823. text-align: left;
  1824. }
  1825. }
  1826. }
  1827. .linear {
  1828. path {
  1829. stroke: steelblue;
  1830. stroke-width: 2;
  1831. fill: none;
  1832. }
  1833. line {
  1834. stroke: black;
  1835. }
  1836. text {
  1837. font-family: Arial;
  1838. font-size: 9pt;
  1839. }
  1840. }
  1841. /* CHARTS END */
  1842. /* UNIVERSAL STYLES */
  1843. .align-right {
  1844. text-align: right;
  1845. }
  1846. .left {
  1847. float: left;
  1848. }
  1849. .no-borders {
  1850. border: none !important;
  1851. }
  1852. ul.noStyle {
  1853. list-style: none;
  1854. }
  1855. ul.inline li {
  1856. display: inline;
  1857. }
  1858. .table.no-borders th, .table.no-borders td {
  1859. border-top: none;
  1860. }
  1861. /* UNIVERSAL STYLES END */
  1862. /* METRIC FILTERING WIDGET */
  1863. .metric-filtering-widget {
  1864. .title {
  1865. padding-top: 4px;
  1866. }
  1867. .accordion {
  1868. background: none repeat scroll 0 0 #FFFFFF;
  1869. /*border: 1px solid;*/
  1870. font-size: 12px;
  1871. /*padding: 5px 0;*/
  1872. position: absolute;
  1873. z-index: 1000;
  1874. .accordion-group {
  1875. .accordion-heading {
  1876. i {
  1877. text-decoration: none;
  1878. }
  1879. }
  1880. .accordion-body {
  1881. .accordion-inner {
  1882. /*border: none;
  1883. padding: 0 8px;
  1884. width: 160px;*/
  1885. ul.items {
  1886. list-style: none;
  1887. li {
  1888. a:hover {
  1889. cursor: pointer;
  1890. }
  1891. }
  1892. li.disabled {
  1893. a {
  1894. color: #999999;
  1895. }
  1896. }
  1897. }
  1898. }
  1899. }
  1900. }
  1901. }
  1902. }
  1903. /* METRIC FILTERING WIDGET END */
  1904. /* TIME RANGE WIDGET */
  1905. /* start css for timepicker */
  1906. .ui-timepicker-div .ui-widget-header {
  1907. margin-bottom: 8px;
  1908. }
  1909. .ui-timepicker-div dl {
  1910. text-align: left;
  1911. }
  1912. .ui-timepicker-div dl dt {
  1913. height: 25px;
  1914. margin-bottom: -25px;
  1915. }
  1916. .ui-timepicker-div dl dd {
  1917. margin: 0 10px 10px 65px;
  1918. }
  1919. .ui-timepicker-div td {
  1920. font-size: 90%;
  1921. }
  1922. .ui-tpicker-grid-label {
  1923. background: none;
  1924. border: none;
  1925. margin: 0;
  1926. padding: 0;
  1927. }
  1928. .ui-timepicker-rtl {
  1929. direction: rtl;
  1930. }
  1931. .ui-timepicker-rtl dl {
  1932. text-align: right;
  1933. }
  1934. .ui-timepicker-rtl dl dd {
  1935. margin: 0 65px 10px 10px;
  1936. }
  1937. /* end css for timepicker */
  1938. #slider {
  1939. margin: 10px 0 40px;
  1940. width: 330px;
  1941. .now-marker {
  1942. position: absolute;
  1943. right: -15px;
  1944. bottom: -23px;
  1945. }
  1946. .period-marker {
  1947. position: absolute;
  1948. left: -15px;
  1949. bottom: -23px;
  1950. }
  1951. }
  1952. .screensaver{
  1953. width: 90%;
  1954. height: 160px;
  1955. border: 1px solid silver;
  1956. margin: 20px 15px 10px 15px;
  1957. background: url(/img/spinner.gif) no-repeat center center;
  1958. }
  1959. /* TIME RANGE WIDGET END */
  1960. #host-details .host-components .btn-group > .btn {
  1961. min-width: 130px;
  1962. }
  1963. #host-details > .host-maintenance {
  1964. text-align: right;
  1965. margin-top: -28px;
  1966. }
  1967. #host-details > .host-maintenance > div {
  1968. text-align: left;
  1969. }
  1970. #host-details > .host-title {
  1971. font-size: 18px;
  1972. font-weight: 700;
  1973. background-position: 0px center;
  1974. padding-left: 17px;
  1975. }
  1976. /* fieldset begin */
  1977. .fieldset {
  1978. border: 2px solid black;
  1979. padding: 10px;
  1980. }
  1981. .fieldset legend {
  1982. border-bottom: none;
  1983. width: auto;
  1984. font-size: 14px;
  1985. }
  1986. /* fieldset end */
  1987. /* Start Carousel */
  1988. .carousel-inner {
  1989. height: 80px;
  1990. }
  1991. /* End Carousel*/
  1992. #add-host .back {
  1993. display: block;
  1994. width: 105px;
  1995. margin-bottom: 10px;
  1996. }
  1997. #add-service .back {
  1998. display: block;
  1999. width: 130px;
  2000. margin-bottom: 10px;
  2001. }
  2002. #step8-content {
  2003. max-height: 440px;
  2004. }
  2005. #step10-content {
  2006. max-height: 440px;
  2007. }
  2008. .content-area {
  2009. position: relative;
  2010. .textTrigger {
  2011. cursor: pointer;
  2012. position: absolute;
  2013. right: 0;
  2014. top: 0;
  2015. visibility: hidden;
  2016. background-color: #dcdcdc;
  2017. }
  2018. }
  2019. //bootstrap
  2020. //.dropdown-menu .active > a, .dropdown-menu .active > a:hover {
  2021. // background-color: #49AFCD;
  2022. // background-image: -moz-linear-gradient(center top, #5BC0DE, #2F96B4);
  2023. //}
  2024. //bootstrap end
  2025. // COMBOBOX FIXES
  2026. .combobox-container .btn:hover {
  2027. background-position: 0;
  2028. }
  2029. // COMBOBOX FIXES END
  2030. @media all and (max-width: 1152px) {
  2031. #main-nav {
  2032. li.span2 {
  2033. width: 120px;
  2034. }
  2035. }
  2036. }
  2037. //
  2038. // Gray palette
  2039. //
  2040. .nav-pills > .active > a, .nav-pills > .active > a:hover {
  2041. background-color: #666666;
  2042. }
  2043. .nav-list > .active > a, .nav-list > .active > a:hover {
  2044. background-color: #666666;
  2045. }
  2046. .dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a {
  2047. background-color: #666666;
  2048. background-image: linear-gradient(to bottom, #666666, #555555);
  2049. }
  2050. .alert-info {
  2051. background-color: #E6F1F6;
  2052. border-color: #D2D9DD;
  2053. color: #4E575B;
  2054. text-shadow: none;
  2055. }
  2056. /*
  2057. .progress-striped .bar {
  2058. background-color: #A5A5A5;
  2059. }
  2060. .progress-info.progress-striped .bar, .progress-striped .bar-info {
  2061. background-color: #A5A5A5;
  2062. }
  2063. */
  2064. .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] {
  2065. background-color: #555555;
  2066. }
  2067. #main-nav .brand {
  2068. background-color: #777777;
  2069. color: #FFFFFF;
  2070. text-shadow: none;
  2071. }
  2072. .modal-body {
  2073. .spinner {
  2074. padding: 8px 35px 8px 42px;
  2075. background: url(/img/spinner.gif) no-repeat;
  2076. }
  2077. max-height: none;
  2078. }
  2079. // Get checkboxes to line up with text in components dropdown on Hosts page
  2080. #hosts .table ul#filter-dropdown li input[type="checkbox"] {
  2081. margin: 4px 4px 2px 2px;
  2082. }
  2083. #hosts .table a.ui-icon-circle-close {
  2084. margin-top: 6px;
  2085. }
  2086. i.icon-asterisks {
  2087. color: #FF4B4B;
  2088. }