summaryrefslogtreecommitdiff
path: root/default/_ikiwiki.scss
blob: cf7a7ccc01f3528c3934269bfc984a1e73474ca8 (plain)
  1. @mixin ikiwiki-boilerplate {
  2. /* ikiwiki style sheet */
  3. /* Note that instead of modifying this style sheet, you can instead edit
  4. * local.css and use it to override or change settings in this one.
  5. */
  6. }
  7. @mixin ikiwiki-reset {
  8. /* html5 compat */
  9. article,aside,details,figcaption,figure,
  10. footer,header,hgroup,menu,nav,section {
  11. display: block;
  12. }
  13. }
  14. @mixin ikiwiki-header {
  15. div.header, header.header {
  16. margin: 0;
  17. font-size: 140%;
  18. font-weight: bold;
  19. line-height: 1em;
  20. display: block;
  21. }
  22. }
  23. @mixin ikiwiki-inlineheader {
  24. .inlineheader .author {
  25. margin: 0;
  26. font-size: 112%;
  27. font-weight: bold;
  28. display: block;
  29. }
  30. }
  31. @mixin ikiwiki-actions {
  32. .actions ul {
  33. margin: 0;
  34. padding: 6px .4em;
  35. height: 1em;
  36. list-style-type: none;
  37. }
  38. .actions li {
  39. display: inline;
  40. padding: .2em;
  41. }
  42. .pageheader .actions ul {
  43. border-bottom: 1px solid #000;
  44. }
  45. .inlinepage .actions ul {
  46. border-bottom: 0;
  47. }
  48. }
  49. @mixin ikiwiki-plugin-po {
  50. #otherlanguages ul {
  51. margin: 0;
  52. padding: 6px;
  53. list-style-type: none;
  54. }
  55. #otherlanguages li {
  56. display: inline;
  57. padding: .2em .4em;
  58. }
  59. .pageheader #otherlanguages {
  60. border-bottom: 1px solid #000;
  61. }
  62. }
  63. @mixin ikiwiki-inlinecontent {
  64. .inlinecontent,
  65. .inlineenclosure {
  66. margin-top: .4em;
  67. }
  68. }
  69. @mixin ikiwiki-footer {
  70. .pagefooter,
  71. .inlinefooter,
  72. .comments {
  73. clear: both;
  74. }
  75. }
  76. @mixin ikiwiki-pageinfo {
  77. #pageinfo {
  78. margin: 1em 0;
  79. border-top: 1px solid #000;
  80. }
  81. }
  82. @mixin ikiwiki-tags {
  83. .tags {
  84. margin-top: 1em;
  85. }
  86. .inlinepage .tags {
  87. display: inline;
  88. }
  89. }
  90. @mixin ikiwiki-plugin-map {
  91. .mapparent {
  92. text-decoration: none;
  93. }
  94. }
  95. @mixin ikiwiki-plugin-img {
  96. .img caption {
  97. font-size: 80%;
  98. caption-side: bottom;
  99. text-align: center;
  100. }
  101. img.img {
  102. margin: 0.5ex;
  103. }
  104. }
  105. @mixin ikiwiki-alignment {
  106. .align-left {
  107. float: left;
  108. }
  109. .align-right {
  110. float: right;
  111. }
  112. }
  113. @mixin ikiwiki-backlinks {
  114. #backlinks {
  115. margin-top: 1em;
  116. }
  117. }
  118. @mixin ikiwiki-plugin-search {
  119. #searchform {
  120. display: inline;
  121. float: right;
  122. }
  123. }
  124. @mixin ikiwiki-plugin-editpage {
  125. #editcontent {
  126. width: 98%;
  127. }
  128. .editcontentdiv {
  129. width: auto;
  130. overflow: auto;
  131. }
  132. }
  133. @mixin ikiwiki-images {
  134. img {
  135. border-style: none;
  136. }
  137. }
  138. @mixin ikiwiki-pre {
  139. pre {
  140. overflow: auto;
  141. }
  142. }
  143. @mixin ikiwiki-plugin-recentchanges {
  144. div.recentchanges {
  145. border-style: solid;
  146. border-width: 1px;
  147. overflow: auto;
  148. width: auto;
  149. clear: none;
  150. background: #eee;
  151. color: black !important;
  152. }
  153. .recentchanges .metadata {
  154. padding: 0px 0.5em;
  155. }
  156. .recentchanges .changelog {
  157. font-style: italic;
  158. clear: both;
  159. display: block;
  160. padding: 1px 2px;
  161. background: white !important;
  162. color: black !important;
  163. }
  164. .recentchanges .desc {
  165. display: none;
  166. }
  167. .recentchanges .diff {
  168. display: none;
  169. }
  170. .recentchanges .committer {
  171. float: left;
  172. margin: 0;
  173. width: 40%;
  174. }
  175. .recentchanges .committype {
  176. float: left;
  177. margin: 0;
  178. width: 5%;
  179. font-size: small;
  180. }
  181. .recentchanges .changedate {
  182. float: left;
  183. margin: 0;
  184. width: 35%;
  185. font-size: small;
  186. }
  187. .recentchanges .pagelinks,
  188. .recentchanges .revert {
  189. float: right;
  190. margin: 0;
  191. width: 60%;
  192. }
  193. }
  194. @mixin ikiwiki-blogform {
  195. .blogform, #blogform {
  196. padding: 10px 10px;
  197. border: 1px solid #aaa;
  198. background: #eee;
  199. color: black !important;
  200. width: auto;
  201. overflow: auto;
  202. }
  203. }
  204. @mixin ikiwiki-inlinepage {
  205. .inlinepage {
  206. padding: 10px 10px;
  207. border: 1px solid #aaa;
  208. overflow: auto;
  209. }
  210. }
  211. @mixin ikiwiki-authorship {
  212. .pagedate,
  213. .pagelicense,
  214. .pagecopyright {
  215. font-style: italic;
  216. display: block;
  217. margin-top: 1em;
  218. }
  219. }
  220. @mixin ikiwiki-archivepage {
  221. .archivepagedate {
  222. font-style: italic;
  223. }
  224. .archivepage {
  225. margin-bottom: 1em;
  226. }
  227. }
  228. @mixin ikiwiki-debug {
  229. .error {
  230. color: #C00;
  231. }
  232. }
  233. @mixin ikiwiki-plugin-sidebar {
  234. .sidebar {
  235. width: 20ex;
  236. float: right;
  237. margin-left: 4px;
  238. margin-bottom: 4px;
  239. margin-top: -1px;
  240. padding: 0ex 2ex;
  241. background: white;
  242. border: 1px solid black;
  243. color: black !important;
  244. }
  245. }
  246. @mixin ikiwiki-plugin-poll {
  247. hr.poll {
  248. height: 10pt;
  249. color: white !important;
  250. background: #eee;
  251. border: 2px solid black;
  252. }
  253. div.poll {
  254. margin-top: 1ex;
  255. margin-bottom: 1ex;
  256. padding: 1ex 1ex;
  257. border: 1px solid #aaa;
  258. }
  259. }
  260. @mixin ikiwiki-plugin-color {
  261. span.color {
  262. padding: 2px;
  263. }
  264. }
  265. @mixin ikiwiki-plugin-comments {
  266. .comment-header,
  267. .microblog-header {
  268. font-style: italic;
  269. margin-top: .3em;
  270. }
  271. .comment .author,
  272. .microblog .author {
  273. font-weight: bold;
  274. }
  275. .comment-subject {
  276. font-weight: bold;
  277. }
  278. .comment-avatar {
  279. float: right;
  280. }
  281. .comment {
  282. border: 1px solid #aaa;
  283. padding: 3px;
  284. }
  285. }
  286. @mixin ikiwiki-plugin-progress {
  287. div.progress {
  288. margin-top: 1ex;
  289. margin-bottom: 1ex;
  290. border: 1px solid #888;
  291. width: 400px;
  292. background: #eee;
  293. color: black !important;
  294. padding: 1px;
  295. }
  296. div.progress-done {
  297. background: #ea6 !important;
  298. color: black !important;
  299. text-align: center;
  300. padding: 1px;
  301. }
  302. }
  303. @mixin ikiwiki-site-print {
  304. /* things to hide in printouts */
  305. @media print {
  306. .actions {
  307. display: none;
  308. }
  309. .tags {
  310. display: none;
  311. }
  312. .trails {
  313. display: none;
  314. }
  315. .feedbutton {
  316. display: none;
  317. }
  318. #searchform {
  319. display: none;
  320. }
  321. .blogform, #blogform {
  322. display: none;
  323. }
  324. #backlinks {
  325. display: none;
  326. }
  327. }
  328. }
  329. @mixin ikiwiki-infobox {
  330. /* infobox template */
  331. .infobox {
  332. float: right;
  333. margin-left: 2ex;
  334. margin-top: 1ex;
  335. margin-bottom: 1ex;
  336. padding: 1ex 1ex;
  337. border: 1px solid #aaa;
  338. background: white;
  339. color: black !important;
  340. }
  341. }
  342. @mixin ikiwiki-notebook {
  343. /* notebox template */
  344. .notebox {
  345. float: right;
  346. margin-left: 2ex;
  347. margin-top: 1ex;
  348. margin-bottom: 1ex;
  349. padding: 1ex 1ex;
  350. border: 1px solid #aaa;
  351. width: 25%;
  352. background: white;
  353. color: black !important;
  354. }
  355. }
  356. @mixin ikiwiki-popup {
  357. /* popup template and backlinks hiding */
  358. .popup {
  359. border-bottom: 1px dotted #366;
  360. color: #366;
  361. }
  362. .popup .balloon,
  363. .popup .paren,
  364. .popup .expand {
  365. display: none;
  366. text-align: left;
  367. }
  368. .popup:hover .balloon,
  369. .popup:focus .balloon {
  370. position: absolute;
  371. display: inline;
  372. margin: 1em 0 0 -2em;
  373. padding: 0.625em;
  374. border: 2px solid;
  375. background-color: #dee;
  376. color: black;
  377. }
  378. }
  379. @mixin ikiwiki-forms {
  380. /* form styling */
  381. fieldset {
  382. margin: 1ex 0;
  383. border: 1px solid black;
  384. }
  385. legend {
  386. padding: 0 1ex;
  387. }
  388. .fb_submit {
  389. float: left;
  390. margin: 2px 0;
  391. }
  392. label.block {
  393. display: block;
  394. }
  395. label.inline {
  396. display: inline;
  397. }
  398. input#openid_identifier {
  399. background: url(wikiicons/openidlogin-bg.gif) no-repeat;
  400. background-color: #fff;
  401. background-position: 0 50%;
  402. color: #000;
  403. padding-left: 18px;
  404. }
  405. input#searchbox {
  406. background: url(wikiicons/search-bg.gif) no-repeat;
  407. background-color: #fff;
  408. background-position: 100% 50%;
  409. color: #000;
  410. padding-right: 16px;
  411. }
  412. /* invalid form fields */
  413. .fb_invalid {
  414. color: red;
  415. background: white !important;
  416. }
  417. /* required form fields */
  418. .fb_required {
  419. font-weight: bold;
  420. }
  421. }
  422. @mixin ikiwiki-plugin-highlight {
  423. /* highlight plugin */
  424. pre.hl {
  425. color: #000000;
  426. background-color: #ffffff;
  427. }
  428. .hl.num {
  429. color: #2928ff;
  430. }
  431. .hl.esc {
  432. color: #ff00ff;
  433. }
  434. .hl.str {
  435. color: #ff0000;
  436. }
  437. .hl.dstr {
  438. color: #818100;
  439. }
  440. .hl.slc {
  441. color: #838183;
  442. font-style: italic;
  443. }
  444. .hl.com {
  445. color: #838183;
  446. font-style: italic;
  447. }
  448. .hl.dir {
  449. color: #008200;
  450. }
  451. .hl.sym {
  452. color: #000000;
  453. }
  454. .hl.line {
  455. color: #555555;
  456. }
  457. .hl.mark {
  458. background-color: #ffffbb;
  459. }
  460. .hl.kwa {
  461. color: #000000;
  462. font-weight: bold;
  463. }
  464. .hl.kwb {
  465. color: #830000;
  466. }
  467. .hl.kwc {
  468. color: #000000;
  469. font-weight: bold;
  470. }
  471. .hl.kwd {
  472. color: #010181;
  473. }
  474. }
  475. @mixin ikiwiki-plugin-calendar {
  476. /* calendar plugin */
  477. .month-calendar-day-this-day,
  478. .year-calendar-this-month {
  479. background-color: #eee;
  480. }
  481. .month-calendar-day-head,
  482. .month-calendar-day-nolink,
  483. .month-calendar-day-link,
  484. .month-calendar-day-this-day,
  485. .month-calendar-day-future {
  486. text-align: right;
  487. }
  488. .month-calendar-arrow A:link,
  489. .year-calendar-arrow A:link,
  490. .month-calendar-arrow A:visited,
  491. .year-calendar-arrow A:visited {
  492. text-decoration: none;
  493. font-weight: normal;
  494. font-size: 150%;
  495. }
  496. }
  497. @mixin ikiwiki-lists {
  498. /* outlines */
  499. li.L1 {
  500. list-style: upper-roman;
  501. }
  502. li.L2 {
  503. list-style: decimal;
  504. }
  505. li.L3 {
  506. list-style: lower-alpha;
  507. }
  508. li.L4 {
  509. list-style: disc;
  510. }
  511. li.L5 {
  512. list-style: square;
  513. }
  514. li.L6 {
  515. list-style: circle;
  516. }
  517. li.L7 {
  518. list-style: lower-roman;
  519. }
  520. li.L8 {
  521. list-style: upper-alpha;
  522. }
  523. }
  524. @mixin ikiwiki-plugin-pagestats {
  525. /* tag cloud */
  526. .pagecloud {
  527. float: right;
  528. width: 30%;
  529. text-align: center;
  530. padding: 10px 10px;
  531. border: 1px solid #aaa;
  532. background: #eee;
  533. color: black !important;
  534. }
  535. .smallestPC {
  536. font-size: 70%;
  537. }
  538. .smallPC {
  539. font-size: 85%;
  540. }
  541. .normalPC {
  542. font-size: 100%;
  543. }
  544. .bigPC {
  545. font-size: 115%;
  546. }
  547. .biggestPC {
  548. font-size: 130%;
  549. }
  550. }
  551. @mixin ikiwiki-feedbutton {
  552. /* orange feed button */
  553. .feedbutton {
  554. background: #ff6600;
  555. color: white !important;
  556. border-left: 1px solid #cc9966;
  557. border-top: 1px solid #ccaa99;
  558. border-right: 1px solid #993300;
  559. border-bottom: 1px solid #331100;
  560. padding: 0px 0.5em 0px 0.5em;
  561. font-family: sans-serif;
  562. font-weight: bold;
  563. font-size: small;
  564. text-decoration: none;
  565. margin-top: 1em;
  566. }
  567. .feedbutton:hover {
  568. color: white !important;
  569. background: #ff9900;
  570. }
  571. }
  572. @mixin ikiwiki-plugin-flattr {
  573. .FlattrButton {
  574. display: none;
  575. }
  576. }
  577. @mixin ikiwiki-plugin-openid {
  578. /* login selector */
  579. #login_choice {
  580. display: none;
  581. }
  582. #login_input_area {
  583. clear: both;
  584. padding: 10px;
  585. }
  586. #login_btns, #login_btns br {
  587. clear: both;
  588. }
  589. #login_highlight {
  590. background-color: black;
  591. float: left;
  592. }
  593. .login_large_btn {
  594. padding: 1em 1.5em;
  595. border: 1px solid #DDD;
  596. margin: 3px;
  597. float: left;
  598. }
  599. .login_small_btn {
  600. padding: 4px 4px;
  601. border: 1px solid #DDD;
  602. margin: 3px;
  603. float: left;
  604. }
  605. a.login_large_btn:focus {
  606. outline: none;
  607. }
  608. a.login_large_btn:focus {
  609. outline-style: none;
  610. }
  611. .login_selected {
  612. border: 4px solid #DDD;
  613. }
  614. }
  615. @mixin ikiwiki-plugin-attachment {
  616. .fileupload-content .ui-progressbar {
  617. width: 200px;
  618. height: 20px;
  619. }
  620. .fileupload-content .ui-progressbar-value {
  621. background: url(ikiwiki/images/pbar-ani.gif);
  622. }
  623. }
  624. @mixin ikiwiki-plugin-trail {
  625. .trails {
  626. margin-top: 1em;
  627. margin-bottom: 1em;
  628. }
  629. .trail {
  630. display: block;
  631. clear: both;
  632. position: relative;
  633. }
  634. .trailprev {
  635. display: block;
  636. text-align: left;
  637. position: absolute;
  638. top: 0%;
  639. left: 3%;
  640. width: 30%;
  641. }
  642. .trailup {
  643. display: block;
  644. text-align: center;
  645. margin-left: 35%;
  646. margin-right: 35%;
  647. }
  648. .trailnext {
  649. display: block;
  650. text-align: right;
  651. position: absolute;
  652. top: 0%;
  653. width: 30%;
  654. right: 3%;
  655. }
  656. .trailsep {
  657. display: none;
  658. }
  659. }
  660. @mixin ikiwiki-mobile {
  661. /* mobile/small-screen-friendly layout */
  662. @media (max-width: 600px) {
  663. .sidebar {
  664. width: auto;
  665. float: none;
  666. margin-top: 0;
  667. border: none;
  668. }
  669. /* if the mobile browser is new enough, use flex layout to shuffle
  670. * the sidebar to the end */
  671. .page {
  672. display: -webkit-box;
  673. display: -webkit-flexbox;
  674. display: -webkit-flex;
  675. display: -moz-box;
  676. display: -ms-flexbox;
  677. display: flex;
  678. -webkit-box-orient: vertical;
  679. -webkit-flex-direction: tb;
  680. -webkit-flex-direction: column;
  681. -webkit-flex-flow: column;
  682. -ms-flex-direction: column;
  683. flex-direction: column;
  684. }
  685. #pageheader {
  686. -webkit-box-ordinal-group: -1;
  687. -webkit-order: -1;
  688. -ms-box-ordinal-group: -1;
  689. -ms-flex-order: -1;
  690. order: -1;
  691. }
  692. .sidebar, #footer {
  693. -webkit-box-ordinal-group: 1;
  694. -webkit-order: 1;
  695. -ms-box-ordinal-group: 1;
  696. -ms-flex-order: 1;
  697. order: 1;
  698. }
  699. .blogform, #blogform {
  700. padding: 4px 4px;
  701. }
  702. }
  703. }
  704. // all styles in same order as original Ikiwiki stylesheet
  705. @mixin ikiwiki-style-legacy {
  706. @include ikiwiki-header;
  707. @include ikiwiki-inlineheader;
  708. @include ikiwiki-actions;
  709. @include ikiwiki-plugin-po;
  710. @include ikiwiki-inlinecontent;
  711. @include ikiwiki-footer;
  712. @include ikiwiki-pageinfo;
  713. @include ikiwiki-tags;
  714. @include ikiwiki-plugin-map;
  715. @include ikiwiki-plugin-img;
  716. @include ikiwiki-alignment;
  717. @include ikiwiki-backlinks;
  718. @include ikiwiki-plugin-search;
  719. @include ikiwiki-plugin-editpage;
  720. @include ikiwiki-images;
  721. @include ikiwiki-pre;
  722. @include ikiwiki-plugin-recentchanges;
  723. @include ikiwiki-blogform;
  724. @include ikiwiki-inlinepage;
  725. @include ikiwiki-authorship;
  726. @include ikiwiki-archivepage;
  727. @include ikiwiki-debug;
  728. @include ikiwiki-plugin-sidebar;
  729. @include ikiwiki-plugin-poll;
  730. @include ikiwiki-plugin-color;
  731. @include ikiwiki-plugin-comments;
  732. @include ikiwiki-plugin-progress;
  733. @include ikiwiki-site-print;
  734. @include ikiwiki-infobox;
  735. @include ikiwiki-notebook;
  736. @include ikiwiki-popup;
  737. @include ikiwiki-forms;
  738. @include ikiwiki-plugin-highlight;
  739. @include ikiwiki-plugin-calendar;
  740. @include ikiwiki-lists;
  741. @include ikiwiki-plugin-pagestats;
  742. @include ikiwiki-feedbutton;
  743. @include ikiwiki-plugin-flattr;
  744. @include ikiwiki-plugin-openid;
  745. @include ikiwiki-plugin-attachment;
  746. @include ikiwiki-plugin-trail;
  747. @include ikiwiki-mobile;
  748. }
  749. @mixin ikiwiki-site {
  750. // main content
  751. @include ikiwiki-inlinepage;
  752. @include ikiwiki-inlineheader;
  753. @include ikiwiki-inlinecontent;
  754. @include ikiwiki-plugin-comments;
  755. // header
  756. @include ikiwiki-header;
  757. @include ikiwiki-plugin-search;
  758. @include ikiwiki-actions;
  759. @include ikiwiki-plugin-po;
  760. // footer
  761. @include ikiwiki-footer;
  762. @include ikiwiki-pageinfo;
  763. @include ikiwiki-tags;
  764. @include ikiwiki-backlinks;
  765. @include ikiwiki-authorship;
  766. // aside
  767. @include ikiwiki-plugin-sidebar;
  768. @include ikiwiki-plugin-trail;
  769. }
  770. // http://www.louddog.com/2008/create-maintainable-code-with-a-css-styleguide/
  771. @mixin ikiwiki-style {
  772. // site defaults
  773. @include ikiwiki-images;
  774. @include ikiwiki-pre;
  775. // generic styles
  776. @include ikiwiki-lists;
  777. @include ikiwiki-plugin-img;
  778. @include ikiwiki-feedbutton;
  779. @include ikiwiki-forms;
  780. @include ikiwiki-alignment;
  781. @include ikiwiki-debug;
  782. @include ikiwiki-plugin-highlight;
  783. @include ikiwiki-plugin-color;
  784. // shell
  785. // layout
  786. @include ikiwiki-site;
  787. @include ikiwiki-site-print;
  788. // modulars
  789. @include ikiwiki-infobox;
  790. @include ikiwiki-notebook;
  791. @include ikiwiki-popup;
  792. @include ikiwiki-plugin-calendar;
  793. @include ikiwiki-plugin-progress;
  794. @include ikiwiki-plugin-map;
  795. @include ikiwiki-plugin-poll;
  796. @include ikiwiki-plugin-pagestats;
  797. @include ikiwiki-plugin-flattr;
  798. @include ikiwiki-blogform;
  799. // section/page specific
  800. @include ikiwiki-archivepage;
  801. @include ikiwiki-plugin-recentchanges;
  802. @include ikiwiki-plugin-editpage;
  803. @include ikiwiki-plugin-attachment;
  804. @include ikiwiki-plugin-openid;
  805. @include ikiwiki-mobile;
  806. }
  807. @mixin ikiwiki {
  808. @include ikiwiki-boilerplate;
  809. @include ikiwiki-reset;
  810. @include ikiwiki-style-legacy;
  811. }