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