Skip to content

Commit

Permalink
Fix: 디자인 변경, 폴더 및 파일 이름 제한
Browse files Browse the repository at this point in the history
  • Loading branch information
@leehj050211
leehj050211 committed Apr 4, 2022
1 parent 9b36a38 commit a7fa668
Show file tree
Hide file tree
Showing 9 changed files with 153 additions and 93 deletions.
27 changes: 5 additions & 22 deletions public/css/pages/drive.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,9 @@ main{
/* dir bar start*/

#dir_bar{
position:sticky;
top:0;
z-index:1;
width:100%;
background-color:var(--level-1);
box-shadow:var(--shadow);
Expand All @@ -19,16 +22,6 @@ main{
white-space:nowrap;
scroll-behavior:smooth;
}
#dirs::-webkit-scrollbar{
height:.8rem;
}
#dirs::-webkit-scrollbar-thumb{
background-color:rgb(192,192,192);
border-radius:1rem;
}
#dirs::-webkit-scrollbar-track{
background-color:rgba(0,0,0,0);
}
.dir{
display:flex;
font-size:2.4rem;
Expand Down Expand Up @@ -64,16 +57,6 @@ main{
display:inline-block;
overflow:auto;
}
#file_section::-webkit-scrollbar{
width:.8rem;
}
#file_section::-webkit-scrollbar-thumb{
background-color:rgb(192,192,192);
border-radius:1rem;
}
#file_section::-webkit-scrollbar-track{
background-color:rgba(0,0,0,0);
}
#files {
display:grid;
grid-template-columns:repeat(auto-fill, minmax(25rem, 1fr));
Expand Down Expand Up @@ -139,7 +122,7 @@ main{
filter:var(--bright);
}

@media screen and (min-width:0px) and (max-width:600px){
@media screen and (min-width:0px) and (max-width:920px){
#files{
grid-template-columns:repeat(auto-fill, minmax(20rem, 1fr));
}
Expand Down Expand Up @@ -180,7 +163,7 @@ main{
#file_info *{
word-break:break-all;
}
@media screen and (min-width:0px) and (max-width:900px){
@media screen and (min-width:0px) and (max-width:850px){
#file_info_bar{
min-width:35rem;
}
Expand Down
166 changes: 112 additions & 54 deletions public/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,27 +12,27 @@ a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, bo
}
:root{
--black: #000;
--gray: #C0C0C0;
--light_gray:#AAAAAA;
--white: #FFF;
--red: #FA8072;
--yellow:#FFA500;
--gray: #c0c0c0;
--light_gray:#aaa;
--white: #fff;
--red: #e46b5d;
--yellow:#ffa500;
--green: #7ee27e;

--main: #77a3f5;

--main: #1188bb;
--accent: #1188bb;
--text: #202124;
--accent-text: #e8eaed;
--text-level-1: #505154;
--text-level-2: #808184;
--text-level-3: #b0b1b4;
--background: #f9f9f9;
--background: #ededed;

--level-1: #f9f9f9;
--level-2: #DDD;
--level-2: #f9f9f9;

--input: rgba(192, 192, 192, .3);

--menu-background: #FFFFFF88;

--dim: rgba(0, 0, 0, .3);
--shadow: .1rem .1rem 1rem rgba(0, 0, 0, .2);
--hover: rgba(0, 0, 0, .2);
Expand All @@ -42,14 +42,16 @@ a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, bo
:root.dark{
--black: #000;
--gray: #525252;
--light_gray:#AAAAAA;
--white: #FFF;
--red: #e46b5d;
--yellow:#FF8C00;
--light_gray:#aaa;
--white: #fff;
--red: #fa8072;
--yellow:#ff8c00;
--green: #72c472;

--main: #4682B4;

--main: #62cdfe;
--accent: #62cdfe;
--text: #e8eaed;
--accent-text: #202124;
--text-level-1: #b8babd;
--text-level-2: #888a8d;
--text-level-3: #585a5d;
Expand All @@ -60,12 +62,9 @@ a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, bo

--input: rgba(192, 192, 192, .3);

--menu-background: #20212488;

--dim: rgba(0, 0, 0, .3);
--shadow: .1rem .1rem 1rem rgba(0, 0, 0, .2);
--hover: #80808066;
--hover-level-2: #808080BB;
--hover: #a8aaad66;
--bright: brightness(20);
--visited: #f4a4ff;
}
Expand All @@ -74,18 +73,35 @@ html{
/* 1rem == 10px */
scroll-behavior:smooth;
height: calc(var(--vh, 1vh) * 100);
overflow:auto;
overflow:overlay;
scroll-snap-type:y proximity;
}
html::-webkit-scrollbar{
width:.8rem;
width:2rem;
height:2rem;
}
html::-webkit-scrollbar-thumb{
background-color:rgb(192,192,192);
border-radius:1rem;
background-color:var(--text-level-1);
border-radius:1rem;
border:.8rem solid transparent;
background-clip:padding-box;
}
html::-webkit-scrollbar-track{
background-color:rgba(0,0,0,0);
.scroll_bar{
overflow:overlay;
}
.scroll_bar::-webkit-scrollbar{
width:2rem;
height:2rem;
}
.scroll_bar::-webkit-scrollbar-thumb{
background-color:var(--text-level-1);
border-radius:1rem;
border:.8rem solid transparent;
background-clip:padding-box;
}
body.no_scroll{
height:100%;
overflow:hidden;
}
body{
background-color:var(--background);
Expand Down Expand Up @@ -197,17 +213,21 @@ summary{
display: inline-block;
}
.dropdown_content {
transform:translateY(-1.5rem);
right:0;
opacity:0;
pointer-events:none;
position: absolute;
text-align:center;
font-size:1.6rem;
font-weight:bold;
z-index: 100;
border-radius:.5rem;
box-shadow:var(--shadow);
background-color:var(--menu-background);
background-color:var(--level-1);
transition:all .25s;
}
.dropdown_content li{
transition:.25s;
}
.dropdown_content li:first-child{
border-radius:.5rem .5rem 0rem 0rem;
Expand All @@ -225,27 +245,49 @@ summary{
cursor:pointer;
}
.dropdown_menu:hover .dropdown_content{
opacity:1;pointer-events:unset;
transform:translateY(0);
opacity:1;
pointer-events:unset;
}
.dropdown_menu > .select::after{
content:' ▼';
}
.dropdown_menu > .select{
position:relative;
z-index:1;
padding-right:2rem;
}

.full{
width:100% !important;
}
.input_text, textarea, .textarea{
border:none; color:var(--text); width:37.5rem; font-weight:bold; font-size:1.5rem; margin:1rem 0; outline:.2rem solid #00000000; padding:1.5rem; border-radius:.5rem;
border:none;
color:var(--text);
width:37.5rem;
font-weight:bold;
font-size:1.5rem;
margin:1rem 0;
outline:.2rem solid #00000000;
padding:1.5rem;
border-radius:.5rem;
background-color:var(--input);
text-align:left;
transition:.25s;
}
input[type=number]{
width:5.5rem;
padding:1rem 0 1rem 1rem;
}
input[type=number].year{
width:8rem;
padding:1rem .5rem 1rem 1rem;
padding:1rem 0 1rem 1rem;
}
.input_text::placeholder, input[type=number]::placeholder, textarea::placeholder, .textarea::placeholder{
color:var(--text);
}
.input_text:hover, input[type=number]:hover, textarea:hover, .textarea:hover{
box-shadow:var(--shadow);
box-shadow:var(--shadow) inset;
background-color:var(--hover) !important;
}
.popup .input_text:hover, input[type=number]:hover, textarea:hover, .textarea:hover{
Expand All @@ -264,23 +306,41 @@ input[type=file]{
}
.button{
width:auto;
color:var(--white);
color:var(--text);
border:none;
padding:1.5rem 2rem;
padding:1.5rem 2.5rem;
text-align:center;
text-decoration:none;
display:inline-block;
font-size:1.5rem;
font-weight:bold;
cursor:pointer;
border-radius:.75rem;
background-color:var(--main);
background-color:var(--level-2);
transition:.25s;
}
.button:hover{
box-shadow:var(--shadow);
background-color:var(--hover) !important;
}
.accent{
color:var(--accent-text);
background-color:var(--accent);
}
.delete, .button.off{
color:var(--accent-text);
background-color:var(--red) !important;
}
.button.on{
color:var(--accent-text);
background-color:var(--green) !important;
}
.inactive{
color:var(--text) !important;
background-color:var(--gray) !important;
opacity:.5;
cursor:not-allowed;
}
.clear_button{
background:none;
border:none;
Expand All @@ -299,21 +359,11 @@ input[type=file]{
width:100%;
flex:1;
}
.button_on{
background-color:var(--green) !important;
}
.button_off, .delete_button{
background-color:var(--red) !important;
}

.icon object{
pointer-events:none;
filter:var(--bright);
}
.none_active{
background-color:var(--gray);
cursor:not-allowed;
}

.popup{
position:fixed;
Expand All @@ -325,7 +375,7 @@ input[type=file]{
border-radius:2rem;
box-shadow:var(--shadow);
background-color:var(--level-1);
z-index:99;
z-index:101;
display:none;
}
.popup.on{
Expand Down Expand Up @@ -361,7 +411,7 @@ input[type=file]{
gap:2rem;
margin-bottom:3rem;
}
.popup input[type=text]{
.popup input:not([type=number]){
display:block;
margin-bottom:2rem;
}
Expand All @@ -375,7 +425,7 @@ input[type=file]{
position:fixed;
bottom:2rem;
right:1rem;
z-index:99;
z-index:102;
display:flex;
flex-direction:column-reverse;
box-shadow:var(--shadow);
Expand Down Expand Up @@ -523,7 +573,18 @@ input[type=file]{

@media screen and (min-width:0px) and (max-width:1023px){
html::-webkit-scrollbar{
width:2px;
width:1rem;
height:1rem;
}
html::-webkit-scrollbar-thumb{
border:.4rem solid transparent;
}
.scroll_bar::-webkit-scrollbar{
width:1rem;
height:1rem;
}
.scroll_bar::-webkit-scrollbar-thumb{
border:.4rem solid transparent;
}
h1{
font-size:3.2rem;
Expand All @@ -540,10 +601,7 @@ input[type=file]{
main,.container{
width:auto;
}
.input_text{
width:32.5rem;
}
.popup.main{
.input_text, .popup.main{
width:32.5rem;
}
}
Loading

0 comments on commit a7fa668

Please sign in to comment.