textual/docs/examples/basic.css

/* CSS file for basic.py */



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


*:hover {
  /* tint: 30% red;
  /* outline: heavy red; */
}

App > Screen {

  background: $surface;
  color: $text;
  layers: base sidebar;

  color: $text;
  background: $background;
  layout: vertical;

  overflow: hidden;

}

#tree-container {
  overflow-y: auto;
  height: 20;
  margin: 1 3;
  background: $panel;
  padding: 1 2;
}

DirectoryTree {
    padding: 0 1;
    height: auto;

}




DataTable {
  /*border:heavy red;*/
  /* tint: 10% green; */
  /* text-opacity: 50%; */
  padding: 1;
  margin: 1 2;
  height: 24;
}

#sidebar {
  color: $text;
  background: $panel;
  dock: left;
  width: 30;
  margin-bottom: 1;
  offset-x: -100%;

  transition: offset 500ms in_out_cubic;
  layer: sidebar;
}

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

#sidebar .title {
  height: 1;
  background: $primary-background-darken-1;
  color: $text-muted;
  border-right: wide $background;
  content-align: center middle;
}

#sidebar .user {
  height: 8;
  background: $panel-darken-1;
  color: $text-muted;
  border-right: wide $background;
  content-align: center middle;
}

#sidebar .content {
  background: $panel-darken-2;
  color: $text;
  border-right: wide $background;
  content-align: center middle;
}




Tweet {
  height:12;
  width: 100%;
  margin: 0 2;

  background: $panel;
  color: $text;
  layout: vertical;
  /* border: outer $primary; */
  padding: 1;
  border: wide $panel;
  overflow: auto;
  /* scrollbar-gutter: stable; */
  align-horizontal: center;
  box-sizing: border-box;
}


.scrollable {
  overflow-x: auto;
  overflow-y: scroll;
  margin: 1 2;
  height: 24;
  align-horizontal: center;
  layout: vertical;
}

.code {
  height: auto;

}


TweetHeader {
  height:1;
  background: $accent;
  color: $text
}

TweetBody {
  width: 100%;
  background: $panel;
  color: $text;
  height: auto;
  padding: 0 1 0 0;
}

Tweet.scroll-horizontal TweetBody {
  width: 350;
}

.button {
  background: $accent;
  color: $text;
  width:20;
  height: 3;
  /* border-top: hidden  $accent-darken-3;  */
  border: tall $accent-darken-2;
  /* border-left: tall $accent-darken-1; */


  /* padding: 1 0 0 0 ; */

  transition: background 400ms in_out_cubic, color 400ms in_out_cubic;

}

.button:hover {
  background: $accent-lighten-1;
  color: $text-disabled;
  width: 20;
  height: 3;
  border: tall $accent-darken-1;
  /* border-left: tall $accent-darken-3; */




}

#footer {
  color: $text;
  background: $accent;
  height: 1;

  content-align: center middle;
  dock:bottom;
}


#sidebar .content {
  layout: vertical
}

OptionItem {
  height: 3;
  background: $panel;
  border-right: wide $background;
  border-left: blank;
  content-align: center middle;
}

OptionItem:hover {
  height: 3;
  color: $text;
  background: $primary-darken-1;
  /* border-top: hkey $accent2-darken-3;
  border-bottom: hkey $accent2-darken-3; */
  text-style: bold;
  border-left: outer $secondary-darken-2;
}

Error {
  width: 100%;
  height:3;
  background: $error;
  color: $text;
  border-top: tall $error-darken-2;
  border-bottom: tall $error-darken-2;

  padding: 0;
  text-style: bold;
  align-horizontal: center;
}

Warning {
  width: 100%;
  height:3;
  background: $warning;
  color: $text-muted;
  border-top: tall $warning-darken-2;
  border-bottom: tall $warning-darken-2;

  text-style: bold;
  align-horizontal: center;
}

Success {
  width: 100%;

  height:auto;
  box-sizing: border-box;
  background: $success;
  color: $text-muted;

  border-top: hkey $success-darken-2;
  border-bottom: hkey $success-darken-2;

  text-style: bold ;

  align-horizontal: center;
}


.horizontal {
  layout: horizontal
}