소스 검색

Update CSS rules of the fullscreen button

customisations
alemart 10 달 전
부모
커밋
f7853020ed
1개의 변경된 파일7개의 추가작업 그리고 12개의 파일을 삭제
  1. 7
    12
      src/ui/fullscreen-button.ts

+ 7
- 12
src/ui/fullscreen-button.ts 파일 보기

@@ -87,7 +87,6 @@ export class FullscreenButton
87 87
     private _createButton(): HTMLButtonElement
88 88
     {
89 89
         const button = document.createElement('button');
90
-        const icon = document.createElement('img');
91 90
 
92 91
         button.style.position = 'absolute';
93 92
         button.style.bottom = BUTTON_MARGIN + 'px';
@@ -99,24 +98,20 @@ export class FullscreenButton
99 98
         button.style.alignItems = 'center';
100 99
         button.style.padding = '2px';
101 100
         button.style.opacity = '0.5';
102
-        button.style.outline = 'none';
103 101
         button.style.cursor = 'pointer';
102
+        button.style.outline = 'none';
103
+        (button.style as any)['-webkit-tap-highlight-color'] = 'transparent';
104 104
         button.draggable = false;
105 105
 
106 106
         button.style.backgroundColor = 'transparent';
107
+        button.style.backgroundImage = 'url(' + BUTTON_ICON_OFF + ')';
108
+        button.style.backgroundSize = 'cover';
109
+        button.style.imageRendering = 'pixelated';
107 110
         button.style.borderColor = 'white';
108 111
         button.style.borderStyle = 'solid';
109 112
         button.style.borderWidth = '2px';
110 113
         button.style.borderRadius = '8px';
111 114
 
112
-        icon.src = BUTTON_ICON_OFF;
113
-        icon.draggable = false;
114
-        icon.style.display = 'inline-block';
115
-        icon.style.width = '100%';
116
-        icon.style.height = '100%';
117
-        icon.style.imageRendering = 'pixelated';
118
-        button.appendChild(icon);
119
-
120 115
         const highlight = () => {
121 116
             button.style.backgroundColor = '#ffd500';
122 117
             button.style.borderColor = '#ffd500';
@@ -152,7 +147,7 @@ export class FullscreenButton
152 147
      */
153 148
     private _handleFullscreenEvent(event: Event): void
154 149
     {
155
-        const icon = this._button.querySelector('img') as HTMLImageElement;
156
-        icon.src = this._viewport.fullscreen ? BUTTON_ICON_ON : BUTTON_ICON_OFF;
150
+        const img = this._viewport.fullscreen ? BUTTON_ICON_ON : BUTTON_ICON_OFF;
151
+        this._button.style.backgroundImage = 'url(' + img + ')';
157 152
     }
158 153
 }

Loading…
취소
저장