Merge pull request #1 from rhymix/develop

Support darkmode
rhymix · Dec 30, 2020 · b6705e7 · b6705e7
2 parents 41c64a6 + 6e0de1e
commit b6705e7
Show file tree

Hide file tree

Showing 8 changed files with 174 additions and 16 deletions.
diff --git a/modules/communication/m.skins/rx_prn/common_header.html b/modules/communication/m.skins/rx_prn/common_header.html
@@ -71,7 +71,7 @@
 </block>
 {@Context::set('prn_less_value', array('red' => hexdec(substr($skin_color, 1, 2)), 'green' => hexdec(substr($skin_color, 3, 2)), 'blue' => hexdec(substr($skin_color, 5, 2)) ))}
 <load target="css/css.less" vars="$prn_less_value" />
-<section class="rx_prn_communication">
+<section class="rx_prn_communication<!--@if($_COOKIE['rx_color_scheme']=='dark')--> rx_prn_darkmode<!--@end-->">
 	<div class="rx_prn_tab" cond="$communication_popup !== TRUE && $is_logged && $logged_info->menu_list && (!$member_srl || $member_srl == $logged_info->member_srl)">
 		<ul class="rx_prn_tab">
 			<li loop="$logged_info->menu_list=>$key,$val" class="active"|cond="$key==$act">

diff --git a/modules/communication/m.skins/rx_prn/css/css.less b/modules/communication/m.skins/rx_prn/css/css.less
@@ -115,9 +115,9 @@ script, style
 	{
 		background-color: #fafafa
 	}
-	.background-gray()
+	.background-darkgray()
 	{
-		background-color: #bdbdbd
+		background-color: #424242
 	}
 	.background-lightpoint()
 	{
@@ -173,14 +173,20 @@ script, style
 					display:inline-block;
 					letter-spacing: -1px;
 					line-height: 3;
-					border-bottom: solid 3px #fff;
+					border-bottom: solid 3px rgba(255,255,255,0);
 					padding: 0 5px;
 					.font-l();
 					.font-bold();
 				}
 				a:hover, a:focus, &.active a{
 					border-bottom: solid 3px @color;
 				}
+				&:first-child {
+					padding-left: 0;
+				}
+				&:last-child {
+					padding-right: 0;
+				}
 			}
 		}
 	}
@@ -427,7 +433,7 @@ script, style
 			&>a
 			{
 				display: inline-block;
-				border-radius: 50%;
+				border-radius: 20px;
 				background-color: #fff;
 				padding: 10px 15px;
 				text-decoration: none;
@@ -463,6 +469,75 @@ script, style
 			}
 		}
 	}
+
+	/* dark-mode */
+	&.rx_prn_darkmode {
+		.font-light();
+
+		a
+		{
+			.font-light();
+		}
+		/* Tab over the main content. */
+		div.rx_prn_tab{
+			background: transparent;
+		}
+		.prn-body {
+			.background-darkgray();
+			color: #fff;
+
+			.prn-anchor-buttons
+			{
+				&>a, &>label, &>button, &>select, &>input[type="submit"]
+				{
+					.background-darkgray();
+					&:hover, &:focus
+					{
+						.bg-contrast(#fff; lighten(@color,5%); darken(@color,5%); 2.0);
+					}
+					&:first-child
+					{
+						border-top: 1px solid #d1d1d1;
+					}
+				}
+			}
+
+			/* The list of document style */
+			.rx_sw_list .cont_a {
+				.font-light();
+				&:hover, &:focus {
+					.text-contrast(#000; darken(@color,5%); lighten(@color,5%));
+				}
+			}
+		}
+		form {
+			div.control-group {
+				&.agreement .text
+				{
+					.font-light();
+				}
+			}
+		}
+
+		.pagination ul
+		{
+			li{
+				&>a
+				{
+					background-color: transparent;
+					&:hover, &:focus
+					{
+						.bg-contrast(#fff; lighten(@color,5%); darken(@color,5%); 1.0);
+					}
+				}
+				&.active>a
+				{
+					.background-darkgray();
+					color:#fff;
+				}
+			}
+		}
+	}
 }
 
 /**

diff --git a/modules/communication/m.skins/rx_prn/js/communication.js b/modules/communication/m.skins/rx_prn/js/communication.js
@@ -98,6 +98,10 @@ function isRxPrnTouchable() {
 }
 
 $(document).ready(function() {
+	/* init color-scheme (auto) */
+	if (getColorScheme() == 'dark' && !getCookie('rx_color_scheme')) {
+		$('.rx_prn_communication').addClass('rx_prn_darkmode');
+	}
 	$('.__submit_group button[type=submit]').click(function(e){
 		var sel_val = $('input[name="friend_srl_list[]"]:checked').length;
 		if(sel_val == 0)

diff --git a/modules/communication/m.skins/rx_prn/skin.xml b/modules/communication/m.skins/rx_prn/skin.xml
@@ -4,8 +4,8 @@
 	<title xml:lang="en">Rhymix PRN</title>
 	<description xml:lang="ko">필요할 때 꺼내보는 라이믹스. 캡슐 모양의 둥근 라이믹스 커뮤니케이션 모듈 스킨입니다.</description>
 	<description xml:lang="en">You need Rhymix. A skin of the communication module of Rhymix with round, capsule-like shapes.</description>
-	<version>0.1</version>
-	<date>2017-08-09</date>
+	<version>0.2</version>
+	<date>2020-12-31</date>
 
 	<author email_address="[email protected]" link="https://github.com/misol">
 		<name xml:lang="ko">misol</name>

diff --git a/modules/member/m.skins/rx_prn/common_header.html b/modules/member/m.skins/rx_prn/common_header.html
@@ -66,7 +66,7 @@
 </block>
 {@Context::set('prn_less_value', array('red' => hexdec(substr($skin_color, 1, 2)), 'green' => hexdec(substr($skin_color, 3, 2)), 'blue' => hexdec(substr($skin_color, 5, 2)) ))}
 <load target="css/css.less" vars="$prn_less_value" />
-<section class="rx_prn_member">
+<section class="rx_prn_member<!--@if($_COOKIE['rx_color_scheme']=='dark')--> rx_prn_darkmode<!--@end-->">
 	<div class="rx_prn_tab" cond="$is_logged && $logged_info->menu_list && (!$member_srl || $member_srl == $logged_info->member_srl)">
 		<ul class="rx_prn_tab">
 			<li loop="$logged_info->menu_list=>$key,$val" class="active"|cond="$key==$act">

diff --git a/modules/member/m.skins/rx_prn/css/css.less b/modules/member/m.skins/rx_prn/css/css.less
@@ -114,11 +114,11 @@ script, style
 
 	.background-lightgray()
 	{
-		background-color: #fafafa
+		background-color: #fafafa;
 	}
-	.background-gray()
+	.background-darkgray()
 	{
-		background-color: #bdbdbd
+		background-color: #424242;
 	}
 	.background-lightpoint()
 	{
@@ -151,7 +151,7 @@ script, style
 	}
 
 	/* Tab over the main content. */
-	div.rx_prn_tab{
+	div.rx_prn_tab {
 		background: #ffffff;
 		margin: 5px 0 0;
 		box-sizing: border-box;
@@ -174,14 +174,20 @@ script, style
 					display:inline-block;
 					letter-spacing: -1px;
 					line-height: 3;
-					border-bottom: solid 3px #fff;
+					border-bottom: solid 3px rgba(255,255,255,0);
 					padding: 0 5px;
 					.font-l();
 					.font-bold();
 				}
 				a:hover, a:focus, &.active a{
 					border-bottom: solid 3px @color;
 				}
+				&:first-child {
+					padding-left: 0;
+				}
+				&:last-child {
+					padding-right: 0;
+				}
 			}
 		}
 	}
@@ -484,7 +490,7 @@ script, style
 			&>a
 			{
 				display: inline-block;
-				border-radius: 50%;
+				border-radius: 20px;
 				background-color: #fff;
 				padding: 10px 15px;
 				text-decoration: none;
@@ -520,5 +526,74 @@ script, style
 			}
 		}
 	}
+
+	/* dark-mode */
+	&.rx_prn_darkmode {
+		.font-light();
+
+		a
+		{
+			.font-light();
+		}
+		/* Tab over the main content. */
+		div.rx_prn_tab{
+			background: transparent;
+		}
+		.prn-body {
+			.background-darkgray();
+			color: #fff;
+
+			.prn-anchor-buttons
+			{
+				&>a, &>label, &>button, &>select, &>input[type="submit"]
+				{
+					.background-darkgray();
+					&:hover, &:focus
+					{
+						.bg-contrast(#fff; lighten(@color,5%); darken(@color,5%); 2.0);
+					}
+					&:first-child
+					{
+						border-top: 1px solid #d1d1d1;
+					}
+				}
+			}
+
+			/* The list of document style */
+			.rx_sw_list .cont_a {
+				.font-light();
+				&:hover, &:focus {
+					.text-contrast(#000; darken(@color,5%); lighten(@color,5%));
+				}
+			}
+		}
+		form {
+			div.control-group {
+				&.agreement .text
+				{
+					.font-light();
+				}
+			}
+		}
+
+		.pagination ul
+		{
+			li{
+				&>a
+				{
+					background-color: transparent;
+					&:hover, &:focus
+					{
+						.bg-contrast(#fff; lighten(@color,5%); darken(@color,5%); 1.0);
+					}
+				}
+				&.active>a
+				{
+					.background-darkgray();
+					color:#fff;
+				}
+			}
+		}
+	}
 }
 
diff --git a/modules/member/m.skins/rx_prn/js/member.js b/modules/member/m.skins/rx_prn/js/member.js
@@ -172,6 +172,10 @@ function isRxPrnTouchable() {
 }
 
 $(document).ready(function() {
+	/* init color-scheme (auto) */
+	if (getColorScheme() == 'dark' && !getCookie('rx_color_scheme')) {
+		$('.rx_prn_member').addClass('rx_prn_darkmode');
+	}
 	if(isRxPrnTouchable()) {
 		$(".rx_prn_member div.rx_prn_tab ul.rx_prn_tab").css('white-space', 'nowrap');
 		try

diff --git a/modules/member/m.skins/rx_prn/skin.xml b/modules/member/m.skins/rx_prn/skin.xml
@@ -4,8 +4,8 @@
 	<title xml:lang="en">Rhymix PRN</title>
 	<description xml:lang="ko">필요할 때 꺼내보는 라이믹스. 캡슐 모양의 둥근 라이믹스 회원 모듈 스킨입니다.</description>
 	<description xml:lang="en">You need Rhymix. A member skin with round, capsule-like shapes.</description>
-	<version>0.1</version>
-	<date>2017-08-06</date>
+	<version>0.2</version>
+	<date>2020-12-31</date>
 	<author email_address="[email protected]" link="https://github.com/misol">
 		<name xml:lang="ko">misol</name>
 		<name xml:lang="en">misol</name>