djordje.djoric
/
secure-sharing
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

css changes

master
radivoje.milutinovic 3 years ago
parent
5004770830
commit
5987d93563
2 changed files with 94 additions and 52 deletions
Unified View Show Diff Stats
  1. 37
    29
      SecureSharing/Views/Home/Index.cshtml
  2. 57
    23
      SecureSharing/wwwroot/css/site.css

+ 37
- 29
SecureSharing/Views/Home/Index.cshtml View File



<h1>Share files</h1> <h1>Share files</h1>
<form method="post" enctype="multipart/form-data" asp-controller="Home" asp-action="CreateMessage" class="share-files-form"> <form method="post" enctype="multipart/form-data" asp-controller="Home" asp-action="CreateMessage" class="share-files-form">
<label class="label-text">Sharing link avaliability</label>
<div class="button-box col-lg-12">
<div class="single-button-input">
<input id="OneTime" checked="checked" class="radio-input" type="radio" asp-for="ChosenPeriod" value="@PeriodOfValidity.ONE_TIME">
<label for="OneTime" class="label-available"><span style="color:#FFA463">One</span> Time</label>
</div>
<div class="single-button-input">
<input id="OneHour" class="radio-input" type="radio" asp-for="ChosenPeriod" value="@PeriodOfValidity.ONE_HOUR"/> <label for="OneHour" class="label-available">1 <span style="color:#B9CFE4;">hour</span></label>
</div>
<div class="single-button-input">
<input id="OneDay" class="radio-input" type="radio" asp-for="ChosenPeriod" value="@PeriodOfValidity.ONE_DAY"/> <label for="OneDay" class="label-available">1 <span style="color:#B9CFE4;">day</span></label>
</div>
<div class="single-button-input">
<input id="SevenDays" class="radio-input" type="radio" asp-for="ChosenPeriod" value="@PeriodOfValidity.ONE_WEEK"/> <label for="SevenDays" class="label-available">7 <span style="color:#B9CFE4;">days</span></label>
<div class="mb-3">
<label class="label-text">Sharing link avaliability</label>
<div class="button-box row">
<div class="single-button-input col-4">
<input id="OneTime" checked="checked" class="radio-input" type="radio" asp-for="ChosenPeriod" value="@PeriodOfValidity.ONE_TIME">
<label for="OneTime" class="label-available"><span style="color:#FFA463">One</span> Time</label>
</div>
<div class="single-button-input d-none">
<input id="OneHour" class="radio-input" type="radio" asp-for="ChosenPeriod" value="@PeriodOfValidity.ONE_HOUR"/> <label for="OneHour" class="label-available">1 hour</label>
</div>
<div class="single-button-input col-4">
<input id="OneDay" class="radio-input" type="radio" asp-for="ChosenPeriod" value="@PeriodOfValidity.ONE_DAY"/> <label for="OneDay" class="label-available">1 day</label>
</div>
<div class="single-button-input col-4">
<input id="SevenDays" class="radio-input" type="radio" asp-for="ChosenPeriod" value="@PeriodOfValidity.ONE_WEEK"/> <label for="SevenDays" class="label-available">7 days</label>
</div>
</div> </div>
</div> </div>
<label class="label-text">Message (optional)</label>
<textarea asp-for="Text" class="input-message"></textarea>
<label class="label-text">Upload files</label>
<div id="dropContainer" class="drop-here">
<img class="image-file-upload" src="~/img/file-upload-image.png" alt=""/>
<div class="default-text text-files-upload">
<label for="fileInput" class="btn browse-button">
<span style="color:#0D1C52">Drag and drop files here or</span> browse
</label>
<input asp-for="Files" id="fileInput" type="file" multiple style="display: none"/>
<input asp-for="FilesAsText" id="fileInputAsText" type="text" style="display:none" value="978682e8-3ce7-4258-b731-d027b5b213aa"/>
<div class="mb-3">
<label class="label-text">Message (optional)</label>
<textarea asp-for="Text" class="input-message"></textarea>
</div>
<div class="mb-3">
<label class="label-text">Upload files</label>
<div id="dropContainer" class="drop-here">
<img class="image-file-upload" src="~/img/file-upload-image.png" alt=""/>
<div class="default-text text-files-upload">
<label for="fileInput" class="btn browse-button">
<span style="color:#0D1C52">Drag and drop files here or</span> browse
</label>
<input asp-for="Files" id="fileInput" type="file" multiple style="display: none"/>
<input asp-for="FilesAsText" id="fileInputAsText" type="text" style="display:none" value="978682e8-3ce7-4258-b731-d027b5b213aa"/>
</div>
</div> </div>
</div> </div>


<div class="label-text">
Your files
</div>
<div id="filesUploaded">
<div class="mb-3">
<div class="label-text">
Your files
</div>
<div id="filesUploaded">
</div>
</div> </div>


<button class=" btn btn-light share-button" type="submit">Share</button> <button class=" btn btn-light share-button" type="submit">Share</button>

+ 57
- 23
SecureSharing/wwwroot/css/site.css View File

border-color: rgb(255, 0, 0); border-color: rgb(255, 0, 0);
} }


body{
body {
background: url('../img/gradient.png') no-repeat center center fixed; background: url('../img/gradient.png') no-repeat center center fixed;
-webkit-background-size: cover; -webkit-background-size: cover;
-moz-background-size: cover; -moz-background-size: cover;
background-size: cover; background-size: cover;
size: 16px; size: 16px;
font-weight: bold; font-weight: bold;
min-height: 100vh;
height: fit-content;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
} }


.image-logo { .image-logo {
padding: 32px; padding: 32px;
gap: 24px; gap: 24px;


position: absolute;
width: 600px;
height: 800px;
left: calc(50vw - 300px);
top: calc(50vh - 400px);
max-width: 600px;
height: fit-content;
overflow-y: auto; overflow-y: auto;
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: #ddd; scrollbar-color: #ddd;
color: #0D1C52; color: #0D1C52;
box-shadow: none; box-shadow: none;
border-radius: 32px; border-radius: 32px;
margin: 1.3rem;
} }

.modal::-webkit-scrollbar { .modal::-webkit-scrollbar {
width: 5px; width: 5px;
} }

.modal::-webkit-scrollbar-track { .modal::-webkit-scrollbar-track {
background: #ddd; background: #ddd;


} }

.modal::-webkit-scrollbar-thumb { .modal::-webkit-scrollbar-thumb {
background: #777; background: #777;
} }


.modal-content {
border-radius: 18px;
}

.image-logo {
margin-bottom: 2rem;
}


.share-files { .share-files {
text-align: left !important; text-align: left !important;
align-items: initial; align-items: initial;
width: 100%; width: 100%;
} }


h1 {
text-align: center;
font-size: 2rem;
margin-bottom: 2rem;
}

.share-files-form { .share-files-form {
color: #0D1C52; color: #0D1C52;
width: 100%; width: 100%;
} }

.button-box { .button-box {
text-align:center;
margin-top:10px;
text-align: center;
margin-top: 10px;
margin-bottom: 0; margin-bottom: 0;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
gap: 8px;
padding: 0; padding: 0;
} }

.single-button-input { .single-button-input {
flex: 1;
} }


.radio-input { .radio-input {
border: 1px solid #0D1C52; border: 1px solid #0D1C52;
border-radius: 5px; border-radius: 5px;
width: 100%; width: 100%;
height: 55px;
padding-top: 15px;
justify-content: center;
align-items: center;
display: flex;
height: fit-content;
} }


.label-text { .label-text {
font-size: 23px;
font-size: 1.3rem;
padding-left: 4px; padding-left: 4px;
} }


.label-text-lower{
.label-text-lower {
font-size: 16px; font-size: 16px;
color: #FFA463; color: #FFA463;
} }
padding: 32px; padding: 32px;
gap: 10px; gap: 10px;


text-transform: capitalize;
width: 100%; width: 100%;
height: 94px;
margin-top: 14px;
background: #90278F; background: #90278F;
border-radius: 30px;


margin-top: 2rem;
font-size: 1.3rem;
height: 72px;
border-radius: 18px;
/* Inside auto layout */ /* Inside auto layout */


flex: none; flex: none;
align-self: stretch; align-self: stretch;
flex-grow: 0; flex-grow: 0;
color: #FFFFFF; color: #FFFFFF;
font-size: 35px;
}

#filesUploaded {
font-weight: 500;
} }


.share-button:hover { .share-button:hover {
gap: 10px; gap: 10px;


width: 100%; width: 100%;
height: 94px;
margin-top: 14px;
background: #FFA463; background: #FFA463;
border-radius: 30px;
margin-top: 2rem;
font-size: 1.3rem;
height: 72px;
border-radius: 18px;


/* Inside auto layout */ /* Inside auto layout */


align-self: stretch; align-self: stretch;
flex-grow: 0; flex-grow: 0;
color: #FFFFFF; color: #FFFFFF;
font-size: 35px;
} }


.input-message { .input-message {
background: #FFFFFF; background: #FFFFFF;
border: 1px dashed #8F9DCE; border: 1px dashed #8F9DCE;
border-radius: 4px; border-radius: 4px;
display: inline-block; /* [4] */
display: inline-block; /* [4] */
vertical-align: middle; vertical-align: middle;
text-align: center; text-align: center;
} }

.default-text { .default-text {
margin-top: 15px; margin-top: 15px;
height: 100%; height: 100%;
margin-bottom: 3px; margin-bottom: 3px;
margin-left: 0px; margin-left: 0px;
} }

.image-file-upload { .image-file-upload {
position: center; position: center;
margin-top: 12px; margin-top: 12px;
margin-bottom: 3px; margin-bottom: 3px;
padding: 0 !important; padding: 0 !important;
} }

.text-files-upload { .text-files-upload {
margin-top: 2px; margin-top: 2px;
margin-right: 0; margin-right: 0;

Write Preview
Loading…
Cancel
Save