1div.dokuwiki { 2 div.codeblockedit-wrapper { 3 position: relative; 4 margin: 0; 5 padding: 0; 6 border: none; 7 overflow: auto; /* Same as copy2clipboard - contains the pre element properly */ 8 } 9 10 /* Style for edit button - works both standalone and inside cp2clipcont */ 11 button.codeblockedit-btn { 12 position: absolute; 13 top: 0; /* Upper left corner */ 14 left: 0; 15 /* Pencil icon - using inherit for theme compatibility */ 16 background-color: inherit; 17 background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23888888'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E"); 18 background-repeat: no-repeat; 19 background-position: center; 20 background-size: 21px; /* <<< ICON SIZE: Change this value to make icon bigger/smaller */ 21 width: 22px; /* <<< BUTTON WIDTH: Adjust along with icon size */ 22 height: 22px; /* <<< BUTTON HEIGHT: Adjust along with icon size */ 23 border: none; 24 cursor: pointer; 25 opacity: 0.7; 26 transition: opacity 0.2s; 27 z-index: 10; 28 } 29 30 31 button.codeblockedit-btn:hover { 32 opacity: 1; 33 } 34 35 .desktop button.codeblockedit-btn { 36 visibility: hidden; 37 } 38 39 .desktop:hover button.codeblockedit-btn { 40 visibility: visible; 41 } 42} 43 44