shaarli.css 23 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348
  1. /**
  2. * General
  3. */
  4. body {
  5. background: #d0d0d0;
  6. }
  7. .strong {
  8. font-weight: bold;
  9. }
  10. .clear {
  11. clear: both;
  12. }
  13. .center {
  14. text-align: center;
  15. margin: auto;
  16. }
  17. .label {
  18. display: inline-block;
  19. padding: .25em .4em;
  20. font-size: 75%;
  21. font-weight: 700;
  22. line-height: 1;
  23. text-align: center;
  24. white-space: nowrap;
  25. vertical-align: baseline;
  26. border-radius: .25rem;
  27. }
  28. pre {
  29. max-width: 100%;
  30. }
  31. @font-face {
  32. font-family: 'Roboto';
  33. font-weight: 400;
  34. font-style: normal;
  35. src:
  36. local('Roboto'),
  37. local('Roboto-Regular'),
  38. url('../fonts/Roboto-Regular.woff2') format('woff2'),
  39. url('../fonts/Roboto-Regular.woff') format('woff');
  40. }
  41. @font-face {
  42. font-family: 'Roboto';
  43. font-weight: 700;
  44. font-style: normal;
  45. src:
  46. local('Roboto'),
  47. local('Roboto-Bold'),
  48. url('../fonts/Roboto-Bold.woff2') format('woff2'),
  49. url('../fonts/Roboto-Bold.woff') format('woff');
  50. }
  51. body, .pure-g [class*="pure-u"] {
  52. font-family: Roboto, Arial, sans-serif;
  53. }
  54. /**
  55. * Extends Pure grids responsive to hide items.
  56. * Use xx-0 to hide an item on xx screen.
  57. * Display it at any level with xx-visible.
  58. */
  59. .pure-u-0 { display: none !important; }
  60. @media screen and (min-width: 35.5em) {
  61. .pure-u-sm-0 { display: none !important; }
  62. .pure-u-sm-visible { display: inline-block !important; }
  63. }
  64. @media screen and (min-width: 48em) {
  65. .pure-u-md-0 { display: none !important; }
  66. .pure-u-md-visible { display: inline-block !important; }
  67. }
  68. @media screen and (min-width: 64em) {
  69. .pure-u-lg-0 { display: none !important; }
  70. .pure-u-lg-visible { display: inline-block !important; }
  71. }
  72. @media screen and (min-width: 80em) {
  73. .pure-u-xl-0 { display: none !important; }
  74. .pure-u-xl-visible { display: inline-block !important; }
  75. }
  76. /**
  77. * Make pure-extras alert closable.
  78. */
  79. .pure-alert-closable .fa-times {
  80. float: right;
  81. }
  82. .pure-alert-close {
  83. cursor: pointer;
  84. }
  85. .pure-alert-success {
  86. background-color: #1b926c;
  87. }
  88. .anchor:target {
  89. padding-top: 40px;
  90. }
  91. /**
  92. * MENU
  93. **/
  94. .shaarli-menu {
  95. position: fixed;
  96. top: 0;
  97. width: 100%;
  98. --height: 50px;
  99. background: #1b926c;
  100. -webkit-font-smoothing: antialiased;
  101. /* Hack to transition with auto height: http://stackoverflow.com/a/8331169/1484919 */
  102. max-height: 45px;
  103. transition: max-height 0.5s;
  104. overflow: hidden;
  105. z-index: 999;
  106. }
  107. /* Chrome bugfix: with 100% height, it only displays the first element. */
  108. .pure-menu-item {
  109. height: 45px;
  110. }
  111. .shaarli-menu.open {
  112. max-height: 500px;
  113. transition: max-height 0.75s;
  114. }
  115. .head-logo {
  116. float: left;
  117. margin: 0 5px 0 0;
  118. }
  119. .pure-menu-link,
  120. .pure-menu-link:visited,
  121. .pure-menu-selected .pure-menu-link,
  122. .pure-menu-selected .pure-menu-link:visited {
  123. padding: 0.8em 1em;
  124. color: #f5f5f5;
  125. }
  126. .pure-menu-link:hover, .pure-menu-link:focus,
  127. .pure-menu-selected .pure-menu-link:hover,
  128. .pure-menu-selected .pure-menu-link:focus {
  129. color: #fff;
  130. background: transparent;
  131. }
  132. .pure-menu-item:hover::after {
  133. margin: -4px auto 0 auto;
  134. display: block;
  135. content:"";
  136. background: #fff;
  137. height: 4px;
  138. width: 100%;
  139. }
  140. .menu-toggle {
  141. width: 34px;
  142. height: 45px;
  143. position: absolute;
  144. top: 5px;
  145. right: 0;
  146. display: none;
  147. }
  148. .menu-toggle .bar {
  149. background-color: #b0ddce;
  150. display: block;
  151. width: 20px;
  152. height: 2px;
  153. border-radius: 100px;
  154. position: absolute;
  155. top: 18px;
  156. right: 7px;
  157. transition: all 0.5s;
  158. }
  159. .menu-toggle .bar:first-child {
  160. transform: translateY(-6px);
  161. }
  162. .menu-toggle.x .bar {
  163. transform: rotate(45deg);
  164. }
  165. .menu-toggle.x .bar:first-child {
  166. transform: rotate(-45deg);
  167. }
  168. @media screen and (max-width: 64em) {
  169. .menu-toggle {
  170. display: block;
  171. }
  172. }
  173. .header-buttons {
  174. text-align: right;
  175. }
  176. .linkcount {
  177. color: #252525;
  178. font-size: 0.8em;
  179. }
  180. @media screen and (min-width: 64em) {
  181. .linkcount {
  182. position: absolute;
  183. right: 5px;
  184. }
  185. }
  186. #search, #search-linklist, #search-tagcloud {
  187. text-align: center;
  188. width: 100%;
  189. }
  190. #search input[type="text"], #search-linklist input[type="text"] {
  191. padding: 0 5px;
  192. height: 30px;
  193. width: 260px;
  194. background: #f5f5f5;
  195. border: medium none currentColor;
  196. box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 1px rgba(0, 0, 0, 0.298) inset;
  197. border-radius: 2px;
  198. color: #252525;
  199. }
  200. @media screen and (max-width: 64em) {
  201. .searchform {
  202. max-width: 260px;
  203. margin: 0 auto;
  204. }
  205. }
  206. /* because chrome */
  207. #search input[type="text"]::-webkit-input-placeholder,
  208. #search-linklist input[type="text"]::-webkit-input-placeholder {
  209. color: #777777;
  210. }
  211. #search button,
  212. #search-tagcloud button,
  213. #search-linklist button {
  214. padding: 4px 8px 6px 8px;
  215. background-color: #1B926C;
  216. color: #f5f5f5;
  217. border: none;
  218. border-radius: 2px;
  219. }
  220. #search-tagcloud button {
  221. width: 90%;
  222. }
  223. @media screen and (max-width: 64em) {
  224. #search-linklist button {
  225. width: 100%;
  226. }
  227. #search-linklist .awesomplete {
  228. margin: 5px 0;
  229. }
  230. }
  231. #search button:hover,
  232. #search-linklist button:hover,
  233. #search-tagcloud button:hover {
  234. color: #d0d0d0;
  235. }
  236. #search,
  237. #search-linklist {
  238. padding: 6px 0;
  239. }
  240. @media screen and (max-width: 64em) {
  241. #search, #search * {
  242. visibility: hidden;
  243. }
  244. }
  245. .subheader-form a.button {
  246. color: #f5f5f5;
  247. font-weight: bold;
  248. text-decoration: none;
  249. border: 2px solid #f5f5f5;
  250. border-radius: 5px;
  251. padding: 3px 10px;
  252. }
  253. .linklist-item-editbuttons .delete-checkbox {
  254. display: none;
  255. }
  256. #header-login-form input[type="text"], #header-login-form input[type="password"] {
  257. width: 200px;
  258. }
  259. /* because chrome */
  260. #header-login-form input[type="text"]::-webkit-input-placeholder,
  261. #header-login-form input[type="password"]::-webkit-input-placeholder {
  262. color: #777777;
  263. }
  264. .subheader-form {
  265. visibility: hidden;
  266. position: fixed;
  267. width: 100%;
  268. text-align: center;
  269. background: #1b926c;
  270. display: block;
  271. z-index: 999;
  272. height: 30px;
  273. padding: 5px 0;
  274. }
  275. @media screen and (min-width: 64em) {
  276. .subheader-form.open, .subheader-form.open * {
  277. visibility: visible;
  278. }
  279. }
  280. .subheader-form input[type="text"], .subheader-form input[type="password"], .subheader-form .remember-me {
  281. padding: 5px 5px 3px 15px;
  282. height: 20px;
  283. width: 20%;
  284. background: #f5f5f5;
  285. border: medium none currentColor;
  286. border-radius: 2px;
  287. box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset;
  288. color: #252525;
  289. }
  290. /* because chrome */
  291. .subheader-form input[type="text"]::-webkit-input-placeholder,
  292. .subheader-form input[type="password"]::-webkit-input-placeholder
  293. {
  294. color: #252525;
  295. }
  296. .subheader-form .remember-me {
  297. display: inline-block;
  298. width: auto;
  299. padding: 5px 20px 3px 20px;
  300. cursor: pointer;
  301. }
  302. .subheader-form .remember-me label, .subheader-form .remember-me input {
  303. cursor: pointer;
  304. }
  305. .subheader-form input[type="submit"] {
  306. display: inline-block;
  307. margin: 0 0 5px 0;
  308. padding: 4px 0 4px 0;
  309. height: 28px;
  310. width: 100px;
  311. background: #1b926c;
  312. border: 1px solid #f5f5f5;
  313. color: #f5f5f5;
  314. border-radius: 2px;
  315. }
  316. .subheader-form input[type="submit"]:hover {
  317. background: #f5f5f5;
  318. color: #1b926c;
  319. }
  320. .new-version-message {
  321. text-align: center;
  322. }
  323. .new-version-message a {
  324. color: rgb(151, 96, 13);
  325. font-weight: bold;
  326. }
  327. /**
  328. * CONTENT - GENERAL
  329. */
  330. #content {
  331. position: relative;
  332. z-index: 2;
  333. margin-top: 45px;
  334. }
  335. /**
  336. * Plugins additional forms
  337. */
  338. .toolbar-plugin {
  339. margin: 5px 0;
  340. text-align: center;
  341. }
  342. .toolbar-plugin input[type="text"] {
  343. padding: 0 5px;
  344. height: 30px;
  345. width: 300px;
  346. background: #f5f5f5;
  347. border: medium none currentColor;
  348. box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 1px rgba(0, 0, 0, 0.298) inset;
  349. border-radius: 2px;
  350. color: #252525;
  351. }
  352. /* because chrome */
  353. .toolbar-plugin input[type="text"]::-webkit-input-placeholder {
  354. color: #777777;
  355. }
  356. .toolbar-plugin input[type="submit"] {
  357. padding: 0 10px;
  358. height: 30px;
  359. background: #f5f5f5;
  360. border: medium none currentColor;
  361. border-radius: 2px;
  362. color: #252525;
  363. }
  364. .toolbar-plugin input[type="submit"]:hover {
  365. background: #fff;
  366. }
  367. @media screen and (max-width: 64em) {
  368. .toolbar-plugin input[type="text"] {
  369. width: 70%;
  370. }
  371. }
  372. /**
  373. * CONTENT - LINKLIST PAGING
  374. * 64em -> lg
  375. */
  376. .linklist-filters {
  377. margin: 5px 0;
  378. color: #252525;
  379. font-size: 0.9em;
  380. }
  381. .linklist-filters a {
  382. padding: 5px 8px;
  383. text-decoration: none;
  384. }
  385. .linklist-filters .filter-off {
  386. color: #252525;
  387. background: #f5f5f5;
  388. }
  389. .linklist-filters .filter-on {
  390. color: #b0ddce;
  391. background: #1b926c;
  392. }
  393. .linklist-pages {
  394. margin: 5px 0;
  395. color: #252525;
  396. text-align: center;
  397. }
  398. .linklist-pages a {
  399. color: #252525;
  400. text-decoration: none;
  401. }
  402. .linklist-pages a:hover {
  403. color: #fff;
  404. }
  405. .linksperpage {
  406. margin: 5px 0;
  407. text-align: right;
  408. color: #252525;
  409. font-size: 0.9em;
  410. }
  411. .linksperpage a {
  412. padding: 5px 5px;
  413. text-decoration: none;
  414. color: #252525;
  415. background: #f5f5f5;
  416. }
  417. .linksperpage a, .linksperpage input[type="text"] {
  418. display: inline-block;
  419. width: 20px;
  420. text-align: center;
  421. }
  422. .linksperpage form {
  423. display: inline;
  424. }
  425. .linksperpage input[type="text"] {
  426. height: 20px;
  427. margin: 0;
  428. padding: 4px 5px 3px 8px;
  429. background: #f5f5f5;
  430. border: medium none currentColor;
  431. color: #252525;
  432. font-size: 0.8em;
  433. }
  434. /**
  435. * CONTENT - LINKLIST ITEMS
  436. */
  437. .linklist-item {
  438. margin: 0 0 10px 0;
  439. background: #f5f5f5;
  440. box-shadow: 1px 1px 3px #797979;
  441. }
  442. .linklist-item-buttons {
  443. background: transparent;
  444. position: relative;
  445. width: 23px;
  446. z-index: 99;
  447. }
  448. .linklist-item-buttons-right {
  449. float: right;
  450. margin-right: -25px;
  451. }
  452. .linklist-item-buttons * {
  453. display: block;
  454. float: left;
  455. width:100%;
  456. margin: auto;
  457. text-align: center;
  458. }
  459. .linklist-item-title, .linklist-item-title h2 {
  460. margin: 0;
  461. word-wrap: break-word;
  462. }
  463. .linklist-item-title {
  464. position: relative;
  465. background: #f5f5f5;
  466. }
  467. .linklist-item-title h2 {
  468. padding: 3px 10px 0 10px;
  469. line-height: 30px;
  470. }
  471. .linklist-item-title h2 a {
  472. font-size: 0.7em;
  473. color: #252525;
  474. text-decoration: none;
  475. vertical-align: middle;
  476. }
  477. .linklist-item-title .linklist-link {
  478. font-size: 1.1em;
  479. color: #1b926c;
  480. }
  481. .linklist-item-title h2 a:visited .linklist-link {
  482. color: #2a4c41;
  483. }
  484. .linklist-item-title h2 a:hover, .linklist-item-title .linklist-link:hover{
  485. color: #252525;
  486. }
  487. .linklist-item-title .label-private {
  488. border: solid 1px #F89406;
  489. font-family: Arial, sans-serif;
  490. font-size: 0.65em;
  491. color: #F89406;
  492. }
  493. .fold-button {
  494. display: none;
  495. color: #252525;
  496. }
  497. .linklist-item-editbuttons {
  498. float: right;
  499. padding: 8px 5px;
  500. }
  501. .linklist-item-editbuttons * {
  502. display: block;
  503. float: left;
  504. margin: 0 1px;
  505. }
  506. .linklist-item-editbuttons a {
  507. font-size: 1em;
  508. }
  509. .edit-link {
  510. font-size: 1.2em;
  511. color: #0b5ea6;
  512. }
  513. .delete-link {
  514. font-size: 1.3em;
  515. color: #ac2925 !important;
  516. }
  517. .linklist-item-description {
  518. position: relative;
  519. padding: 0 10px;
  520. word-wrap: break-word;
  521. color: #252525;
  522. line-height: 1.3em;
  523. }
  524. .linklist-item-description a {
  525. text-decoration: none;
  526. color: #1b926c;
  527. }
  528. .linklist-item-description a:hover {
  529. color: #252525;
  530. }
  531. .linklist-item-description a:visited {
  532. color: #14553f;
  533. }
  534. .linklist-item-thumbnail {
  535. position: relative;
  536. padding: 0 0 0 5px;
  537. margin: 0;
  538. float: right;
  539. z-index: 50;
  540. height: 90px;
  541. }
  542. .linklist-item.private .linklist-item-title::before,
  543. .linklist-item.private .linklist-item-description::before {
  544. position: absolute;
  545. left: 3px;
  546. top: 0;
  547. display: block;
  548. content:"";
  549. background: #F89406;
  550. height: 96%;
  551. width: 2px;
  552. z-index: 1;
  553. }
  554. .linklist-item.private .linklist-item-description::before {
  555. height: 100%;
  556. }
  557. .linklist-item.private .linklist-item-title::before {
  558. margin-top: 3px;
  559. }
  560. .linklist-item-infos {
  561. padding: 4px 8px 4px 8px;
  562. background: #ddd;
  563. color: #252525;
  564. }
  565. .linklist-item-infos a {
  566. color: #252525;
  567. text-decoration: none;
  568. }
  569. .linklist-item-infos a:hover {
  570. color: #000;
  571. }
  572. .linklist-item-infos .linklist-item-tags {
  573. font-size: 0.8em;
  574. }
  575. .linklist-item-infos .label-tag {
  576. font-size: 1em;
  577. }
  578. .linklist-item-infos-dateblock {
  579. font-size: 0.9em;
  580. }
  581. .linklist-plugin-icon {
  582. width: 13px;
  583. height: 13px;
  584. }
  585. .linklist-item-infos-url {
  586. text-align: right;
  587. white-space: nowrap;
  588. overflow: hidden;
  589. text-overflow: ellipsis;
  590. font-size: 0.8em;
  591. height:23px;
  592. line-height:23px;
  593. }
  594. .linklist-item-infos .mobile-buttons {
  595. text-align: right;
  596. }
  597. .linklist-item-infos .linklist-plugin-icon {
  598. display: inline-block;
  599. margin: 0 2px;
  600. width: 16px;
  601. height: 16px;
  602. }
  603. .linklist-item-infos-controls-group {
  604. display: inline-block;
  605. border-right: 1px solid #5d5d5d;
  606. padding-right: 6px;
  607. }
  608. .ctrl-edit {
  609. margin: 0 7px;
  610. }
  611. /** 64em -> lg **/
  612. @media screen and (max-width: 64em) {
  613. .linklist-item-infos-url {
  614. text-align: left;
  615. }
  616. }
  617. /**
  618. * Footer
  619. */
  620. #footer {
  621. margin: 20px 0;
  622. padding: 5px;
  623. text-align: center;
  624. color: #252525;
  625. }
  626. #footer:before {
  627. display: block;
  628. content:"";
  629. background: linear-gradient(to right, #949393, #252525, #949393);
  630. height: 1px;
  631. width: 80%;
  632. margin: 10px auto;
  633. }
  634. #footer a {
  635. color: #252525;
  636. }
  637. /**
  638. * PAGE FORM
  639. */
  640. .page-form {
  641. margin: 20px 0 0 0;
  642. background: #f5f5f5;
  643. box-shadow: 1px 1px 2px #797979;
  644. color: #252525;
  645. overflow: hidden;
  646. }
  647. .page-form .window-title {
  648. margin: 0 0 10px 0;
  649. padding: 10px 0;
  650. width: 100%;
  651. color: #1b926c;
  652. background: #f5f5f5;
  653. text-align: center;
  654. }
  655. .page-form .window-subtitle {
  656. text-align: center;
  657. }
  658. .page-form a {
  659. color: #1b926c;
  660. font-weight: bold;
  661. text-decoration: none;
  662. }
  663. .page-form p {
  664. padding: 5px 10px;
  665. margin: 0;
  666. }
  667. .page-form input[type="text"],
  668. .page-form input[type="password"],
  669. .page-form textarea {
  670. box-sizing: border-box;
  671. margin: 10px 0;
  672. padding: 5px 5px 3px 15px;
  673. height: 35px;
  674. width: 90%;
  675. background: #eeeeee;
  676. border: solid 1px #d8d8d8;
  677. border-radius: 2px;
  678. color: #252525;
  679. }
  680. .page-form textarea {
  681. min-height: 240px;
  682. padding: 15px 5px 3px 15px;
  683. resize: vertical;
  684. overflow-y: auto;
  685. word-wrap:break-word
  686. }
  687. /* because chrome */
  688. .page-form input[type="text"]::-webkit-input-placeholder,
  689. .page-form input[type="password"]::-webkit-input-placeholder {
  690. color: #777777;
  691. }
  692. .page-form input[type="submit"], .page-form a.button {
  693. margin: 15px 5px;
  694. height: 35px;
  695. line-height: 35px;
  696. width: 150px;
  697. background: #1b926c;
  698. color: #f5f5f5;
  699. border: none;
  700. box-shadow: 1px 1px 1px #ddd, -1px -1px 6px #ddd, -1px 1px 2px #ddd, 1px -1px 2px #ddd;
  701. font-size: 1.2em;
  702. text-decoration: none;
  703. vertical-align: center;
  704. font-weight: normal;
  705. display: inline-block;
  706. }
  707. .page-form .button.button-red {
  708. background: #ac2925;
  709. }
  710. .page-form .submit-buttons {
  711. margin-bottom: 10px;
  712. }
  713. @media screen and (min-width: 64em) {
  714. .page-form .submit-buttons {
  715. position: relative;
  716. }
  717. .page-form .submit-buttons .button.button-red {
  718. position: absolute;
  719. right: 5%;
  720. }
  721. }
  722. @media screen and (max-width: 64em) {
  723. .page-form .submit-buttons .button {
  724. display: block;
  725. margin: auto;
  726. }
  727. }
  728. .page-form select {
  729. color: #252525;
  730. }
  731. /**
  732. * PAGE FORM - LIGHT
  733. */
  734. .page-form-light div, .page-form-light p {
  735. text-align: center;
  736. }
  737. /**
  738. * PAGE FORM - COMPLETE
  739. */
  740. .page-form-complete {
  741. #background: #f5f5f5;
  742. }
  743. .page-form-complete div, .page-form-complete p {
  744. color: #252525;
  745. }
  746. .page-form-complete .form-label, .page-form-complete .form-input {
  747. position: relative;
  748. height: 60px;
  749. }
  750. .page-form-complete .form-label label,
  751. .page-form-complete .form-input input,
  752. .page-form-complete .form-input select.align,
  753. .page-form-complete .timezone {
  754. position: absolute;
  755. top: 50%;
  756. transform: translateY(-50%);
  757. }
  758. .page-form-complete .form-label label {
  759. text-align: right;
  760. right: 0;
  761. padding: 0 20px;
  762. }
  763. .page-form-complete .label-name {
  764. font-weight: bold;
  765. }
  766. .page-form-complete .label-desc {
  767. font-size: 0.8em;
  768. }
  769. .page-form-complete input[type="text"],
  770. .page-form-complete input[type="password"],
  771. .page-form-complete textarea {
  772. margin: 0;
  773. }
  774. .page-form section {
  775. margin: 10px 0 25px 0;
  776. }
  777. .page-form table {
  778. margin: auto;
  779. width: 90%;
  780. }
  781. .page-form table .order {
  782. text-decoration: none;
  783. color: #252525;
  784. }
  785. .page-form table, .page-form th, .page-form td {
  786. border-width: 1px 0;
  787. border-style: solid;
  788. border-color: #aaaaaa;
  789. }
  790. .page-form th, .page-form td {
  791. padding: 5px;
  792. }
  793. /* Awesomeplete fix */
  794. div.awesomplete {
  795. width: inherit;
  796. }
  797. div.awesomplete > input {
  798. display: inherit;
  799. }
  800. div.awesomplete > ul {
  801. z-index: 9999;
  802. }
  803. .page-form .awesomplete {
  804. width: 90%;
  805. }
  806. .page-form .awesomplete input {
  807. width: 100%;
  808. }
  809. .page-form div.awesomplete > ul {
  810. color: black;
  811. }
  812. form[name="linkform"].page-form {
  813. overflow: visible;
  814. }
  815. @media screen and (max-width: 64em) {
  816. .page-form-complete .form-label {
  817. height: inherit;
  818. }
  819. .page-form-complete .form-label label,
  820. .page-form-complete .form-input input,
  821. .page-form-complete .timezone {
  822. position: inherit;
  823. top: inherit;
  824. transform: translateY(0);
  825. }
  826. .page-form-complete .form-input input[type="checkbox"] {
  827. position: absolute;
  828. top: 50%;
  829. right: 50%;
  830. transform: translateY(-50%);
  831. }
  832. .page-form-complete .form-input {
  833. text-align: center;
  834. }
  835. .page-form-complete .form-label label {
  836. display: block;
  837. text-align: left;
  838. margin: 10px 0 0 0;
  839. }
  840. .timezone-continent:after {
  841. content:"\a\a";
  842. white-space: pre;
  843. }
  844. .page-form-complete .radio-buttons {
  845. text-align: left;
  846. padding: 5px 15px;
  847. }
  848. }
  849. /**
  850. * Page visitor (page form extended)
  851. */
  852. .page-visitor {
  853. color: #252525;
  854. }
  855. #page404 {
  856. color: #3f3f3f;
  857. }
  858. /**
  859. * EDIT LINK
  860. */
  861. #editlinkform .created-date {
  862. color: #767676;
  863. margin-bottom: 10px;
  864. }
  865. /**
  866. * LOGIN
  867. */
  868. #login-form .remember-me {
  869. margin: 5px 0;
  870. }
  871. /**
  872. * Search results
  873. */
  874. .search-result a {
  875. color: white;
  876. text-decoration: none;
  877. }
  878. .search-result .label-tag {
  879. border-color: white;
  880. }
  881. .search-result .label-tag .remove {
  882. border-left: white 1px solid;
  883. padding: 0 0 0 5px;
  884. margin: 0 0 0 5px;
  885. }
  886. .search-result .label-private {
  887. border: 1px solid white;
  888. }
  889. /**
  890. * TOOLS
  891. */
  892. .tools-item {
  893. margin: 10px 0;
  894. }
  895. .tools-item .pure-button:hover {
  896. background-image: none;
  897. background-color: #1b926c;
  898. color: #f5f5f5;
  899. }
  900. /**
  901. * PLUGIN ADMIN
  902. */
  903. #pluginform .mobile-row {
  904. font-size: 0.9em;
  905. }
  906. #pluginform .more {
  907. margin-top: 10px;
  908. }
  909. @media screen and (max-width: 64em) {
  910. #pluginform .main-row, #pluginform .main-row td {
  911. border-bottom-style: none;
  912. }
  913. #pluginform .mobile-row, #pluginform .mobile-row td {
  914. border-top-style: none;
  915. }
  916. }
  917. /**
  918. * IMPORT
  919. */
  920. #import-field {
  921. margin: 15px 0;
  922. }
  923. /**
  924. * TAG CLOUD
  925. */
  926. #cloudtag {
  927. padding: 10px;
  928. text-align: center;
  929. }
  930. #cloudtag, #cloudtag a {
  931. color: #252525;
  932. text-decoration: none;
  933. }
  934. #cloudtag .count {
  935. color: #7f7f7f;
  936. }
  937. /**
  938. * TAG LIST
  939. */
  940. #taglist {
  941. padding: 0 10px;
  942. }
  943. #taglist a {
  944. color: #252525;
  945. text-decoration: none;
  946. }
  947. #taglist .count {
  948. display: inline-block;
  949. width: 35px;
  950. text-align: right;
  951. color: #7f7f7f;
  952. }
  953. #taglist .rename-tag-form {
  954. display: none;
  955. }
  956. #taglist .delete-tag {
  957. color: #ac2925;
  958. display: none;
  959. }
  960. #taglist .rename-tag {
  961. color: #0b5ea6;
  962. }
  963. #taglist .validate-rename-tag {
  964. color: #1b926c;
  965. }
  966. /**
  967. * Picture wall CSS
  968. */
  969. #picwall_container {
  970. margin: 0 10px 10px 10px;
  971. color: #252525;
  972. background-color: #f5f5f5;
  973. clear: both;
  974. }
  975. .picwall_pictureframe {
  976. margin: 2px;
  977. background-color: #f5f5f5;
  978. z-index: 5;
  979. position: relative;
  980. display: table-cell;
  981. vertical-align: middle;
  982. width: 90px;
  983. height: 90px;
  984. overflow: hidden;
  985. text-align: center;
  986. float: left;
  987. }
  988. .b-lazy {
  989. -webkit-transition: opacity 500ms ease-in-out;
  990. -moz-transition: opacity 500ms ease-in-out;
  991. -o-transition: opacity 500ms ease-in-out;
  992. transition: opacity 500ms ease-in-out;
  993. opacity: 0;
  994. }
  995. .b-lazy.b-loaded {
  996. opacity: 1;
  997. }
  998. .picwall_pictureframe img {
  999. max-width: 100%;
  1000. height: auto;
  1001. color: transparent;
  1002. } /* Adapt the width of the image */
  1003. .picwall_pictureframe a {
  1004. text-decoration: none;
  1005. }
  1006. /* CSS to show title when hovering an image - no javascript required. */
  1007. .picwall_pictureframe span.info {
  1008. display: none;
  1009. font-family: Arial, sans-serif;
  1010. }
  1011. .picwall_pictureframe:hover span.info {
  1012. display: block;
  1013. position: absolute;
  1014. top: 0;
  1015. left: 0;
  1016. width: 90px;
  1017. height: 90px;
  1018. font-weight: bold;
  1019. font-size: 9pt;
  1020. color: #f5f5f5;
  1021. text-align: left;
  1022. background-color: rgba(0, 0, 0, 0.8);
  1023. }
  1024. /**
  1025. * DAILY
  1026. */
  1027. .daily-desc {
  1028. color: #7f7f7f;
  1029. font-size: 0.8em;
  1030. }
  1031. .daily-about a {
  1032. color: #343434;
  1033. text-decoration: none;
  1034. }
  1035. .daily-about a:hover {
  1036. color: #7f7f7f;
  1037. }
  1038. .daily-about h3:before, .daily-about h3:after {
  1039. display: block;
  1040. content:"";
  1041. background: linear-gradient(to right, #d5d4d4, #252525, #d5d4d4);
  1042. height: 1px;
  1043. width: 90%;
  1044. margin: 10px auto;
  1045. }
  1046. .daily-entry {
  1047. padding: 0 10px;
  1048. }
  1049. .daily-entry .daily-entry-title:after {
  1050. display: block;
  1051. content:"";
  1052. background: linear-gradient(to right, #fff, #515151, #fff);
  1053. height: 1px;
  1054. width: 70%;
  1055. margin: 5px auto;
  1056. }
  1057. .daily-entry .daily-entry-title {
  1058. margin: 10px 0 0 0;
  1059. }
  1060. .daily-entry .daily-entry-title a {
  1061. color: #000;
  1062. text-decoration: none;
  1063. }
  1064. .daily-entry .daily-entry-description {
  1065. padding: 5px 5px 0 5px;
  1066. font-size: 0.9em;
  1067. text-align: justify;
  1068. word-wrap: break-word;
  1069. }
  1070. .daily-entry .daily-entry-tags {
  1071. padding: 0 5px 5px 5px;
  1072. font-size: 0.8em;
  1073. }
  1074. .daily-entry-thumbnail {
  1075. float: left;
  1076. margin: 15px 5px 5px 15px;
  1077. }
  1078. .daily-entry-description a {
  1079. text-decoration: none;
  1080. color: #1b926c;
  1081. }
  1082. .daily-entry-description a:hover {
  1083. text-shadow: 1px 1px #ddd;
  1084. }
  1085. .daily-entry-description a:visited {
  1086. color: #20b988;
  1087. }
  1088. /*
  1089. * Fix empty bookmarklet name in Firefox
  1090. */
  1091. .pure-button {
  1092. -moz-user-select: auto;
  1093. }
  1094. .tag-sort {
  1095. margin-top: 30px;
  1096. text-align: center;
  1097. }
  1098. .tag-sort a {
  1099. display: inline-block;
  1100. margin: 0 15px;
  1101. color: white;
  1102. text-decoration: none;
  1103. font-weight: bold;
  1104. }
  1105. /**
  1106. * Markdown
  1107. */
  1108. .markdown p {
  1109. margin: 0 !important;
  1110. }
  1111. .markdown p + p {
  1112. margin: 0.5em 0 0 0 !important;
  1113. }
  1114. .markdown *:first-child {
  1115. margin-top: 0 !important;
  1116. }
  1117. .markdown *:last-child {
  1118. margin-bottom: 5px !important;
  1119. }
  1120. /**
  1121. * Pure Button
  1122. */
  1123. .pure-button-success,
  1124. .pure-button-error,
  1125. .pure-button-warning,
  1126. .pure-button-primary,
  1127. .pure-button-shaarli,
  1128. .pure-button-secondary {
  1129. color: white !important;
  1130. border-radius: 4px;
  1131. text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  1132. }
  1133. .pure-button-shaarli {
  1134. background-color: #1B926C;
  1135. }