Advertisement
decembre

STY - Flickr WideScreen (Viewer) - FFFLCKR v.2

Mar 29th, 2015
401
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 9.83 KB | None | 0 0
  1. @namespace url(http://www.w3.org/1999/xhtml);
  2.  
  3. @-moz-document domain("fffflckr.com") {
  4. /* ==== FLICKR (Viewer) -  FFFLCKR (fffflckr) v.2 (new2) - OBSOLETE - just for INFOS  ==== */
  5.  
  6.  
  7. /*
  8. *{
  9.     box-sizing: border-box !important;
  10. } */
  11. div#photoHolder {
  12.     display: block;
  13.     margin: 35px auto 0!important;
  14. }
  15.  
  16. .column a {
  17.     color: #BB4933!important;
  18.     text-decoration: none;
  19. }
  20.  
  21. #menu {
  22.   background: none repeat scroll 0 0 rgba(30, 30, 30, 0.9);
  23. height: 30px !important;
  24.   position: fixed;
  25.   top: 0;
  26.   width: 100%;
  27. border-bottom: 1px solid red !important;
  28.   z-index: 999;
  29. }
  30. #menu-buttons {
  31.   cursor: pointer;
  32.   height: 29px!important;
  33.   position: absolute;
  34.   right: 50px;
  35.   top: 0;
  36. }
  37. #menu-buttons div {
  38.     float: left;
  39.     height: 29px !important;
  40.     line-height: 29px !important;
  41.     padding-top: 0px !important;
  42.     text-align: center;
  43.     text-transform: uppercase;
  44.     width: 222px !important;
  45.     background: none repeat scroll 0 0 rgba(4, 4, 4, 0.18);
  46. transition: all ease 0.7s !important;
  47. }
  48. #menu-buttons div:hover {
  49.     background: none repeat scroll 0 0 rgba(246, 199, 10, 1);
  50.     color: black;
  51. }
  52. #logo {
  53.     background-color: rgba(4, 4, 4, 0.18) !important;
  54. background-size: 45% 100% !important;
  55. background-position: center center !important;
  56. height: 29px!important;
  57.     left: 0;
  58.     margin-left: 50px;
  59.     position: absolute;
  60.     top: 0;
  61.     width: 200px;
  62. }
  63. #preloader {
  64. /* position: absolute; */
  65. /* display: block; */
  66. width: 20px !important;
  67. height: 20px !important;
  68. /* margin-top: -20px !important; */
  69. /* left: -6px; */
  70.     top: 6px;
  71. }
  72. #preloader::before {
  73.     position: absolute;
  74.     display: block;
  75. /* width: 20px !important; */
  76. /* height: 20px !important; */
  77. /* margin-top: -20px !important; */
  78. /* left: -6px; */
  79. /* top: -6px; */
  80.     border-color: rgba(246, 199, 10, 0.8) transparent transparent;
  81.     border-radius: 100%;
  82.     border-style: solid;
  83.     border-width: 6px;
  84.     content: "";
  85. }
  86.  
  87. .galcolumn {
  88.     box-sizing: border-box;
  89.     float: none !important;
  90.     clear: none !important;
  91. /* height: 170px !important; */
  92.     width: 98% !important;
  93.     margin-left: 20px !important;
  94. /* margin-top: 5px !important; */
  95.     padding: 0px !important;
  96.     padding-left: 0;
  97. /* outline: 1px solid green !important; */
  98. }
  99. .galcolumn:nth-last-child(2) .js-photo.photo {
  100. outline: 1px solid red !important;
  101. }
  102. .photo {
  103. /* box-sizing: border-box !important; */
  104.     float: left !important;
  105.     height: 1px !important;
  106.     width: 197.5px!important;
  107.     margin-bottom: 10px !important;
  108.     padding: 10px 5px 90px 5px !important;
  109.     vertical-align: middle !important;
  110.     text-align: center;
  111.     color: #f6c70a;
  112.     background: #333;
  113.     overflow: hidden;
  114.     outline: 1px solid gray !important;
  115. }
  116. .photo img {
  117. /* box-sizing: border-box !important; */
  118.     position: relative !important;
  119.     display: inline-block !important;
  120.     float: none !important;
  121.     clear: none !important;
  122.     width: 100%;
  123.     height: auto;
  124. /* padding-bottom: 70px !important; */
  125.     margin-left: auto;
  126.     margin-right: auto;
  127. /* transition: margin-top ease 0.3s !important; */
  128. /* vertical-align: middle!important; */
  129. }
  130.  
  131. .photo:hover img {
  132. /* box-sizing: border-box !important; */
  133.     position: relative !important;
  134.     display: inline-block !important;
  135.     float: none !important;
  136.     clear: none !important;
  137.     margin-top: -146% !important;
  138. /* outline: 2px dotted yellow !important; */
  139. }
  140. /* ===================== */
  141. .photo a {
  142.     color: #f6c70a;
  143. }
  144.  
  145. .photo a:hover {
  146.     background: #f6c70a;
  147.     color: white;
  148. }
  149. .photo .over-nav {
  150.     position: relative !important;
  151.     display: inline-block !important;
  152.     width: 155px !important;
  153. height: 100% !important;
  154.     min-height: 0px !important;
  155.     max-height: 0px !important;
  156. padding: 0 !important;
  157.     float: none !important;
  158.     clear: both !important;
  159. /* margin-top: 100%!important; */
  160.     padding: 0 !important;
  161.     margin-top: -22% !important;
  162.     text-align: center;
  163.     cursor: pointer;
  164.     z-index: 2;
  165. /* transition: margin-top ease 0.3s !important; */
  166.   background: none repeat scroll 0 0 rgba(30, 30, 30, 0.9);
  167. /* border: 1px solid gold !important; */
  168. }
  169. .photo:hover .over-nav {
  170.     position: relative !important;
  171. display: inline-block !important;
  172.     width: 155px !important;
  173.     min-height: 20px !important;
  174.     max-height: 20px !important;
  175.     float: none !important;
  176.     clear: both !important;
  177. /* margin-top: 100%!important; */
  178.     padding: 0 !important;
  179.     margin-top: 135% !important;
  180.     text-align: center;
  181.     cursor: pointer;
  182.     z-index: 2;
  183.     border: 1px solid gold !important;
  184. }
  185. .over-nav div .nav-content {
  186.     position: absolute !important;
  187.     width: 100% !important;
  188.     height: 30px !important;
  189.     top: 0;
  190.     left: 0;
  191.     font-size: 100% !important;
  192.     text-align: center !important;
  193.     padding-top: 1px !important;
  194. /* outline: 1px solid tomato !important; */
  195. }
  196. .nav-bg:hover  ,
  197. .nav-bg {
  198. /* max-height: 20px !important; */
  199. /* outline: 1px solid red !important; */
  200.     display: none !important;
  201. }
  202.  
  203. .js-load-more.load-more {
  204. position: absolute !important;
  205. display: inline-block !important;
  206.     height: 20px !important;
  207. top: 1px!important;
  208. right: 1px !important;
  209. /* outline: 4px dashed peru !important; */
  210. }
  211.  
  212.  
  213.  
  214. /* .narrow {
  215.     width: 40% !important;
  216.     float: left;
  217. } */
  218. /* .narrow.second {
  219.     margin-left: 0% !important;
  220.     float: right !important;
  221. } */
  222.  
  223.  
  224. .narrow {
  225.     position: absolute !important;
  226.     display: inline-block !important;
  227.     width: 20px !important;
  228.     float: none !important;
  229.     clear: right !important;
  230.     left: 30%!important;
  231. /* outline: 4px dotted peru !important; */
  232. }
  233.  
  234. .narrow.second {
  235.     position: absolute !important;
  236.     display: inline-block !important;
  237.     float: none !important;
  238.     clear: right !important;
  239.     width: 30px !important;
  240.     top: 1px!important;
  241.     left: 55%!important;
  242. /* outline: 2px solid red !important; */
  243. }
  244.  
  245. .over-nav div {
  246.     position: relative;
  247.     border-radius: 12px;
  248.     overflow: hidden;
  249.     height: 20px !important;
  250.     width: 30px !important;
  251.     margin-bottom: 10px;
  252. }
  253. .over-nav div:hover {
  254.     background: #f6c70a;
  255.     color: white;
  256. }
  257.  
  258. .over-nav div .nav-bg {
  259.     top: 0;
  260. left: 0;
  261. /* right: 0!important; */
  262.     width: 55% !important;
  263.     background: white;
  264.     opacity: 0.7;
  265.     height: 20% !important;
  266. }
  267.  
  268. .over-nav div.faved {
  269.     background: #f6c70a;
  270.     color: white;
  271.     cursor: default;
  272. }
  273.  
  274.  
  275. /* ICONS */
  276. .icon-resize-full-alt.nav-content ,
  277. .icon-star.nav-content ,
  278. .icon-popup.nav-content ,
  279. .icon-down-big.nav-content {
  280. /* padding-top: 8.5px; */
  281.     font-size: 10px !important;
  282. /* outline: 4px solid red !important; */
  283. }
  284.  
  285. .icon-popup.nav-content{
  286. /* border: 4px solid blue !important; */
  287.     width: 20px !important;
  288.     height: 10px !important;
  289.     padding: 0 !important;
  290. }
  291.  
  292. .icon-star.nav-content{
  293. /* border: 4px solid blue !important; */
  294.     width: 20px !important;
  295.     height: 10px !important;
  296.     padding: 0 !important;
  297. }
  298.  
  299. .icon-down-big.nav-content{
  300. /* border: 4px solid blue !important; */
  301.     width: 20px !important;
  302.     height: 10px !important;
  303.     padding: 0 !important;
  304. }
  305.  
  306. .icon-resize-full-alt.nav-content{
  307. /* border: 4px solid blue !important; */
  308.     width: 20px !important;
  309.     height: 10px !important;
  310.     padding: 0 !important;
  311. }
  312.  
  313. /* ===================== */
  314.  
  315. #colorbox, #cboxOverlay, #cboxWrapper{
  316. position:absolute;
  317. top:0;
  318. left:0;
  319. z-index:9999;
  320. overflow:hidden;
  321. }
  322. #cboxOverlay{
  323. position:fixed;
  324. width:100%;
  325. height:100%;
  326. }
  327. #cboxMiddleLeft,
  328. #cboxBottomLeft{
  329. clear:left;
  330. }
  331. #cboxContent{
  332. position:relative;
  333. }
  334. #cboxLoadedContent{
  335. overflow:auto;
  336. -webkit-overflow-scrolling: touch;
  337. }
  338. #cboxTitle{
  339. margin:0;
  340. }
  341. #cboxLoadingOverlay,
  342. #cboxLoadingGraphic{
  343. position:absolute;
  344. top:0; left:0;
  345. width:100%;
  346. height:100%;
  347. }
  348. #cboxPrevious,
  349. #cboxNext,
  350. #cboxClose,
  351. #cboxSlideshow{
  352. cursor:pointer
  353. }
  354. .cboxPhoto{
  355. float:left;
  356. margin:auto;
  357. border:0;
  358. display:block;
  359. max-width:none;
  360. -ms-interpolation-mode:bicubic;
  361. }
  362. .cboxIframe{
  363. width:100%;
  364. height:100%;
  365. display:block;
  366. border:0;
  367. }
  368. #colorbox,
  369. #cboxContent,
  370. #cboxLoadedContent{
  371. box-sizing:content-box;
  372. -moz-box-sizing:content-box;
  373. -webkit-box-sizing:content-box;
  374. }
  375.  
  376. #cboxOverlay{
  377. background:#000;
  378. }
  379. #colorbox{
  380. outline:0;
  381. }
  382.  
  383. #cboxContent{
  384. margin-top:20px;
  385. background:#000;
  386. }
  387. .cboxIframe{
  388. background:#fff;
  389. }
  390.  
  391. #cboxError{
  392. padding:50px;
  393. border:1px solid #ccc;
  394. }
  395.  
  396. #cboxLoadedContent{
  397. border:5px solid #000;
  398. background:#fff;
  399. }
  400.  
  401. #cboxTitle{
  402. position:absolute;
  403. top:-20px;
  404. left:0;
  405. color:#ccc;
  406. }
  407.  
  408. #cboxCurrent{
  409. position:absolute;
  410. top:-20px;
  411. right:0px;
  412. color:#ccc;
  413. }
  414.  
  415.  
  416.  
  417.  
  418. /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
  419.  
  420. #cboxPrevious,
  421. #cboxNext,
  422. #cboxSlideshow,
  423. #cboxClose {
  424. border:0;
  425. padding:0;
  426. margin:0;
  427. overflow:visible;
  428. width:auto;
  429. background:none;
  430. }
  431.        
  432.  
  433. /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
  434.  
  435.  
  436. #cboxPrevious:active,
  437. #cboxNext:active,
  438. #cboxSlideshow:active,
  439. #cboxClose:active {
  440. outline:0;
  441. }
  442.        
  443.  
  444. #cboxSlideshow{
  445. position:absolute;
  446. top:-20px;
  447. right:90px;
  448. color:#fff;
  449. }
  450.  
  451. #cboxPrevious{
  452. position:absolute;
  453. top:50%;
  454. left:5px;
  455. margin-top:-32px;
  456. width:28px;
  457. height:65px;
  458. text-indent:-9999px;
  459. }
  460.  
  461. #cboxPrevious:hover{
  462. background-position:bottom left;
  463. }
  464.  
  465. #cboxNext{
  466. position:absolute;
  467. top:50%;
  468. right:5px;
  469. margin-top:-32px;
  470. width:28px;
  471. height:65px;
  472. text-indent:-9999px;
  473. }
  474.  
  475. #cboxNext:hover{
  476. background-position:bottom right;
  477. }
  478.  
  479. #cboxClose{
  480. position:absolute;
  481. top:5px;
  482. right:5px;
  483. display:block;
  484. width:38px;
  485. height:19px;
  486. text-indent:-9999px;
  487. }
  488.  
  489. #cboxClose:hover{
  490. background-position:bottom center;
  491. }
  492.  
  493.  
  494. /* ==== END === */
  495. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement