summaryrefslogtreecommitdiff
path: root/default/_ikiwiki.scss
blob: d00ec96428321cc28c88fafad1f852b502e18223 (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,
  10. header,
  11. footer,
  12. nav {
  13. display: block;
  14. }
  15. }
  16. @mixin ikiwiki-style {
  17. .header {
  18. margin: 0;
  19. font-size: 140%;
  20. font-weight: bold;
  21. line-height: 1em;
  22. display: block;
  23. }
  24. .inlineheader .author {
  25. margin: 0;
  26. font-size: 112%;
  27. font-weight: bold;
  28. display: block;
  29. }
  30. .actions ul {
  31. margin: 0;
  32. padding: 6px .4em;
  33. height: 1em;
  34. list-style-type: none;
  35. }
  36. .actions li {
  37. display: inline;
  38. padding: .2em;
  39. }
  40. .pageheader .actions ul {
  41. border-bottom: 1px solid #000;
  42. }
  43. .inlinepage .actions ul {
  44. border-bottom: 0;
  45. }
  46. #otherlanguages ul {
  47. margin: 0;
  48. padding: 6px;
  49. list-style-type: none;
  50. }
  51. #otherlanguages li {
  52. display: inline;
  53. padding: .2em .4em;
  54. }
  55. .pageheader #otherlanguages {
  56. border-bottom: 1px solid #000;
  57. }
  58. .inlinecontent {
  59. margin-top: .4em;
  60. }
  61. .pagefooter,
  62. .inlinefooter,
  63. .comments {
  64. clear: both;
  65. }
  66. #pageinfo {
  67. margin: 1em 0;
  68. border-top: 1px solid #000;
  69. }
  70. .tags {
  71. margin-top: 1em;
  72. }
  73. .inlinepage .tags {
  74. display: inline;
  75. }
  76. .mapparent {
  77. text-decoration: none;
  78. }
  79. .img caption {
  80. font-size: 80%;
  81. caption-side: bottom;
  82. text-align: center;
  83. }
  84. img.img {
  85. margin: 0.5ex;
  86. }
  87. .align-left {
  88. float: left;
  89. }
  90. .align-right {
  91. float: right;
  92. }
  93. #backlinks {
  94. margin-top: 1em;
  95. }
  96. #searchform {
  97. display: inline;
  98. float: right;
  99. }
  100. #editcontent {
  101. width: 98%;
  102. }
  103. .editcontentdiv {
  104. width: auto;
  105. overflow: auto;
  106. }
  107. img {
  108. border-style: none;
  109. }
  110. pre {
  111. overflow: auto;
  112. }
  113. div.recentchanges {
  114. border-style: solid;
  115. border-width: 1px;
  116. overflow: auto;
  117. width: auto;
  118. clear: none;
  119. background: #eee;
  120. color: black !important;
  121. }
  122. .recentchanges .metadata {
  123. padding: 0px 0.5em;
  124. }
  125. .recentchanges .changelog {
  126. font-style: italic;
  127. clear: both;
  128. display: block;
  129. padding: 1px 2px;
  130. background: white !important;
  131. color: black !important;
  132. }
  133. .recentchanges .desc {
  134. display: none;
  135. }
  136. .recentchanges .diff {
  137. display: none;
  138. }
  139. .recentchanges .committer {
  140. float: left;
  141. margin: 0;
  142. width: 40%;
  143. }
  144. .recentchanges .committype {
  145. float: left;
  146. margin: 0;
  147. width: 5%;
  148. font-size: small;
  149. }
  150. .recentchanges .changedate {
  151. float: left;
  152. margin: 0;
  153. width: 35%;
  154. font-size: small;
  155. }
  156. .recentchanges .pagelinks,
  157. .recentchanges .revert {
  158. float: right;
  159. margin: 0;
  160. width: 60%;
  161. }
  162. .blogform,
  163. #blogform {
  164. padding: 10px 10px;
  165. border: 1px solid #aaa;
  166. background: #eee;
  167. color: black !important;
  168. width: auto;
  169. overflow: auto;
  170. }
  171. .inlinepage {
  172. padding: 10px 10px;
  173. border: 1px solid #aaa;
  174. overflow: auto;
  175. }
  176. .pagedate,
  177. .pagelicense,
  178. .pagecopyright {
  179. font-style: italic;
  180. display: block;
  181. margin-top: 1em;
  182. }
  183. .error {
  184. color: #C00;
  185. }
  186. .sidebar {
  187. width: 20ex;
  188. float: right;
  189. margin-left: 4px;
  190. margin-bottom: 4px;
  191. margin-top: -1px;
  192. padding: 0ex 2ex;
  193. background: white;
  194. border: 1px solid black;
  195. color: black !important;
  196. }
  197. hr.poll {
  198. height: 10pt;
  199. color: white !important;
  200. background: #eee;
  201. border: 2px solid black;
  202. }
  203. div.poll {
  204. margin-top: 1ex;
  205. margin-bottom: 1ex;
  206. padding: 1ex 1ex;
  207. border: 1px solid #aaa;
  208. }
  209. span.color {
  210. padding: 2px;
  211. }
  212. .comment-header,
  213. .microblog-header {
  214. font-style: italic;
  215. margin-top: .3em;
  216. }
  217. .comment .author,
  218. .microblog .author {
  219. font-weight: bold;
  220. }
  221. .comment-subject {
  222. font-weight: bold;
  223. }
  224. .comment-avatar {
  225. float: right;
  226. }
  227. .comment {
  228. border: 1px solid #aaa;
  229. padding: 3px;
  230. }
  231. div.progress {
  232. margin-top: 1ex;
  233. margin-bottom: 1ex;
  234. border: 1px solid #888;
  235. width: 400px;
  236. background: #eee;
  237. color: black !important;
  238. padding: 1px;
  239. }
  240. div.progress-done {
  241. background: #ea6 !important;
  242. color: black !important;
  243. text-align: center;
  244. padding: 1px;
  245. }
  246. /* things to hide in printouts */
  247. @media print {
  248. .actions {
  249. display: none;
  250. }
  251. .tags {
  252. display: none;
  253. }
  254. .feedbutton {
  255. display: none;
  256. }
  257. #searchform {
  258. display: none;
  259. }
  260. .blogform,
  261. #blogform {
  262. display: none;
  263. }
  264. #backlinks {
  265. display: none;
  266. }
  267. }
  268. /* infobox template */
  269. .infobox {
  270. float: right;
  271. margin-left: 2ex;
  272. margin-top: 1ex;
  273. margin-bottom: 1ex;
  274. padding: 1ex 1ex;
  275. border: 1px solid #aaa;
  276. background: white;
  277. color: black !important;
  278. }
  279. /* notebox template */
  280. .notebox {
  281. float: right;
  282. margin-left: 2ex;
  283. margin-top: 1ex;
  284. margin-bottom: 1ex;
  285. padding: 1ex 1ex;
  286. border: 1px solid #aaa;
  287. width: 25%;
  288. background: white;
  289. color: black !important;
  290. }
  291. /* popup template and backlinks hiding */
  292. .popup {
  293. border-bottom: 1px dotted #366;
  294. color: #366;
  295. }
  296. .popup .balloon,
  297. .popup .paren,
  298. .popup .expand {
  299. display: none;
  300. }
  301. .popup:hover .balloon,
  302. .popup:focus .balloon {
  303. position: absolute;
  304. display: inline;
  305. margin: 1em 0 0 -2em;
  306. padding: 0.625em;
  307. border: 2px solid;
  308. background-color: #dee;
  309. color: black;
  310. }
  311. /* form styling */
  312. fieldset {
  313. margin: 1ex 0;
  314. border: 1px solid black;
  315. }
  316. legend {
  317. padding: 0 1ex;
  318. }
  319. .fb_submit {
  320. float: left;
  321. margin: 2px 0;
  322. }
  323. label.block {
  324. display: block;
  325. }
  326. label.inline {
  327. display: inline;
  328. }
  329. input#openid_identifier {
  330. background: url(wikiicons/openidlogin-bg.gif) no-repeat;
  331. background-color: #fff;
  332. background-position: 0 50%;
  333. color: #000;
  334. padding-left: 18px;
  335. }
  336. input#searchbox {
  337. background: url(wikiicons/search-bg.gif) no-repeat;
  338. background-color: #fff;
  339. background-position: 100% 50%;
  340. color: #000;
  341. padding-right: 16px;
  342. }
  343. /* invalid form fields */
  344. .fb_invalid {
  345. color: red;
  346. background: white !important;
  347. }
  348. /* required form fields */
  349. .fb_required {
  350. font-weight: bold;
  351. }
  352. /* highlight plugin */
  353. pre.hl {
  354. color: #000000;
  355. background-color: #ffffff;
  356. }
  357. .hl.num {
  358. color: #2928ff;
  359. }
  360. .hl.esc {
  361. color: #ff00ff;
  362. }
  363. .hl.str {
  364. color: #ff0000;
  365. }
  366. .hl.dstr {
  367. color: #818100;
  368. }
  369. .hl.slc {
  370. color: #838183;
  371. font-style: italic;
  372. }
  373. .hl.com {
  374. color: #838183;
  375. font-style: italic;
  376. }
  377. .hl.dir {
  378. color: #008200;
  379. }
  380. .hl.sym {
  381. color: #000000;
  382. }
  383. .hl.line {
  384. color: #555555;
  385. }
  386. .hl.mark {
  387. background-color: #ffffbb;
  388. }
  389. .hl.kwa {
  390. color: #000000;
  391. font-weight: bold;
  392. }
  393. .hl.kwb {
  394. color: #830000;
  395. }
  396. .hl.kwc {
  397. color: #000000;
  398. font-weight: bold;
  399. }
  400. .hl.kwd {
  401. color: #010181;
  402. }
  403. /* calendar plugin */
  404. .month-calendar-day-this-day,
  405. .year-calendar-this-month {
  406. background-color: #eee;
  407. }
  408. .month-calendar-day-head,
  409. .month-calendar-day-nolink,
  410. .month-calendar-day-link,
  411. .month-calendar-day-this-day,
  412. .month-calendar-day-future {
  413. text-align: right;
  414. }
  415. .month-calendar-arrow A:link,
  416. .year-calendar-arrow A:link,
  417. .month-calendar-arrow A:visited,
  418. .year-calendar-arrow A:visited {
  419. text-decoration: none;
  420. font-weight: normal;
  421. font-size: 150%;
  422. }
  423. /* outlines */
  424. li.L1 {
  425. list-style: upper-roman;
  426. }
  427. li.L2 {
  428. list-style: decimal;
  429. }
  430. li.L3 {
  431. list-style: lower-alpha;
  432. }
  433. li.L4 {
  434. list-style: disc;
  435. }
  436. li.L5 {
  437. list-style: square;
  438. }
  439. li.L6 {
  440. list-style: circle;
  441. }
  442. li.L7 {
  443. list-style: lower-roman;
  444. }
  445. li.L8 {
  446. list-style: upper-alpha;
  447. }
  448. /* tag cloud */
  449. .pagecloud {
  450. float: right;
  451. width: 30%;
  452. text-align: center;
  453. padding: 10px 10px;
  454. border: 1px solid #aaa;
  455. background: #eee;
  456. color: black !important;
  457. }
  458. .smallestPC {
  459. font-size: 70%;
  460. }
  461. .smallPC {
  462. font-size: 85%;
  463. }
  464. .normalPC {
  465. font-size: 100%;
  466. }
  467. .bigPC {
  468. font-size: 115%;
  469. }
  470. .biggestPC {
  471. font-size: 130%;
  472. }
  473. /* orange feed button */
  474. .feedbutton {
  475. background: #ff6600;
  476. color: white !important;
  477. border-left: 1px solid #cc9966;
  478. border-top: 1px solid #ccaa99;
  479. border-right: 1px solid #993300;
  480. border-bottom: 1px solid #331100;
  481. padding: 0px 0.5em 0px 0.5em;
  482. font-family: sans-serif;
  483. font-weight: bold;
  484. font-size: small;
  485. text-decoration: none;
  486. margin-top: 1em;
  487. }
  488. .feedbutton:hover {
  489. color: white !important;
  490. background: #ff9900;
  491. }
  492. .FlattrButton {
  493. display: none;
  494. }
  495. /* openid selector */
  496. #openid_choice {
  497. display: none;
  498. }
  499. #openid_input_area {
  500. clear: both;
  501. padding: 10px;
  502. }
  503. #openid_btns,
  504. #openid_btns br {
  505. clear: both;
  506. }
  507. #openid_highlight {
  508. background-color: black;
  509. float: left;
  510. }
  511. .openid_large_btn {
  512. padding: 1em 1.5em;
  513. border: 1px solid #DDD;
  514. margin: 3px;
  515. float: left;
  516. }
  517. .openid_small_btn {
  518. padding: 4px 4px;
  519. border: 1px solid #DDD;
  520. margin: 3px;
  521. float: left;
  522. }
  523. a.openid_large_btn:focus {
  524. outline: none;
  525. }
  526. a.openid_large_btn:focus {
  527. outline-style: none;
  528. }
  529. .openid_selected {
  530. border: 4px solid #DDD;
  531. }
  532. .fileupload-content .ui-progressbar {
  533. width: 200px;
  534. height: 20px;
  535. }
  536. .fileupload-content .ui-progressbar-value {
  537. background: url(ikiwiki/images/pbar-ani.gif);
  538. }
  539. }
  540. @mixin ikiwiki {
  541. @include ikiwiki-boilerplate;
  542. @include ikiwiki-reset;
  543. @include ikiwiki-style;
  544. }