Advertisement
Webotvurci

curapil.cz - CSS

May 24th, 2024
575
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 2.70 KB | None | 0 0
  1. /* Základní styly pro tabulku */
  2. .c-product-interconnection-custom--image-select-list-dropdown {
  3.   width: 100%;
  4.   border-collapse: collapse;
  5.   margin-top: 20px;
  6. }
  7. /* Styly pro záhlaví tabulky */
  8. .c-product-interconnection-custom--image-select-list-dropdown th {
  9.   background-color: #f2f2f2;
  10.   color: #333;
  11.   font-weight: bold;
  12.   padding: 10px;
  13.   text-align: left;
  14.   border-bottom: 1px solid #ddd;
  15. }
  16. /* Styly pro buňky tabulky */
  17. .c-product-interconnection-custom--image-select-list-dropdown td {
  18.   padding: 10px;
  19.   border-bottom: 1px solid #ddd;
  20. }
  21. /* Zvýraznění řádků při najetí myší */
  22. .c-product-interconnection-custom--image-select-list-dropdown tr:hover {
  23.   background-color: #f5f5f5;
  24. }
  25. /* Responzivní styly pro mobilní zařízení */
  26. @media (max-width: 768px) {
  27.   .c-product-interconnection-custom--image-select-list-dropdown thead {
  28.     display: none;
  29.   }
  30.   .c-product-interconnection-custom--image-select-list-dropdown tbody, .c-product-interconnection-custom--image-select-list-dropdown tr {
  31.     display: block;
  32.     width: 100%;
  33.   }
  34.   .c-product-interconnection-custom--image-select-list-dropdown td {
  35.     display: block;
  36.     text-align: right;
  37.     padding-left: 50%;
  38.     position: relative;
  39.     border-bottom: 0; /* odstraníme defaultní border */
  40.     box-sizing: border-box;
  41.   }
  42.   /* Oddělíme řádky pomocí marginu a borderu */
  43.   .c-product-interconnection-custom--image-select-list-dropdown tr {
  44.     margin-bottom: 10px; /* přidáme prostor mezi řádky */
  45.     border: 1px solid #e6e6e6; /* lehký border pro oddělení */
  46.     border-radius: 5px; /* zaoblení rohů */
  47.     background: #fff; /* bílé pozadí pro lepší oddělení */
  48.   }
  49.   /* Label pro mobilní zobrazení */
  50.   .c-product-interconnection-custom--image-select-list-dropdown td::before {
  51.     content: attr(data-label);
  52.     position: absolute;
  53.     left: 10px;
  54.     padding-right: 10px;
  55.     text-align: left;
  56.     font-weight: bold;
  57.     text-transform: uppercase;
  58.     display: inline-block;
  59.     width: 45%;
  60.   }
  61.   /* Upravit styl pro odkazy */
  62.   .c-product-interconnection-custom--image-select-list-dropdown a {
  63.     display: inline-block;
  64.     margin: 5px 0;
  65.     width: calc(100% - 20px);
  66.     text-align: center;
  67.   }
  68. }
  69. /* Styly pro tlačítka a odkazy */
  70. .c-product-interconnection-custom--image-select-list-dropdown a {
  71.   color: #007bff;
  72.   text-decoration: none;
  73.   padding: 5px 10px;
  74.   border: 1px solid #007bff;
  75.   border-radius: 5px;
  76.   transition: all 0.3s ease;
  77. }
  78. .c-product-interconnection-custom--image-select-list-dropdown a:hover {
  79.   background-color: #007bff;
  80.   color: white;
  81. }
  82. table.c-product-interconnection-custom--image-select-list-dropdown > tr:last-child {
  83.   font-weight: 700;
  84. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement