Browse Source

Change the CSS of the fullscreen button

customisations
alemart 10 months ago
parent
commit
4014102f11
1 changed files with 16 additions and 10 deletions
  1. 16
    10
      src/ui/fullscreen-button.ts

+ 16
- 10
src/ui/fullscreen-button.ts View File

89
         const button = document.createElement('button');
89
         const button = document.createElement('button');
90
         const icon = document.createElement('img');
90
         const icon = document.createElement('img');
91
 
91
 
92
-        button.style.display = 'inline-block';
93
         button.style.position = 'absolute';
92
         button.style.position = 'absolute';
94
         button.style.bottom = BUTTON_MARGIN + 'px';
93
         button.style.bottom = BUTTON_MARGIN + 'px';
95
         button.style.right = BUTTON_MARGIN + 'px';
94
         button.style.right = BUTTON_MARGIN + 'px';
96
         button.style.width = BUTTON_SIZE + 'px';
95
         button.style.width = BUTTON_SIZE + 'px';
97
         button.style.height = BUTTON_SIZE + 'px';
96
         button.style.height = BUTTON_SIZE + 'px';
97
+
98
+        button.style.display = 'flex';
99
+        button.style.alignItems = 'center';
98
         button.style.padding = '2px';
100
         button.style.padding = '2px';
101
+        button.style.opacity = '0.5';
102
+        button.style.outline = 'none';
103
+        button.style.cursor = 'pointer';
104
+        button.draggable = false;
99
 
105
 
100
-        button.style.backgroundColor = '#7c5ec2';
101
-        button.style.borderColor = '#5c3ba3';
106
+        button.style.backgroundColor = 'transparent';
107
+        button.style.borderColor = 'white';
102
         button.style.borderStyle = 'solid';
108
         button.style.borderStyle = 'solid';
103
         button.style.borderWidth = '2px';
109
         button.style.borderWidth = '2px';
104
         button.style.borderRadius = '8px';
110
         button.style.borderRadius = '8px';
105
-        button.style.cursor = 'pointer';
106
-        button.draggable = false;
107
 
111
 
108
         icon.src = BUTTON_ICON_OFF;
112
         icon.src = BUTTON_ICON_OFF;
109
         icon.draggable = false;
113
         icon.draggable = false;
110
-        icon.style.display = 'inline';
114
+        icon.style.display = 'inline-block';
111
         icon.style.width = '100%';
115
         icon.style.width = '100%';
112
         icon.style.height = '100%';
116
         icon.style.height = '100%';
113
         icon.style.imageRendering = 'pixelated';
117
         icon.style.imageRendering = 'pixelated';
115
 
119
 
116
         const highlight = () => {
120
         const highlight = () => {
117
             button.style.backgroundColor = '#ffd500';
121
             button.style.backgroundColor = '#ffd500';
118
-            button.style.borderColor = '#bb9100';
122
+            button.style.borderColor = '#ffd500';
123
+            button.style.opacity = '1.0';
119
         };
124
         };
120
 
125
 
121
         const dehighlight = () => {
126
         const dehighlight = () => {
122
-            button.style.backgroundColor = '#7e56c2';
123
-            button.style.borderColor = '#5c3ba3';
127
+            button.style.backgroundColor = 'transparent';
128
+            button.style.borderColor = 'white';
129
+            button.style.opacity = '0.5';
124
         };
130
         };
125
 
131
 
126
         button.addEventListener('pointerdown', highlight);
132
         button.addEventListener('pointerdown', highlight);
127
         button.addEventListener('pointerup', dehighlight);
133
         button.addEventListener('pointerup', dehighlight);
128
-        button.addEventListener('pointermove', dehighlight);
134
+        button.addEventListener('pointerleave', dehighlight);
129
 
135
 
130
         button.addEventListener('click', () => {
136
         button.addEventListener('click', () => {
131
             if(!this._viewport.fullscreen) {
137
             if(!this._viewport.fullscreen) {

Loading…
Cancel
Save