127 lines
No EOL
2.6 KiB
Svelte
127 lines
No EOL
2.6 KiB
Svelte
<script>
|
|
import Header from './../Header.svelte';
|
|
</script>
|
|
|
|
<body>
|
|
<div class="header"> <Header/> </div>
|
|
|
|
<div class="mainDiv">
|
|
|
|
<div class="gradient">
|
|
|
|
<div class="division">
|
|
<div class="buttonDiv">
|
|
<button class="button">Аккаунт</button>
|
|
</div>
|
|
<div class="changingData">
|
|
<h1>Изменение данных</h1>
|
|
<div class="divisionChangingData">
|
|
<div>пинчи</div>
|
|
<div>данные</div>
|
|
</div>
|
|
<div class="finishButton">
|
|
<button>Подтвердить</button>
|
|
<button>Отменить</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
|
|
<style lang="scss">
|
|
|
|
.button{
|
|
border: 1px solid transparent;
|
|
background:
|
|
linear-gradient(#101010, #101010) padding-box,
|
|
var(--gradient) border-box;
|
|
border-radius: 15px;
|
|
background-repeat: no-repeat;
|
|
background-attachment: fixed;
|
|
margin: 10px 0 0 10px;
|
|
width: calc(100% - 10px);
|
|
}
|
|
|
|
.buttonDiv{
|
|
width: 20%;
|
|
}
|
|
.changingData{
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
border: 1px solid transparent;
|
|
background:
|
|
linear-gradient(#101010, #101010) padding-box,
|
|
var(--gradient) border-box;
|
|
border-radius: 15px;
|
|
background-repeat: no-repeat;
|
|
background-attachment: fixed;
|
|
margin: 10px;
|
|
width: 80%;
|
|
}
|
|
|
|
.divisionChangingData{
|
|
display: flex;
|
|
flex-direction: row;
|
|
height: 80%;
|
|
}
|
|
|
|
.divisionChangingData > div{
|
|
width: 50%;
|
|
height: 100%;
|
|
}
|
|
|
|
.division{
|
|
display: flex;
|
|
flex-direction: row;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.finishButton{
|
|
display: flex;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.header {
|
|
height: 10%;
|
|
width: 85%;
|
|
}
|
|
|
|
.mainDiv{
|
|
height: 90%;
|
|
padding-top: 15px;
|
|
}
|
|
|
|
.gradient{
|
|
border: 1px solid transparent;
|
|
background:
|
|
linear-gradient(#101010, #101010) padding-box,
|
|
var(--gradient) border-box;
|
|
border-radius: 15px;
|
|
background-repeat: no-repeat;
|
|
background-attachment: fixed;
|
|
width: 95%;
|
|
height: 95%;
|
|
|
|
display: flex; /* Добавляем для центрирования по вертикали и горизонтали */
|
|
align-self: center; /* Центрируем по вертикали */
|
|
justify-content: center; /* Центрируем по горизонтали */
|
|
margin: auto;
|
|
}
|
|
|
|
|
|
|
|
body{
|
|
display: flexbox;
|
|
flex-direction: column;
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
</style> |