style.css 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816
  1. /*
  2. "myfavolours" - global custom colour scheme
  3. http://userstyles.org/styles/2187
  4. BEGIN
  5. */
  6. /* i really want this to be global */
  7. /*
  8. summary:
  9. - basic background = dark grey
  10. - basic text = light grey
  11. - "semantic" importance = contrast
  12. - unvisited links (and form labels) = aquamarine
  13. - visited links = light green
  14. - form elements, :hover, :focus, and more
  15. latest revisions
  16. 2008-08-18: FF3 fix
  17. 2010-01-07: minor fixes
  18. 2011-11-01: view-source, "progressmeters"
  19. ..
  20. 2012-08-29: few more "transparent flyout" fixes (for gmail mostly) ([role])
  21. 2013-09-18: `window` out, lets see the flashes.
  22. */
  23. @namespace url(http://www.w3.org/1999/xhtml);
  24. /*** init
  25. - setting basic colours / background
  26. - disabling (most of) background images
  27. */
  28. /* Disabling text-indent will bring back text of most of "graphical" headings
  29. off by default, to comply with "nothing but colours" rule
  30. /on*off/
  31. html *
  32. { text-indent : 0 !important
  33. }
  34. /* */
  35. html ,
  36. /* background-images
  37. - disable ALL
  38. /on*off/
  39. html * ,
  40. /* OR
  41. - allow SOME 'buttons'
  42. on*/
  43. html *:not(:empty):not(.Emoticon) ,
  44. /* */
  45. html *:after ,
  46. html *:before
  47. { background-image : allow !important
  48. }
  49. html
  50. { background-color : #111 !important
  51. ; border-color : #111 !important
  52. }
  53. body
  54. { background-color : transparent !important /* sometimes body is not stretched over whole page height */
  55. ; border-color : #252525 !important
  56. ; color : #ccc !important
  57. ; background-image: none !important
  58. }
  59. body#body
  60. { background-color: #111 !important
  61. }
  62. body * ,
  63. html *:after ,
  64. html *:before
  65. { background-color : transparent !important
  66. ; border-color : #252525 !important /* "inherit" is bugged ! */
  67. ; color : inherit !important
  68. ; text-shadow : none !important
  69. }
  70. /*
  71. what about outline and box-shadow?
  72. */
  73. /*** semantic blocks
  74. */
  75. /** top header:
  76. */
  77. /* - wannabe
  78. */
  79. .head ,
  80. .header ,
  81. *[id*="title"] ,
  82. *[id*="Title"] ,
  83. *[id*="head"] ,
  84. *[id*="Head"] ,
  85. *[class*="header"] ,
  86. *[class*="Header"] ,
  87. *[id*="hlavicka"] ,
  88. *[id*="Hlavicka"] ,
  89. *[class*="hlavicka"] ,
  90. *[class*="Hlavicka"]
  91. { background-color : #111 !important
  92. }
  93. /* - real
  94. */
  95. header ,
  96. #head ,
  97. #header ,
  98. #top
  99. { background-color : #111 !important
  100. }
  101. /** navigation ( the 'menu predicting magic' )
  102. */
  103. /* - wannabe
  104. */
  105. *[id*="nav"] *[class*="page"] ,
  106. .navlist a ,
  107. .Navlist a ,
  108. *.navigation a ,
  109. *[id*="menu"] a ,
  110. *[id*="Menu"] a ,
  111. *[id*="navig"] a ,
  112. *[id*="Navig"] a ,
  113. *[id*="-nav"] a ,
  114. *[id*="-Nav"] a ,
  115. *[id$="nav"] a ,
  116. *[id$="Nav"] a ,
  117. *[class*="menu"] a ,
  118. *[class*="Menu"] a ,
  119. *[class*="navig"] a ,
  120. *[class*="Navig"] a ,
  121. *[class*="-nav"] a ,
  122. *[class*="-Nav"] a ,
  123. *[class$="nav"] a ,
  124. *[class$="Nav"] a
  125. { background-color : transparent !important
  126. }
  127. /* - real
  128. */
  129. label , /* ! label added, let's see */
  130. nav a ,
  131. menu a ,
  132. #menu a ,
  133. #navigation a
  134. { background-color : #223 !important
  135. }
  136. div[class*=menu][class*=vertical]
  137. { background-color: #223 !important
  138. ; background-image: none !important
  139. }
  140. /*
  141. above ID selectors would override below rules
  142. due # selector priority
  143. so that's why this :
  144. */
  145. #menu a:hover ,
  146. #navigation a:hover ,
  147. *[class*="menu"][class*="item"]:hover
  148. { background-color : transparent !important
  149. }
  150. /** aside:
  151. */
  152. /* - wannabe
  153. */
  154. div[id*="side"] ,
  155. div[id*="Side"] ,
  156. div[class*="side"] ,
  157. div[class*="Side"]
  158. { background-color : #111111 !important
  159. }
  160. /* - real
  161. */
  162. aside ,
  163. .aside ,
  164. #aside
  165. { background-color : #111 !important
  166. }
  167. /** footer
  168. */
  169. footer ,
  170. div[id*="foot"] ,
  171. div[class*="foot"] ,
  172. div[id*="paticka"] ,
  173. div[class*="paticka"]
  174. { background-color : #111 !important
  175. }
  176. /** others semantic blocks
  177. ( yet unimplemented )
  178. */
  179. /*
  180. article
  181. { }
  182. #main
  183. { }
  184. #content
  185. { }
  186. section ,
  187. .section
  188. { }
  189. .divider
  190. { }
  191. /* */
  192. /** anonymous heading elements
  193. */
  194. *[class*="heading"] ,
  195. *[class*="Heading"] ,
  196. *[id*="heading"] ,
  197. *[id*="Heading"] ,
  198. *[class*="nadpis"] ,
  199. *[class*="Nadpis"] ,
  200. *[id*="nadpis"] ,
  201. *[id*="Nadpis"]
  202. { border-color : #888 !important
  203. ; color : #eee !important
  204. }
  205. /*** concrete HTML block elements
  206. */
  207. /** headers
  208. h1 , h2 , h3 , h4 , h5 , h6
  209. caption , th , lh , dt , legend
  210. */
  211. h1
  212. { background-color : #111 !important
  213. ; border-color : #eee !important
  214. ; color : #fff !important
  215. }
  216. h2 ,
  217. h3 ,
  218. h4 ,
  219. h5 ,
  220. h6 ,
  221. caption , /* table h. */
  222. thead ,
  223. th , /* table-row|column h. */
  224. lh , /* list h. html3. how f***ing usefull element. deprecated. */
  225. dl dt , /* definition h. */
  226. html fieldset legend /* form h. */
  227. { background-color : #111 !important
  228. ; border-color : #999 !important
  229. ; color : #eee !important
  230. }
  231. /** other stuff
  232. now they have the same colour;
  233. it would be nice if it was distinguishable simply by colour
  234. */
  235. blockquote ,
  236. code ,
  237. tt , /* code and tt is inline */
  238. xmp ,
  239. pre
  240. { background-color : #111111 !important
  241. }
  242. td
  243. { border-color : #555 !important
  244. }
  245. hr
  246. { background-color : #252525 !important
  247. ; border-color : #252525 !important
  248. ; color : #252525 !important
  249. }
  250. /*** concrete HTML inline elements
  251. - just colour altered
  252. */
  253. /** emphasis:
  254. */
  255. /* - wannabe
  256. */
  257. *[id*="important"] ,
  258. *[id*="Important"] ,
  259. *[class*="important"] ,
  260. *[class*="Important"]
  261. { border-color : #666 !important
  262. ; color : #fff !important
  263. }
  264. /* - wannabe #2
  265. ( yes, it is NOT semantic, but this is usefull, trust me ;] )
  266. */
  267. b ,
  268. b * ,
  269. i ,
  270. i *
  271. { border-color : #555 !important
  272. ; color : #eee !important
  273. }
  274. /* - real
  275. */
  276. tt ,
  277. var ,
  278. em ,
  279. em * ,
  280. strong ,
  281. strong *
  282. { border-color : #252525 !important
  283. ; color : #fff !important
  284. }
  285. /*** common "semantic" classes
  286. initally based on WHATWG HTML5 specs draft
  287. ("semantic classes" have been rejected)
  288. but here may be very usefull
  289. */
  290. /** other not-so-common classes
  291. */
  292. .copyright
  293. { color : #ccc !important
  294. }
  295. .error
  296. { color : #f66 !important
  297. }
  298. .warning
  299. { color : #f99 !important
  300. }
  301. .example
  302. { color : #cff !important
  303. }
  304. .issue
  305. { color : #f99 !important
  306. }
  307. .note
  308. { color : #cff !important
  309. }
  310. .search
  311. { color : #cff !important
  312. }
  313. /** other funny WHATWG stuff
  314. * /
  315. *[irrelevant]
  316. {
  317. }
  318. /* */
  319. /** links and interactive stuff
  320. that is: links, labels and any other form element
  321. with :hover / :active / :focus states
  322. */
  323. /* tables, lets see */
  324. table
  325. { background-color: #111111 !important
  326. }
  327. thead ,
  328. tfoot
  329. { background-color: #111 !important
  330. }
  331. /* "onclick warning"
  332. raising priority
  333. */
  334. html body *[onclick]:hover ,
  335. html body *[ondblclick]:hover ,
  336. a[href^='javascript:'] ,
  337. a[href='#']
  338. { background-color : transparent !important
  339. }
  340. /* properly coded label will behave as unvisited link
  341. */
  342. label[for] ,
  343. a:link ,
  344. a:link *
  345. { border-color : transparent !important
  346. ; color : #70e070 !important
  347. }
  348. label[for]:focus ,
  349. label[for]:hover ,
  350. a:link:focus ,
  351. a:link:hover
  352. { background-color : transparent !important
  353. ; border-color : transparent !important
  354. ; color : #7070e0 !important
  355. }
  356. a:link:focus * ,
  357. a:link:hover *
  358. { border-color : transparent !important
  359. ; color : #7070e0 !important
  360. }
  361. a:visited ,
  362. a:visited *
  363. { border-color : transparent !important
  364. ; color : #e07070 !important
  365. }
  366. a:visited:focus ,
  367. a:visited:hover
  368. { background-color : transparent !important
  369. ; border-color : transparent !important
  370. ; color : #7070e0 !important
  371. }
  372. a:visited:focus * ,
  373. a:visited:hover *
  374. { border-color : transparent !important
  375. ; color : #7070e0 !important
  376. }
  377. a:visited:focus img ,
  378. a:visited:hover img
  379. { outline-width: 1px
  380. ; outline-style: solid
  381. ; outline-color : transparent !important
  382. ; color : #7070e0 !important
  383. }
  384. /* active link. no matter if visited or not
  385. */
  386. a:active ,
  387. a:active *
  388. { border-color : transparent !important
  389. ; color : #7070e0 !important
  390. }
  391. /** form elems and some IMO neat effects
  392. */
  393. .button ,
  394. .tlacitko ,
  395. html button ,
  396. html select ,
  397. html input
  398. { background-color : #111 !important
  399. }
  400. html input[type="password"]
  401. { background-color : #755 !important
  402. }
  403. html textarea ,
  404. html input[type="text"] ,
  405. html input:not([type])
  406. { background-color : #555 !important
  407. ; color: #fff !important
  408. }
  409. html textarea:hover ,
  410. html input[type="text"]:hover ,
  411. html input:not([type]):hover
  412. {
  413. }
  414. html input:hover ,
  415. html button:hover ,
  416. html select:hover ,
  417. html textarea:hover
  418. { color : #fff !important
  419. ; border-color: #ccc !important
  420. ; background-color : #111 !important
  421. }
  422. html textarea:focus ,
  423. html input:focus ,
  424. html textarea:focus ,
  425. html button:focus
  426. { background-color : #111 !important
  427. ; border-color : #999 !important
  428. ; color: #ccc !important
  429. }
  430. html textarea:focus:hover ,
  431. html input:focus:hover ,
  432. html button:focus:hover ,
  433. html textarea:focus:hover
  434. { border-color : #fff !important
  435. }
  436. html input[type="password"]:focus
  437. { background-color : #200 !important
  438. }
  439. input[disabled]
  440. { color : #888 !important
  441. }
  442. /*** fixes and tweaks
  443. most of them are IMO obsolete
  444. */
  445. /** FF3 fix, hope it will work
  446. +2008-08-18+
  447. is it still necessary?
  448. +2012-07-12+
  449. yes, it is, again (?)
  450. */
  451. html button ,
  452. html select ,
  453. html input ,
  454. html textarea
  455. { -moz-appearance : none !important
  456. ; background-image: allow !important /* these might be also :empty, so thats why this */
  457. }
  458. /** give solid bg to some elems that deserve it
  459. */
  460. /* dropdowns that was not catched
  461. * by above 'menu predicting magic'
  462. */
  463. *[id*='content'] ,
  464. *[class*='content'] ,
  465. li:hover li ,
  466. /* wd DOM inspector
  467. */
  468. div[id^=webdeveloper]
  469. { background-color : #111 !important
  470. }
  471. /* flashblock. bruteforce.
  472. */
  473. div[style~="url(chrome://flashblock/content/flash.png)"]
  474. { background-color : #630 !important
  475. }
  476. /* last.fm
  477. */
  478. td.quantifier > div ,
  479. div.graph > div#tomGraph
  480. { background-color : #111 !important
  481. }
  482. /* search hilite
  483. */
  484. span#__firefox-findbar-search-id
  485. { background-color : #9ff !important
  486. }
  487. *[class*=block][style*=block] ,
  488. *[class*="wrap"] ,
  489. *[id*="notify"] ,
  490. *[id*="widget"] ,
  491. *[id*="pane"] ,
  492. *[class*="widget"] ,
  493. *[class*="Overlay"][class*="Dialog"] ,
  494. *[class*="modal"] ,
  495. *[id*="modal"] ,
  496. *[class*="dialog"] ,
  497. *[id*="wrapper"] ,
  498. *[class*="wrapper"] ,
  499. *[id*="Wrapper"] ,
  500. *[class*="Wrapper"] ,
  501. *[id*="tooltip"] ,
  502. *[class*="tooltip"] ,
  503. *[id*="Tooltip"] ,
  504. *[class*="Tooltip"] ,
  505. *[id*="popup"] ,
  506. *[class*="popup"] ,
  507. *[id*="Popup"] ,
  508. *[class*="Popup"] ,
  509. *[id*="flyout"] ,
  510. *[class*="flyout"] ,
  511. *[id*="Flyout"] ,
  512. *[class*="Flyout"] ,
  513. #pop
  514. { background-color : #111 !important
  515. }
  516. /*
  517. hovered images: light background
  518. helps with dark graphic text with transparency
  519. */
  520. img:hover
  521. { background-color: #ccc !important
  522. }
  523. /*
  524. § view-source
  525. */
  526. body#viewsource
  527. { margin: 0 !important
  528. }
  529. body#viewsource
  530. ,
  531. body#viewsource pre
  532. { background-color: #161616 !important
  533. }
  534. body#viewsource .start-tag
  535. { color: #fca !important
  536. }
  537. body#viewsource .end-tag
  538. { color: #fca !important
  539. }
  540. body#viewsource .comment
  541. { color: #bbff66 !important
  542. }
  543. body#viewsource .cdata
  544. { color: #eedddd !important
  545. }
  546. body#viewsource .doctype
  547. { color: #ffbbbb !important
  548. }
  549. body#viewsource .pi /* wut? processing instructions? */
  550. { color: #ff68ff !important
  551. ; font-style: italic
  552. }
  553. body#viewsource .entity
  554. { color: #ff68ff !important
  555. }
  556. body#viewsource .text
  557. { color: #ffe6cc !important
  558. }
  559. body#viewsource .attribute-name
  560. { color: #dcf0ff !important
  561. }
  562. body#viewsource .attribute-value
  563. { color: #88ddff !important
  564. }
  565. body#viewsource .markupdeclaration
  566. { color: #ffff37 !important
  567. }
  568. body#viewsource .error
  569. ,
  570. body#viewsource .error > :-moz-any(.start-tag, .end-tag, .comment, .cdata, .doctype, .pi, .entity, .attribute-name, .attribute-value)
  571. { color: #f33 !important
  572. ; font-weight: bold;
  573. }
  574. /*
  575. forum.pspad.com
  576. */
  577. .Item.New strong ,
  578. span.newmessage
  579. { color: #f66 !important
  580. }
  581. /*
  582. jquery autocomplete
  583. */
  584. div.ac_results ul[style] ,
  585. /*
  586. gmail, dropdowns ( [role="listbox"]
  587. */
  588. *[role] ,
  589. /*
  590. */
  591. li#imagebox_bigimages > div ,
  592. /*
  593. google top header
  594. */
  595. #tphdr.tphdr ,
  596. /*
  597. google images hover detail
  598. */
  599. #rg_h.rg_hv
  600. { background-color: #111 !important
  601. }
  602. /*
  603. common progressmeters / progressbars / selected
  604. */
  605. #loading .lpb #lpt ,
  606. /*
  607. gmail listbox selected
  608. div#:sm.ah.aiv[style] > div[role="option"].Jd-AxF.Jd-Je.Je
  609. */
  610. div[role="option"].Jd-axF.Jd-Je.Je ,
  611. /*
  612. gmail focused row (cells)
  613. */
  614. .oZ-x3.xY.GZubNd ,
  615. .PF.xY.PE ,
  616. /*
  617. <div class="pas fbQuestionsPollResultsBar" title="Twice?">
  618. <div class="shaded" style="width:25.6%"></div>
  619. */
  620. [style^="width:"][style$="%"] ,
  621. [style^="width:"][style$="%"] ,
  622. [style^="width:"][style$="%;"] ,
  623. [style^="width:"][style$="%;"] ,
  624. [class*="progress"][style] ,
  625. [width$="%"][style] ,
  626. [class*="bar"][style] /* hm */
  627. { background-color: #111 !important
  628. }
  629. /*
  630. [style*="left:"][style*="top:"]:hover * {
  631. background-color: #333
  632. * !important;
  633. }
  634. */
  635. /** current / active
  636. usefull especially for
  637. - "active" tabs,
  638. - "current" links in menu
  639. */
  640. /*
  641. jquery autocomplete
  642. */
  643. .ac_results .ac_even.ac_over ,
  644. .ac_results .ac_odd.ac_over ,
  645. #current ,
  646. #selected ,
  647. #active ,
  648. .current ,
  649. .selected ,
  650. .active ,
  651. .current a ,
  652. .selected a ,
  653. .active a
  654. { background-color : #111 !important
  655. ; color : #fff !important
  656. }
  657. *[id*=Current] ,
  658. *[id*=Selected] ,
  659. *[id*=Active] ,
  660. *[id*=current] ,
  661. *[id*=selected] ,
  662. *[id*=active] ,
  663. *[class*=Current] ,
  664. *[class*=Selected] ,
  665. *[class*=Active] ,
  666. *[class*=current] ,
  667. *[class*=selected] ,
  668. *[class*=active] ,
  669. *[id*=Current] a ,
  670. *[id*=Selected] a ,
  671. *[id*=Active] a ,
  672. *[id*=current] a ,
  673. *[id*=selected] a ,
  674. *[id*=active] a ,
  675. *[class*=Current] a ,
  676. *[class*=Selected] a ,
  677. *[class*=Active] a ,
  678. *[class*=current] a ,
  679. *[class*=selected] a ,
  680. *[class*=active] a
  681. { background-color : #111 !important
  682. ; color : #eee !important
  683. }
  684. /*
  685. back to transparency
  686. */
  687. div#lbHoverNav a#lbPrev ,
  688. div#lbHoverNav a#lbNext ,
  689. /*
  690. FB photo tag boxes
  691. clashes with [style] progressmeters, this is more or less just temporal hotfix
  692. #fbPhotoSnowliftTagBoxes [style] ,
  693. #fbPhotoPageTagBoxes [style] ,
  694. .tagsWrapper .tagBox[style] ,
  695. .stageActions .faceBox ,
  696. */
  697. .tagsWrapper ,
  698. div.faceBox[style] ,
  699. div.tagBox[style] ,
  700. /*
  701. LH image
  702. */
  703. a.noHrefOverride ,
  704. a.noHrefOverride:hover ,
  705. a.noHrefOverride:focus ,
  706. /*
  707. fancybox (lightbox) next/prev block links
  708. */
  709. [id$="overlay"] + [id$="wrap"] > [id$="outer"] > a {
  710. background-color: transparent !important;
  711. }
  712. /*
  713. END
  714. "myfavolours" - global custom colour scheme
  715. http://userstyles.org/styles/2187
  716. */