Dashboard sipadu mbip
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

j-pro-modern-grey.css 5.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. /* ========================================= */
  2. /* Color: grey */
  3. /* ========================================= */
  4. /* Buttons
  5. =============================== */
  6. .j-pro.j-grey .j-widget .j-addon-btn,
  7. .j-pro.j-grey .j-primary-btn,
  8. .j-pro.j-grey .j-file-button,
  9. .j-pro.j-grey .j-secondary-btn { background-color:#455a64; }
  10. .j-pro.j-grey .j-widget.j-disabled-view .j-addon-btn,
  11. .j-pro.j-grey .j-primary-btn.j-disabled-view,
  12. .j-pro.j-grey .j-disabled-view .j-file-button,
  13. .j-pro.j-grey .j-secondary-btn.j-disabled-view { background-color:#455a64 !important; }
  14. .j-pro.j-grey .j-widget .j-addon-btn:hover,
  15. .j-pro.j-grey .j-primary-btn:hover,
  16. .j-pro.j-grey .j-file-button:hover,
  17. .j-pro.j-grey .j-secondary-btn:hover { background-color:#607d8b; }
  18. .j-pro.j-grey .j-file-button:hover + input { border:2px solid rgba(69,90,100,.6); }
  19. /* Ratings
  20. =============================== */
  21. .j-pro.j-grey .j-ratings input + label:hover,
  22. .j-pro.j-grey .j-ratings input + label:hover ~ label,
  23. .j-pro.j-grey .j-ratings input:checked + label,
  24. .j-pro.j-grey .j-ratings input:checked + label ~ label { color:#455a64; }
  25. /* Header + footer
  26. =============================== */
  27. .j-pro.j-grey .j-header {
  28. -webkit-box-shadow:0 6px 3px -3px rgba(96,125,139,.5);
  29. -moz-box-shadow:0 6px 3px -3px rgba(96,125,139,.5);
  30. -o-box-shadow:0 6px 3px -3px rgba(96,125,139,.5);
  31. box-shadow:0 6px 3px -3px rgba(96,125,139,.5);
  32. border-top:1px solid #90a4ae;
  33. background-color:#607d8b;
  34. }
  35. .j-pro.j-grey .j-footer { border-top:1px solid #455a64; background-color:#eceff1; }
  36. /* Multistep form
  37. =============================== */
  38. .j-pro.j-grey .j-active-step .j-steps { background-color:#eceff1; border:1px solid #455a64; }
  39. .j-pro.j-grey .j-passed-step .j-steps { background-color:#eceff1; border:1px solid #eceff1; }
  40. /* Other
  41. =============================== */
  42. .j-pro.j-grey .j-divider-text span { color:#607d8b; }
  43. .j-pro.j-grey,
  44. .j-pro.j-grey .j-divider-text span { background-color:#fafbfb; }
  45. /* Radio and checkbox
  46. =============================== */
  47. .j-pro.j-grey .j-checkbox:hover i,
  48. .j-pro.j-grey .j-radio:hover i { border:2px solid rgba(69,90,100,.6); }
  49. .j-pro.j-grey .j-radio input:checked + i,
  50. .j-pro.j-grey .j-checkbox input:checked + i { border:2px solid rgba(69,90,100,.9); color:rgba(69,90,100,.9); }
  51. .j-pro.j-grey .j-radio i:after { background-color:rgba(69,90,100,.9); }
  52. .j-pro.j-grey .j-checkbox i:after { border-bottom:solid rgb(69,90,100); border-left:solid rgb(69,90,100); }
  53. /* Toggle radio and toggle checkboxe
  54. =============================== */
  55. .j-pro.j-grey .j-checkbox-toggle:hover i,
  56. .j-pro.j-grey .j-radio-toggle:hover i { border:2px solid rgba(69,90,100,.6); }
  57. .j-pro.j-grey .j-radio-toggle input:checked + i,
  58. .j-pro.j-grey .j-checkbox-toggle input:checked + i { border:2px solid rgba(69,90,100,.9); }
  59. .j-pro.j-grey .j-radio-toggle i:before,
  60. .j-pro.j-grey .j-checkbox-toggle i:before { background-color:rgba(69,90,100,.9); }
  61. .j-pro.j-grey .j-checkbox-toggle input:checked + i,
  62. .j-pro.j-grey .j-radio-toggle input:checked + i { background-color:#eceff1; }
  63. /* Tooltip
  64. =============================== */
  65. .j-pro.j-grey .j-tooltip,
  66. .j-pro.j-grey .j-tooltip-image { background-color:#263238; }
  67. .j-pro.j-grey .j-tooltip-left-top:before { border-color:#263238 transparent; }
  68. .j-pro.j-grey .j-tooltip-right-top:before{ border-color:#263238 transparent; }
  69. .j-pro.j-grey .j-tooltip-right-bottom:before{ border-color:#263238 transparent; }
  70. .j-pro.j-grey .j-tooltip-left-bottom:before{ border-color:#263238 transparent; }
  71. .j-pro.j-grey .j-tooltip-right-side:before{ border-color:transparent #263238; }
  72. .j-pro.j-grey .j-tooltip-left-side:before{ border-color:transparent #263238; }
  73. /* Input
  74. =============================== */
  75. .j-pro.j-grey input[type="text"]:hover,
  76. .j-pro.j-grey input[type="password"]:hover,
  77. .j-pro.j-grey input[type="email"]:hover,
  78. .j-pro.j-grey input[type="search"]:hover,
  79. .j-pro.j-grey input[type="url"]:hover,
  80. .j-pro.j-grey textarea:hover,
  81. .j-pro.j-grey select:hover { border:2px solid rgba(69,90,100,.6); }
  82. .j-pro.j-grey input[type="text"]:focus,
  83. .j-pro.j-grey input[type="password"]:focus,
  84. .j-pro.j-grey input[type="email"]:focus,
  85. .j-pro.j-grey input[type="search"]:focus,
  86. .j-pro.j-grey input[type="url"]:focus,
  87. .j-pro.j-grey textarea:focus,
  88. .j-pro.j-grey select:focus { border:2px solid rgba(69,90,100,.9); }
  89. /* Image radio and Image checkbox
  90. =============================== */
  91. .j-pro.j-grey .j-radio-block input:checked + i,
  92. .j-pro.j-grey .j-checkbox-block input:checked + i { border:2px solid rgba(69,90,100,.9); color:rgba(69,90,100,.9); }
  93. .j-pro.j-grey .j-radio-block i:after { background-color:rgba(69,90,100,.9); }
  94. .j-pro.j-grey .j-checkbox-block i:after { border-bottom:solid rgba(69,90,100,.9); border-left:solid rgba(69,90,100,.9); }
  95. .j-pro.j-grey .j-checkbox-block .j-block-content:hover,
  96. .j-pro.j-grey .j-radio-block .j-block-content:hover { background:rgba(236,239,241,.5); }
  97. .j-pro.j-grey .j-checkbox-block input:checked ~ .j-block-content,
  98. .j-pro.j-grey .j-radio-block input:checked ~ .j-block-content { background-color:#eceff1; }