kbruen
/
foxbank
mirror of https://github.com/dancojocaru2000/foxbank.git
1
0
Fork 0
Code Releases Activity
Browse Source

Overlay pages [notifications, account creation, send money]

pull/4/head
DariusTFox 3 years ago
parent
0bfc0d473d
commit
8442d4f755
10 changed files with 257 additions and 121 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      client/src/AccountCard.svelte
  2. 51
      client/src/App.svelte
  3. 3
      client/src/CardBG.svelte
  4. 8
      client/src/CheckNotifications.svelte
  5. 75
      client/src/CreateAccount.svelte
  6. 35
      client/src/MainPage.svelte
  7. 5
      client/src/OrangeButton.svelte
  8. 36
      client/src/Overlay.svelte
  9. 110
      client/src/SendMoney.svelte
  10. 48
      client/src/TextareaField.svelte

7
client/src/AccountCard.svelte
Unescape View File

@ -41,7 +41,12 @@
//todo: CHeck here
dispatch("createPopup",{
type: 'send_money',
iban,
account: {
type,
currency,
balance,
iban,
}
});
}
</script>

51
client/src/App.svelte
Unescape View File

@ -5,6 +5,8 @@ import CreateAccount from "./CreateAccount.svelte";
import Login from "./Login.svelte";
import MainPage from "./MainPage.svelte";
import Overlay from "./Overlay.svelte";
import SendMoney from "./SendMoney.svelte";
import TopBorder from "./TopBorder.svelte";
let loggedin = true;
@ -26,6 +28,15 @@ import TopBorder from "./TopBorder.svelte";
break;
case "create_acc_success":
var today = new Date();
var date = today.getDate()+'/'+(today.getMonth()+1)+'/'+today.getFullYear();
var time = today.getHours() + ":" + today.getMinutes();
notifications.push(
{
text: "The new account '" + event.detail.type+ "' was created successfully!",
time: time + " " + date,
});
isCreatingAccount = false;
break;
@ -39,7 +50,7 @@ import TopBorder from "./TopBorder.svelte";
break;
case "send_money":
sendingAccount = event.detail.iban;
sendingAccount = event.detail.account;
isSendingMoney = true;
break;
@ -47,9 +58,8 @@ import TopBorder from "./TopBorder.svelte";
isSendingMoney = false;
break;
case "send_money_failed":
case "send_money_success":
isSendingMoney = false;
alert(`Sending money failed! Reason: ${event.detail.reason}`);
break;
case "check_notifications":
@ -68,22 +78,41 @@ import TopBorder from "./TopBorder.svelte";
</script>
<main class="flex flex-col items-stretch bg-banner bg-cover bg-center bg-fixed h-screen font-sans">
{#if isCreatingAccount}
<CreateAccount on:createPopup={onCreatePopup}> </CreateAccount>
{:else if isCheckingNotifications}
<CheckNotifications on:createPopup={onCreatePopup} notifications={notifications}></CheckNotifications>
{:else if isSendingMoney}
<!-- else if content here -->
{/if}
<TopBorder class="flex-shrink"></TopBorder>
<div class="flex-grow max-h-full overflow-hidden">
{#if loggedin}
<MainPage on:logOut={toggleLoggedIn} on:createPopup={onCreatePopup}></MainPage>
{#if isCreatingAccount}
<Overlay>
<div class="flex items-center justify-center h-full">
<CreateAccount class="" on:createPopup={onCreatePopup}> </CreateAccount>
</div>
</Overlay>
{:else if isCheckingNotifications}
<Overlay>
<div class="flex items-center justify-center h-full">
<CheckNotifications on:createPopup={onCreatePopup} notifications={notifications}></CheckNotifications>
</div>
</Overlay>
{:else if isSendingMoney}
<Overlay>
<div class="flex items-center justify-center h-full w-full">
<SendMoney on:createPopup={onCreatePopup} account={sendingAccount}></SendMoney>
</div>
</Overlay>
{/if}
<MainPage on:createPopup={onCreatePopup} on:logOut={toggleLoggedIn}></MainPage>
{:else}
<Login on:loginSuccess={toggleLoggedIn}></Login>
{/if}
</div>
<BottomBorder class="flex-none"></BottomBorder>
</main>
<svelte:head>

3
client/src/CardBG.svelte
Unescape View File

@ -1,12 +1,13 @@
<script>
export let width = "inherit";
export let height = "inherit";
export let padding = true;
let clazz;
export {clazz as class}
</script>
<main class="rounded-x p-3 m-14 {clazz}" style="--width: {width}; --height: {height};">
<main class="rounded-x {padding ? "p-3" : ""} m-14 {clazz}" style="--width: {width}; --height: {height};">
<slot></slot>
</main>

8
client/src/CheckNotifications.svelte
Unescape View File

@ -5,7 +5,7 @@
import Icon from "@iconify/svelte";
import { fade, fly, slide } from 'svelte/transition';
import { flip } from 'svelte/animate';
import DetailField from "./DetailField.svelte";
import DetailField from "./DetailField.svelte";
const dispatch = createEventDispatcher();
@ -19,15 +19,15 @@ import DetailField from "./DetailField.svelte";
</script>
<div class="h-full self-center">
<div class="h-full flex flex-col justify-center items-center md:items-start">
<CardBG class="flex flex-col items-stretch">
<div class="h-full flex flex-col justify-center items-center md:items-start overflow-clip">
<CardBG class="flex flex-col items-stretch min-h-0">
<div class="flex flex-row">
<h1 class='font-sans text-4xl text-gray-50 mt-6 mx-6 mb-1'>Inbox</h1>
<button class="ml-auto mr-6" on:click={cancelCheckNotifications}> <Icon icon="akar-icons:cross" color="rgba(249, 250, 251, 1)" width="32" height="32" /> </button>
</div>
<div class="w-full max-w-md self-start border-solid border mb-3"></div>
<div class="flex flex-col flex-grow pl-8 pr-10 relative scroller overflow-auto overflow-x-hidden max-h-medium">
<div class="flex flex-col flex-grow pl-8 pr-10 relative scroller overflow-auto overflow-x-hidden max-h-full min-h-0">
{#each notifications as notification,i (i)}
<div in:slide={{delay:100*i}} out:slide={{delay:50*(notifications.length-i)}}>

75
client/src/CreateAccount.svelte
Unescape View File

@ -4,7 +4,10 @@
import CardBG from "./CardBG.svelte";
import InputField from "./InputField.svelte";
import {createEventDispatcher} from 'svelte';
import Icon from "@iconify/svelte";
import Icon from "@iconify/svelte";
import Overlay from "./Overlay.svelte";
import { fade, fly, slide } from 'svelte/transition';
import { flip } from 'svelte/animate';
const dispatch = createEventDispatcher();
@ -24,7 +27,7 @@ import Icon from "@iconify/svelte";
alert("Terms of Service not accepted!");
}else{
//TODO Create account with provided details on the server
dispatch("createPopup",{type:"create_acc_success"});
dispatch("createPopup",{type:"create_acc_success", account:{type:type, currency:currency, transactions:[]}});
}
}
@ -42,39 +45,43 @@ import Icon from "@iconify/svelte";
</script>
<div class="h-full self-center">
<div class="h-full flex flex-col justify-center items-center md:items-start">
<CardBG class="flex flex-col items-stretch">
<div class="flex flex-row">
<h1 class='font-sans text-4xl text-gray-50 mt-6 mx-6 mb-1'>Open a new account</h1>
<button class="ml-auto mr-6" on:click={cancelCreate}> <Icon icon="akar-icons:cross" color="rgba(249, 250, 251, 1)" width="32" height="32" /> </button>
</div>
<div class="w-full max-w-md self-start border-solid border-gray-50 border mb-3"></div>
<div class="mx-1 flex-shrink">
<h2 class='font-sans text-2xl text-gray-50 mb-2 '>Account name:</h2>
<InputField placeholder="New Account" isPassword={false} bind:value={type}></InputField>
</div>
<div class="mx-1 flex-shrink">
<h2 class='font-sans text-2xl text-gray-50 mb-2 '>Currency:</h2>
<InputField placeholder="RON" isPassword={false} bind:value={currency}></InputField>
</div>
<div class="mx-1 flex-shrink max-w-2xl">
<h2 class=" font-sans text-2xl text-gray-50 mb-2 ">Terms of Service:</h2>
<button class="mb-1" on:click={termsOfService}> <Icon icon={termsAccepted ? "akar-icons:check-box" : "akar-icons:box"} color="rgba(249, 250, 251, 1)" width="18" height="18" /> </button>
<h3 class="inline m-0 mb-0 text-gray-300"> I have read and accepted the <a class="font-sans text-gray-50" href="https://c.tenor.com/TVRtbC8jKY0AAAAC/positive-fox-you-can-do-it.gif" target="_blank">terms and conditions</a> for creating a new account at FOXBANK. </h3>
</div>
<div class="h-full self-center" in:fade={{duration:300}} out:fade={{duration:300}}>
<div class="h-full flex flex-col justify-center items-center md:items-start">
<CardBG padding={false} class="flex flex-col items-stretch">
<div class="m-3">
<div class="flex flex-row">
<h1 class='font-sans text-4xl text-gray-50 mt-6 mx-6 mb-1'>Open a new account</h1>
<button class="ml-auto mr-6" on:click={cancelCreate}> <Icon icon="akar-icons:cross" color="rgba(249, 250, 251, 1)" width="32" height="32" /> </button>
</div>
<div class="w-full max-w-md self-start border-solid border-gray-50 border mb-3"></div>
<div class="m-10"></div>
<div class="mx-1 flex-shrink">
<h2 class='font-sans text-2xl text-gray-50 mb-2 '>Account name:</h2>
<InputField placeholder="New Account" isPassword={false} bind:value={type}></InputField>
</div>
<div class="mx-1 flex-shrink">
<h2 class='font-sans text-2xl text-gray-50 mb-2 '>Currency:</h2>
<InputField placeholder="RON" isPassword={false} bind:value={currency}></InputField>
</div>
<div class="mx-1 flex-shrink">
<OrangeButton on:click={create}>Confirm</OrangeButton>
</div>
</CardBG>
<div class="mx-1 flex-shrink max-w-2xl">
<h2 class=" font-sans text-2xl text-gray-50 mb-2 ">Terms of Service:</h2>
<button class="mb-1" on:click={termsOfService}> <Icon icon={termsAccepted ? "akar-icons:check-box" : "akar-icons:box"} color="rgba(249, 250, 251, 1)" width="18" height="18" /> </button>
<h3 class="inline m-0 mb-0 text-gray-300"> I have read and accepted the <a class="font-sans text-gray-50" href="https://c.tenor.com/TVRtbC8jKY0AAAAC/positive-fox-you-can-do-it.gif" target="_blank">terms and conditions</a> for creating a new account at FOXBANK. </h3>
</div>
<div class="m-10"></div>
</div>
<div class="flex-shrink flex flex-row mb-4" style="background: linear-gradient(89.1deg, rgba(236, 98, 68, 0.95) 0.77%, rgba(236, 98, 68, 0) 99.12%);">
<div class="flex-1"></div>
<OrangeButton class="flex-1 m-4" on:click={create}>Confirm</OrangeButton>
</div>
</CardBG>
</div>
</div>
</div>

35
client/src/MainPage.svelte
Unescape View File

@ -11,7 +11,7 @@
let username = "Firstname Lastname";
let code = "";
let totalbalance = "2455,22";
let totalbalance = "2455.22";
let maincurrency = "RON";
let expandedAccount = null;
let showAllAccounts = true;
@ -21,34 +21,31 @@
{time: "15:38 27/11/2021", text: "A notification's text but way longer absdb aybdbaysbdya bybdabs bdabsd absdb aybdbaysbdya bybdabs bdabsd absdb aybdbaysbdya bybdabs bdabsd absdb aybdbaysbdya bybdabs bdabsd absdb aybdbaysbdya bybdabs bdabsd absdb aybdbaysbdya bybdabs bdabsd absdb aybdbaysbdya bybdabs bdabsd absdb aybdbaysbdya bybdabs bdabsd absdb aybdbaysbdya bybdabs bdabsd."},
{time: "15:38 27/11/2021", text: "A notification's text."},
{time: "15:38 27/11/2021", text: "A notification's text."},
{time: "15:38 27/11/2021", text: "A notification's text."},
{time: "15:38 27/11/2021", text: "A notification's text."},
{time: "15:38 27/11/2021", text: "A notification's text."},
];
let accounts = [
{type:"RON Account", currency:"RON", balance:"420,42", iban:"RONFOX62188921",
{type:"RON Account", currency:"RON", balance:"420.42", iban:"RONFOX62188921",
transactions: [
{title:"Transaction Name#1", status:"PROCESSED", amount:"-45,09", time:"15:38 27/11/2021", type:"send"},
{title:"Transaction Name#2", status:"PENDING", amount:"+25,00", time:"15:38 27/11/2021", type:"received"},
{title:"Transaction Name#3", status:"CANCELLED", amount:"-469,09", time:"15:38 27/11/2021", type:"send"},
{title:"Transaction Name#1", status:"PROCESSED", amount:"-45,09", time:"15:38 27/11/2021", type:"send"},
{title:"Transaction Name#2", status:"PENDING", amount:"+25,00", time:"15:38 27/11/2021", type:"received"},
{title:"Transaction Name#3", status:"CANCELLED", amount:"-469,09", time:"15:38 27/11/2021", type:"send"},
{title:"Transaction Name#1", status:"PROCESSED", amount:"-45,09", time:"15:38 27/11/2021", type:"send"},
{title:"Transaction Name#2", status:"PENDING", amount:"+25,00", time:"15:38 27/11/2021", type:"received"},
{title:"Transaction Name#3", status:"CANCELLED", amount:"-469,09", time:"15:38 27/11/2021", type:"send"},
{title:"Transaction Name#1", status:"PROCESSED", amount:"-45.09", time:"15:38 27/11/2021", type:"send"},
{title:"Transaction Name#2", status:"PENDING", amount:"+25.00", time:"15:38 27/11/2021", type:"received"},
{title:"Transaction Name#3", status:"CANCELLED", amount:"-469.09", time:"15:38 27/11/2021", type:"send"},
{title:"Transaction Name#1", status:"PROCESSED", amount:"-45.09", time:"15:38 27/11/2021", type:"send"},
{title:"Transaction Name#2", status:"PENDING", amount:"+25.00", time:"15:38 27/11/2021", type:"received"},
{title:"Transaction Name#3", status:"CANCELLED", amount:"-469.09", time:"15:38 27/11/2021", type:"send"},
{title:"Transaction Name#1", status:"PROCESSED", amount:"-45.09", time:"15:38 27/11/2021", type:"send"},
{title:"Transaction Name#2", status:"PENDING", amount:"+25.00", time:"15:38 27/11/2021", type:"received"},
{title:"Transaction Name#3", status:"CANCELLED", amount:"-469.09", time:"15:38 27/11/2021", type:"send"},
]
},
{type:"EUR Account", currency:"EUR", balance:"620,42", iban:"EURFOX62188921",
transactions: [
{title:"Transaction Name#2", status:"PENDING", amount:"+25,00", time:"15:38 27/11/2021", type:"received"},
{title:"Transaction Name#1", status:"PROCESSED", amount:"-45,09", time:"15:38 27/11/2021", type:"send"},
{title:"Transaction Name#3", status:"CANCELLED", amount:"-469,09", time:"15:38 27/11/2021", type:"send"},
{title:"Transaction Name#2", status:"PENDING", amount:"+25.00", time:"15:38 27/11/2021", type:"received"},
{title:"Transaction Name#1", status:"PROCESSED", amount:"-45.09", time:"15:38 27/11/2021", type:"send"},
{title:"Transaction Name#3", status:"CANCELLED", amount:"-469.09", time:"15:38 27/11/2021", type:"send"},
]
},
];
function dispatchLogout(){
//todo: CHeck here
@ -99,7 +96,7 @@
{#if showAllAccounts}
{#each accounts as account,i}
<div in:slide={{delay:500*i, duration:250*(i==0 ? 1 : i) }}>
<AccountCard type={account.type} currency={account.currency} balance={account.balance} iban={account.iban} transactions={account.transactions} isExpanded={false} on:expanded={() => expanded(i)}></AccountCard>
<AccountCard type={account.type} currency={account.currency} balance={account.balance} iban={account.iban} transactions={account.transactions} isExpanded={false} on:expanded={() => expanded(i)} on:createPopup></AccountCard>
</div>
{/each}
{/if}

5
client/src/OrangeButton.svelte
Unescape View File

@ -1,11 +1,12 @@
<script>
import BaseButton from "./BaseButton.svelte";
let clazz = "";
export {clazz as class};
</script>
<div class="orange">
<div class="orange {clazz}">
<BaseButton on:click>
<slot></slot>
</BaseButton>

36
client/src/Overlay.svelte
Unescape View File

@ -0,0 +1,36 @@
<script>
let clazz = "";
export {clazz as class}
</script>
<div id="overlay" class="overlay {clazz}">
<div class="overlay-content">
<slot></slot>
</div>
</div>
<style>
/* The Overlay (background) */
.overlay {
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
bottom: 0;
right: 0;
overflow-x: hidden; /* Disable horizontal scroll */
background: linear-gradient(165.31deg, rgba(67, 151, 141, 0.44) 18.49%, rgba(67, 151, 141, 0) 97.15%);
backdrop-filter: blur(6px);
transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}
/* Position the content inside the overlay */
.overlay-content {
position: relative;
/* top: 25%; 25% from the top */
width: 100%; /* 100% width */
height: 100%;
}
</style>

110
client/src/SendMoney.svelte
Unescape View File

@ -4,77 +4,89 @@
import CardBG from "./CardBG.svelte";
import InputField from "./InputField.svelte";
import {createEventDispatcher} from 'svelte';
import Icon from "@iconify/svelte";
import Icon from "@iconify/svelte";
import Overlay from "./Overlay.svelte";
import TextareaField from "./TextareaField.svelte";
import { fade, fly, slide } from 'svelte/transition';
import { flip } from 'svelte/animate';
const dispatch = createEventDispatcher();
let type = "";
let currencies = ["RON", "EUR"];
let currency = currencies[0];
let termsAccepted = false;
export let account={type: "", currency:"", balance:0};
let receivername="";
let receiveriban="";
let amount=0.00;
let description="";
let send_details={receivername:"", receiveriban:"", amount:0, description:""};
function create(){
if(type == "" || type == null) {
alert("Account Name field can not be empty!");
console.debug(`account name: ${type}`)
}else if(!currencies.includes(currency)){
alert("Currency is not supported!");
}else if (!termsAccepted){
alert("Terms of Service not accepted!");
if(receivername == "" || receivername == null) {
alert("Receiver's name field can not be empty!");
}else if(receiveriban == "" || receiveriban == null){
alert("Receiver's iBan field can not be empty!");
}else if (amount > parseFloat(account.balance) ){
alert("Not enough money in your account!");
}else if (amount <= 0.00 ){
alert("Insert a valid amount!");
}else{
//TODO Create account with provided details on the server
dispatch("createPopup",{type:"create_acc_success"});
send_details={receivername:receivername, receiveriban:receiveriban, amount:amount, description:description}
dispatch("createPopup",{type:"send_money_success", send_details:{send_details}});
}
}
function cancelCreate(){
dispatch("createPopup",{type:"create_acc_cancelled"});
function cancelSend(){
dispatch("createPopup",{type:"send_money_cancelled"});
}
function failCreate(){
dispatch("createPopup",{type:"create_acc_failed", reason:"Invalid arguments. [type: "+type+", currency: "+currency});
}
function termsOfService() {
termsAccepted = !termsAccepted;
}
</script>
<div class="h-full self-center">
<div class="h-full flex flex-col justify-center items-center md:items-start">
<CardBG class="flex flex-col items-stretch">
<div class="flex flex-row">
<h1 class='font-sans text-4xl text-gray-50 mt-6 mx-6 mb-1'>Open a new account</h1>
<button class="ml-auto mr-6" on:click={cancelCreate}> <Icon icon="akar-icons:cross" color="rgba(249, 250, 251, 1)" width="32" height="32" /> </button>
<div class="h-full flex flex-col justify-center items-center md:items-start" in:fade={{duration:300}} out:fade={{duration:300}}>
<CardBG padding={false} class="flex flex-col items-stretch md:min-w-full">
<div class="flex-grow m-3 flex flex-col items-stretch">
<div class="flex flex-row ">
<h1 class='inline mt-6 mx-6 mb-1 font-sans text-4xl text-gray-50'>Send money</h1>
<span class="mb-1 ml-4 mr-2 mt-auto text-2xl text-gray-50"> from</span>
<span class="mb-1 mt-auto font-sans text-4xl">{account.type}</span>
<button class="mb-1 ml-auto" on:click={cancelSend}> <Icon icon="akar-icons:cross" color="rgba(249, 250, 251, 1)" width="32" height="32" /> </button>
</div>
<div class="w-full max-w-md self-start border-solid border-gray-50 border mb-3"></div>
<div class="mx-1 flex-shrink">
<h2 class='font-sans text-2xl text-gray-50 mb-2 '>Account name:</h2>
<InputField placeholder="New Account" isPassword={false} bind:value={type}></InputField>
<h2 class='font-sans text-2xl text-gray-50 mb-2 '>Receiver's full name:</h2>
<InputField placeholder="Mr Foxy Fox" isPassword={false} bind:value={receivername}></InputField>
</div>
<div class="mx-1 flex-shrink">
<h2 class='font-sans text-2xl text-gray-50 mb-2 '>Currency:</h2>
<InputField placeholder="RON" isPassword={false} bind:value={currency}></InputField>
</div>
<div class="mx-1 flex-shrink max-w-2xl">
<h2 class=" font-sans text-2xl text-gray-50 mb-2 ">Terms of Service:</h2>
<button class="mb-1" on:click={termsOfService}> <Icon icon={termsAccepted ? "akar-icons:check-box" : "akar-icons:box"} color="rgba(249, 250, 251, 1)" width="18" height="18" /> </button>
<h3 class="inline m-0 mb-0 text-gray-300"> I have read and accepted the <a class="font-sans text-gray-50" href="https://c.tenor.com/TVRtbC8jKY0AAAAC/positive-fox-you-can-do-it.gif" target="_blank">terms and conditions</a> for creating a new account at FOXBANK. </h3>
<h2 class='font-sans text-2xl text-gray-50 mb-2 '>IBAN:</h2>
<InputField placeholder={account.currency +"-0000-0000-0000-0000"} isPassword={false} bind:value={receiveriban}></InputField>
</div>
<div class="mx-1 flex-shrink">
<h2 class='font-sans text-2xl text-gray-50 mb-2 '>Amount:</h2>
<InputField style="color: #264D59" placeholder=0 isPassword={false} bind:value={amount}>
<span class="text-gray-50">{account.currency}</span>
</InputField>
</div>
<div class="m-10"></div>
<div class="mx-1 flex-shrink">
<OrangeButton on:click={create}>Confirm</OrangeButton>
<div class="mx-1 flex-shrink">
<h2 class='font-sans text-2xl text-gray-50 mb-2 '>Description:</h2>
<TextareaField class="flex-grow mb-0" placeholder="Sent from FOXBANK!" rows={5} bind:value={description}></TextareaField>
</div>
</CardBG>
</div>
</div>
</div>
<div class="m-4"></div>
<div class="flex-shrink flex flex-row mb-4 mt-0" style="background: linear-gradient(89.1deg, rgba(236, 98, 68, 0.95) 0.77%, rgba(236, 98, 68, 0) 99.12%);">
<div class="flex-1"></div>
<OrangeButton class="flex-1 m-4" on:click={create}>Confirm</OrangeButton>
</div>
</CardBG>
</div>

48
client/src/TextareaField.svelte
Unescape View File

@ -0,0 +1,48 @@
<script>
export let placeholder;
export let value;
export let rows = 2;
const handleInput = e => {
value = e.target.value;
}
</script>
<main>
<textarea placeholder={placeholder} value={value} rows={rows} on:input={handleInput} class="placeholder-gray-300 p-3 text-gray-50 w-full text-3xl"></textarea>
</main>
<style>
textarea {
background: linear-gradient(92.55deg, rgba(76, 172, 135, 0.95) -28.27%, rgba(249, 224, 127, 0.096) 115.79%);
filter: drop-shadow(0px 8px 4px rgba(0, 0, 0, 0.25));
border-radius: 3px;
}
::-webkit-scrollbar {
width: 3px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 2px rgba(141, 140, 140, 0.281);
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: rgba(238, 236, 236, 0.897);
border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: rgba(182, 182, 182, 0.918);
}
textarea {
scrollbar-width: thin;
scrollbar-color: rgba(238, 236, 236, 0.897) rgba(141, 140, 140, 0.281);
}
</style>
Write Preview
Loading…
Cancel
Save