Renaming opacity to text-opacity in code

sandbox/darren/buttons.css

@@ -1,4 +1,6 @@
 Button {
     padding-left: 1;
     padding-right: 1;
+    margin: 3;
+    text-opacity: 30%;
 }

sandbox/darren/just_a_box.py

@@ -26,15 +26,15 @@ class JustABox(App):
         yield Box(classes="box2")
 
     def key_a(self):
-        self.box.styles.display = "none"
+        # self.box.styles.display = "none"
         # self.box.styles.visibility = "hidden"
-        # self.animator.animate(
-        #     self.box.styles,
-        #     "opacity",
-        #     value=0.0,
-        #     duration=2.0,
-        #     on_complete=self.box.remove,
-        # )
+        self.animator.animate(
+            self.box.styles,
+            "text_opacity",
+            value=0.0,
+            duration=2.0,
+            on_complete=self.box.remove,
+        )
 
     async def on_key(self, event: events.Key) -> None:
         await self.dispatch_key(event)

sandbox/dev_sandbox.scss

@@ -54,7 +54,7 @@ Widget:hover {
 }
 
 #footer {
-  opacity: 1;
+  text-opacity: 1;
   color: $text;
   background: $background;
   height: 3;
@@ -62,5 +62,5 @@ Widget:hover {
 }
 
 #footer.dim {
-  opacity: 0.5;
+  text-opacity: 0.5;
 }

sandbox/will/basic.css

@@ -4,18 +4,18 @@
 
  * {
     transition: color 300ms linear, background 300ms linear;
-} 
+}
 
 
 *:hover {
-  /* tint: 30% red;  
+  /* tint: 30% red;
   /* outline: heavy red; */
 }
 
 App > Screen {
-    
+
   background: $surface;
-  color: $text-surface; 
+  color: $text-surface;
   layers: base sidebar;
 
   color: $text-background;
@@ -23,12 +23,12 @@ App > Screen {
   layout: vertical;
 
   overflow: hidden;
-  
+
 }
 
 #tree-container {
   overflow-y: auto;
-  height: 20; 
+  height: 20;
   margin: 1 2;
   background: $panel;
   padding: 1 2;
@@ -37,7 +37,7 @@ App > Screen {
 DirectoryTree {
     padding: 0 1;
     height: auto;
-   
+
 }
 
 
@@ -46,10 +46,10 @@ DirectoryTree {
 DataTable {
   /*border:heavy red;*/
   /* tint: 10% green; */
-  /* opacity: 50%; */
+  /* text-opacity: 50%; */
   padding: 1;
-  margin: 1 2;  
-  height: 24;  
+  margin: 1 2;
+  height: 24;
 }
 
 #sidebar {
@@ -59,7 +59,7 @@ DataTable {
   width: 30;
   margin-bottom: 1;
   offset-x: -100%;
-  
+
   transition: offset 500ms in_out_cubic;
   layer: sidebar;
 }
@@ -98,7 +98,7 @@ Tweet {
   height:12;
   width: 100%;
   margin: 0 2;
- 
+
   margin:0 2;
   background: $panel;
   color: $text-panel;
@@ -123,9 +123,9 @@ Tweet {
   layout: vertical;
 }
 
-.code {  
+.code {
   height: auto;
-  
+
 }
 
 
@@ -135,12 +135,12 @@ TweetHeader {
   color: $text-accent
 }
 
-TweetBody {  
+TweetBody {
   width: 100%;
   background: $panel;
   color: $text-panel;
-  height: auto; 
-  padding: 0 1 0 0; 
+  height: auto;
+  padding: 0 1 0 0;
 }
 
 Tweet.scroll-horizontal TweetBody {
@@ -160,7 +160,7 @@ Tweet.scroll-horizontal TweetBody {
   /* padding: 1 0 0 0 ; */
 
   transition: background 400ms in_out_cubic, color 400ms in_out_cubic;
- 
+
 }
 
 .button:hover {
@@ -180,7 +180,7 @@ Tweet.scroll-horizontal TweetBody {
   color: $text-accent;
   background: $accent;
   height: 1;
-  
+
   content-align: center middle;
   dock:bottom;
 }
@@ -215,7 +215,7 @@ Error {
   color: $text-error;
   border-top: tall $error-darken-2;
   border-bottom: tall $error-darken-2;
-  
+
   padding: 0;
   text-style: bold;
   align-horizontal: center;
@@ -228,21 +228,21 @@ Warning {
   color: $text-warning-fade-1;
   border-top: tall $warning-darken-2;
   border-bottom: tall $warning-darken-2;
-  
+
   text-style: bold;
   align-horizontal: center;
 }
 
 Success {
   width: 100%;
-  
-  height:auto;  
+
+  height:auto;
   box-sizing: border-box;
   background: $success;
-  color: $text-success-fade-1;  
-  
+  color: $text-success-fade-1;
+
   border-top: hkey $success-darken-2;
-  border-bottom: hkey $success-darken-2; 
+  border-bottom: hkey $success-darken-2;
 
   text-style: bold ;