daphnis/app/globals.css

329 lines
5.4 KiB
CSS
Raw Normal View History

2024-06-29 05:22:22 +00:00
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 222.2 84% 4.9%;
--radius: 0.5rem;
}
.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;
--popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%;
--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 11.2%;
--secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%;
--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%;
--accent: 217.2 32.6% 17.5%;
--accent-foreground: 210 40% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%;
--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
--ring: 212.7 26.8% 83.9%;
}
}
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
2024-07-01 18:45:16 +00:00
}
2024-07-24 19:18:05 +00:00
img,
video {
max-width: revert;
height: revert;
}
/*
* CHUSAN AVATAR
*/
.avatar_group {
width: 420px;
height: 330px;
margin: 0px auto 0px auto;
/* background-color: red; */
position: relative;
}
/* Mobile Styles */
@media screen and (max-width: 480px) {
.avatar_group {
width: 100%; /* Adjust width for mobile */
height: auto; /* Adjust height as needed */
/* You can also adjust other properties as needed */
}
}
/* アバター土台 */
.avatar_base {
width: 272px;
height: 330px;
padding: 10px 0 0 0;
position: relative;
margin: 0px auto 0px auto;
overflow: hidden;
}
/* 背景 */
.avatar_back {
display: block;
width: 272px;
height: 330px;
position: absolute;
top: 25px;
z-index: 100;
}
/* 右足 */
.avatar_skinfoot_r {
display: block;
width: 42px;
height: 52px;
position: absolute;
overflow: hidden;
z-index: 101;
top: 280px;
left: 84px;
}
.avatar_skinfoot_r img {
transform: translate(0px, -204px);
}
/* 左足 */
.avatar_skinfoot_l {
display: block;
width: 42px;
height: 52px;
position: absolute;
overflow: hidden;
z-index: 102;
top: 280px;
left: 147px;
}
.avatar_skinfoot_l img {
transform: translate(-42px, -204px);
}
/* デフォルト髪の毛 */
.avatar_hair {
display: block;
width: 46px;
height: 78px;
position: absolute;
overflow: hidden;
z-index: 103;
top: 21px;
left: 110px;
}
.avatar_hair img {
transform: translate(0px, 0px);
}
/* 体色 */
.avatar_skin {
display: block;
width: 128px;
height: 204px;
position: absolute;
overflow: hidden;
z-index: 104;
top: 93px;
left: 72px;
}
.avatar_skin img {
transform: translate(0px, 0px);
}
/* 衣装 */
.avatar_wear {
display: block;
width: 258px;
height: 218px;
position: absolute;
overflow: hidden;
z-index: 105;
top: 106px;
left: 7px;
}
.avatar_wear img {
transform: translate(0px, 0px);
}
/* 表情 */
.avatar_face {
display: block;
width: 58px;
height: 64px;
position: absolute;
overflow: hidden;
z-index: 106;
top: 100px;
left: 107px;
}
.avatar_face img {
transform: translate(0px, 0px);
}
/* 表情 */
.avatar_face_static {
display: block;
width: 58px;
height: 64px;
position: absolute;
overflow: hidden;
z-index: 106;
top: 100px;
left: 107px;
}
.avatar_face img {
transform: translate(0px, 0px);
}
/* フェイスカバー */
.avatar_face {
display: block;
width: 116px;
height: 104px;
position: absolute;
overflow: hidden;
z-index: 107;
top: 96px;
left: 78px;
}
.avatar_faceCover img {
transform: translate(0px, 0px);
}
/* 頭 */
.avatar_head {
display: block;
width: 200px;
height: 150px;
position: absolute;
overflow: hidden;
z-index: 108;
top: 28px;
left: 37px;
}
.avatar_head img {
transform: translate(0px, 0px);
}
/* 右手 */
.avatar_hand_r {
display: block;
width: 36px;
height: 72px;
position: absolute;
overflow: hidden;
z-index: 108;
top: 178px;
left: 52px;
}
.avatar_hand_r img {
transform: translate(0px, 0px);
}
/* 左手 */
.avatar_hand_l {
display: block;
width: 36px;
height: 72px;
position: absolute;
overflow: hidden;
z-index: 109;
top: 178px;
left: 184px;
}
.avatar_hand_l img {
transform: translate(0px, 0px);
}
/* 右アイテム */
.avatar_item_r {
display: block;
width: 100px;
height: 272px;
position: absolute;
overflow: hidden;
z-index: 109;
transform: rotate(-5deg);
top: 50px;
left: 9px;
}
.avatar_item_r img {
transform: translate(0px, 0px);
}
/* 左アイテム */
.avatar_item_l {
display: block;
width: 100px;
height: 272px;
position: absolute;
overflow: hidden;
z-index: 110;
transform: rotate(5deg);
top: 50px;
left: 163px;
}
.avatar_item_l img {
transform: translate(-100px, 0px);
}