bootswatch.dark.less 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545
  1. // Slate 2.3.2
  2. // Bootswatch
  3. // -----------------------------------------------------
  4. // TYPOGRAPHY
  5. // -----------------------------------------------------
  6. h1, h2, h3, h4, h5, h6 {
  7. text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
  8. }
  9. code, pre {
  10. background-color: #F7F7F7;
  11. border: 1px solid darken(@grayDarker, 5%);
  12. text-shadow: none;
  13. }
  14. // SCAFFOLDING
  15. // -----------------------------------------------------
  16. legend, .page-header {
  17. border-bottom: 1px solid @hrBorder;
  18. }
  19. hr {
  20. border-bottom: none;
  21. }
  22. // NAVBAR
  23. // -----------------------------------------------------
  24. .navbar {
  25. .navbar-inner {
  26. #gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark);
  27. }
  28. .brand {
  29. text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
  30. border-right: none;
  31. }
  32. .navbar-text {
  33. padding: 0 15px;
  34. font-weight: bold;
  35. }
  36. .nav > li > a {
  37. text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
  38. border-right: 1px solid rgba(0, 0, 0, 0.2);
  39. border-left: 1px solid rgba(255, 255, 255, 0.1);
  40. &:hover {
  41. #gradient > .directional(@grayDarker, @grayDark, 280deg);
  42. border-left: 1px solid transparent;
  43. border-right: 1px solid transparent;
  44. }
  45. }
  46. .nav > li.active > a,
  47. .nav > li.active > a:hover {
  48. color: @grayLighter;
  49. background-color: @grayDark;
  50. #gradient > .directional(lighten(@grayDarker, 4%), lighten(@grayDark, 4%), 280deg);
  51. border-right: 1px solid darken(@gray, 15%);
  52. }
  53. .navbar-search .search-query {
  54. border: 1px solid darken(@gray, 15%);
  55. }
  56. .btn,
  57. .btn-group {
  58. margin: 4px 0;
  59. }
  60. .divider-vertical {
  61. background-color: transparent;
  62. border-right: none;
  63. }
  64. .dropdown-menu::after {
  65. border-bottom: 6px solid @grayDark;
  66. }
  67. &-inverse {
  68. .navbar-inner {
  69. #gradient > .vertical-three-colors(darken(@grayDarker, 3%), darken(@grayDarker, 8%), 70%, darken(@grayDarker, 8%));
  70. }
  71. .nav li > a {
  72. background-image: none;
  73. background-color: transparent;
  74. }
  75. .nav li > a:hover,
  76. .nav li.active > a,
  77. .nav li.active > a:hover {
  78. #gradient > .directional(darken(@grayDarker, 10%), darken(@grayDarker, 5%), 280deg);
  79. }
  80. }
  81. }
  82. @media (max-width: @navbarCollapseWidth) {
  83. .navbar .nav-collapse {
  84. .nav li > a,
  85. .nav li > a:hover,
  86. .nav .active > a,
  87. .nav .active > a:hover {
  88. .box-shadow(none);
  89. color: @grayLighter;
  90. border: 1px solid transparent;
  91. background-color: transparent;
  92. background-image: none;
  93. }
  94. .nav li > a:hover,
  95. .nav .active > a:hover {
  96. background-color: @grayDarker;
  97. }
  98. .navbar-form,
  99. .navbar-search {
  100. border-color: transparent;
  101. .box-shadow(none);
  102. }
  103. .nav-header {
  104. color: @grayLight;
  105. }
  106. }
  107. .navbar-inverse .nav-collapse {
  108. .nav li > a:hover,
  109. .nav .active > a:hover {
  110. background-color: @grayDarker !important;
  111. }
  112. }
  113. }
  114. .nav-tabs {
  115. .active > a, .active a:hover {
  116. border-bottom: 1px solid darken(@grayDark, 5%);;
  117. }
  118. }
  119. div.subnav {
  120. margin: 0 1px;
  121. //#gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark);
  122. border: 1px solid transparent;
  123. .box-shadow('0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)');
  124. .nav > li > a {
  125. color: @grayLighter;
  126. text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
  127. border-right: 1px solid darken(@gray, 15%);
  128. border-left: 1px solid @gray;
  129. &:hover {
  130. color: @grayLighter;
  131. background-color: @grayDark;
  132. //#gradient > .directional(@grayDarker, @grayDark, 280deg);
  133. border-left: 1px solid transparent;
  134. border-right: 1px solid transparent;
  135. }
  136. }
  137. .nav > li.active > a,
  138. .nav > li.active > a:hover {
  139. color: @grayLighter;
  140. background-color: @grayDark;
  141. #gradient > .directional(lighten(@grayDarker, 4%), lighten(@grayDark, 4%), 280deg);
  142. border-right: 1px solid darken(@gray, 15%);
  143. }
  144. .nav > li:first-child > a,
  145. .nav > li:first-child > a:hover {
  146. border-left: 1px solid transparent;
  147. }
  148. .nav > li.active:last-child > a,
  149. .nav > li:last-child > a:hover {
  150. border-right: 1px solid darken(@gray, 15%);
  151. }
  152. .open .dropdown-toggle {
  153. border-right: 1px solid darken(@gray, 15%);
  154. border-left: 1px solid @gray;
  155. }
  156. &.subnav-fixed {
  157. top: @navbarHeight;
  158. margin: 0;
  159. .box-shadow(none);
  160. .nav > li.active:first-child > a,
  161. .nav > li:first-child > a:hover {
  162. border-left: 1px solid darken(@gray, 15%);
  163. }
  164. }
  165. }
  166. // NAV
  167. // -----------------------------------------------------
  168. .nav {
  169. .nav-header {
  170. text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
  171. }
  172. & > li > a {
  173. //#gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark);
  174. .box-shadow('0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)');
  175. border: none;
  176. color: @grayLight;
  177. font-weight: bold;
  178. text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
  179. }
  180. li.active > a,
  181. li.active > a:hover {
  182. background-color: transparent;
  183. color: @white;
  184. }
  185. & > li.disabled > a,
  186. & > li.disabled > a:hover {
  187. color: @gray;
  188. }
  189. li > a:hover {
  190. background-color: transparent;
  191. color: @grayLighter;
  192. }
  193. }
  194. .breadcrumb {
  195. border: 1px solid transparent;
  196. #gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark);
  197. .box-shadow('0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)');
  198. a {
  199. color: @grayLighter;
  200. font-weight: bold;
  201. }
  202. li {
  203. color: @grayLight;
  204. font-weight: bold;
  205. text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
  206. }
  207. }
  208. .pagination {
  209. ul {
  210. .box-shadow(none);
  211. }
  212. ul > li > a,
  213. ul > li > span {
  214. border-left: 1px solid @gray;
  215. border-right: 1px solid darken(@gray, 15%);
  216. border-top: none;
  217. border-bottom: none;
  218. #gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark);
  219. .box-shadow('0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)');
  220. color: @grayLighter;
  221. font-weight: bold;
  222. text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
  223. &:hover {
  224. #gradient > .directional(@grayDarker, @grayDark, 280deg);
  225. border-left: 1px solid transparent;
  226. }
  227. }
  228. ul > .active > a,
  229. ul > .active > a:hover,
  230. ul > .active > span,
  231. ul > .active > span:hover {
  232. color: @grayLighter;
  233. background-color: @grayDark;
  234. #gradient > .directional(lighten(@grayDarker, 4%), lighten(@grayDark, 4%), 280deg);
  235. border-left: 1px solid transparent;
  236. }
  237. ul > .disabled > a,
  238. ul > .disabled > a:hover,
  239. ul > .disabled > span,
  240. ul > .disabled > span:hover {
  241. border-left: 1px solid @gray;
  242. border-right: 1px solid darken(@gray, 15%);
  243. border-top: none;
  244. border-bottom: none;
  245. #gradient > .vertical-three-colors(@grayLight, @gray, 70%, @gray);
  246. }
  247. }
  248. .pager {
  249. li > a,
  250. li > span {
  251. border: 1px solid transparent;
  252. .box-shadow('0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)');
  253. #gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark);
  254. &:hover {
  255. #gradient > .directional(@grayDarker, @grayDark, 280deg);
  256. border: 1px solid transparent;
  257. }
  258. }
  259. .disabled a,
  260. .disabled a:hover {
  261. background-color: transparent;
  262. #gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark);
  263. }
  264. }
  265. // BUTTONS
  266. // -----------------------------------------------------
  267. .btn {
  268. .buttonBackground(@gray, darken(@gray, 10%));
  269. .border-radius(3px);
  270. border: 1px solid @grayDarker;
  271. }
  272. .btn, .btn:hover {
  273. color: @white;
  274. font-weight: bold;
  275. text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.3);
  276. }
  277. .btn-primary {
  278. .buttonBackground(@btnPrimaryBackground, spin(@btnPrimaryBackground, 20));
  279. color: @grayDark;
  280. text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.3);
  281. }
  282. .btn-warning {
  283. .buttonBackground(lighten(@orange, 15%), @orange);
  284. }
  285. .btn-danger {
  286. .buttonBackground(@red, #bd362f);
  287. }
  288. .btn-success {
  289. .buttonBackground(@green, #51a351);
  290. }
  291. .btn-info {
  292. .buttonBackground(@blue, #2f96b4);
  293. }
  294. .btn-inverse {
  295. .buttonBackground(@gray, @grayDarker);
  296. }
  297. .caret {
  298. border-top-color: @white;
  299. }
  300. // TABLES
  301. // -----------------------------------------------------
  302. .table {
  303. tbody tr.success td {
  304. background-color: @successText;
  305. }
  306. tbody tr.error td {
  307. background-color: @errorText;
  308. }
  309. tbody tr.info td {
  310. background-color: @infoText;
  311. }
  312. }
  313. // FORMS
  314. // -----------------------------------------------------
  315. label, input, button, select, textarea, legend {
  316. color: @textColor;
  317. }
  318. legend, label {
  319. text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
  320. }
  321. .input-prepend .add-on,
  322. .input-append .add-on {
  323. vertical-align: top;
  324. background-color: @gray;
  325. border-top: 1px solid @grayLight;
  326. border-left: 1px solid @grayLight;
  327. border-bottom: 1px solid @grayDark;
  328. border-right: 1px solid @grayDark;
  329. text-shadow: none;
  330. }
  331. .input-append .btn,
  332. .input-prepend .btn {
  333. margin-top: -1px;
  334. padding: 5px 14px;
  335. }
  336. .uneditable-input,
  337. input[disabled],
  338. select[disabled],
  339. textarea[disabled],
  340. input[readonly],
  341. select[readonly],
  342. textarea[readonly] {
  343. color: @white;
  344. }
  345. .form-actions {
  346. border-top: none;
  347. }
  348. // DROPDOWNS
  349. // -----------------------------------------------------
  350. .dropdown-menu {
  351. .box-shadow(0 5px 5px rgba(0, 0, 0, 0.2));
  352. }
  353. .dropdown.open .dropdown-toggle {
  354. background-color: @grayDark;
  355. color: @grayLighter;
  356. }
  357. .dropdown-submenu > a::after {
  358. border-left-color: @white;
  359. }
  360. // ALERTS, LABELS, BADGES
  361. // -----------------------------------------------------
  362. .label, .alert {
  363. color: rgba(255, 255, 255, 0.9);
  364. text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
  365. .box-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
  366. }
  367. .alert {
  368. background-color: @orange;
  369. border-color: @orange;
  370. .alert-heading {
  371. color: rgba(255, 255, 255, 0.9);
  372. text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.4);
  373. }
  374. }
  375. .alert-success {
  376. background-color: @successText;
  377. border-color: @successText;
  378. }
  379. .alert-error {
  380. background-color: @errorText;
  381. border-color: @errorText;
  382. }
  383. .alert-info {
  384. background-color: @infoText;
  385. border-color: @infoText;
  386. }
  387. // MISC
  388. // -----------------------------------------------------
  389. .well, .hero-unit {
  390. .box-shadow(inset 1px 1px 1px rgba(0, 0, 0, 0.5));
  391. }
  392. .thumbnail,
  393. a.thumbnail:hover {
  394. border: 1px solid darken(@grayDarker, 5%);
  395. }
  396. .progress {
  397. background-color: darken(@grayDarker, 3%);
  398. #gradient > .vertical(darken(@grayDarker, 3%), darken(@grayDarker, 3%));
  399. .box-shadow(inset 1px 1px 1px rgba(0, 0, 0, 0.5));
  400. }
  401. .footer {
  402. border-top: 1px solid darken(@grayDarker, 5%);
  403. p {
  404. color: @textColor;
  405. }
  406. }
  407. .modal {
  408. background-color: darken(@grayDark, 5%);
  409. &-header {
  410. border-bottom: none;
  411. }
  412. &-body {
  413. border-bottom: 1px solid #1C1E22;
  414. }
  415. &-footer {
  416. border-top: none;
  417. background-color: @grayDarker;
  418. .box-shadow(none);
  419. }
  420. }
  421. // MEDIA QUERIES
  422. // -----------------------------------------------------
  423. @media (max-width: 979px) {
  424. .navbar .brand {
  425. border-right: none;
  426. }
  427. }
  428. @media (max-width: 768px) {
  429. div.subnav .nav > li + li > a {
  430. border-top: 1px solid transparent;
  431. }
  432. }