git.vanrenterghem.biz Git - git.ikiwiki.info.git/blob

1 /* 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 */

7 /* html5 compat */

8 article,aside,details,figcaption,figure,

9 footer,header,hgroup,menu,nav,section {

10 display: block;

11 }

13 div.header, header.header {

14 margin: 0;

15 font-size: 140%;

16 font-weight: bold;

17 line-height: 1em;

18 display: block;

19 }

21 .inlineheader .author {

22 margin: 0;

23 font-size: 112%;

24 font-weight: bold;

25 display: block;

26 }

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 }

42 .inlinepage .actions ul {

43 border-bottom: 0;

44 }

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 }

59 .inlinecontent,

60 .inlineenclosure {

61 margin-top: .4em;

62 }

64 .pagefooter,

65 .inlinefooter,

66 .comments {

67 clear: both;

68 }

70 #pageinfo {

71 margin: 1em 0;

72 border-top: 1px solid #000;

73 }

75 .tags {

76 margin-top: 1em;

77 }

79 .inlinepage .tags {

80 display: inline;

81 }

83 .mapparent {

84 text-decoration: none;

85 }

87 .img caption {

88 font-size: 80%;

89 caption-side: bottom;

90 text-align: center;

91 }

93 img.img {

94 margin: 0.5ex;

95 }

97 .align-left {

98 float:left;

99 }

100

101 .align-right {

102 float:right;

103 }

104

105 #backlinks {

106 margin-top: 1em;

107 }

108

109 #searchform {

110 display: inline;

111 float: right;

112 }

113

114 #editcontent {

115 width: 98%;

116 }

117

118 .editcontentdiv {

119 width: auto;

120 overflow: auto;

121 }

122

123 img {

124 border-style: none;

125 }

126

127 pre {

128 overflow: auto;

129 }

130

131 div.recentchanges {

132 border-style: solid;

133 border-width: 1px;

134 overflow: auto;

135 width: auto;

136 clear: none;

137 background: #eee;

138 color: black !important;

139 }

140 .recentchanges .metadata {

141 padding: 0px 0.5em;

142 }

143 .recentchanges .changelog {

144 font-style: italic;

145 clear: both;

146 display: block;

147 padding: 1px 2px;

148 background: white !important;

149 color: black !important;

150 }

151 .recentchanges .desc {

152 display: none;

153 }

154 .recentchanges .diff {

155 display: none;

156 }

157 .recentchanges .committer {

158 float: left;

159 margin: 0;

160 width: 40%;

161 }

162 .recentchanges .committype {

163 float: left;

164 margin: 0;

165 width: 5%;

166 font-size: small;

167 }

168 .recentchanges .changedate {

169 float: left;

170 margin: 0;

171 width: 35%;

172 font-size: small;

173 }

174 .recentchanges .pagelinks,

175 .recentchanges .revert {

176 float: right;

177 margin: 0;

178 width: 60%;

179 }

180

181 .blogform, #blogform {

182 padding: 10px 10px;

183 border: 1px solid #aaa;

184 background: #eee;

185 color: black !important;

186 width: auto;

187 overflow: auto;

188 }

189

190 .inlinepage {

191 padding: 10px 10px;

192 border: 1px solid #aaa;

193 overflow: auto;

194 }

195

196 .pagedate,

197 .pagelicense,

198 .pagecopyright {

199 font-style: italic;

200 display: block;

201 margin-top: 1em;

202 }

203

204 .archivepagedate {

205 font-style: italic;

206 }

207 .archivepage {

208 margin-bottom: 1em;

209 }

210

211 .error {

212 color: #C00;

213 }

214

215 .sidebar {

216 width: 20ex;

217 float: right;

218 margin-left: 4px;

219 margin-bottom: 4px;

220 margin-top: -1px;

221 padding: 0ex 2ex;

222 background: white;

223 border: 1px solid black;

224 color: black !important;

225 }

226

227 hr.poll {

228 height: 10pt;

229 color: white !important;

230 background: #eee;

231 border: 2px solid black;

232 }

233 div.poll {

234 margin-top: 1ex;

235 margin-bottom: 1ex;

236 padding: 1ex 1ex;

237 border: 1px solid #aaa;

238 }

239

240 span.color {

241 padding: 2px;

242 }

243

244 .comment-header,

245 .microblog-header {

246 font-style: italic;

247 margin-top: .3em;

248 }

249 .comment .author,

250 .microblog .author {

251 font-weight: bold;

252 }

253 .comment-subject {

254 font-weight: bold;

255 }

256 .comment-avatar {

257 float: right;

258 }

259 .comment {

260 border: 1px solid #aaa;

261 padding: 3px;

262 }

263

264 div.progress {

265 margin-top: 1ex;

266 margin-bottom: 1ex;

267 border: 1px solid #888;

268 width: 400px;

269 background: #eee;

270 color: black !important;

271 padding: 1px;

272 }

273 div.progress-done {

274 background: #ea6 !important;

275 color: black !important;

276 text-align: center;

277 padding: 1px;

278 }

279

280 /* things to hide in printouts */

281 @media print {

282 .actions { display: none; }

283 .tags { display: none; }

284 .trails { display: none; }

285 .feedbutton { display: none; }

286 #searchform { display: none; }

287 .blogform, #blogform { display: none; }

288 #backlinks { display: none; }

289 .addcomment { display: none; }

290 }

291

292 /* infobox template */

293 .infobox {

294 float: right;

295 margin-left: 2ex;

296 margin-top: 1ex;

297 margin-bottom: 1ex;

298 padding: 1ex 1ex;

299 border: 1px solid #aaa;

300 background: white;

301 color: black !important;

302 }

303

304 /* notebox template */

305 .notebox {

306 float: right;

307 margin-left: 2ex;

308 margin-top: 1ex;

309 margin-bottom: 1ex;

310 padding: 1ex 1ex;

311 border: 1px solid #aaa;

312 width: 25%;

313 background: white;

314 color: black !important;

315 }

316

317 /* popup template and backlinks hiding */

318 .popup {

319 border-bottom: 1px dotted #366;

320 color: #366;

321 }

322 .popup .balloon,

323 .popup .paren,

324 .popup .expand {

325 display: none;

326 text-align: left;

327 }

328 .popup:hover .balloon,

329 .popup:focus .balloon {

330 position: absolute;

331 display: inline;

332 margin: 1em 0 0 -2em;

333 padding: 0.625em;

334 border: 2px solid;

335 background-color: #dee;

336 color: black;

337 }

338

339 /* form styling */

340 fieldset {

341 margin: 1ex 0;

342 border: 1px solid black;

343 }

344 legend {

345 padding: 0 1ex;

346 }

347 .fb_submit {

348 float: left;

349 margin: 2px 0;

350 }

351 label.block {

352 display: block;

353 }

354 label.inline {

355 display: inline;

356 }

357 input#openid_identifier {

358 background: url(wikiicons/openidlogin-bg.gif) no-repeat;

359 background-color: #fff;

360 background-position: 0 50%;

361 color: #000;

362 padding-left: 18px;

363 }

364 input#searchbox {

365 background: url(wikiicons/search-bg.gif) no-repeat;

366 background-color: #fff;

367 background-position: 100% 50%;

368 color: #000;

369 padding-right: 16px;

370 }

371 /* invalid form fields */

372 .fb_invalid {

373 color: red;

374 background: white !important;

375 }

376 /* required form fields */

377 .fb_required {

378 font-weight: bold;

379 }

380

381 /* highlight plugin */

382 pre.hl { color:#000000; background-color:#ffffff; }

383 .hl.num { color:#2928ff; }

384 .hl.esc { color:#ff00ff; }

385 .hl.str { color:#ff0000; }

386 .hl.dstr { color:#818100; }

387 .hl.slc { color:#838183; font-style:italic; }

388 .hl.com { color:#838183; font-style:italic; }

389 .hl.dir { color:#008200; }

390 .hl.sym { color:#000000; }

391 .hl.line { color:#555555; }

392 .hl.mark { background-color:#ffffbb; }

393 .hl.kwa { color:#000000; font-weight:bold; }

394 .hl.kwb { color:#830000; }

395 .hl.kwc { color:#000000; font-weight:bold; }

396 .hl.kwd { color:#010181; }

397

398 /* calendar plugin */

399 .month-calendar-day-this-day,

400 .year-calendar-this-month {

401 background-color: #eee;

402 }

403 .month-calendar-day-head,

404 .month-calendar-day-nolink,

405 .month-calendar-day-link,

406 .month-calendar-day-this-day,

407 .month-calendar-day-future {

408 text-align: right;

409 }

410 .month-calendar-arrow A:link,

411 .year-calendar-arrow A:link,

412 .month-calendar-arrow A:visited,

413 .year-calendar-arrow A:visited {

414 text-decoration: none;

415 font-weight: normal;

416 font-size: 150%;

417 }

418

419 /* outlines */

420 li.L1 { list-style: upper-roman; }

421 li.L2 { list-style: decimal; }

422 li.L3 { list-style: lower-alpha; }

423 li.L4 { list-style: disc; }

424 li.L5 { list-style: square; }

425 li.L6 { list-style: circle; }

426 li.L7 { list-style: lower-roman; }

427 li.L8 { list-style: upper-alpha; }

428

429 /* tag cloud */

430 .pagecloud {

431 float: right;

432 width: 30%;

433 text-align: center;

434 padding: 10px 10px;

435 border: 1px solid #aaa;

436 background: #eee;

437 color: black !important;

438 }

439 .smallestPC { font-size: 70%; }

440 .smallPC { font-size: 85%; }

441 .normalPC { font-size: 100%; }

442 .bigPC { font-size: 115%; }

443 .biggestPC { font-size: 130%; }

444

445 /* orange feed button */

446 .feedbutton {

447 background: #ff6600;

448 color: white !important;

449 border-left: 1px solid #cc9966;

450 border-top: 1px solid #ccaa99;

451 border-right: 1px solid #993300;

452 border-bottom: 1px solid #331100;

453 padding: 0px 0.5em 0px 0.5em;

454 font-family: sans-serif;

455 font-weight: bold;

456 font-size: small;

457 text-decoration: none;

458 margin-top: 1em;

459 }

460 .feedbutton:hover {

461 color: white !important;

462 background: #ff9900;

463 }

464

465 .FlattrButton {

466 display: none;

467 }

468

469 /* login selector */

470 #login_choice {

471 display: none;

472 }

473 #login_input_area {

474 clear: both;

475 padding: 10px;

476 }

477 #login_btns, #login_btns br {

478 clear: both;

479 }

480 #login_highlight {

481 background-color: black;

482 float: left;

483 }

484 .login_large_btn {

485 padding: 1em 1.5em;

486 border: 1px solid #DDD;

487 margin: 3px;

488 float: left;

489 }

490 .login_small_btn {

491 padding: 4px 4px;

492 border: 1px solid #DDD;

493 margin: 3px;

494 float: left;

495 }

496 a.login_large_btn:focus {

497 outline: none;

498 }

499 a.login_large_btn:focus {

500 outline-style: none;

501 }

502 .login_selected {

503 border: 4px solid #DDD;

504 }

505

506 .fileupload-content .ui-progressbar {

507 width: 200px;

508 height: 20px;

509 }

510 .fileupload-content .ui-progressbar-value {

511 background: url(ikiwiki/images/pbar-ani.gif);

512 }

513

514 .trails {

515 margin-top: 1em;

516 margin-bottom: 1em;

517 }

518 .trail {

519 display: block;

520 clear: both;

521 position: relative;

522 }

523

524 .trailprev {

525 display: block;

526 text-align: left;

527 position: absolute;

528 top: 0%;

529 left: 3%;

530 width: 30%;

531 }

532

533 .trailup {

534 display: block;

535 text-align: center;

536 margin-left: 35%;

537 margin-right: 35%;

538 }

539

540 .trailnext {

541 display: block;

542 text-align: right;

543 position: absolute;

544 top: 0%;

545 width: 30%;

546 right: 3%;

547 }

548

549 .trailsep {

550 display: none;

551 }

552

553 /* mobile/small-screen-friendly layout */

554 @media (max-width: 600px) {

555 .sidebar {

556 width: auto;

557 float: none;

558 margin-top: 0;

559 border: none;

560 }

561

562 /* if the mobile browser is new enough, use flex layout to shuffle

563 * the sidebar to the end */

564 .page {

565 display: -webkit-box;

566 display: -webkit-flexbox;

567 display: -webkit-flex;

568 display: -moz-box;

569 display: -ms-flexbox;

570 display: flex;

571 -webkit-box-orient: vertical;

572 -webkit-flex-direction: tb;

573 -webkit-flex-direction: column;

574 -webkit-flex-flow: column;

575 -ms-flex-direction: column;

576 flex-direction: column;

577 }

578 #pageheader {

579 -webkit-box-ordinal-group: -1;

580 -webkit-order: -1;

581 -ms-box-ordinal-group: -1;

582 -ms-flex-order: -1;

583 order: -1;

584 }

585 .sidebar, #footer {

586 -webkit-box-ordinal-group: 1;

587 -webkit-order: 1;

588 -ms-box-ordinal-group: 1;

589 -ms-flex-order: 1;

590 order: 1;

591 }

592

593 .blogform, #blogform {

594 padding: 4px 4px;

595 }

596 }