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