bootswatch.dark.less 11 KB

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