improved list context menu, skin style tweaks

fquirin · fquirin · commit 66c907f83e9f · 2018-11-27T01:45:17.000+01:00
diff --git a/www/css/sepiaFW-cards.css b/www/css/sepiaFW-cards.css
@@ -62,6 +62,7 @@
 /* header */
 .sepiaFW-cards-list-title {
 	display: flex;
+	flex-wrap: wrap;
 	justify-content: space-between;
 	position: relative;
 	/*background: rgba(205, 235, 205, 0.90);*/
@@ -71,7 +72,7 @@
 	margin: 0px 5px 0px 5px;
 	width: calc(100% - 10px);
 	min-height: 38px;
-	padding: 1px;
+	padding-top: 1px;
     text-align: center;
 	font-weight: bold;
 	line-height: 27px;
@@ -94,18 +95,31 @@
 }
 .sepiaFW-cards-list-contextMenu {
 	position: absolute;
-	top: 39px;
+	top: 38px;
 	right: 0px;
 	line-height: 17px;
     font-size: 13px;
 	display: none;
+	width: 100%;
+    order: 4;
 }
-.sepiaFW-cards-list-contextMenu li:first-of-type{
+.sepiaFW-cards-list-contextMenu > ul {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
+}
+.sepiaFW-cards-list-contextMenu li {
+	padding: 2px 6px;
+	display: flex;
+    justify-content: center;
+    align-items: center;
+}
+/*.sepiaFW-cards-list-contextMenu li:first-of-type{
 	margin-top: 0px;
 }
 .sepiaFW-cards-list-contextMenu li:last-of-type{
 	margin-bottom: 0px;
-}
+}*/
 .sepiaFW-cards-list-saveBtn {
 	/*float: left;*/
 	opacity: 0.10;
diff --git a/www/css/sepiaFW-skin-grid.css b/www/css/sepiaFW-skin-grid.css
@@ -97,14 +97,14 @@ html {
 .sepiaFW-menu {
 	background: rgba(21, 171, 195, 0.95);
 	color: #fff;
+	box-shadow: inset 0 0 5px 1px #fff;
 }
 .sepiaFW-menu input {
 	background: transparent !important;
 }
 #sepiaFW-chat-menu {
 	background: rgba(21, 171, 195, 1.00); 
 	color: #fff;
-	box-shadow: inset 0 0 5px 1px #fff;
 	height: calc(100% - 106px);
 }
 #sepiaFW-chat-menu:not(.full-screen) {
@@ -122,6 +122,9 @@ html {
 	border: 1px solid #fff;
     box-shadow: 0 0 5px #fff;
 }
+#sepiaFW-chat-menu li {
+	background: rgba(255, 255, 255, 0.14);
+}
 #sepiaFW-chat-menu button:hover {
 	background: #fff;
 	color: #102030;
@@ -131,7 +134,6 @@ html {
 	color: #fff;
 }
 #sepiaFW-chat-controls-more-menu {
-	box-shadow: inset 0 0 5px 1px #fff;
 	bottom: 56px;
 	padding-bottom: 4px;
 }
@@ -143,8 +145,8 @@ html {
 	background: #ECEBE7;
 	color: #102030;
 }
-#sepiaFW-chat-menu li {
-	background: rgba(255, 255, 255, 0.14);
+#sepiaFW-chat-channel-view {
+	top: 51px;
 }
 .sepiaFW-toggle-btn .on {
     background: #ceff1a;
diff --git a/www/css/sepiaFW-skin-malachite.css b/www/css/sepiaFW-skin-malachite.css
@@ -94,6 +94,9 @@ html {
 .sepiaFW-menu input {
 	background: transparent !important;
 }
+.sepiaFW-cards-list-contextMenu {
+	background: #07333a;
+}
 #sepiaFW-chat-controls-more-menu {
 	background: #07333a;
 }
diff --git a/www/css/sepiaFW-skin-minimal.css b/www/css/sepiaFW-skin-minimal.css
@@ -14,14 +14,14 @@ html {
 	}
 }
 
-#sepiaFW-pC 	 { background-color: #000; }
-#sepiaFW-sC 	 { background-color: #fff; }
-#sepiaFW-sC2 { background-color: #222226; }
-#sepiaFW-aC 	 { background-color: #ff0000; }
-#sepiaFW-aC2 { background-color: #dfe0f5; }
-#sepiaFW-asC { background-color: #ceff1a; }
-#sepiaFW-adC { background-color: #ceff1a; }
-#sepiaFW-lC 	 { background-color: rgba(200, 200, 200, 0.50); 	}
+#sepiaFW-pC 	{ background-color: #000; }
+#sepiaFW-sC 	{ background-color: #fff; }
+#sepiaFW-sC2 	{ background-color: #19191b; }
+#sepiaFW-aC 	{ background-color: #ff0000; }
+#sepiaFW-aC2 	{ background-color: #dfe0f5; }
+#sepiaFW-asC 	{ background-color: #ceff1a; }
+#sepiaFW-adC 	{ background-color: #ceff1a; }
+#sepiaFW-lC 	{ background-color: rgba(200, 200, 200, 0.50); 	}
 
 #sepiaFW-login-box, #sepiaFW-nav-bar, #sepiaFW-chat-controls-form, #sepiaFW-chat-controls-right {
 	background: #000;
@@ -61,7 +61,7 @@ html {
 }
 .sepiaFW-layer-header {
 	border: 1px solid #fff;
-	background: #222226;
+	background: #19191b;
 }
 .sepiaFW-myEvents-titleNote, 
 .sepiaFW-myFirstStart-titleNote,
@@ -90,7 +90,7 @@ html {
 #sepiaFW-assist-btn-area button,
 .sepiaFW-touch-device  #sepiaFW-assist-btn-area button:hover {
 	border: 0px solid #fff;
-	background: #222226 !important;
+	background: #19191b !important;
 }
 .sepiaFW-notouch-device #sepiaFW-assist-btn-area button:hover {
 	/*border: 1px solid #888;*/
@@ -111,14 +111,17 @@ html {
 }
 
 .sepiaFW-menu {
-	background: #222226;
+	background: #19191b;
 	color: #fff;
 }
 .sepiaFW-menu input {
 	background: transparent !important;
 }
+.sepiaFW-cards-list-contextMenu {
+	background: #121212;
+}
 #sepiaFW-chat-menu {
-	background: #222226; 
+	background: #19191b; 
 	color: #fff;
 }
 #sepiaFW-chat-menu-head-border {
@@ -141,7 +144,10 @@ html {
 	color: #fff;
 }
 #sepiaFW-chat-menu li {
-	background: rgba(255, 255, 255, 0.06);
+	background: rgba(155, 155, 155, 0.04);
+}
+.sepiaFW-notouch-device .sepiaFW-menu li:hover {
+	background: rgba(155, 155, 155, 0.07) !important;
 }
 .sepiaFW-toggle-btn .on {
     background: #ceff1a;
@@ -180,7 +186,7 @@ html {
 }
 
 #sepiaFW-chat-output .statusUpdate {
-    background: rgba(255, 255, 255, 0.10);
+    background: #121212;
     color: #fff;
 }
 #sepiaFW-chat-output article:not(.statusUpdate) {
@@ -198,13 +204,13 @@ html {
 	border-color: #fff;
 }
 #sepiaFW-chat-output article.chatMe b{
-	color: #fff;
+	color: #888;
 }
 #sepiaFW-chat-output article.chatMe span{
 	color: #fff;
 }
 #sepiaFW-chat-output article.chatAssistant {
-	background: rgba(34, 34, 38, 0.85);
+	background: #121212;
 	color: #fff;
 	border-color: #fff;
 }
@@ -225,12 +231,12 @@ html {
 }
 
 .sepiaFW-button {
-	background-color: #222226;
+	background-color: #19191b;
 	color: #fff;
 }
 .sepiaFW-button:hover {
 	background-color: #fff;
-	color: #222226;
+	color: #19191b;
 }
 
 #sepiaFW-chat-controls-swipe-area .sepiaFW-swipeBar-switchable {
@@ -253,15 +259,15 @@ html {
 /*----- cards ------*/
 
 .sepiaFW-cards-flexSize-container {
-    background: rgba(255, 255, 255, 0.07);
+    background: #121212;
 }
 
 .sepiaFW-help-view {
-    background: rgba(33, 33, 33, 0.75);
+    background: #121212;
 }
 
 .sepiaFW-cards-list-title {
-	background: #222226;
+	background: #19191b;
     color: #fff;
 }
 .sepiaFW-cards-list-body {
@@ -272,20 +278,27 @@ html {
 	color: #fff;
 }
 .sepiaFW-cards-list-body .listElement .checked {
-    background: rgba(206, 255, 26, 0.95) !important;
+    background: #c4f31a !important;
 }
-.sepiaFW-cards-list-body .listElement .listRight:hover {
-	background: rgba(255, 0, 0, 0.95) !important;
+.sepiaFW-notouch-device .sepiaFW-cards-list-body .listElement .unchecked:hover {
+    background: #ddd  !important;
+}
+.sepiaFW-notouch-device .sepiaFW-cards-list-body .listElement .listRight:hover {
+	background: #f30000 !important;
 }
 
 .sepiaFW-cards-list-body .weatherNowSmall .weatherNowSmallImage {
-	background: #222226;
+	background: #000 !important;
 }
 
 .sepiaFW-cards-list-footer {
     background: transparent;
 }
 
+#sepiaFW-audio-ctrls-canvas {
+    background: #404050;
+}
+
 /*----- teachUI -----*/
 
 #sepiaFW-teachUI-view {
diff --git a/www/css/sepiaFW-skin-myMessage.css b/www/css/sepiaFW-skin-myMessage.css
@@ -66,9 +66,6 @@ html {
 	color: #000;
 }
 
-#sepiaFW-chat-menu li {
-	background: rgba(235, 235, 235, 0.25);
-}
 .sepiaFW-menu {
 	background: #fff !important;
 	color: #000 !important;
@@ -90,6 +87,19 @@ html {
 	border: 0px !important;
 	border-bottom: 1px solid white !important;
 }
+#sepiaFW-chat-menu:not(.full-screen) {
+	border-top: 0;
+	border-bottom: 0;
+}
+#sepiaFW-chat-menu li {
+	background: rgba(235, 235, 235, 0.25);
+}
+#sepiaFW-chat-channel-view {
+	border-top: 0;
+}
+#sepiaFW-chat-controls-more-menu:not(.full-screen) {
+	border-bottom: 0;
+}
 
 #sepiaFW-nav-label-note{
     border: 1px solid rgba(166, 58, 80, 1.0);
diff --git a/www/css/sepiaFW-skin-neo-sepia.css b/www/css/sepiaFW-skin-neo-sepia.css
@@ -71,6 +71,9 @@ html {
 	background:#000;
 	color: #fff;
 }
+.sepiaFW-cards-list-contextMenu {
+	background: #222;
+}
 #sepiaFW-chat-controls-more-menu button {
 	background: #fff;
 	color: #000;
@@ -175,7 +178,7 @@ html {
 /*----- cards ------*/
 
 .sepiaFW-cards-list-title {
-	background: #000; /*rgba(225, 225, 245, 1.00);*/
+	background: #121212; /*rgba(225, 225, 245, 1.00);*/
 	color: #fff; /*#000;*/
 }
 .sepiaFW-cards-list-footer {
diff --git a/www/css/sepiaFW-skin-os1.css b/www/css/sepiaFW-skin-os1.css
@@ -80,6 +80,9 @@ html {
 .sepiaFW-menu input {
 	background: transparent !important;
 }
+.sepiaFW-cards-list-contextMenu {
+	background: #4f4c4a;
+}
 #sepiaFW-chat-menu {
 	background: rgba(82, 67, 53, 1.0); 
 	color: #fcf9ee;
diff --git a/www/css/sepiaFW-style.css b/www/css/sepiaFW-style.css
@@ -1040,9 +1040,9 @@ body {
 	#sepiaFW-chat-channel-view {
 		border-radius: 0px 0px 3px 3px;
 		position: absolute;
-		left: 2px;
-		top: 52px;
-		width: calc(100% - 4px);
+		left: 0px;
+		top: 50px;
+		width: calc(100% - 0px);
 		max-width: none;
 		max-height: calc(100% - 109px);
 	}
diff --git a/www/scripts/sepiaFW.ui.cards.js b/www/scripts/sepiaFW.ui.cards.js

Original file line number	Diff line number	Diff line change
`@@ -97,14 +97,14 @@ html {`
`97`	`97`	`.sepiaFW-menu {`
`98`	`98`	`background: rgba(21, 171, 195, 0.95);`
`99`	`99`	`color: #fff;`
	`100`	`+ box-shadow: inset 0 0 5px 1px #fff;`
`100`	`101`	`}`
`101`	`102`	`.sepiaFW-menu input {`
`102`	`103`	`background: transparent !important;`
`103`	`104`	`}`
`104`	`105`	`#sepiaFW-chat-menu {`
`105`	`106`	`background: rgba(21, 171, 195, 1.00);`
`106`	`107`	`color: #fff;`
`107`		`- box-shadow: inset 0 0 5px 1px #fff;`
`108`	`108`	`height: calc(100% - 106px);`
`109`	`109`	`}`
`110`	`110`	`#sepiaFW-chat-menu:not(.full-screen) {`
`@@ -122,6 +122,9 @@ html {`
`122`	`122`	`border: 1px solid #fff;`
`123`	`123`	`box-shadow: 0 0 5px #fff;`
`124`	`124`	`}`
	`125`	`+#sepiaFW-chat-menu li {`
	`126`	`+ background: rgba(255, 255, 255, 0.14);`
	`127`	`+}`
`125`	`128`	`#sepiaFW-chat-menu button:hover {`
`126`	`129`	`background: #fff;`
`127`	`130`	`color: #102030;`
`@@ -131,7 +134,6 @@ html {`
`131`	`134`	`color: #fff;`
`132`	`135`	`}`
`133`	`136`	`#sepiaFW-chat-controls-more-menu {`
`134`		`- box-shadow: inset 0 0 5px 1px #fff;`
`135`	`137`	`bottom: 56px;`
`136`	`138`	`padding-bottom: 4px;`
`137`	`139`	`}`
`@@ -143,8 +145,8 @@ html {`
`143`	`145`	`background: #ECEBE7;`
`144`	`146`	`color: #102030;`
`145`	`147`	`}`
`146`		`-#sepiaFW-chat-menu li {`
`147`		`- background: rgba(255, 255, 255, 0.14);`
	`148`	`+#sepiaFW-chat-channel-view {`
	`149`	`+ top: 51px;`
`148`	`150`	`}`
`149`	`151`	`.sepiaFW-toggle-btn .on {`
`150`	`152`	`background: #ceff1a;`
Original file line number	Diff line number	Diff line change
`@@ -94,6 +94,9 @@ html {`
`94`	`94`	`.sepiaFW-menu input {`
`95`	`95`	`background: transparent !important;`
`96`	`96`	`}`
	`97`	`+.sepiaFW-cards-list-contextMenu {`
	`98`	`+ background: #07333a;`
	`99`	`+}`
`97`	`100`	`#sepiaFW-chat-controls-more-menu {`
`98`	`101`	`background: #07333a;`
`99`	`102`	`}`
Original file line number	Diff line number	Diff line change
`@@ -14,14 +14,14 @@ html {`
`14`	`14`	`}`
`15`	`15`	`}`
`16`	`16`
`17`		`-#sepiaFW-pC { background-color: #000; }`
`18`		`-#sepiaFW-sC { background-color: #fff; }`
`19`		`-#sepiaFW-sC2 { background-color: #222226; }`
`20`		`-#sepiaFW-aC { background-color: #ff0000; }`
`21`		`-#sepiaFW-aC2 { background-color: #dfe0f5; }`
`22`		`-#sepiaFW-asC { background-color: #ceff1a; }`
`23`		`-#sepiaFW-adC { background-color: #ceff1a; }`
`24`		`-#sepiaFW-lC { background-color: rgba(200, 200, 200, 0.50); }`
	`17`	`+#sepiaFW-pC { background-color: #000; }`
	`18`	`+#sepiaFW-sC { background-color: #fff; }`
	`19`	`+#sepiaFW-sC2 { background-color: #19191b; }`
	`20`	`+#sepiaFW-aC { background-color: #ff0000; }`
	`21`	`+#sepiaFW-aC2 { background-color: #dfe0f5; }`
	`22`	`+#sepiaFW-asC { background-color: #ceff1a; }`
	`23`	`+#sepiaFW-adC { background-color: #ceff1a; }`
	`24`	`+#sepiaFW-lC { background-color: rgba(200, 200, 200, 0.50); }`
`25`	`25`
`26`	`26`	`#sepiaFW-login-box, #sepiaFW-nav-bar, #sepiaFW-chat-controls-form, #sepiaFW-chat-controls-right {`
`27`	`27`	`background: #000;`
`@@ -61,7 +61,7 @@ html {`
`61`	`61`	`}`
`62`	`62`	`.sepiaFW-layer-header {`
`63`	`63`	`border: 1px solid #fff;`
`64`		`- background: #222226;`
	`64`	`+ background: #19191b;`
`65`	`65`	`}`
`66`	`66`	`.sepiaFW-myEvents-titleNote,`
`67`	`67`	`.sepiaFW-myFirstStart-titleNote,`
`@@ -90,7 +90,7 @@ html {`
`90`	`90`	`#sepiaFW-assist-btn-area button,`
`91`	`91`	`.sepiaFW-touch-device #sepiaFW-assist-btn-area button:hover {`
`92`	`92`	`border: 0px solid #fff;`
`93`		`- background: #222226 !important;`
	`93`	`+ background: #19191b !important;`
`94`	`94`	`}`
`95`	`95`	`.sepiaFW-notouch-device #sepiaFW-assist-btn-area button:hover {`
`96`	`96`	`/border: 1px solid #888;/`
`@@ -111,14 +111,17 @@ html {`
`111`	`111`	`}`
`112`	`112`
`113`	`113`	`.sepiaFW-menu {`
`114`		`- background: #222226;`
	`114`	`+ background: #19191b;`
`115`	`115`	`color: #fff;`
`116`	`116`	`}`
`117`	`117`	`.sepiaFW-menu input {`
`118`	`118`	`background: transparent !important;`
`119`	`119`	`}`
	`120`	`+.sepiaFW-cards-list-contextMenu {`
	`121`	`+ background: #121212;`
	`122`	`+}`
`120`	`123`	`#sepiaFW-chat-menu {`
`121`		`- background: #222226;`
	`124`	`+ background: #19191b;`
`122`	`125`	`color: #fff;`
`123`	`126`	`}`
`124`	`127`	`#sepiaFW-chat-menu-head-border {`
`@@ -141,7 +144,10 @@ html {`
`141`	`144`	`color: #fff;`
`142`	`145`	`}`
`143`	`146`	`#sepiaFW-chat-menu li {`
`144`		`- background: rgba(255, 255, 255, 0.06);`
	`147`	`+ background: rgba(155, 155, 155, 0.04);`
	`148`	`+}`
	`149`	`+.sepiaFW-notouch-device .sepiaFW-menu li:hover {`
	`150`	`+ background: rgba(155, 155, 155, 0.07) !important;`
`145`	`151`	`}`
`146`	`152`	`.sepiaFW-toggle-btn .on {`
`147`	`153`	`background: #ceff1a;`
`@@ -180,7 +186,7 @@ html {`
`180`	`186`	`}`
`181`	`187`
`182`	`188`	`#sepiaFW-chat-output .statusUpdate {`
`183`		`- background: rgba(255, 255, 255, 0.10);`
	`189`	`+ background: #121212;`
`184`	`190`	`color: #fff;`
`185`	`191`	`}`
`186`	`192`	`#sepiaFW-chat-output article:not(.statusUpdate) {`
`@@ -198,13 +204,13 @@ html {`
`198`	`204`	`border-color: #fff;`
`199`	`205`	`}`
`200`	`206`	`#sepiaFW-chat-output article.chatMe b{`
`201`		`- color: #fff;`
	`207`	`+ color: #888;`
`202`	`208`	`}`
`203`	`209`	`#sepiaFW-chat-output article.chatMe span{`
`204`	`210`	`color: #fff;`
`205`	`211`	`}`
`206`	`212`	`#sepiaFW-chat-output article.chatAssistant {`
`207`		`- background: rgba(34, 34, 38, 0.85);`
	`213`	`+ background: #121212;`
`208`	`214`	`color: #fff;`
`209`	`215`	`border-color: #fff;`
`210`	`216`	`}`
`@@ -225,12 +231,12 @@ html {`
`225`	`231`	`}`
`226`	`232`
`227`	`233`	`.sepiaFW-button {`
`228`		`- background-color: #222226;`
	`234`	`+ background-color: #19191b;`
`229`	`235`	`color: #fff;`
`230`	`236`	`}`
`231`	`237`	`.sepiaFW-button:hover {`
`232`	`238`	`background-color: #fff;`
`233`		`- color: #222226;`
	`239`	`+ color: #19191b;`
`234`	`240`	`}`
`235`	`241`
`236`	`242`	`#sepiaFW-chat-controls-swipe-area .sepiaFW-swipeBar-switchable {`
`@@ -253,15 +259,15 @@ html {`
`253`	`259`	`/----- cards ------/`
`254`	`260`
`255`	`261`	`.sepiaFW-cards-flexSize-container {`
`256`		`- background: rgba(255, 255, 255, 0.07);`
	`262`	`+ background: #121212;`
`257`	`263`	`}`
`258`	`264`
`259`	`265`	`.sepiaFW-help-view {`
`260`		`- background: rgba(33, 33, 33, 0.75);`
	`266`	`+ background: #121212;`
`261`	`267`	`}`
`262`	`268`
`263`	`269`	`.sepiaFW-cards-list-title {`
`264`		`- background: #222226;`
	`270`	`+ background: #19191b;`
`265`	`271`	`color: #fff;`
`266`	`272`	`}`
`267`	`273`	`.sepiaFW-cards-list-body {`
`@@ -272,20 +278,27 @@ html {`
`272`	`278`	`color: #fff;`
`273`	`279`	`}`
`274`	`280`	`.sepiaFW-cards-list-body .listElement .checked {`
`275`		`- background: rgba(206, 255, 26, 0.95) !important;`
	`281`	`+ background: #c4f31a !important;`
`276`	`282`	`}`
`277`		`-.sepiaFW-cards-list-body .listElement .listRight:hover {`
`278`		`- background: rgba(255, 0, 0, 0.95) !important;`
	`283`	`+.sepiaFW-notouch-device .sepiaFW-cards-list-body .listElement .unchecked:hover {`
	`284`	`+ background: #ddd !important;`
	`285`	`+}`
	`286`	`+.sepiaFW-notouch-device .sepiaFW-cards-list-body .listElement .listRight:hover {`
	`287`	`+ background: #f30000 !important;`
`279`	`288`	`}`
`280`	`289`
`281`	`290`	`.sepiaFW-cards-list-body .weatherNowSmall .weatherNowSmallImage {`
`282`		`- background: #222226;`
	`291`	`+ background: #000 !important;`
`283`	`292`	`}`
`284`	`293`
`285`	`294`	`.sepiaFW-cards-list-footer {`
`286`	`295`	`background: transparent;`
`287`	`296`	`}`
`288`	`297`
	`298`	`+#sepiaFW-audio-ctrls-canvas {`
	`299`	`+ background: #404050;`
	`300`	`+}`
	`301`	`+`
`289`	`302`	`/----- teachUI -----/`
`290`	`303`
`291`	`304`	`#sepiaFW-teachUI-view {`