textual/examples/basic.css

/* CSS file for basic.py */

App > Screen {
  layout: dock;
  docks: side=left/1;
  background: $surface;
  color: $on-surface;
}

#sidebar {
  color: $on-primary;
  background: $primary;
  dock: side;
  width: 30;
  offset-x: -100%;
  layout: dock;
  transition: offset 500ms in_out_cubic;
}

#sidebar.-active {
  offset-x: 0;
}

#sidebar .title {
  height: 1;
  background: $secondary-darken2;
  color: $on-secondary-darken2;
  border-right: outer $secondary-darken3;
}

#sidebar .user {
  height: 8;
  background: $secondary-darken1;
  color: $on-secondary-darken1;

  border-right: outer $secondary-darken3;
}

#sidebar .content {
  background: $secondary;
  color: $on-secondary;
  border-right: outer $secondary-darken3;
}

#header {
  color: $on-primary;
  background: $primary;
  height: 3;

  border: hkey $secondary-darken3;
}

#content {
  color: $on-surface;
  background: $surface;
  layout: vertical;
}

Tweet {
  height: 7;
  max-width: 80;
  
  margin: 1 2;
  background: $background;
  color: $on-background;
  layout: vertical
}

TweetHeader {
  height:1
  background: $secondary
  color: $on-secondary
}

TweetBody {  
  background: $background
  color: $on-background
}


#footer {
  color: $on-accent1;
  background: $accent1;

  height: 1;

  border-top: hkey $accent1-darken2;
}