Fixed code box anchors

diff --git a/com.woltlab.wcf/templates/codeMetaCode.tpl b/com.woltlab.wcf/templates/codeMetaCode.tpl
index 659cb0d27fcf66fe4c8a81b2c8b32740fe5be8e5..8310015ef7b1c8cc2b16519ed002cbd2846651db 100644 (file)
--- a/com.woltlab.wcf/templates/codeMetaCode.tpl
+++ b/com.woltlab.wcf/templates/codeMetaCode.tpl
@@ -8,7 +8,7 @@
                        {assign var='lineNumber' value=$startLineNumber}
                        {foreach from=$content item=line}
                                {if $lineNumbers[$lineNumber]|isset}
-                                       <li id="{@$lineNumbers[$lineNumber]}"><a href="{@$__wcf->getAnchor($lineNumbers[$lineNumber])}" class="lineAnchor"></a>{@$line}</li>
+                                       <li><span id="{@$lineNumbers[$lineNumber]}" class="codeBoxJumpAnchor"></span><a href="{@$__wcf->getAnchor($lineNumbers[$lineNumber])}" class="lineAnchor"></a>{@$line}</li>
                                {else}
                                        <li>{@$line}</li>
                                {/if}

diff --git a/wcfsetup/install/files/style/bbcode/code.scss b/wcfsetup/install/files/style/bbcode/code.scss
index 1ffb1ceff5210bd43f425af7e3977dce10d84908..294117660ba8c30e799cb8e1e7ccde7c9073953c 100644 (file)
--- a/wcfsetup/install/files/style/bbcode/code.scss
+++ b/wcfsetup/install/files/style/bbcode/code.scss
@@ -83,6 +83,7 @@
                                white-space: pre-wrap;
                                word-break: break-all;
                                word-wrap: break-word;
+                               z-index: 1;
                                
                                .lineAnchor {
                                        bottom: 0;
@@ -91,10 +92,42 @@
                                        top: 0;
                                        width: 3.4em;
                                }
-                               
-                               &:target {
-                                       background-color: rgba(255, 255, 102, 1);
-                               }
+                       }
+               }
+       }
+       
+       .codeBoxJumpAnchor:target {
+               height: 100%;
+               pointer-events: none;
+               position: absolute;
+               width: 100%;
+               z-index: -1;
+               
+               &::after {
+                       background-color: rgba(255, 255, 102, 1);
+                       bottom: 0;
+                       content: "";
+                       display: block;
+                       height: 100%;
+                       left: 0;
+                       position: absolute;
+                       right: 0;
+                       top: 0;
+               }
+               
+               @include screen-md-down {
+                       top: -52px;
+                       
+                       &::after {
+                               top: 52px;
+                       }
+               }
+               
+               @include screen-lg {
+                       top: -50px;
+                       
+                       &::after {
+                               top: 50px;
                        }
                }
        }