camera centered by translations; fixes

app/app.view.css.ts

@@ -45,6 +45,12 @@ namespace $.$$ {
 			},
 		},
 
+		Data_text: {
+			font: {
+				family: 'inherit',
+			},
+		},
+
 		Body: {
 			flex: { 
 				direction: 'column',

app/app.view.tree → app/app.web.view.tree

@@ -29,6 +29,8 @@ $optimade_cifplayer_app $mol_drop
 			data <= data_str? \
 			vibrate? => vibrate?
 			unvibrate => unvibrate
+			fullscreen false
+			light_theme_auto null
 	Start $mol_view
 		sub /
 			<= Start_message $mol_text

lib/three/view/view.view.tree

@@ -12,3 +12,5 @@ $optimade_cifplayer_lib_three_view $mol_view
 		<= controls_target_changed null
 		<= resize null
 		<= start_render_loop null
+	event *
+		pointerdown? <=> pointerdown? null

lib/three/view/view.view.web.ts

@@ -129,6 +129,10 @@ namespace $.$$ {
 			this.renderer()?.dispose()
 		}
 
+		pointerdown() {
+			this.focused( true )
+		}
+
 	}
 
 

player/player.view.tree → player/player.web.view.tree

@@ -20,7 +20,7 @@ $optimade_cifplayer_player $mol_view
 		<= Theme $mol_theme_auto
 	-
 	auto /
-		<= external_theme_auto null
+		<= light_theme_auto null
 		<= dir_light null
 		<= ambient_light null
 		^ atom_boxes /

player/player.view.web.ts → player/player.web.view.ts

@@ -11,7 +11,7 @@ namespace $.$$ {
 	export class $optimade_cifplayer_player extends $.$optimade_cifplayer_player {
 
 		@ $mol_mem
-		external_theme_auto() {
+		light_theme_auto() {
 			this.$.$mol_lights( true )
 		}
 
@@ -157,18 +157,20 @@ namespace $.$$ {
 
 		@ $mol_mem
 		controls_target() {
-			const cell_center = this.cell_center()
+			let cell_center = this.cell_center()
 
 			if( !cell_center ) {
 				const atoms = this.structure_3d_data().atoms
 
-				return atoms.reduce(( acc: InstanceType< THREE["Vector3"] >, atom ) => {
+				cell_center = atoms.reduce(( acc: InstanceType< THREE["Vector3"] >, atom ) => {
 					const { x, y, z } = atom
 					return acc.add( new THREE.Vector3( x, y, z ) )
 				}, new THREE.Vector3() ).divideScalar( atoms.length )
 			}
 
-			return this.centered() ? cell_center.clone() : new THREE.Vector3()
+			const [ a, b, c ] = this.translate_cells()
+
+			return this.centered() ? cell_center.clone().multiply( new THREE.Vector3( a, b, c ) ) : new THREE.Vector3()
 		}
 
 		@ $mol_mem