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.

base.css 14KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834
  1. /*
  2. DJANGO Admin styles
  3. */
  4. body {
  5. margin: 0;
  6. padding: 0;
  7. font-size: 12px;
  8. font-family: "Lucida Grande","DejaVu Sans","Bitstream Vera Sans",Verdana,Arial,sans-serif;
  9. color: #333;
  10. background: #fff;
  11. }
  12. /* LINKS */
  13. a:link, a:visited {
  14. color: #5b80b2;
  15. text-decoration: none;
  16. }
  17. a:hover {
  18. color: #036;
  19. }
  20. a img {
  21. border: none;
  22. }
  23. a.section:link, a.section:visited {
  24. color: white;
  25. text-decoration: none;
  26. }
  27. /* GLOBAL DEFAULTS */
  28. p, ol, ul, dl {
  29. margin: .2em 0 .8em 0;
  30. }
  31. p {
  32. padding: 0;
  33. line-height: 140%;
  34. }
  35. h1,h2,h3,h4,h5 {
  36. font-weight: bold;
  37. }
  38. h1 {
  39. font-size: 18px;
  40. color: #666;
  41. padding: 0 6px 0 0;
  42. margin: 0 0 .2em 0;
  43. }
  44. h2 {
  45. font-size: 16px;
  46. margin: 1em 0 .5em 0;
  47. }
  48. h2.subhead {
  49. font-weight: normal;
  50. margin-top: 0;
  51. }
  52. h3 {
  53. font-size: 14px;
  54. margin: .8em 0 .3em 0;
  55. color: #666;
  56. font-weight: bold;
  57. }
  58. h4 {
  59. font-size: 12px;
  60. margin: 1em 0 .8em 0;
  61. padding-bottom: 3px;
  62. }
  63. h5 {
  64. font-size: 10px;
  65. margin: 1.5em 0 .5em 0;
  66. color: #666;
  67. text-transform: uppercase;
  68. letter-spacing: 1px;
  69. }
  70. ul li {
  71. list-style-type: square;
  72. padding: 1px 0;
  73. }
  74. ul.plainlist {
  75. margin-left: 0 !important;
  76. }
  77. ul.plainlist li {
  78. list-style-type: none;
  79. }
  80. li ul {
  81. margin-bottom: 0;
  82. }
  83. li, dt, dd {
  84. font-size: 11px;
  85. line-height: 14px;
  86. }
  87. dt {
  88. font-weight: bold;
  89. margin-top: 4px;
  90. }
  91. dd {
  92. margin-left: 0;
  93. }
  94. form {
  95. margin: 0;
  96. padding: 0;
  97. }
  98. fieldset {
  99. margin: 0;
  100. padding: 0;
  101. }
  102. blockquote {
  103. font-size: 11px;
  104. color: #777;
  105. margin-left: 2px;
  106. padding-left: 10px;
  107. border-left: 5px solid #ddd;
  108. }
  109. code, pre {
  110. font-family: "Bitstream Vera Sans Mono", Monaco, "Courier New", Courier, monospace;
  111. background: inherit;
  112. color: #666;
  113. font-size: 11px;
  114. }
  115. pre.literal-block {
  116. margin: 10px;
  117. background: #eee;
  118. padding: 6px 8px;
  119. }
  120. code strong {
  121. color: #930;
  122. }
  123. hr {
  124. clear: both;
  125. color: #eee;
  126. background-color: #eee;
  127. height: 1px;
  128. border: none;
  129. margin: 0;
  130. padding: 0;
  131. font-size: 1px;
  132. line-height: 1px;
  133. }
  134. /* TEXT STYLES & MODIFIERS */
  135. .small {
  136. font-size: 11px;
  137. }
  138. .tiny {
  139. font-size: 10px;
  140. }
  141. p.tiny {
  142. margin-top: -2px;
  143. }
  144. .mini {
  145. font-size: 9px;
  146. }
  147. p.mini {
  148. margin-top: -3px;
  149. }
  150. .help, p.help {
  151. font-size: 10px !important;
  152. color: #999;
  153. }
  154. img.help-tooltip {
  155. cursor: help;
  156. }
  157. p img, h1 img, h2 img, h3 img, h4 img, td img {
  158. vertical-align: middle;
  159. }
  160. .quiet, a.quiet:link, a.quiet:visited {
  161. color: #999 !important;
  162. font-weight: normal !important;
  163. }
  164. .quiet strong {
  165. font-weight: bold !important;
  166. }
  167. .float-right {
  168. float: right;
  169. }
  170. .float-left {
  171. float: left;
  172. }
  173. .clear {
  174. clear: both;
  175. }
  176. .align-left {
  177. text-align: left;
  178. }
  179. .align-right {
  180. text-align: right;
  181. }
  182. .example {
  183. margin: 10px 0;
  184. padding: 5px 10px;
  185. background: #efefef;
  186. }
  187. .nowrap {
  188. white-space: nowrap;
  189. }
  190. /* TABLES */
  191. table {
  192. border-collapse: collapse;
  193. border-color: #ccc;
  194. }
  195. td, th {
  196. font-size: 11px;
  197. line-height: 13px;
  198. border-bottom: 1px solid #eee;
  199. vertical-align: top;
  200. padding: 5px;
  201. font-family: "Lucida Grande", Verdana, Arial, sans-serif;
  202. }
  203. th {
  204. text-align: left;
  205. font-size: 12px;
  206. font-weight: bold;
  207. }
  208. thead th,
  209. tfoot td {
  210. color: #666;
  211. padding: 2px 5px;
  212. font-size: 11px;
  213. background: #e1e1e1 url(../img/nav-bg.gif) top left repeat-x;
  214. border-left: 1px solid #ddd;
  215. border-bottom: 1px solid #ddd;
  216. }
  217. tfoot td {
  218. border-bottom: none;
  219. border-top: 1px solid #ddd;
  220. }
  221. thead th:first-child,
  222. tfoot td:first-child {
  223. border-left: none !important;
  224. }
  225. thead th.optional {
  226. font-weight: normal !important;
  227. }
  228. fieldset table {
  229. border-right: 1px solid #eee;
  230. }
  231. tr.row-label td {
  232. font-size: 9px;
  233. padding-top: 2px;
  234. padding-bottom: 0;
  235. border-bottom: none;
  236. color: #666;
  237. margin-top: -1px;
  238. }
  239. tr.alt {
  240. background: #f6f6f6;
  241. }
  242. .row1 {
  243. background: #EDF3FE;
  244. }
  245. .row2 {
  246. background: white;
  247. }
  248. /* SORTABLE TABLES */
  249. thead th {
  250. padding: 2px 5px;
  251. line-height: normal;
  252. }
  253. thead th a:link, thead th a:visited {
  254. color: #666;
  255. }
  256. thead th.sorted {
  257. background: #c5c5c5 url(../img/nav-bg-selected.gif) top left repeat-x;
  258. }
  259. table thead th .text span {
  260. padding: 2px 5px;
  261. display:block;
  262. }
  263. table thead th .text a {
  264. display: block;
  265. cursor: pointer;
  266. padding: 2px 5px;
  267. }
  268. table thead th.sortable:hover {
  269. background: white url(../img/nav-bg-reverse.gif) 0 -5px repeat-x;
  270. }
  271. thead th.sorted a.sortremove {
  272. visibility: hidden;
  273. }
  274. table thead th.sorted:hover a.sortremove {
  275. visibility: visible;
  276. }
  277. table thead th.sorted .sortoptions {
  278. display: block;
  279. padding: 4px 5px 0 5px;
  280. float: right;
  281. text-align: right;
  282. }
  283. table thead th.sorted .sortpriority {
  284. font-size: .8em;
  285. min-width: 12px;
  286. text-align: center;
  287. vertical-align: top;
  288. }
  289. table thead th.sorted .sortoptions a {
  290. width: 14px;
  291. height: 12px;
  292. display: inline-block;
  293. }
  294. table thead th.sorted .sortoptions a.sortremove {
  295. background: url(../img/sorting-icons.gif) -4px -5px no-repeat;
  296. }
  297. table thead th.sorted .sortoptions a.sortremove:hover {
  298. background: url(../img/sorting-icons.gif) -4px -27px no-repeat;
  299. }
  300. table thead th.sorted .sortoptions a.ascending {
  301. background: url(../img/sorting-icons.gif) -5px -50px no-repeat;
  302. }
  303. table thead th.sorted .sortoptions a.ascending:hover {
  304. background: url(../img/sorting-icons.gif) -5px -72px no-repeat;
  305. }
  306. table thead th.sorted .sortoptions a.descending {
  307. background: url(../img/sorting-icons.gif) -5px -94px no-repeat;
  308. }
  309. table thead th.sorted .sortoptions a.descending:hover {
  310. background: url(../img/sorting-icons.gif) -5px -115px no-repeat;
  311. }
  312. /* ORDERABLE TABLES */
  313. table.orderable tbody tr td:hover {
  314. cursor: move;
  315. }
  316. table.orderable tbody tr td:first-child {
  317. padding-left: 14px;
  318. background-image: url(../img/nav-bg-grabber.gif);
  319. background-repeat: repeat-y;
  320. }
  321. table.orderable-initalized .order-cell, body>tr>td.order-cell {
  322. display: none;
  323. }
  324. /* FORM DEFAULTS */
  325. input, textarea, select, .form-row p {
  326. margin: 2px 0;
  327. padding: 2px 3px;
  328. vertical-align: middle;
  329. font-family: "Lucida Grande", Verdana, Arial, sans-serif;
  330. font-weight: normal;
  331. font-size: 11px;
  332. }
  333. textarea {
  334. vertical-align: top !important;
  335. }
  336. input[type=text], input[type=password], textarea, select, .vTextField {
  337. border: 1px solid #ccc;
  338. }
  339. /* FORM BUTTONS */
  340. .button, input[type=submit], input[type=button], .submit-row input {
  341. background: white url(../img/nav-bg.gif) bottom repeat-x;
  342. padding: 3px 5px;
  343. color: black;
  344. border: 1px solid #bbb;
  345. border-color: #ddd #aaa #aaa #ddd;
  346. }
  347. .button:active, input[type=submit]:active, input[type=button]:active {
  348. background-image: url(../img/nav-bg-reverse.gif);
  349. background-position: top;
  350. }
  351. .button[disabled], input[type=submit][disabled], input[type=button][disabled] {
  352. background-image: url(../img/nav-bg.gif);
  353. background-position: bottom;
  354. opacity: 0.4;
  355. }
  356. .button.default, input[type=submit].default, .submit-row input.default {
  357. border: 2px solid #5b80b2;
  358. background: #7CA0C7 url(../img/default-bg.gif) bottom repeat-x;
  359. font-weight: bold;
  360. color: white;
  361. float: right;
  362. }
  363. .button.default:active, input[type=submit].default:active {
  364. background-image: url(../img/default-bg-reverse.gif);
  365. background-position: top;
  366. }
  367. .button[disabled].default, input[type=submit][disabled].default, input[type=button][disabled].default {
  368. background-image: url(../img/default-bg.gif);
  369. background-position: bottom;
  370. opacity: 0.4;
  371. }
  372. /* MODULES */
  373. .module {
  374. border: 1px solid #ccc;
  375. margin-bottom: 5px;
  376. background: white;
  377. }
  378. .module p, .module ul, .module h3, .module h4, .module dl, .module pre {
  379. padding-left: 10px;
  380. padding-right: 10px;
  381. }
  382. .module blockquote {
  383. margin-left: 12px;
  384. }
  385. .module ul, .module ol {
  386. margin-left: 1.5em;
  387. }
  388. .module h3 {
  389. margin-top: .6em;
  390. }
  391. .module h2, .module caption, .inline-group h2 {
  392. margin: 0;
  393. padding: 2px 5px 3px 5px;
  394. font-size: 11px;
  395. text-align: left;
  396. font-weight: bold;
  397. background: #7CA0C7 url(../img/default-bg.gif) top left repeat-x;
  398. color: white;
  399. }
  400. .module table {
  401. border-collapse: collapse;
  402. }
  403. /* MESSAGES & ERRORS */
  404. ul.messagelist {
  405. padding: 0 0 5px 0;
  406. margin: 0;
  407. }
  408. ul.messagelist li {
  409. font-size: 12px;
  410. display: block;
  411. padding: 4px 5px 4px 25px;
  412. margin: 0 0 3px 0;
  413. border-bottom: 1px solid #ddd;
  414. color: #666;
  415. background: #ffc url(../img/icon_success.gif) 5px .3em no-repeat;
  416. }
  417. ul.messagelist li.warning{
  418. background-image: url(../img/icon_alert.gif);
  419. }
  420. ul.messagelist li.error{
  421. background-image: url(../img/icon_error.gif);
  422. }
  423. .errornote {
  424. font-size: 12px !important;
  425. display: block;
  426. padding: 4px 5px 4px 25px;
  427. margin: 0 0 3px 0;
  428. border: 1px solid red;
  429. color: red;
  430. background: #ffc url(../img/icon_error.gif) 5px .3em no-repeat;
  431. }
  432. ul.errorlist {
  433. margin: 0 !important;
  434. padding: 0 !important;
  435. }
  436. .errorlist li {
  437. font-size: 12px !important;
  438. display: block;
  439. padding: 4px 5px 4px 25px;
  440. margin: 0 0 3px 0;
  441. border: 1px solid red;
  442. color: white;
  443. background: red url(../img/icon_alert.gif) 5px .3em no-repeat;
  444. }
  445. .errorlist li a {
  446. color: white;
  447. text-decoration: underline;
  448. }
  449. td ul.errorlist {
  450. margin: 0 !important;
  451. padding: 0 !important;
  452. }
  453. td ul.errorlist li {
  454. margin: 0 !important;
  455. }
  456. .errors {
  457. background: #ffc;
  458. }
  459. .errors input, .errors select, .errors textarea {
  460. border: 1px solid red;
  461. }
  462. div.system-message {
  463. background: #ffc;
  464. margin: 10px;
  465. padding: 6px 8px;
  466. font-size: .8em;
  467. }
  468. div.system-message p.system-message-title {
  469. padding: 4px 5px 4px 25px;
  470. margin: 0;
  471. color: red;
  472. background: #ffc url(../img/icon_error.gif) 5px .3em no-repeat;
  473. }
  474. .description {
  475. font-size: 12px;
  476. padding: 5px 0 0 12px;
  477. }
  478. /* BREADCRUMBS */
  479. div.breadcrumbs {
  480. background: white url(../img/nav-bg-reverse.gif) 0 -10px repeat-x;
  481. padding: 2px 8px 3px 8px;
  482. font-size: 11px;
  483. color: #999;
  484. border-top: 1px solid white;
  485. border-bottom: 1px solid #ccc;
  486. text-align: left;
  487. }
  488. /* ACTION ICONS */
  489. .addlink {
  490. padding-left: 12px;
  491. background: url(../img/icon_addlink.gif) 0 .2em no-repeat;
  492. }
  493. .changelink {
  494. padding-left: 12px;
  495. background: url(../img/icon_changelink.gif) 0 .2em no-repeat;
  496. }
  497. .deletelink {
  498. padding-left: 12px;
  499. background: url(../img/icon_deletelink.gif) 0 .25em no-repeat;
  500. }
  501. a.deletelink:link, a.deletelink:visited {
  502. color: #CC3434;
  503. }
  504. a.deletelink:hover {
  505. color: #993333;
  506. }
  507. /* OBJECT TOOLS */
  508. .object-tools {
  509. font-size: 10px;
  510. font-weight: bold;
  511. font-family: Arial,Helvetica,sans-serif;
  512. padding-left: 0;
  513. float: right;
  514. position: relative;
  515. margin-top: -2.4em;
  516. margin-bottom: -2em;
  517. }
  518. .form-row .object-tools {
  519. margin-top: 5px;
  520. margin-bottom: 5px;
  521. float: none;
  522. height: 2em;
  523. padding-left: 3.5em;
  524. }
  525. .object-tools li {
  526. display: block;
  527. float: left;
  528. background: url(../img/tool-left.gif) 0 0 no-repeat;
  529. padding: 0 0 0 8px;
  530. margin-left: 2px;
  531. height: 16px;
  532. }
  533. .object-tools li:hover {
  534. background: url(../img/tool-left_over.gif) 0 0 no-repeat;
  535. }
  536. .object-tools a:link, .object-tools a:visited {
  537. display: block;
  538. float: left;
  539. color: white;
  540. padding: .1em 14px .1em 8px;
  541. height: 14px;
  542. background: #999 url(../img/tool-right.gif) 100% 0 no-repeat;
  543. }
  544. .object-tools a:hover, .object-tools li:hover a {
  545. background: #5b80b2 url(../img/tool-right_over.gif) 100% 0 no-repeat;
  546. }
  547. .object-tools a.viewsitelink, .object-tools a.golink {
  548. background: #999 url(../img/tooltag-arrowright.gif) top right no-repeat;
  549. padding-right: 28px;
  550. }
  551. .object-tools a.viewsitelink:hover, .object-tools a.golink:hover {
  552. background: #5b80b2 url(../img/tooltag-arrowright_over.gif) top right no-repeat;
  553. }
  554. .object-tools a.addlink {
  555. background: #999 url(../img/tooltag-add.gif) top right no-repeat;
  556. padding-right: 28px;
  557. }
  558. .object-tools a.addlink:hover {
  559. background: #5b80b2 url(../img/tooltag-add_over.gif) top right no-repeat;
  560. }
  561. /* OBJECT HISTORY */
  562. table#change-history {
  563. width: 100%;
  564. }
  565. table#change-history tbody th {
  566. width: 16em;
  567. }
  568. /* PAGE STRUCTURE */
  569. #container {
  570. position: relative;
  571. width: 100%;
  572. min-width: 760px;
  573. padding: 0;
  574. }
  575. #content {
  576. margin: 10px 15px;
  577. }
  578. #header {
  579. width: 100%;
  580. }
  581. #content-main {
  582. float: left;
  583. width: 100%;
  584. }
  585. #content-related {
  586. float: right;
  587. width: 18em;
  588. position: relative;
  589. margin-right: -19em;
  590. }
  591. #footer {
  592. clear: both;
  593. padding: 10px;
  594. }
  595. /* COLUMN TYPES */
  596. .colMS {
  597. margin-right: 20em !important;
  598. }
  599. .colSM {
  600. margin-left: 20em !important;
  601. }
  602. .colSM #content-related {
  603. float: left;
  604. margin-right: 0;
  605. margin-left: -19em;
  606. }
  607. .colSM #content-main {
  608. float: right;
  609. }
  610. .popup .colM {
  611. width: 95%;
  612. }
  613. .subcol {
  614. float: left;
  615. width: 46%;
  616. margin-right: 15px;
  617. }
  618. .dashboard #content {
  619. width: 500px;
  620. }
  621. /* HEADER */
  622. #header {
  623. background: #417690;
  624. color: #ffc;
  625. overflow: hidden;
  626. }
  627. #header a:link, #header a:visited {
  628. color: white;
  629. }
  630. #header a:hover {
  631. text-decoration: underline;
  632. }
  633. #branding h1 {
  634. padding: 0 10px;
  635. font-size: 18px;
  636. margin: 8px 0;
  637. font-weight: normal;
  638. color: #f4f379;
  639. }
  640. #branding h2 {
  641. padding: 0 10px;
  642. font-size: 14px;
  643. margin: -8px 0 8px 0;
  644. font-weight: normal;
  645. color: #ffc;
  646. }
  647. #user-tools {
  648. position: absolute;
  649. top: 0;
  650. right: 0;
  651. padding: 1.2em 10px;
  652. font-size: 11px;
  653. text-align: right;
  654. }
  655. /* SIDEBAR */
  656. #content-related h3 {
  657. font-size: 12px;
  658. color: #666;
  659. margin-bottom: 3px;
  660. }
  661. #content-related h4 {
  662. font-size: 11px;
  663. }
  664. #content-related .module h2 {
  665. background: #eee url(../img/nav-bg.gif) bottom left repeat-x;
  666. color: #666;
  667. }