textual/examples/basic.css

/* CSS file for basic.py */


* {
    transition: color 500ms linear, background 500ms linear;
}

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: $primary-darken2;
  color: $on-primary-darken2;
  border-right: outer $primary-darken3;
}

#sidebar .user {
  height: 8;
  background: $primary-darken1;
  color: $on-primary-darken1;
  border-right: outer $primary-darken3;
}

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

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

}

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

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

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

TweetBody {  
  background: $background
  color: $on-background-fade1
  height:6;
}

.button {
  background: $accent2;
  color: $on-accent2;
  width:20;
  height: 3
  border: tall $on-background;
 
  margin: 0 1 1 1;

  transition: background 200ms in_out_cubic, color 300ms in_out_cubic;
 
}

.button:hover {
  background: $accent1-darken1;
  color: $on-accent1-darken1;
  width:20;
  height: 3
  border: tall $on-background;
 
  margin: 0 1 1 1;
 

 
}

#footer {
  color: $on-accent2;
  background: $accent2;
  height: 1;
  border-top: hkey $accent2-darken2;
}