Fix CSS selector modifications when nested in @media blocks
1 files added
2 files modified
| | |
| | | |
| | | // cut out all contents between { and } |
| | | while (($pos = strpos($source, '{', $last_pos)) && ($pos2 = strpos($source, '}', $pos))) { |
| | | $nested = strpos($source, '{', $pos+1); |
| | | if ($nested && $nested < $pos2) // when dealing with nested blocks (e.g. @media), take the inner one |
| | | $pos = $nested; |
| | | $length = $pos2 - $pos - 1; |
| | | $styles = substr($source, $pos+1, $length); |
| | | |
| | |
| | | $this->assertRegExp('/#rcmbody h1\s\{/', $mod, "Prefix tag styles (single)"); |
| | | $this->assertRegExp('/#rcmbody h1, #rcmbody h2, #rcmbody h3, #rcmbody textarea\s+\{/', $mod, "Prefix tag styles (multiple)"); |
| | | $this->assertRegExp('/#rcmbody \.noscript\s+\{/', $mod, "Prefix class styles"); |
| | | |
| | | $css = file_get_contents(TESTS_DIR . 'src/media.css'); |
| | | $mod = rcube_utils::mod_css_styles($css, 'rcmbody'); |
| | | |
| | | $this->assertContains('#rcmbody table[class=w600]', $mod, 'Replace styles nested in @media block'); |
| | | $this->assertContains('#rcmbody {width:600px', $mod, 'Replace body selector nested in @media block'); |
| | | } |
| | | |
| | | /** |
New file |
| | |
| | | .ReadMsgBody{width: 100%;} |
| | | .ExternalClass{width: 100%;} |
| | | div, p, a, li, td { -webkit-text-size-adjust:none; } |
| | | @media (max-width: 450px){ |
| | | table[class=w600], td[class=w600], table[class=w540], td[class=w540], img[class=w600]{ width:100% !important; } |
| | | table[class=w30], td[class=w30]{ width:20px !important; } |
| | | .pict img {max-width:260px; height:auto !important;} |
| | | } |
| | | @media (min-width: 450px) and (max-width: 600px){ |
| | | table[class=w600], td[class=w600], table[class=w540], td[class=w540], img[class=w600]{ width:100% !important; } |
| | | table[class=w30], td[class=w30]{ width:20px !important; } |
| | | .pict img {max-width:410px; height:auto !important;} |
| | | } |
| | | @media (min-width:600px){ |
| | | body {width:600px !important; margin:auto !important;} |
| | | .pict img {max-width:540px !important; height:auto !important;} |
| | | } |
| | | h1{ font-weight:bold; font-size:14px;color:#3c3c3c ;margin:0px; } |
| | | h2{ color:#8DB048 ; font-size:14px; font-weight:bold; margin-top:20px; border-bottom:1px solid #d6d6d6; padding-bottom:4px; } |
| | | h3{ color:#7e7e7e ; font-size:14px; font-weight:bold; margin:20px 0px 0px 0px; border-bottom:1px solid #d6d6d6; padding-bottom:0px 0px 4px 0px; } |
| | | h4{ color:#8DB048 ; font-size:12px; font-weight:bold; margin:0px; padding:0px; } |
| | | a:visited{cursor:pointer; color:#8DB048; text-decoration:none; border:none;} |