This is a part of an online Codename One course published around 2017 see it all for free at https://debugagent.com/series/cn1

1. Extracting ui Design - part III

2. CSS
© Codename One 2017 all rights reserved

3. #Constants {
includeNativeBool: false;
rendererShowsNumbersBool: false;
}
Container {
background-color: transparent;
padding: 0px;
margin: 0px;
}
Label {
background-color: transparent;
color: black;
font-family: "native:MainThin";
font-size: 3mm;
}
List {
background-color: transparent;
margin: 0px;
}
CSS

4. Form {
background-color: #ebeaec;
}
Title {
border: none;
color: white;
background-color: transparent;
text-align: center;
}
TitleCommand {
color: white;
}
MenuButton {
color: white;
}
OrderBarBackgroundOpaque {
margin: 0px;
padding: 0px;
background-color: #ebeaec;
}
CSS

5. Form {
background-color: #ebeaec;
}
Title {
border: none;
color: white;
background-color: transparent;
text-align: center;
}
TitleCommand {
color: white;
}
MenuButton {
color: white;
}
OrderBarBackgroundOpaque {
margin: 0px;
padding: 0px;
background-color: #ebeaec;
}
CSS

6. Form {
background-color: #ebeaec;
}
Title {
border: none;
color: white;
background-color: transparent;
text-align: center;
}
TitleCommand {
color: white;
}
MenuButton {
color: white;
}
OrderBarBackgroundOpaque {
margin: 0px;
padding: 0px;
background-color: #ebeaec;
}
CSS

7. Form {
background-color: #ebeaec;
}
Title {
border: none;
color: white;
background-color: transparent;
text-align: center;
}
TitleCommand {
color: white;
}
MenuButton {
color: white;
}
OrderBarBackgroundOpaque {
margin: 0px;
padding: 0px;
background-color: #ebeaec;
}
CSS

8. TopBar {
margin: 0px;
padding: 0px;
background-image: url(images/title-image.jpg);
cn1-background-type: cn1-image-scaled-fill;
}
YourOrder {
border: cn1-pill-border;
background-color: white;
color: #31aaff;
padding-left: 3mm;
padding-right: 4mm;
padding-top: 2mm;
padding-bottom: 3mm;
margin: 0px 1mm 1mm 1mm;
box-shadow: 0 0 0 1mm rgba(0,0,0,0.2);
}
CSS

9. TopBar {
margin: 0px;
padding: 0px;
background-image: url(images/title-image.jpg);
cn1-background-type: cn1-image-scaled-fill;
}
YourOrder {
border: cn1-pill-border;
background-color: white;
color: #31aaff;
padding-left: 3mm;
padding-right: 4mm;
padding-top: 2mm;
padding-bottom: 3mm;
margin: 0px 1mm 1mm 1mm;
box-shadow: 0 0 0 1mm rgba(0,0,0,0.2);
}
CSS

10. ShoppingCart {
border: cn1-round-border;
box-shadow: 0 0 0 1mm rgba(0,0,0,0.3);
background-color: #31aaff;
color: white;
padding: 2mm 2mm 3mm 1mm;
margin: 0px 3mm 0mm 1mm;
}
ListRenderer {
background-color: transparent;
color: #aaaaaa;
font-family: "native:MainThin";
font-size: 3mm;
text-align: center;
border: none;
}
CSS

11. ShoppingCart {
border: cn1-round-border;
box-shadow: 0 0 0 1mm rgba(0,0,0,0.3);
background-color: #31aaff;
color: white;
padding: 2mm 2mm 3mm 1mm;
margin: 0px 3mm 0mm 1mm;
}
ListRenderer {
background-color: transparent;
color: #aaaaaa;
font-family: "native:MainThin";
font-size: 3mm;
text-align: center;
border: none;
}
CSS

12. ListRenderer.selected {
color: white;
background-color: transparent;
}
ListRendererFocus {
background-color: transparent;
}
DishListTitle {
background-color: transparent;
color: black;
font-family: "native:MainLight";
font-size: 3mm;
}
DishListBody {
background-color: transparent;
color: #989898;
font-family: "native:MainThin";
font-size: 3mm;
}
CSS

13. ListRenderer.selected {
color: white;
background-color: transparent;
}
ListRendererFocus {
background-color: transparent;
}
DishListTitle {
background-color: transparent;
color: black;
font-family: "native:MainLight";
font-size: 3mm;
}
DishListBody {
background-color: transparent;
color: #989898;
font-family: "native:MainThin";
font-size: 3mm;
}
CSS

14. ListRenderer.selected {
color: white;
background-color: transparent;
}
ListRendererFocus {
background-color: transparent;
}
DishListTitle {
background-color: transparent;
color: black;
font-family: "native:MainLight";
font-size: 3mm;
}
DishListBody {
background-color: transparent;
color: #989898;
font-family: "native:MainThin";
font-size: 3mm;
}
CSS

15. AddToOrderButton {
padding-top: 1mm;
padding-bottom: 1mm;
padding-left: 2mm;
padding-right: 2mm;
margin: 0px;
text-align: center;
color: white;
}
MoreInfoButton {
padding-top: 1mm;
padding-bottom: 1mm;
padding-left: 2mm;
padding-right: 2mm;
margin: 0px;
text-align: center;
color: #31aaff;
}
WhiteSeparatorLine {
background-color: white;
padding: 1px 3mm 1px 3mm;
margin: 0px;
}
CSS

16. AddToOrderButton {
padding-top: 1mm;
padding-bottom: 1mm;
padding-left: 2mm;
padding-right: 2mm;
margin: 0px;
text-align: center;
color: white;
}
MoreInfoButton {
padding-top: 1mm;
padding-bottom: 1mm;
padding-left: 2mm;
padding-right: 2mm;
margin: 0px;
text-align: center;
color: #31aaff;
}
WhiteSeparatorLine {
background-color: white;
padding: 1px 3mm 1px 3mm;
margin: 0px;
}
CSS

17. DishCheckoutTitle {
background-color: transparent;
color: black;
font-family: "native:MainThin";
font-size: 3mm;
}
CheckoutPrice {
background-color: transparent;
color: #31aaff;
font-family: "native:MainThin";
font-size: 2.5mm;
}
PriceTotal {
background-color: transparent;
color: #31aaff;
font-family: "native:MainThin";
font-size: 3.5mm;
padding: 2mm 1mm 1mm 1mm;
text-align: right;
}
CSS

18. CheckoutButton {
cn1-derive: AddToOrderButton;
font-family: "native:MainRegular";
font-size: 4mm;
padding: 2mm;
margin: 2mm 2mm 2mm 2mm;
text-align: center;
color: white;
}
PaymentDialogTop {
margin: 2mm 2mm 0px 2mm;
padding: 3.5mm 3.5mm 1.5mm 3.5mm;
}
PaymentDialogBottom {
margin: 0mm 2mm 0px 2mm;
padding: 3.5mm;
}
CSS

19. CheckoutButton {
cn1-derive: AddToOrderButton;
font-family: "native:MainRegular";
font-size: 4mm;
padding: 2mm;
margin: 2mm 2mm 2mm 2mm;
text-align: center;
color: white;
}
PaymentDialogTop {
margin: 2mm 2mm 0px 2mm;
padding: 3.5mm 3.5mm 1.5mm 3.5mm;
}
PaymentDialogBottom {
margin: 0mm 2mm 0px 2mm;
padding: 3.5mm;
}
CSS