Add support for transparent panels extension

germanfr · Apr 12, 2018 · 5c324d7 · 5c324d7
1 parent b75bfca
commit 5c324d7
Show file tree

Hide file tree

Showing 3 changed files with 113 additions and 0 deletions.
diff --git a/Railway/cinnamon/cinnamon.css b/Railway/cinnamon/cinnamon.css
@@ -3410,3 +3410,60 @@ or .applet-icon,
   width: 16px;
   height: 16px;
 }
+
+/* ======================================
+ * ! Transparent panels
+ * ====================================== */
+.panel-transparent,
+.panel-transparent-with-shadow {
+  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.75);
+}
+
+.panel-transparent .system-status-icon,
+.panel-transparent-with-shadow .system-status-icon {
+  icon-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
+}
+
+.panel-transparent .window-list-item-box,
+.panel-transparent-with-shadow .window-list-item-box {
+  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.75);
+}
+
+.panel-transparent #panelLeft, .panel-transparent #panelCenter, .panel-transparent #panelRight,
+.panel-transparent-with-shadow #panelLeft,
+.panel-transparent-with-shadow #panelCenter,
+.panel-transparent-with-shadow #panelRight {
+  border-image: none;
+}
+
+.panel-transparent {
+  background: transparent;
+}
+
+.panel-transparent-with-shadow.panel-top {
+  background-gradient-direction: vertical;
+  background-gradient-start: rgba(0, 0, 0, 0.4);
+  background-gradient-end: transparent;
+}
+
+.panel-transparent-with-shadow.panel-bottom {
+  background-gradient-direction: vertical;
+  background-gradient-start: transparent;
+  background-gradient-end: rgba(0, 0, 0, 0.4);
+}
+
+.panel-transparent-with-shadow.panel-left {
+  background-gradient-direction: horizontal;
+  background-gradient-start: rgba(0, 0, 0, 0.4);
+  background-gradient-end: transparent;
+}
+
+.panel-transparent-with-shadow.panel-right {
+  background-gradient-direction: horizontal;
+  background-gradient-start: transparent;
+  background-gradient-end: rgba(0, 0, 0, 0.4);
+}
+
+.panel-semi-transparent {
+  /* Do nothing, theme is already semi-transparent */
+}
diff --git a/Railway/cinnamon/scss/third-party__extensions/0-INDEX.scss b/Railway/cinnamon/scss/third-party__extensions/0-INDEX.scss
@@ -1 +1,2 @@
 @import "g-tile";
+@import "transparent-panels";
diff --git a/Railway/cinnamon/scss/third-party__extensions/_transparent-panels.scss b/Railway/cinnamon/scss/third-party__extensions/_transparent-panels.scss
@@ -0,0 +1,55 @@
+/* ======================================
+ * ! Transparent panels
+ * ====================================== */
+
+.panel-transparent,
+.panel-transparent-with-shadow {
+	text-shadow: 1px 1px 2px rgba(#000, .75);
+	.system-status-icon {
+		icon-shadow: 1px 1px 2px rgba(#000, .5);
+	}
+
+	.window-list-item-box {
+		text-shadow: 1px 1px 2px rgba(#000, .75);
+	}
+
+	#panelLeft, #panelCenter, #panelRight {
+		border-image: none;
+	}
+}
+
+.panel-transparent {
+	background: transparent;
+}
+
+.panel-transparent-with-shadow {
+	$initial-color: rgba(#000, .4);
+
+	&.panel-top {
+		background-gradient-direction: vertical;
+		background-gradient-start: $initial-color;
+		background-gradient-end: transparent;
+	}
+
+	&.panel-bottom {
+		background-gradient-direction: vertical;
+		background-gradient-start: transparent;
+		background-gradient-end: $initial-color;
+	}
+
+	&.panel-left {
+		background-gradient-direction: horizontal;
+		background-gradient-start: $initial-color;
+		background-gradient-end: transparent;
+	}
+
+	&.panel-right {
+		background-gradient-direction: horizontal;
+		background-gradient-start: transparent;
+		background-gradient-end: $initial-color;
+	}
+}
+
+.panel-semi-transparent {
+	/* Do nothing, theme is already semi-transparent */
+}