- The button-styling has been adjusted, to make it easier to visually distinguish the view-changing buttons that switch to views with buttons for entering hiragana, katakana, symbols, and Latin letters. - Easier switching between hiragana and katakana, and between symbols and punctuation. - Added more placeholders to prevent layout-shifting. - The base-shape is now sized properly on a 6" large display with a resolution of 720x1440 (PinePhone), without empty space next to it. - The wide shape is now wider. - The symbols- and punctuation-views switch back to the katakana-view when opened from it and "unlocking" the view by tapping multiple times on the view-changing button, instead of showing the hiragana-view. Part-of: <https://gitlab.gnome.org/World/Phosh/squeekboard/-/merge_requests/644>
		
			
				
	
	
		
			101 lines
		
	
	
		
			2.3 KiB
		
	
	
	
		
			CSS
		
	
	
	
	
	
			
		
		
	
	
			101 lines
		
	
	
		
			2.3 KiB
		
	
	
	
		
			CSS
		
	
	
	
	
	
/* Keyboard style */
 | 
						|
sq_view {
 | 
						|
    background-color: mix(@theme_base_color, @theme_fg_color, 0.1);
 | 
						|
    box-shadow:inset 0 1px 0 0 mix(@borders, @theme_base_color, 0.8);
 | 
						|
}
 | 
						|
 | 
						|
sq_button {
 | 
						|
    color: @theme_fg_color;
 | 
						|
    background: alpha(@theme_fg_color, 0.07); 
 | 
						|
    box-shadow: 0 1px 0 0 rgba(0,0,0,0.2); 
 | 
						|
}
 | 
						|
 | 
						|
sq_button:active {
 | 
						|
    background: alpha(@theme_fg_color, 0.11);
 | 
						|
}
 | 
						|
 | 
						|
sq_button.subtle-highlight {
 | 
						|
    background: alpha(@theme_fg_color, 0.105);
 | 
						|
}
 | 
						|
 | 
						|
sq_button.subtle-highlight:active {
 | 
						|
    background: alpha(@theme_fg_color, 0.16);
 | 
						|
}
 | 
						|
 | 
						|
sq_button.emoji-group,
 | 
						|
sq_button.character-group {
 | 
						|
    background: alpha(@theme_fg_color, 0.105);
 | 
						|
    border-bottom: 0.4999px;
 | 
						|
    border-style: solid;
 | 
						|
    border-color: alpha(@theme_fg_color, 0.25);
 | 
						|
}
 | 
						|
 | 
						|
sq_button.emoji-group:active,
 | 
						|
sq_button.character-group:active {
 | 
						|
    background: alpha(@theme_fg_color, 0.16);
 | 
						|
    border-bottom: 0.4999px;
 | 
						|
    border-style: solid;
 | 
						|
    border-color: alpha(@theme_fg_color, 0.275);
 | 
						|
}
 | 
						|
 | 
						|
sq_button.change-view,
 | 
						|
sq_button.change-view-2 {
 | 
						|
    background: alpha(@theme_fg_color, 0.15);
 | 
						|
    border-bottom: 0.4999px;
 | 
						|
    border-style: solid;
 | 
						|
    border-color: alpha(@theme_fg_color, 0.25);
 | 
						|
}
 | 
						|
 | 
						|
sq_button.change-view:active,
 | 
						|
sq_button.change-view-2:active {
 | 
						|
    background: alpha(@theme_fg_color, 0.2);
 | 
						|
    border-bottom: 0.4999px;
 | 
						|
    border-style: solid;
 | 
						|
    border-color: alpha(@theme_fg_color, 0.275);
 | 
						|
}
 | 
						|
 | 
						|
sq_button.placeholder,
 | 
						|
sq_button.placeholder-2 {
 | 
						|
    background: alpha(@theme_fg_color, 0.035);
 | 
						|
}
 | 
						|
 | 
						|
sq_button.placeholder:active,
 | 
						|
sq_button.placeholder-2:active {
 | 
						|
    background: initial;
 | 
						|
    box-shadow: initial;
 | 
						|
}
 | 
						|
 | 
						|
sq_button.altline,
 | 
						|
sq_button.special,
 | 
						|
sq_button.wide {
 | 
						|
    background: alpha(@theme_fg_color, 0.15); 
 | 
						|
}
 | 
						|
 | 
						|
sq_button.altline:active,
 | 
						|
sq_button.special:active,
 | 
						|
sq_button.wide:active {
 | 
						|
    background: alpha(@theme_fg_color, 0.2);
 | 
						|
}
 | 
						|
 | 
						|
sq_button.latched {
 | 
						|
    background: alpha(@theme_fg_color, 0.2); 
 | 
						|
    color: alpha(@theme_fg_color, 0.8);
 | 
						|
}
 | 
						|
 | 
						|
sq_button.locked {
 | 
						|
    background: alpha(@theme_fg_color, 0.5);
 | 
						|
    color: @theme_base_color;
 | 
						|
}
 | 
						|
 | 
						|
#Return {
 | 
						|
    background: @theme_selected_bg_color;
 | 
						|
    color: @theme_selected_fg_color;
 | 
						|
}
 | 
						|
 | 
						|
#Return:active {
 | 
						|
    background: mix(@theme_selected_bg_color, black, 0.2);
 | 
						|
    color: mix(@theme_selected_fg_color, black, 0.2);
 | 
						|
}
 | 
						|
 | 
						|
@import url("resource:///sm/puri/squeekboard/common.css");
 |