API tools faq
paste
Guest User

Browser / HTML / CSS

a guest
Nov 16th, 2015
142
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 27.28 KB | None | 0 0
raw download clone embed print report
  1. /********************************************************************************
  2. * Here starts the browser edit *
  3. ********************************************************************************/
  4.  
  5. @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
  6.  
  7.  
  8. /* custom colors */ /*var(--tab-bg)*/
  9. :root {
  10. --tab-bg: #3C323D !important; /* tab bg */
  11. --url-bg: #3C323D !important; /* url bg & hover bg */
  12. --focus-tab-bg: #3C323D !important; /* selected tab bg */
  13. --main-text: #6F6E67 !important; /* tab fg */
  14. --secondary-text: #EFECDD !important; /* selected tab fg*/
  15. --third-text: #EFECDD !important; /* hover tab fg & url bar fg*/
  16. }
  17.  
  18. /*displays pin favicons*/
  19.  
  20. .tabbrowser-tab:not([pinned]) .tab-icon-image
  21. {
  22. display: none !important;
  23. }
  24.  
  25. /* fades buttons */
  26. #downloads-button, #new-tab-button, #ctraddon_bookmarks-button, #ctraddon_reload-button, bookmarks-button, reload-button, .tab-icon-image {
  27. opacity: 1 !important;
  28. }
  29.  
  30. #downloads-button
  31. {
  32. margin-bottom: -5px;
  33. margin-top: -8px;
  34. }
  35.  
  36. #TabsToolbar .tabbrowser-tab {
  37. min-width: 35px !important;
  38. }
  39.  
  40. /*uncomment to show website info
  41. #identity-box, #identity-icon-labels {
  42. display: none;
  43. }*/
  44.  
  45. /* fix white bg when opening new tabs */
  46. browser, browser.display.background_color, tabbrowser tabpanels {
  47. background-color: var(--focus-tab-bg) !important;
  48. }
  49.  
  50. /* hide back/forward buttons
  51. #forward-button, #back-button {
  52. display: none !important;
  53. }*/
  54.  
  55. /* page identity box */
  56. #identity-box {
  57. background: var(--url-bg) !important;
  58. color: var(--secondary-text) !important;
  59. opacity: 0 !important;
  60. }
  61.  
  62. .tab-icon-image {
  63. opacity: 0.5 !important;
  64. filter: grayscale(0.3);
  65. -webkit-filter: brightness(50%);
  66. -o-filter: brightness(50%);
  67. -ms-filter: brightness(50%);
  68. }
  69.  
  70. .tab-icon-image {
  71. /*filter: grayscale(0.9) !important;
  72. filter: hue-rotate(130deg) !important;*/
  73. opacity: 1 !important;
  74. }
  75.  
  76. /* fonts */
  77. /*#urlbar, #TabsToolbar .tabbrowser-tab, menu, .autocomplete-richlistbox, #menubar-items, statuspanel[type="overLink"] .statuspanel-label, toolbarbutton, #placeContent, #placesList, .editBMPanel_rowLabel, .textbox-input-box, .viewer-title.label.toolbar, .downloadTarget, .downloadDetails, #bookmarks-view-children, #sidebar-search-label, #sidebar-title, .menubar-text {
  78. font-family: open sans !important;
  79. font-weight: 600 !important;
  80. font-size: 13px !important;
  81. }
  82.  
  83. #clientBox {
  84. font-family: open sans !important;
  85. font-weight: 600 !important;
  86. font-size: 12px !important;
  87. }*/
  88.  
  89. /* remove icons */
  90. #memfx-toolbar-button, #urlbar-reload-button, .box-inherit.toolbarbutton-menubutton-button, .scrollbutton-up, .scrollbutton-down, .tab-close-button.close-icon, #urlbar-stop-button {
  91. display: none;
  92. }
  93. /* remove plugin and reader view
  94. #reader-mode-button, #notification-popup-box {
  95. display: none;
  96. }*/
  97.  
  98. #TabsToolbar .tabbrowser-tab {
  99. background: var(--tab-bg) !important;
  100. border: 0px solid #1d1e2a !important;
  101. border-radius: 0px !important;
  102. color: var(--main-text) !important;
  103. margin: 0px 0px 0px 0px !important;
  104. padding: 5px;
  105. height: 40px !important;
  106. margin-top: 0px !important;
  107. transition-property: background, color;
  108. transition-duration: 100ms;
  109. box-shadow: 4px 0px 13px rgba(0,0,0,0.3) !important;
  110. }
  111.  
  112. #TabsToolbar {
  113. background: transparent !important;
  114. }
  115.  
  116. /*remove blue browser border
  117. :not([chromehidden*="toolbar"])[sizemode="normal"]
  118. */
  119. #main-window {
  120. margin-top:-2px!important;
  121. margin-left:-1px!important;
  122. margin-right:-1px!important;
  123. margin-bottom: -1px !important;
  124. }
  125.  
  126. #TabsToolbar {
  127. margin-left: -13px !important;
  128. margin-top: 0px !important;
  129. }
  130.  
  131. #navigator-toolbox {
  132. border-bottom: 0px solid #59444b !important;
  133. }
  134.  
  135. /* nav bg color and sizes */
  136. #nav-bar-customization-target {
  137. background: var(--url-bg) !important;
  138. }
  139.  
  140. #urlbar {
  141. background: var(--url-bg) !important;
  142. color: var(--third-text) !important;
  143. text-align: center !important;
  144. height: 30px !important;
  145. border: 0px solid #59444b !important;
  146. margin-top: 0px !important;
  147. width: 10000px !important;
  148. }
  149.  
  150. /* navbar */
  151. #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(:-moz-lwtheme) {
  152. background-color: var(--url-bg) !important;
  153. margin-bottom: -1px !important;
  154. }
  155.  
  156. /* plugin icons */
  157. #notification-popup-box, .unknownIdentity {
  158. background-color: var(--url-bg) !important;
  159. border-image-source: none !important;
  160. }
  161.  
  162. #notification-popup-box, #page-proxy-favicon {
  163. opacity: 0.5 !important;
  164. filter: grayscale(0.9) !important;
  165. }
  166.  
  167. #nav-bar {
  168. height: 35px !important;
  169. }
  170.  
  171. /* selected tab */
  172. #TabsToolbar .tabbrowser-tab[selected] {
  173. background-color: var(--focus-tab-bg) !important;
  174. /*background: url(https://puu.sh/kwLI3/300a84af8b.png) !important;*/
  175. background-size: 100% 100% !important;
  176. background-repeat: no-repeat !important;
  177. color: var(--secondary-text) !important;
  178. border-bottom: 2px solid var(--focus-tab-bg) !important;
  179. opacity: 1 !important;
  180. /*border-radius: 12px !important;*/
  181. }
  182.  
  183. /* changes bg color of pinned tabs when updated */
  184. .tabbrowser-tab[pinned][titlechanged]:not([selected="true"]) > .tab-stack > .tab-content {
  185. opacity: 1 !important;
  186. background: var(--main-text) !important;
  187. color: var(--tab-bg) !important;
  188. }
  189.  
  190. /* hover tab */
  191. #TabsToolbar .tabbrowser-tab:hover {
  192. background-color: var(--url-bg) !important;
  193. /*background: url(https://puu.sh/kwLI3/300a84af8b.png) !important;*/
  194. background-size: 100% 100% !important;
  195. background-repeat: no-repeat !important;
  196. color: var(--third-text) !important;
  197. }
  198.  
  199. /* borders around tabs
  200. #main-window .tabbrowser-tab > .tab-stack, .tabbrowser-tab[pinned][titlechanged]:not([selected="true"]) > .tab-stack > .tab-content, #TabsToolbar .tabbrowser-tab[selected], #TabsToolbar .tabbrowser-tab:hover {
  201. border-width: 2px 1px 1px 1px !important;
  202. border-radius: 5px !important;
  203. border-style: solid !important;
  204. border-color: #000 !important;
  205. }*/
  206.  
  207. /* fix tab bg color and removes australis */
  208. #TabsToolbar .tab-background {
  209. background: transparent !important;
  210. }
  211. #TabsToolbar .tab-background-start,
  212. #TabsToolbar .tab-background-end {
  213. background: transparent !important;
  214. background-image: none !important;
  215. }
  216. #TabsToolbar .tab-background-middle {
  217. background: transparent !important;
  218. }
  219.  
  220. #TabsToolbar .tab-background-start::before, #TabsToolbar .tab-background-end::before {
  221. background-image: none !important;
  222. }
  223.  
  224. .tab-background-start[selected=true]:-moz-locale-dir(ltr)::after,
  225. .tab-background-end[selected=true]:-moz-locale-dir(ltr)::after {
  226. background-image: none!important;
  227. }
  228.  
  229. /* removes seperators between pinned tabs */
  230. #TabsToolbar .tabbrowser-tab:after,
  231. #TabsToolbar .tabbrowser-tab:before {
  232. display: none !important;
  233. }
  234.  
  235. /* center text */
  236. .tab-text {
  237. text-align: center !important;
  238. }
  239.  
  240. /* menu bar color */
  241. #main-menubar, #toolbar-menubar, #menubar-items, menubar > menu {
  242. background: var(--tab-bg) !important;
  243. color: var(--secondary-text) !important;
  244. text-shadow: none !important;
  245. border: none !important;
  246. margin-top: 0px !important;
  247. }
  248.  
  249. /* menu icon */
  250. #PanelUI-button {
  251. background: var(--url-bg) !important;
  252. }
  253.  
  254. /* back/forward buttons*/
  255. #back-button > .toolbarbutton-icon {
  256. list-style-image: url(https://puu.sh/lf0AO/dd11f85e21.png) !important;
  257. margin-left: 0px !important;
  258. }
  259. #forward-button {
  260. list-style-image: url(https://puu.sh/lf0AX/f7adac6a2d.png) !important;
  261. margin-left: 0px !important;
  262. }
  263.  
  264. #back-button:hover, #forward-button:hover {
  265. background: transparent !important;
  266. background-color: var(--focus-tab-bg) !important;
  267. opacity: 0.3 !important;
  268. border: none !important;
  269. box-shadow: none !important;
  270. }
  271.  
  272. #back-button:not([disabled="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon, #back-button, #back-button .toolbarbutton-icon:hover, #back-button .toolbarbutton-icon, #forward-button .toolbarbutton-icon, #forward-button {
  273. border-radius: 0px !important;
  274. background: transparent !important;
  275. background-color: transparent !important;
  276. border: 0px solid #000 !important;
  277. padding: 2px !important;
  278. box-shadow: none !important;
  279. margin-left: 0px !important;
  280. margin-top: 1px !important;
  281. margin-bottom: 1px !important;
  282. background-color: var(--url-bg) !important;
  283. width: 25px !important;
  284. height: 30px !important;
  285. }
  286.  
  287. #back-button:disabled, #forward-button:disabled {
  288. opacity: 0.4 !important;
  289. }
  290.  
  291. /* remove disabled back button border */
  292. #back-button#back-button#back-button>image.toolbarbutton-icon {
  293. box-shadow: none !important;
  294. }
  295.  
  296. /* history dropdown
  297. .urlbar-history-dropmarker, .urlbar-history-dropmarker:hover {
  298. list-style-image: url(https://puu.sh/l6nAd/d6e99c79cb.png) !important;
  299. margin-top: -2px !important;
  300. }
  301.  
  302. hides history dropdown*/
  303.  
  304. .urlbar-history-dropmarker {
  305. display: none !important;
  306. }
  307.  
  308. /*.urlbar-history-dropmarker .dropmarker-icon {
  309. width: 16px !important;
  310. opacity: 1 !important;
  311. }
  312.  
  313. /* go icon */
  314. #urlbar-go-button, #urlbar-go-button:hover, #urlbar-go-button:hover:active {
  315. width: 16px !important;
  316. height: 16px !important;
  317. margin-top: -4px !important;
  318. background-image: url(http://puu.sh/jCj6j/b4f077d174.png) !important;
  319. }
  320. #urlbar-go-button, #urlbar-go-button:not([disabled]):hover, #urlbar-go-button:not([disabled]):hover:active {
  321. }
  322.  
  323. /* menu button */
  324. #PanelUI-button {
  325. background: url('https://puu.sh/kHDG8/4ec3b786b5.png') !important;
  326. background-color: var(--url-bg) !important;
  327. background-repeat: no-repeat !important;
  328. background-position: center !important;
  329. box-shadow: none !important;
  330. margin-left: 0px !important;
  331. width: 44px !important;
  332. height: 10px !important;
  333. border: none !important;
  334. }
  335. #PanelUI-button:hover {
  336. background: url('https://puu.sh/kHDHJ/05799b0259.png') !important;
  337. background-color: var(--url-bg) !important;
  338. background-repeat: no-repeat !important;
  339. background-position: center !important;
  340. box-shadow: none !important;
  341. margin-top: 0px !important;
  342. width: 44px !important;
  343. height: 10px !important;
  344. border: none !important;
  345. }
  346.  
  347. #PanelUI-button .button-icon,
  348. #PanelUI-button .button-text {
  349. display: none !important;
  350. }
  351. #PanelUI-menu-button {
  352. opacity: 0 !important;
  353. width: 10px !important;
  354. height: 16px !important;
  355. margin-right: -5px !important;
  356. }
  357.  
  358. /* remove shitty fog */
  359. #TabsToolbar:not(:-moz-lwtheme)::after {
  360. display: none;
  361. }
  362.  
  363. /* bookmarks folder icons*/
  364. menu.bookmark-item:not([query]):not([label="Bookmarks Toolbar"]), menuitem.bookmark-item, menu.bookmark-item:not([query]):not([label="Bookmarks Toolbar"])[open] {
  365. list-style-image: url("https://puu.sh/leYZ9/1769a4b8b7.ico") !important;
  366. -moz-image-region: rect(0 32px 32px 0) !important;
  367. }
  368.  
  369. /* bookmark icon */
  370. #bookmarks-menu-button {
  371. background-image: url('https://puu.sh/kHDnp/de3a79b8c9.png') !important;
  372. background-color: var(--url-bg) !important;
  373. background-repeat: no-repeat !important;
  374. background-position: center !important;
  375. opacity: 1 !important;
  376. margin-top: -1px !important;
  377. margin-right: 0px !important;
  378. box-shadow: none !important;
  379. width: 24px !important;
  380. height: 15px !important;
  381. border: none !important;
  382. }
  383. /* bookmark icon */
  384. #bookmarks-menu-button:hover {
  385. background-image: url('https://puu.sh/kHDnH/61a78dc199.png') !important;
  386. background-color: var(--url-bg) !important;
  387. background-repeat: no-repeat !important;
  388. background-position: center !important;
  389. opacity: 1 !important;
  390. margin-top: -1px !important;
  391. margin-right: 0px !important;
  392. box-shadow: none !important;
  393. width: 24px !important;
  394. height: 15px !important;
  395. border: none !important;
  396. }
  397.  
  398.  
  399. /* speaker icon */
  400. .tab-icon-sound, .tab-icon-overlay {
  401. list-style-image: url('https://puu.sh/l8Qbf/d1a24baa27.png') !important;
  402. opacity: 0.8 !important;
  403. }
  404. .tab-icon-sound[muted="true"] {
  405. list-style-image: url('https://puu.sh/leWAi/54c36b6e52.png') !important;
  406. opacity: 0.8 !important;
  407. }
  408.  
  409. .tabs-newtab-button {
  410. background: var(--url-bg) !important;
  411. width: 40px !important;
  412. margin-left: 0px !important;
  413. list-style-image: url('https://puu.sh/lkR8l/9c089372e8.png') !important;
  414. }
  415.  
  416. /*.toolbarbutton-menubutton-dropmarker {
  417. display: none !important;
  418. }*/
  419.  
  420. #page-proxy-favicon {
  421. list-style-image: url(http://puu.sh/jDf7t/c0600ffd52.png);
  422. }
  423.  
  424. #reader-mode-button {
  425. background-image: url(http://puu.sh/jDf8a/7420034b34.png);
  426. margin-top: -2px !important;
  427. margin-right: 2px !important;
  428. }
  429.  
  430. /* icons */
  431.  
  432. #reader-mode-button, #bookmarks-menu-button, #PanelUI-button {
  433. list-style-image: none !important;
  434. }
  435.  
  436. #PanelUI-button, #bookmarks-menu-button, .urlbar-history-dropmarker, #urlbar-go-button,
  437. #urlbar-go-button:hover,
  438. #urlbar-go-button:hover:active,
  439. #PanelUI-menu-button .toolbarbutton-icon, #PanelUI-menu-button .toolbarbutton-icon, #bookmarks-menu-button, #bookmarks-menu-button:hover, #back-button > .toolbarbutton-icon, #forward-button {
  440. -moz-image-region: rect(0, 0, 0, 0) !important;
  441. }
  442.  
  443. #urlbar-go-button, #urlbar-go-button:hover, #urlbar-go-button:hover:active, #PanelUI-menu-button .toolbarbutton-icon, #PanelUI-menu-button .toolbarbutton-icon {
  444. list-style-image: none !important;
  445. background-size: contain !important;
  446. background-position: center center !important;
  447. background-repeat: no-repeat !important;
  448. }
  449.  
  450. statuspanel[type="overLink"] .statuspanel-label {
  451. margin-bottom: 0px !important;
  452. background: var(--url-bg) !important;
  453. border: 0px !important;
  454. color: var(--third-text) !important;
  455. }
  456.  
  457. statuspanel .statuspanel-label {
  458. background: var(--url-bg) !important;
  459. border: 0px !important;
  460. color: var(--third-text) !important;
  461. }
  462.  
  463. statuspanel[type="status"] .statuspanel-label[value^="Looking"],
  464. statuspanel[type="status"] .statuspanel-label[value^="Connect"],
  465. statuspanel[type="status"] .statuspanel-label[value^="Waiting"],
  466. statuspanel[type="status"] .statuspanel-label[value^="Transfer"] {
  467. background: var(--url-bg) !important;
  468. border: 0px solid !important;
  469. color: var(--third-text) !important;
  470. }
  471.  
  472. #main-window:not([privatebrowsingmode])[sizemode="normal"] #nav-bar {
  473. border-top: 0px #282B34!important;
  474. }
  475.  
  476. /*changes loading tab icons
  477. .tab-throbber[busy] {
  478. animation-name: none !important;
  479. list-style-image: url("http://puu.sh/jDkk9/2595e202c8.gif") !important;
  480. }
  481. .tab-throbber[progress] {
  482. animation-name: none !important;
  483. list-style-image: url("http://puu.sh/jDkk9/2595e202c8.gif") !important;
  484. }*/
  485.  
  486. /* Add Ons Page - wip*/
  487. #view-port, #addons-page, .status-control-wrapper {
  488. background-color: var(--focus-tab-bg) !important;
  489. border: none !important;
  490. }
  491.  
  492. .addon.addon-view, .category, #nav-header, #categories, #header-search {
  493. background-color: var(--tab-bg) !important;
  494. }
  495.  
  496. #header-search, #userstyle-sorting, #userstyle-footer {
  497. border: none !important;
  498. }
  499.  
  500. .addon.addon-view, .category {
  501. border-top: 0px !important;
  502. border-bottom: 0px !important;
  503. border-color: var(--main-text) !important;
  504. }
  505.  
  506. .advancedinfo-container, .name-container, .category, .text-link, .details.button-link, #userstyles-note {
  507. color: var(--third-text) !important;
  508. }
  509.  
  510. #new-userstyle, #install-from-url,.addon-control, #userstyle-sorting-status, #userstyle-sorting-name, #userstyle-sorting-type, .sorter, #back-btn, #forward-btn, #header-utils-btn {
  511. background-color: var(--focus-tab-bg) !important;
  512. border: none !important;
  513. color: var(--secondary-text) !important;
  514. box-shadow: none !important;
  515. }
  516.  
  517. #window-controls {
  518. opacity: 0 !important;
  519. }
  520. #window-controls:hover {
  521. opacity: 0.4 !important;
  522. }
  523.  
  524. /* menu buttons */
  525.  
  526. #tabview-button .toolbarbutton-icon,
  527. #save-page-button .toolbarbutton-icon,
  528. #developer-button .toolbarbutton-icon,
  529. #preferences-button .toolbarbutton-icon,
  530. #webrtc-status-button .toolbarbutton-icon, #new-window-button .toolbarbutton-icon,
  531. #new-tab-button .toolbarbutton-icon,
  532. #go-button:hover,
  533. #downloads-button:not([attention]) .toolbarbutton-icon,
  534. #zoom-in-button .toolbarbutton-icon,
  535. #copy-button .toolbarbutton-icon,
  536. #add-ons-button .toolbarbutton-icon,
  537. #find-button .toolbarbutton-icon,
  538. #sidebar-button .toolbarbutton-icon, #context-stop,
  539. .tabs-closebutton:hover .toolbarbutton-icon,
  540. .tab-close-button:hover .toolbarbutton-icon,
  541. #downloads-button[paused] .toolbarbutton-icon,
  542. #urlbar-stop-button:hover,
  543. #cut-button .toolbarbutton-icon,
  544. #zoom-out-button .toolbarbutton-icon,
  545. #stop-button .toolbarbutton-icon,
  546. #characterencoding-button .toolbarbutton-icon, #tabview-button .toolbarbutton-icon,
  547. #history-button .toolbarbutton-icon,
  548. #history-panelmenu .toolbarbutton-icon,
  549. #fullscreen-button .toolbarbutton-icon,
  550. #urlbar-reload-button:hover,
  551. #paste-button .toolbarbutton-icon,
  552. #reload-button .toolbarbutton-icon, #urlbar[level="broken"] #page-proxy-favicon, #feed-button .toolbarbutton-icon, #password-notification-icon,
  553. #home-button .toolbarbutton-icon,
  554. #open-file-button .toolbarbutton-icon,
  555. #email-link-button .toolbarbutton-icon, #sync-button .toolbarbutton-icon,
  556. #social-share-button .toolbarbutton-icon, #privatebrowsing-button .toolbarbutton-icon,
  557. #print-button .toolbarbutton-icon,
  558. #PanelUI-menu-button .toolbarbutton-icon,
  559. #nav-bar-overflow-button .toolbarbutton-icon,
  560. #classic_bm_button23-toolbar-button > .toolbarbutton-icon,
  561. #bookmarks-menu-button:not([starred]) .toolbarbutton-icon,
  562. #bookmarks-button .toolbarbutton-icon,
  563. #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
  564. filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'invert\'>\
  565. <feColorMatrix in='SourceGraphic' type='matrix' values=\
  566. '0.58 0.43 0.3 0.0 0.23 \
  567. 0.3 0.48 0.3 0.0 0.0 \
  568. 0.3 0.3 0.68 0.0 0.0 \
  569. 0.0 0.0 0.0 1.0 0.0'/></filter></svg>#invert") !important;
  570. /*filter: hue-rotate(120deg) !important;*/
  571. opacity: 0.5 !important;
  572. }
  573.  
  574. /* about ffox dialog */
  575. #aboutDialogContainer, #clientBox {
  576. background: var(--tab-bg) !important;
  577. color: var(--secondary-text) !important;
  578. }
  579. #noUpdatesFound > label, #trademark {
  580. color: var(--main-text) !important;
  581. }
  582. #leftBox {
  583. background-image: url("https://puu.sh/lkSrb/131664655c.png") !important;
  584. }
  585. #rightBox {
  586. background-image: url("https://puu.sh/lkSoQ/809ae3607f.png") !important;
  587. }
  588.  
  589. /* library window */
  590. #placesToolbar {
  591. background: var(--focus-tab-bg) !important;
  592. }
  593. #placesList > treechildren, #searchFilter {
  594. background: var(--tab-bg) !important;
  595. color: var(--main-text) !important;
  596. }
  597. .download.download-state, #clearDownloadsButton {
  598. background: var(--url-bg) !important;
  599. color: var(--third-text) !important;
  600. }
  601. #placesToolbar, #placesView > splitter, #searchFilter {
  602. border: none !important;
  603. }
  604.  
  605. /********************************************************************************
  606. * Here starts the HTML *
  607. ********************************************************************************/
  608.  
  609. <!DOCTYPE html>
  610. <html>
  611. <head>
  612. <title>startpage</title>
  613. <meta charset="utf-8">
  614. <link rel="stylesheet" type="text/css" href="trimmedcss.css">
  615. </head>
  616. <body>
  617. <div id="container">
  618. <div id="cell">
  619. <div class="sqr">
  620. <span>4chan</span>
  621. <div class="crcl">
  622.  
  623. <div class="linq1">
  624. <br>
  625. <br>
  626. <a href="http://boards.4chan.org/b/">/b/</a>
  627. </div>
  628.  
  629. <div class="linq2">
  630. <br>
  631. <br>
  632. <a href="http://boards.4chan.org/wg/">/wg/</a>
  633. </div>
  634.  
  635. <div class="linq3">
  636. <br>
  637. <br>
  638. <a href="http://boards.4chan.org/w/">/w/</a>
  639. </div>
  640.  
  641. <div class="linq4">
  642. <br>
  643. <br>
  644. <a href="http://boards.4chan.org/g/">/g/</a>
  645. </div>
  646.  
  647. <div class="linq5">
  648. <br>
  649. <br>
  650. <a href="http://boards.4chan.org/v/">/v/</a>
  651. </div>
  652.  
  653. </div>
  654. </div>
  655. <div class="sqr">
  656. <span>Daily</span>
  657. <div class="crcl">
  658.  
  659. <div class="linq1">
  660. <br>
  661. <br>
  662. <a href="https://twitter.com/">Twitter</a>
  663. </div>
  664.  
  665. <div class="linq2">
  666. <br>
  667. <br>
  668. <a href="https://www.tumblr.com/login">Tumblr</a>
  669. </div>
  670.  
  671. <div class="linq3">
  672. <br>
  673. <br>
  674. <a href="http://www.youtube.com/">YouTube</a>
  675. </div>
  676.  
  677. <div class="linq4">
  678. <br>
  679. <br>
  680. <a href="https://soundcloud.com/stream">Soundcloud</a>
  681. </div>
  682.  
  683. <div class="linq5">
  684. <br>
  685. <br>
  686. <a href="https://web.whatsapp.com/">What's App</a>
  687. </div>
  688.  
  689. </div>
  690. </div>
  691. <div class="sqr">
  692. <span>Forums</span>
  693. <div class="crcl">
  694.  
  695. <div class="linq1">
  696. <br>
  697. <br>
  698. <a href="http://www.backbeard.es/index.php">BackBeard</a>
  699. </div>
  700.  
  701. <div class="linq2">
  702. <br>
  703. <br>
  704. <a href="http://redlinesp.org/newrlsp/index.php?action=forum">RLSP</a>
  705. </div>
  706.  
  707. <div class="linq3">
  708. <br>
  709. <br>
  710. <a href="http://www.yoyo4all.com/news.php">Yoyo4All</a>
  711. </div>
  712.  
  713. <div class="linq4">
  714. <br>
  715. <br>
  716. <a href="http://www.penspinning.es/index.php">SPSC</a>
  717. </div>
  718.  
  719. <div class="linq5">
  720. <br>
  721. <br>
  722. <a href="http://www.shufflespain.es/foro/index.php">Shuffle Spain</a>
  723. </div>
  724.  
  725. </div>
  726. </div>
  727. <div class="sqr">
  728. <span>Torrent</span>
  729. <div class="crcl">
  730.  
  731. <div class="linq5">
  732. <br>
  733. <br>
  734. <a href="https://thepiratebay.mn/">TPB</a>
  735. </div>
  736.  
  737. <div class="linq3">
  738. <br>
  739. <br>
  740. <a href="http://kat.cr/">Kickass</a>
  741. </div>
  742.  
  743. <div class="linq4">
  744. <br>
  745. <br>
  746. <a href="http://www.nyaa.se/">Nyaa</a>
  747. </div>
  748.  
  749. </div>
  750. </div>
  751. </div>
  752. </div>
  753. </body>
  754. </html>
  755.  
  756. /********************************************************************************
  757. * Here starts the CSS *
  758. ********************************************************************************/
  759.  
  760. body
  761. {
  762. overflow: hidden;
  763. font-family: "Segoe UI Light";
  764. color: #999999;
  765. background-image: url(wall.jpg);
  766. background-size: 1920px 1080px;
  767. }
  768.  
  769. a
  770. {
  771. text-decoration: none;
  772. color: #999999;
  773. line-height: 25px;
  774. }
  775.  
  776. #bgimg
  777. {
  778. z-index: -10;
  779. position: fixed;
  780. background-size: cover;
  781. background-repeat: no-repeat;
  782. }
  783.  
  784. #container
  785. {
  786. width: 100%;
  787. display: table;
  788. }
  789.  
  790. span
  791. {
  792. width: inherit;
  793. height: inherit;
  794. line-height: 145px;
  795. font-size: 30px;
  796. color: #999999;
  797. }
  798.  
  799. #cell
  800. {
  801. display: table-cell;
  802. vertical-align: middle;
  803. text-align: center;
  804. }
  805.  
  806. .sqr
  807. {
  808. display: inline-block;
  809. width: 150px;
  810. height: 150px;
  811. margin: 350px 8% 0% 8%;
  812. border-radius: 100px;
  813. background-color: #121212;
  814. font-size: 20px;
  815. position: relative;
  816. }
  817.  
  818. .crcl
  819. {
  820. border-radius: 1000px;
  821. position: relative;
  822. z-index: 1;
  823. bottom: 300px;
  824. right: 155px;
  825. width: 450px;
  826. height: 450px;
  827. /*border: 1px solid black;*/
  828. }
  829.  
  830. .crcl [class^='linq']
  831. {
  832. position: absolute;
  833. width: 150px;
  834. height: 150px;
  835. border-radius: 100px;
  836. background-color: #121212;
  837. visibility: hidden;
  838. /*border: solid 1px #00ff00;*/
  839. }
  840.  
  841.  
  842. /*==================Div Arriba a la izquierda==============*/
  843.  
  844. .linq1
  845. {
  846. top: 75px;
  847. left: 75px;
  848. animation-name: move;
  849. animation-duration: 0.5s;
  850. animation-play-state: paused;
  851. }
  852.  
  853. @keyframes move1
  854. {
  855. 0%
  856. {
  857. transform: translate( 0px, 0px );
  858. opacity: 0;
  859. }
  860.  
  861. 100%
  862. {
  863. transform: translate(-95px, 0px);
  864. opacity: 1;
  865. }
  866. }
  867.  
  868. .crcl:hover .linq1
  869. {
  870. animation-name: move1;
  871. transition-timing-function: ease-out;
  872. visibility: inherit;
  873. animation-play-state: running;
  874. animation-fill-mode: forwards;
  875. }
  876.  
  877. /*==================Div Arriba a la derecha==============*/
  878.  
  879. .linq2
  880. {
  881. top: 75px;
  882. left: 230px;
  883. animation-name: move;
  884. animation-duration: 0.5s;
  885. animation-play-state: paused;
  886. }
  887.  
  888. @keyframes move2
  889. {
  890. 0%
  891. {
  892. transform: translate( 0px, 0px );
  893. opacity: 0;
  894. }
  895.  
  896. 100%
  897. {
  898. transform: translate( 95px, 0px );
  899. opacity: 1;
  900. }
  901. }
  902.  
  903. .crcl:hover .linq2
  904. {
  905. animation-name: move2;
  906. transition-timing-function: ease-out;
  907. visibility: inherit;
  908. animation-play-state: running;
  909. animation-fill-mode: forwards;
  910. }
  911.  
  912. /*==================Div Abajo a la izquierda==============*/
  913.  
  914. .linq3
  915. {
  916. top: 225px;
  917. left: 75px;
  918. animation-name: move;
  919. animation-duration: 0.5s;
  920. animation-play-state: paused;
  921. }
  922.  
  923. @keyframes move3
  924. {
  925. 0%
  926. {
  927. transform: translate( 0px, 0px );
  928. opacity: 0;
  929. }
  930.  
  931. 100%
  932. {
  933. transform: translate( -35px, 75px );
  934. opacity: 1;
  935. }
  936. }
  937.  
  938. .crcl:hover .linq3
  939. {
  940. animation-name: move3;
  941. transition-timing-function: ease-out;
  942. visibility: inherit;
  943. animation-play-state: running;
  944. animation-fill-mode: forwards;
  945. }
  946.  
  947. /*==================Div Abajo a la derecha==============*/
  948.  
  949. .linq4
  950. {
  951. top: 225px;
  952. left: 230px;
  953. animation-name: move;
  954. animation-duration: 0.5s;
  955. animation-play-state: paused;
  956. }
  957.  
  958. @keyframes move4
  959. {
  960. 0%
  961. {
  962. transform: translate( 0px, 0px );
  963. opacity: 0;
  964. }
  965.  
  966. 100%
  967. {
  968. transform: translate( 35px, 75px );
  969. opacity: 1;
  970. }
  971. }
  972.  
  973. .crcl:hover .linq4
  974. {
  975. animation-name: move4;
  976. transition-timing-function: ease-out;
  977. visibility: inherit;
  978. animation-play-state: running;
  979. animation-fill-mode: forwards;
  980. }
  981.  
  982. /*==================Div Entre los 2 de arriba, usar linq5==============*/
  983.  
  984.  
  985. .linq5
  986. {
  987. top: 75px;
  988. left: 155px;
  989. animation-name: move;
  990. animation-duration: 0.5s;
  991. animation-play-state: paused;
  992. }
  993.  
  994. @keyframes move5
  995. {
  996. 0%
  997. {
  998. transform: translate( 0px, 0px );
  999. opacity: 0;
  1000. }
  1001.  
  1002. 100%
  1003. {
  1004. transform: translate( 0px, -115px );
  1005. opacity: 1;
  1006. }
  1007. }
  1008.  
  1009. .crcl:hover .linq5
  1010. {
  1011. animation-name: move5 ;
  1012. transition-timing-function: ease-out;
  1013. visibility: inherit;
  1014. animation-play-state: running;
  1015. animation-fill-mode: forwards;
  1016. }
  1017.  
  1018. /*==================Div Entre los 2 de abajo, usar linq6==============*/
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!