s3rius/squeekboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

data: Update stylesheet with upstream design

Browse Source 
- adjust main font size
- adjust margins and border radii
- drop borders from keys
- put more items in common.css
- update dark and light style definitions
- use mixing of fg color wherever possible
This commit is contained in:
Sam Hewitt
2022-01-24 17:38:53 +00:00
parent b6ce4151bd
commit 8ec79428a9
3 changed files with 54 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
data/common.css
View File

@ -1,6 +1,33 @@
/* Theme independent style */ /* Theme independent styles */
sq_view {
font-family: cantarell, sans-serif;
font-size: 1.5em;
}
sq_button {
border-radius: 4px;
margin: 2px;
}
sq_view.wide sq_button {
margin: 3px;
}
sq_button.latched,
sq_button.locked {
font-weight: bold;
}
sq_button.action {
font-size: 0.75em;
}
sq_button.small {
font-size: 0.5em;
}
sq_view.pin sq_button { sq_view.pin sq_button {
border-radius: 0px; border-radius: 0px;
margin: 1px 1px 1px 1px; margin: 1px 1px 1px 1px;
} }

24
data/style-Adwaita:dark.css
View File

@ -1,34 +1,22 @@
/* Adwaita-dark style keyboard */
sq_view { sq_view {
background-color: rgba(0, 0, 0, 255); background-color: rgba(0, 0, 0, 255);
color: #ffffff; color: #ffffff;
font-family: cantarell, sans-serif;
font-size: 25px;
} }
sq_view sq_button { sq_view sq_button {
color: #deddda; color: #deddda;
background: #464448; background: #464448;
border-style: solid;
border-width: 1px;
border-color: #5e5c64;
border-radius: 3px;
margin: 4px 2px 4px 2px;
}
sq_view.wide sq_button {
margin: 1px 1px 1px 1px;
} }
sq_button:active { sq_button:active {
background: #747077; background: #747077;
border-color: #96949d;
} }
sq_button.altline, sq_button.altline,
sq_button.special, sq_button.special,
sq_button.wide { sq_button.wide {
background: #2b292f; background: #2b292f;
border-color: #3e3a44;
} }
sq_button.latched { sq_button.latched {
@ -41,22 +29,12 @@ sq_button.locked {
color: #1c71d8; color: #1c71d8;
} }
sq_button.action {
font-size: 0.75em;
}
sq_button.small {
font-size: 0.5em;
}
#Return { #Return {
background: #1c71d8; background: #1c71d8;
border-color: #1a5fb4;
} }
#Return:active { #Return:active {
background: #1c71d8; background: #1c71d8;
border-color: #3584e4;
} }
@import url("resource:///sm/puri/squeekboard/common.css"); @import url("resource:///sm/puri/squeekboard/common.css");

66
data/style.css
View File

@ -1,65 +1,47 @@
/* Keyboard style */
sq_view { sq_view {
background-color: @theme_base_color; /*rgba(0, 0, 0, 255);*/ background-color: mix(@theme_base_color, @theme_fg_color, 0.1);
color: @theme_text_color; /*#ffffff;*/ box-shadow:inset 0 1px 0 0 mix(@borders, @theme_base_color, 0.8);
font-family: cantarell, sans-serif;
font-size: 25px;
} }
sq_view sq_button { sq_button {
color: @theme_fg_color; /*#deddda;*/ color: @theme_fg_color;
background: mix(@theme_bg_color, @theme_base_color, -0.5); /* #464448; */ background: alpha(@theme_fg_color, 0.07);
border-style: solid; box-shadow: 0 1px 0 0 rgba(0,0,0,0.2);
border-width: 1px;
border-color: @borders; /* #5e5c64;*/
border-radius: 3px;
margin: 4px 2px 4px 2px;
} }
sq_view.wide sq_button { sq_button:active {
margin: 1px 1px 1px 1px; background: alpha(@theme_fg_color, 0.11);
}
sq_button:active,
sq_button.altline:active,
sq_button.special:active,
sq_button.wide:active {
background: mix(@theme_bg_color, @theme_selected_bg_color, 0.4);/* #747077; */
border-color: mix(@borders, @theme_selected_fg_color, 0.5);/* #96949d; */
} }
sq_button.altline, sq_button.altline,
sq_button.special, sq_button.special {
sq_button.wide { background: alpha(@theme_fg_color, 0.15);
background: mix(@theme_bg_color, @theme_base_color, 0.5); /*#2b292f;*/ }
border-color: @borders; /* #3e3a44; */
sq_button.altline:active,
sq_button.special:active {
background: alpha(@theme_fg_color, 0.2);
} }
sq_button.latched { sq_button.latched {
background: @theme_fg_color; /*#ffffff;*/ background: alpha(@theme_fg_color, 0.2);
color: @theme_bg_color; /*#2b292f;*/ color: alpha(@theme_fg_color, 0.8);
} }
sq_button.locked { sq_button.locked {
background: @theme_fg_color; /*#ffffff;*/ background: alpha(@theme_fg_color, 0.5);
color: mix(@theme_selected_bg_color, @theme_bg_color, 0.4); /*#2b292f;*/ color: @theme_base_color;
}
sq_button.action {
font-size: 0.75em;
}
sq_button.small {
font-size: 0.5em;
} }
#Return { #Return {
background: @theme_selected_bg_color; /* #1c71d8; */ background: @theme_selected_bg_color;
border-color: @borders; /*#1a5fb4;*/ color: @theme_selected_fg_color;
} }
#Return:active { #Return:active {
background: mix(@theme_selected_bg_color, @theme_bg_color, 0.4); /*#1c71d8;*/ background: mix(@theme_selected_bg_color, black, 0.2);
border-color: @borders; /*#3584e4;*/ color: mix(@theme_selected_fg_color, black, 0.2);
} }
@import url("resource:///sm/puri/squeekboard/common.css"); @import url("resource:///sm/puri/squeekboard/common.css");