PublicMirrors/voice-changer
1
0
Fork 0
mirror of https://github.com/w-okada/voice-changer.git synced 2025-03-14 20:03:59 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix css overflow hidden

Browse Source
This commit is contained in:
wataru 2023-01-28 15:07:32 +09:00
parent 9cc7dc5eb7
commit 6d3d4bdd79
2 changed files with 30 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/demo/src/000_index.tsx
View File

@ -36,7 +36,7 @@ const App = () => {
return ( return (
<div className="body"> <div className="main-body">
<div className="body-row split-6-4"> <div className="body-row split-6-4">
<div className="body-top-title"> <div className="body-top-title">
Voice Changer Setting Voice Changer Setting

61
client/demo/src/css/App.css
View File

@ -42,6 +42,8 @@ html {
body { body {
height: 100%; height: 100%;
width: 100%; width: 100%;
overflow-y: scroll;
overflow-x: hidden;
color: var(--text-color); color: var(--text-color);
/* background: linear-gradient(45deg, var(--company-color1) 0, 5%, var(--company-color2) 5% 10%, var(--company-color3) 10% 80%, var(--company-color1) 80% 85%, var(--company-color2) 85% 100%); */ /* background: linear-gradient(45deg, var(--company-color1) 0, 5%, var(--company-color2) 5% 10%, var(--company-color3) 10% 80%, var(--company-color1) 80% 85%, var(--company-color2) 85% 100%); */
background: linear-gradient(45deg, var(--company-color1) 0, 1%, var(--company-color2) 1% 5%, var(--company-color3) 5% 80%, var(--company-color1) 80% 85%, var(--company-color2) 85% 100%); background: linear-gradient(45deg, var(--company-color1) 0, 1%, var(--company-color2) 1% 5%, var(--company-color3) 5% 80%, var(--company-color1) 80% 85%, var(--company-color2) 85% 100%);
@ -50,16 +52,14 @@ body {
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
.main-body {
.body {
height: 100%; height: 100%;
width: 100%; width: 100%;
margin: 1rem; padding: 2rem;
font-family: "Yusei Magic", sans-serif; font-family: "Yusei Magic", sans-serif;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-size: 1rem; font-size: 1rem;
overflow-y: scroll;
} }
.body-row { .body-row {
} }
@ -147,7 +147,7 @@ body {
width: 40%; width: 40%;
} }
} }
.split-3-2-2-2-1{ .split-3-2-2-2-1 {
display: flex; display: flex;
width: 100%; width: 100%;
justify-content: center; justify-content: center;
@ -173,7 +173,7 @@ body {
width: 10%; width: 10%;
} }
} }
.split-3-1-1-1-4{ .split-3-1-1-1-4 {
display: flex; display: flex;
width: 100%; width: 100%;
justify-content: center; justify-content: center;
@ -198,7 +198,6 @@ body {
left: 60%; left: 60%;
width: 40%; width: 40%;
} }
} }
.underline { .underline {
border-bottom: 3px solid #333; border-bottom: 3px solid #333;
@ -218,14 +217,14 @@ body {
.highlight { .highlight {
background-color: rgba(200, 200, 255, 0.3); background-color: rgba(200, 200, 255, 0.3);
} }
.guided{ .guided {
/* background-color: rgba(9, 133, 67, 0.3); */ /* background-color: rgba(9, 133, 67, 0.3); */
background-color: rgba(159, 165, 162, 0.1); background-color: rgba(159, 165, 162, 0.1);
/* border-bottom: 1px solid rgba(9, 133, 67, 0.3); */ /* border-bottom: 1px solid rgba(9, 133, 67, 0.3); */
} }
.divider { .divider {
height:4px; height: 4px;
/* background-color: rgba(16, 210, 113, 0.1); */ /* background-color: rgba(16, 210, 113, 0.1); */
background-color: rgba(31, 42, 36, 0.1); background-color: rgba(31, 42, 36, 0.1);
} }
@ -233,25 +232,24 @@ body {
.body-top-title { .body-top-title {
font-size: 3rem; font-size: 3rem;
} }
.body-top-title-belongings{ .body-top-title-belongings {
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
justify-content: flex-start; justify-content: flex-start;
& > div { & > div {
margin-left:10px; margin-left: 10px;
margin-right:10px; margin-right: 10px;
} }
&>.belonging-item{ & > .belonging-item {
&>.link{ & > .link {
text-decoration: none; text-decoration: none;
&>span{ & > span {
font-size: small; font-size: small;
} }
} }
} }
} }
.body-section-title { .body-section-title {
font-size: 1.5rem; font-size: 1.5rem;
color: rgb(51, 49, 49); color: rgb(51, 49, 49);
@ -267,7 +265,7 @@ body {
} }
.body-item-text { .body-item-text {
color: rgb(30, 30, 30); color: rgb(30, 30, 30);
.body-item-text-item{ .body-item-text-item {
padding-left: 1rem; padding-left: 1rem;
} }
} }
@ -276,7 +274,7 @@ body {
font-size: 0.7rem; font-size: 0.7rem;
} }
.body-item-input { .body-item-input {
width:90%; width: 90%;
} }
.body-button-container { .body-button-container {
@ -284,19 +282,18 @@ body {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
& > div { & > div {
margin-left:5px; margin-left: 5px;
margin-right:5px; margin-right: 5px;
padding-left:20px; padding-left: 20px;
padding-right:20px; padding-right: 20px;
} }
.body-button { .body-button {
user-select: none; user-select: none;
border: solid 1px #999; border: solid 1px #999;
border-radius: 2px; border-radius: 2px;
cursor:pointer; cursor: pointer;
vertical-align:middle; vertical-align: middle;
&:hover{ &:hover {
border: solid 1px #000; border: solid 1px #000;
} }
} }
@ -304,22 +301,22 @@ body {
user-select: none; user-select: none;
border: solid 1px #999; border: solid 1px #999;
border-radius: 2px; border-radius: 2px;
vertical-align:middle; vertical-align: middle;
background:#ddd; background: #ddd;
} }
.body-button-active { .body-button-active {
user-select: none; user-select: none;
border: solid 1px #333; border: solid 1px #333;
border-radius: 2px; border-radius: 2px;
background:#ada; background: #ada;
} }
.body-button-stanby { .body-button-stanby {
user-select: none; user-select: none;
border: solid 1px #999; border: solid 1px #999;
border-radius: 2px; border-radius: 2px;
background:#aba; background: #aba;
cursor:pointer; cursor: pointer;
&:hover{ &:hover {
border: solid 1px #000; border: solid 1px #000;
} }
} }