컬러닷지: 두 판 사이의 차이

2023년 8월 12일 (토) 13:41 판

ios는 지원되지 않습니다.

@@ 1번째 줄: / 1번째 줄: @@
 {{#css:
-    .gamebody{
+	.gamebody{
-        background:hsl(200, 100%, 90%);
+		background:hsl(200, 100%, 90%);
-        container: gamemain / inline-size;
+		container: gamemain / inline-size;
-        --color-skyblue: hsl(200, 100%, 80%);
+		--color-skyblue: hsl(200, 100%, 80%);
-        --color-skyblue-light: hsl(200, 100%, 90%);
+		--color-skyblue-light: hsl(200, 100%, 90%);
-        --color-rose: hsl(330, 100%, 80%);
+		--color-skyblue-dark: hsl(200, 100%, 70%);
-    }
+		--color-rose: hsl(330, 100%, 80%);
+	}
-    .game{
+	.game{
-        height: 100%;
+		height: 100%;
-    }
+	}
-    .game.lobby, .game.result{
+	.game.lobby, .game.result{
-        display:flex; flex-direction:column; justify-content:center; align-items:center;
+		display:flex; flex-direction:column; justify-content:center; align-items:center;
-        justify-content: space-around;
+		justify-content: space-around;
-    }
+	}
-    .game .title{
+	.game .title{
-        -webkit-text-stroke:4px white;
+		-webkit-text-stroke:4px white;
-        font-size: 18cqw;
+		font-size: 18cqw;
-        font-weight: bold;
+		font-weight: bold;
-    }
+	}
-    .game .title .skyblue{
+	.game .title .skyblue{
-        color: var(--color-skyblue);
+		color: var(--color-skyblue);
-    }
+	}
-    .game .title .rose{
+	.game .title .rose{
-        color: var(--color-rose);
+		color: var(--color-rose);
-    }
+	}
-    .game .btn{
+	.game .btn{
-        font-size: 4cqw;
+		font-size: 4cqw;
-        color: #fff;
+		color: #fff;
-        font-weight: bold;
+		font-weight: bold;
-        border: 4px solid #fff;
+		border: 4px solid #fff;
-        padding: 8px 16px;
+		padding: 8px 16px;
-        border-radius: 8px;
+		border-radius: 8px;
-        background: var(--color-skyblue);
+		background: var(--color-skyblue);
-        transition: 0.2s all;
+		transition: 0.2s all;
-        cursor: pointer;
+		cursor: pointer;
-    }
+	}
-    .game.play .bg{
+	.game.play .bg{
-        position: absolute;
+		position: absolute;
-        top: 0;
+		top: 0;
-        left: 0;
+		left: 0;
-        width: 100%;
+		width: 100%;
-        height: 100%;
+		height: 100%;
-        background-color: rgba(0,0,0, 0.5);
+		background-color: rgba(0,0,0, 0.5);
-        background-size: cover;
+		background-size: cover;
-        background-position: center;
+		background-position: center;
-        display:flex;
+		display:flex;
-        justify-content:center;
+		justify-content:center;
-        align-items:center;
+		align-items:center;
-    }
+		color: #fff;
+	}
+	.game.play > .bg{
+		z-index:10;
+	}
-    .game.play{
+	.game.play{
-        display:grid;
+		display:grid;
-        grid-template-rows: 30px 1fr;
+		grid-template-rows: 30px 1fr;
-    }
+		padding: 8px;
+		box-sizing: border-box;
+	}
-    .game .timer{
+	.game .timer{
-        text-align:center;
+		text-align:center;
-    }
+		position: relative;
+	}
+	.game .timer .remain{
+		z-index:2;
+		position: relative;
+	}
-    .game .btn:hover{
+	.game .btn:hover{
-        background: var(--color-skyblue-light);
+		background: var(--color-skyblue-light);
-        transform: scale(1.1);
+		transform: scale(1.1);
-    }
+	}
-    .game .btn-wrapper{
+	.game .btn-wrapper{
-        display:flex; flex-direction:row; justify-content:center; align-items:center; gap: 16px;
+		display:flex; flex-direction:row; justify-content:center; align-items:center; gap: 16px;
-    }
+	}
+	.game .score{
+		font-size: 8cqw;
+		font-weight: bold;
+		color: var(--color-skyblue);
+		-webkit-text-stroke: 1px white;
+	}
+	.game .icon{
+		font-size:1.2em;
+	}
+	.game .rating{
+		background:#fff;
+		border-radius: 8px;
+		padding: 8px 16px;
+		font-size: 4cqw;
+		font-weight: bold;
+		color: var(--color-skyblue-dark);
+		border: 4px solid var(--color-skyblue-dark);
+		display: flex;
+		align-items: center;
+	}
 }}
-{{플러그인X|/스크립트}}
+<!-- {{플러그인X|/스크립트}}-->
 ios는 지원되지 않습니다.
+{{장르 분류}}
+[[분류:리버티게임]]