alihan/textual
1
0
Fork 0
mirror of https://github.com/Textualize/textual.git synced 2025-10-17 02:38:12 +03:00
Code Issues Packages Projects Releases Wiki Activity

allow scrollbars to be customized

Browse Source
This commit is contained in:
Will McGugan
2022-04-10 15:33:35 +01:00
parent 6c51eec5c0
commit adafda3edf
13 changed files with 248 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
sandbox/basic.css
View File

@@ -7,6 +7,13 @@
}
*/
* {
scrollbar-background: $panel-darken-2;
scrollbar-background-hover: $panel-darken-3;
scrollbar-color: $system;
scrollbar-color-active: $accent-darken-1;
}
App > Screen {
layout: dock;
docks: side=left/1;
@@ -31,7 +38,7 @@ App > Screen {
#sidebar .title {
height: 3;
background: $primary-darken-2;
color: $text-primary-darken-2;
color: $text-primary-darken-2 ;
border-right: outer $primary-darken-3;
}
@@ -59,36 +66,42 @@ App > Screen {
color: $text-background;
background: $background;
layout: vertical;
overflow-y:scroll;
}
Tweet {
height: 16;
max-width: 80;
margin: 1 3;
background: $surface;
color: $text-surface;
background: $panel;
color: $text-panel;
layout: vertical;
border: outer $accent2;
/* border: outer $primary; */
padding: 1;
border: wide $panel-darken-2;
overflow-y: scroll
}
TweetHeader {
height:1
background: $accent1
color: $text-accent1
background: $accent
color: $text-accent
}
TweetBody {
background: $surface
color: $text-surface-fade-1
height:6;
background: $panel;
color: $text-panel;
height:20;
padding: 0 1 0 0;
}
.button {
background: $accent2;
color: $text-accent2;
background: $accent;
color: $text-accent;
width:20;
height: 3
border: tall $text-background;
@@ -100,8 +113,8 @@ TweetBody {
}
.button:hover {
background: $accent1-darken-1;
color: $text-accent1-darken-1;
background: $success-darken-1;
color: $text-success-darken-1;
width: 20;
height: 3
border: tall $text-background;
@@ -112,10 +125,10 @@ TweetBody {
}
#footer {
color: $text-accent2;
background: $accent2;
color: $text-accent;
background: $accent;
height: 1;
border-top: hkey $accent2-darken-2;
border-top: hkey $accent-darken-2;
}
@@ -127,26 +140,29 @@ OptionItem {
height: 3;
background: $primary;
transition: background 100ms linear;
border-right: outer $primary-darken-3;
border-right: outer $primary-darken-2;
border-left: hidden;
}
OptionItem:hover {
height: 3;
background: $accent1-darken-2;
color: $accent;
background: $primary-darken-1;
/* border-top: hkey $accent2-darken-3;
border-bottom: hkey $accent2-darken-3; */
text-style: bold;
border-right: outer $accent1-darken-3;
border-left: outer $accent-darken-2;
}
Error {
max-width: 78;
max-width: 80;
height:3;
background: $error;
color: $text-error;
border-top: hkey $error-darken-3;
border-bottom: hkey $error-darken-3;
border-top: hkey $error-darken-2;
border-bottom: hkey $error-darken-2;
margin: 1 3;
text-style: bold;
}
@@ -155,8 +171,8 @@ Warning {
height:3;
background: $warning;
color: $text-warning-fade-1;
border-top: hkey $warning-darken-3;
border-bottom: hkey $warning-darken-3;
border-top: hkey $warning-darken-2;
border-bottom: hkey $warning-darken-2;
margin: 1 2;
text-style: bold;
}
@@ -164,10 +180,10 @@ Warning {
Success {
max-width: 80;
height:3;
background: $success-lighten-2;
color: $text-success-lighten-2-fade-1;
border-top: hkey $success-darken-3;
border-bottom: hkey $success-darken-3;
background: $success-lighten-3;
color: $text-success-lighten-3-fade-1;
border-top: hkey $success;
border-bottom: hkey $success;
margin: 1 2;
text-style: bold;
}

3
sandbox/basic.py
View File

@@ -7,7 +7,8 @@ from textual.widget import Widget
lorem = Text.from_markup(
"""Lorem ipsum dolor sit amet, consectetur adipiscing elit. In velit libero, volutpat nec hendrerit at, faucibus in odio. Aliquam hendrerit nibh sed quam volutpat maximus. Nullam suscipit convallis lorem quis sodales. In tristique lobortis ante et dictum. Ut at finibus ipsum. In urna dolor, placerat et mi facilisis, congue sollicitudin massa. Phasellus felis turpis, cursus eu lectus et, porttitor malesuada augue. Sed feugiat volutpat velit, sollicitudin fringilla velit bibendum faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In velit libero, volutpat nec hendrerit at, faucibus in odio. Aliquam hendrerit nibh sed quam volutpat maximus. Nullam suscipit convallis lorem quis sodales. In tristique lobortis ante et dictum. Ut at finibus ipsum. In urna dolor, placerat et mi facilisis, congue sollicitudin massa. Phasellus felis turpis, cursus eu lectus et, porttitor malesuada augue. Sed feugiat volutpat velit, sollicitudin fringilla velit bibendum faucibus. """,
"""Lorem ipsum dolor sit amet, consectetur adipiscing elit. In velit libero, volutpat nec hendrerit at, faucibus in odio. Aliquam hendrerit nibh sed quam volutpat maximus. Nullam suscipit convallis lorem quis sodales. In tristique lobortis ante et dictum. Ut at finibus ipsum. In urna dolor, placerat et mi facilisis, congue sollicitudin massa. Phasellus felis turpis, cursus eu lectus et, porttitor malesuada augue. Sed feugiat volutpat velit, sollicitudin fringilla velit bibendum faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In velit libero, volutpat nec hendrerit at, faucibus in odio. Aliquam hendrerit nibh sed quam volutpat maximus. Nullam suscipit convallis lorem quis sodales. In tristique lobortis ante et dictum. Ut at finibus ipsum. In urna dolor, placerat et mi facilisis, congue sollicitudin massa. Phasellus felis turpis, cursus eu lectus et, porttitor malesuada augue. Sed feugiat volutpat velit, sollicitudin fringilla velit bibendum faucibus. """
"""Lorem ipsum dolor sit amet, consectetur adipiscing elit. In velit libero, volutpat nec hendrerit at, faucibus in odio. Aliquam hendrerit nibh sed quam volutpat maximus. Nullam suscipit convallis lorem quis sodales. In tristique lobortis ante et dictum. Ut at finibus ipsum. In urna dolor, placerat et mi facilisis, congue sollicitudin massa. Phasellus felis turpis, cursus eu lectus et, porttitor malesuada augue. Sed feugiat volutpat velit, sollicitudin fringilla velit bibendum faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In velit libero, volutpat nec hendrerit at, faucibus in odio. Aliquam hendrerit nibh sed quam volutpat maximus. Nullam suscipit convallis lorem quis sodales. In tristique lobortis ante et dictum. Ut at finibus ipsum. In urna dolor, placerat et mi facilisis, congue sollicitudin massa. Phasellus felis turpis, cursus eu lectus et, porttitor malesuada augue. Sed feugiat volutpat velit, sollicitudin fringilla velit bibendum faucibus. """
)