Files
squeekboard/data/style.css
MoonlightWave-12 bdb16a3890 Improve Japanese layout
- 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>
2024-04-18 11:23:25 +02:00

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");