infobox.less 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. .infobox {
  2. img {
  3. max-height: 250px;
  4. }
  5. .infobox_part {
  6. margin-bottom: 20px;
  7. word-wrap: break-word;
  8. table-layout: fixed;
  9. }
  10. .infobox_part:last-child {
  11. margin-bottom: 0;
  12. }
  13. .header_url {
  14. white-space: nowrap;
  15. overflow: hidden;
  16. text-overflow: ellipsis;
  17. display: block;
  18. }
  19. .infobox_toggle {
  20. width: 100%;
  21. text-align: center;
  22. margin-bottom: 0px;
  23. }
  24. // Shrink infobox size when toggle is off
  25. .infobox_checkbox ~ .infobox_body {
  26. max-height: 300px;
  27. overflow: hidden;
  28. }
  29. .infobox_checkbox:checked ~ .infobox_body {
  30. max-height: none;
  31. }
  32. // Show toggle button as down when infobox is shrunk
  33. .infobox_checkbox ~ .infobox_toggle .infobox_label_down {
  34. display: block;
  35. }
  36. .infobox_checkbox ~ .infobox_toggle .infobox_label_up {
  37. display: none;
  38. }
  39. // Show toggle button as up when infobox is expanded
  40. .infobox_checkbox:checked ~ .infobox_toggle .infobox_label_up {
  41. display: block;
  42. }
  43. .infobox_checkbox:checked ~ .infobox_toggle .infobox_label_down {
  44. display: none;
  45. }
  46. // Hide main image when toggle is off
  47. .infobox_checkbox ~ .infobox_body img.infobox_part {
  48. display: none;
  49. }
  50. .infobox_checkbox:checked ~ .infobox_body img.infobox_part {
  51. display: block;
  52. }
  53. }