mirror of
https://github.com/Textualize/textual.git
synced 2025-10-17 02:38:12 +03:00
b19144abfe
Because Textual uses on_ for event handlers there was the danger of a name clash; so to keep things as clear as possible this renames anything to do with "on" (method names, properties, style classes) so that it talks about "filled" instead. See https://github.com/Textualize/textual/pull/963#discussion_r1000544563
85 lines
1.2 KiB
CSS
85 lines
1.2 KiB
CSS
Game {
|
|
align: center middle;
|
|
layers: gameplay messages;
|
|
}
|
|
|
|
GameGrid {
|
|
layout: grid;
|
|
grid-size: 5 5;
|
|
layer: gameplay;
|
|
}
|
|
|
|
GameHeader {
|
|
background: $primary-background;
|
|
color: $text;
|
|
height: 1;
|
|
dock: top;
|
|
layer: gameplay;
|
|
}
|
|
|
|
GameHeader #app-title {
|
|
width: 60%;
|
|
}
|
|
|
|
GameHeader #moves {
|
|
width: 20%;
|
|
}
|
|
|
|
GameHeader #progress {
|
|
width: 20%;
|
|
}
|
|
|
|
Footer {
|
|
height: 1;
|
|
dock: bottom;
|
|
layer: gameplay;
|
|
}
|
|
|
|
GameCell {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: $surface;
|
|
border: round $surface-darken-1;
|
|
}
|
|
|
|
GameCell:hover {
|
|
background: $panel-lighten-1;
|
|
border: round $panel;
|
|
}
|
|
|
|
GameCell.filled {
|
|
background: $secondary;
|
|
border: round $secondary-darken-1;
|
|
}
|
|
|
|
GameCell.filled:hover {
|
|
background: $secondary-lighten-1;
|
|
border: round $secondary;
|
|
}
|
|
|
|
WinnerMessage {
|
|
width: 50%;
|
|
height: 25%;
|
|
layer: messages;
|
|
visibility: hidden;
|
|
content-align: center middle;
|
|
text-align: center;
|
|
background: $success;
|
|
color: $text;
|
|
border: round;
|
|
padding: 2;
|
|
}
|
|
|
|
.visible {
|
|
visibility: visible;
|
|
}
|
|
|
|
Help {
|
|
background: $primary;
|
|
color: $text;
|
|
border: round $primary-lighten-3;
|
|
padding: 2;
|
|
}
|
|
|
|
/* five_by_five.css ends here */
|