добавляю все изменения проекта на текущий момент
This commit is contained in:
vasya
+187
-9
@@ -1,11 +1,189 @@
|
||||
@import 'tailwindcss';
|
||||
/* ГАВРИЛОВ. ВЫЯСНИТЬ, ГДЕ ИСПОЛЬЗУЮТСЯ */
|
||||
|
||||
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
|
||||
@source '../../storage/framework/views/*.php';
|
||||
@source '../**/*.blade.php';
|
||||
@source '../**/*.js';
|
||||
|
||||
@theme {
|
||||
--font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
|
||||
'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
html {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
#root{
|
||||
--color_ruby: #ff0078;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: lightblue;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
#menu-container{
|
||||
display: flex;
|
||||
|
||||
&>#menu__left-block{
|
||||
flex-basis: 15%;
|
||||
|
||||
&>.menu__left-block__call-app{
|
||||
display: flex;
|
||||
|
||||
&>.fa{
|
||||
flex-basis: 20%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.switcher-container{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
|
||||
&>.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 60px;
|
||||
height: 34px;
|
||||
margin: 9px;
|
||||
|
||||
&>.switcher__favorite-app {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
|
||||
&.showFav + .slider{
|
||||
background-color: var(--color_ruby);
|
||||
|
||||
&:before{
|
||||
transform: translateX(26px);
|
||||
color: var(--color_ruby);
|
||||
padding: 2px 0 0 0;
|
||||
align-content: baseline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&>.slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #ccc;
|
||||
-webkit-transition: .4s;
|
||||
transition: .4s cubic-bezier(0,1,0.5,1);
|
||||
border-radius: 4px;
|
||||
|
||||
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
|
||||
&:before {
|
||||
position: absolute;
|
||||
content: "\f006";
|
||||
font-family: FontAwesome;
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
left: 4px;
|
||||
bottom: 4px;
|
||||
background-color: white;
|
||||
-webkit-transition: .4s;
|
||||
transition: .4s cubic-bezier(0,1,0.5,1);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
&.round {
|
||||
border-radius: 34px;
|
||||
|
||||
&:before {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.switcher__favorite-app.showFav + .slider {
|
||||
background-color: var(--color_ruby);
|
||||
}
|
||||
.switcher__favorite-app.showFav + .slider:before {
|
||||
transform: translateX(26px);
|
||||
}
|
||||
/* Rounded sliders */
|
||||
/* .slider.round {
|
||||
border-radius: 34px;
|
||||
|
||||
&:before {
|
||||
border-radius: 50%;
|
||||
}
|
||||
} */
|
||||
|
||||
#round {
|
||||
border-radius: 34px;
|
||||
|
||||
&:before {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
#menu__app-container__app-block{
|
||||
/* display: grid;
|
||||
grid-template-columns: 50% 50%; */
|
||||
column-count: 2;
|
||||
|
||||
>.apps-block__proc{
|
||||
margin-bottom: 20px;
|
||||
|
||||
>.proc__title{
|
||||
font-size: 1.1rem;
|
||||
padding: 10px 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
>.proc__title.proc-hide{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.script-list__el{
|
||||
display: flex;
|
||||
|
||||
>.script-list__el__script-name{
|
||||
margin-bottom: 5px;
|
||||
transition: 0.2s;
|
||||
&:hover{
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
>a{
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
|
||||
&:hover{
|
||||
color: var(--color_ruby);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
>.fa-star{
|
||||
margin-left: 5px;
|
||||
cursor: pointer;
|
||||
opacity: 0.2;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
>.fa-star:hover{
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
>.fa-star.favorite{
|
||||
opacity: 1;
|
||||
color: var(--color_ruby);
|
||||
}
|
||||
}
|
||||
|
||||
.script-list__el.script-hide{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
#popup-parent-container{
|
||||
padding: 10px;
|
||||
top: 150px;
|
||||
z-index: 901;
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50px);
|
||||
}
|
||||
@@ -0,0 +1,121 @@
|
||||
@import url('./../variables.css');
|
||||
|
||||
/* #modal-window__background{
|
||||
position: fixed;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #6a6a6ab5;
|
||||
top: 0;
|
||||
z-index: 99;
|
||||
} */
|
||||
|
||||
.entity-hist-container{
|
||||
position: fixed;
|
||||
width: 50%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 100;
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0px 0px 15px 1px #9b9999;
|
||||
|
||||
&>.hist__header-block{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: var(--color_graphite_main);
|
||||
min-height: 7%;
|
||||
height: auto;
|
||||
border-radius: 10px;
|
||||
color: white;
|
||||
padding: 10px;
|
||||
|
||||
&>.hist__header__buttons{
|
||||
|
||||
&>.header__buttons__close{
|
||||
transform: rotate(45deg);
|
||||
font-size: 2rem;
|
||||
color: var(--color_ruby_main);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&>.hist__content-block{
|
||||
overflow-y: scroll;
|
||||
padding: 10px;
|
||||
max-height: 500px;
|
||||
|
||||
&>.hist-container__date-block{
|
||||
display: flex;
|
||||
|
||||
&>.date-block__date{
|
||||
flex-basis: 15%;
|
||||
|
||||
&>div{
|
||||
position: sticky;
|
||||
top: 0px;
|
||||
padding: 3px;
|
||||
background: var(--color_purple_main);
|
||||
border-radius: 5px 0 0 5px;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
&>.date-block__changes{
|
||||
flex-basis: 85%;
|
||||
border-left: 2px solid black;
|
||||
padding: 0 10px;
|
||||
|
||||
&>.changes__action-block{
|
||||
|
||||
& .action-block__action-name{
|
||||
padding: 3px;
|
||||
border-radius: 3px;
|
||||
font-size: 1.2rem;
|
||||
/* border-bottom: 3px solid var(--color_purple_main); */
|
||||
background: color-mix(in srgb, var(--color_purple_main) 20%, transparent);
|
||||
box-shadow: 0px 2px 3px 0px #c0bdd3;
|
||||
}
|
||||
|
||||
&:last-child{
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
&>.changes__date-time-block{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 5px 0px 10px 0px;
|
||||
color: rgb(173 173 173);
|
||||
}
|
||||
|
||||
&>.changes__details{
|
||||
margin-bottom: 15px;
|
||||
|
||||
& .changes__details__el{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&>.changes__details__el__prop-name{
|
||||
flex-basis: 30%;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&>.changes__details__el__prop-val{
|
||||
flex-basis: 70%;
|
||||
background: #91919121;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,15 @@
|
||||
@import url('./../variables.css');
|
||||
|
||||
#form-valid-err-container{
|
||||
|
||||
background: red;
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
|
||||
&.form-valid-err--hide{
|
||||
display: none;
|
||||
}
|
||||
&.form-valid-err--visible{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,104 @@
|
||||
@import url('./../variables.css');
|
||||
@import '@fortawesome/fontawesome-free/css/all.css';
|
||||
|
||||
/* Анимация таймера popup, по истечению которого он скроется */
|
||||
@keyframes popupTimer {
|
||||
from{
|
||||
width: 100%;
|
||||
}
|
||||
to {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.magic-popup-container{
|
||||
padding: 5px;
|
||||
margin-bottom: 15px;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
box-shadow: 0px 3px 4px 1px #918787;
|
||||
background: var(--color_graphite_main);
|
||||
width: 500px;
|
||||
transition: 0.3s;
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
|
||||
&.hide{
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&.show{
|
||||
opacity: 1;
|
||||
transform: translateY(0px);
|
||||
}
|
||||
|
||||
&.hidePopup{
|
||||
transform: translateY(10px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&>.popup__icon-block{
|
||||
flex-basis: 10%;
|
||||
align-self: center;
|
||||
|
||||
&>i{
|
||||
font-size: 4rem;
|
||||
color: var(--color_purple_main);
|
||||
|
||||
&.fa-circle-check{
|
||||
color: var(--color_emerald_main);
|
||||
}
|
||||
&.fa-circle-xmark{
|
||||
color: var(--color_ruby_main);
|
||||
}
|
||||
&.fa-circle-exclamation{
|
||||
color: orange;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&>.popup__content-block{
|
||||
flex-basis: 90%;
|
||||
border-left: 2px solid white;
|
||||
|
||||
&>.popup__content__text-block{
|
||||
color: white;
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
&>.popup__button-block{
|
||||
margin: 10px 0;
|
||||
|
||||
&>button{
|
||||
font-size: 1rem;
|
||||
margin: auto;
|
||||
opacity: 0.5;
|
||||
background: var(--color_purple_main);
|
||||
transition: 0.3s;
|
||||
|
||||
&:hover{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popup__timer-block__timer{
|
||||
|
||||
&.popup__timer-block__timer {
|
||||
height: 5px;
|
||||
margin: 0 5px;
|
||||
border-radius: 10px;
|
||||
|
||||
&.timerProgress{
|
||||
background: #63707a;
|
||||
animation: popupTimer;
|
||||
animation-duration: 3s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,173 @@
|
||||
@import url('./../variables.css');
|
||||
|
||||
#preloader_container {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
z-index: 900;
|
||||
backdrop-filter: blur(5px);
|
||||
|
||||
&.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&>#preloader{
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: none;
|
||||
position: relative;
|
||||
top: 30%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
&>.circle {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
box-sizing: border-box;
|
||||
border: 10px solid transparent;
|
||||
}
|
||||
|
||||
&>#circle_one {
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
border-top-width: 10px;
|
||||
left: 5%;
|
||||
top: 5%;
|
||||
animation: roll_one 4.5s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;
|
||||
|
||||
&.preloader-emerald-circle{
|
||||
border-top-color: var(--color_emerald_light);
|
||||
}
|
||||
&.preloader-ruby-circle{
|
||||
border-top-color: var(--color_ruby_main);
|
||||
}
|
||||
&.preloader-graphite-circle{
|
||||
border-top-color: var(--color_graphite_main);
|
||||
}
|
||||
}
|
||||
|
||||
&>#circle_two {
|
||||
width: 70%;
|
||||
height: 70%;
|
||||
left: 10%;
|
||||
top: 10%;
|
||||
border-right-width: 10px;
|
||||
animation: roll_two 2.5s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;
|
||||
|
||||
&.preloader-emerald-circle{
|
||||
border-right-color: var(--color_emerald_light);
|
||||
}
|
||||
&.preloader-ruby-circle{
|
||||
border-right-color: var(--color_ruby_main);
|
||||
}
|
||||
&.preloader-graphite-circle{
|
||||
border-right-color: var(--color_graphite_main);
|
||||
}
|
||||
}
|
||||
|
||||
&>#circle_three {
|
||||
width: 60%;
|
||||
height: 60%;
|
||||
left: 15%;
|
||||
top: 15%;
|
||||
border-bottom-width: 10px;
|
||||
animation: roll_three 3s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;
|
||||
|
||||
&.preloader-emerald-circle{
|
||||
border-bottom-color: var(--color_emerald_light);
|
||||
}
|
||||
&.preloader-ruby-circle{
|
||||
border-bottom-color: var(--color_ruby_main);
|
||||
}
|
||||
&.preloader-graphite-circle{
|
||||
border-bottom-color: var(--color_graphite_main);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
&>#preloader_text {
|
||||
width: 150%;
|
||||
left: -25%;
|
||||
font-size: 1.5rem;
|
||||
position: absolute;
|
||||
bottom: -50px;
|
||||
text-align: center;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&>#logo {
|
||||
position: absolute;
|
||||
background: none;
|
||||
width: 40%;
|
||||
height: 40%;
|
||||
top: 25%;
|
||||
left: 25%;
|
||||
|
||||
&>.logo_square {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&>#left-top {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
top: 15%;
|
||||
left: 20%;
|
||||
border-left: 7px solid white;
|
||||
border-top: 7px solid white;
|
||||
border-top-left-radius: 45%;
|
||||
}
|
||||
|
||||
&>#right-bottom {
|
||||
width: 40%;
|
||||
height: 50%;
|
||||
top: 15%;
|
||||
left: 40%;
|
||||
border-right: 7px solid white;
|
||||
border-bottom: 7px solid white;
|
||||
border-bottom-right-radius: 45%;
|
||||
border-bottom-left-radius: 10%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes roll_one {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes roll_two {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(-360deg);
|
||||
}
|
||||
}
|
||||
@keyframes roll_three {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(720deg);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
/* ГАВРИЛОВ. ВЫЯСНИТЬ, ГДЕ ИСПОЛЬЗУЮТСЯ */
|
||||
|
||||
#root{
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.form-container{
|
||||
|
||||
&.form-container--small-size{
|
||||
width: 30%;
|
||||
}
|
||||
&.form-container--medium-size{
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
&.form-container--left-pos{
|
||||
margin-left: 10px;
|
||||
}
|
||||
&.form-container--mid-pos{
|
||||
margin: 25px auto;
|
||||
}
|
||||
}
|
||||
|
||||
.form__field-block{
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.btn-block{
|
||||
margin: 15px 0;
|
||||
padding: 15px 0;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
|
||||
/* OVERWRITE */
|
||||
.renButton{
|
||||
|
||||
&.renButton--tertiary{
|
||||
background: #dfdfdf;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
#page__content-block{
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#page__header-block{
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 99;
|
||||
box-shadow: 0px 2px 9px 3px #8f8d8d;
|
||||
|
||||
& .header-block__header-container{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 10px;
|
||||
background: var(--color_graphite_main);
|
||||
|
||||
& .header-container__block{
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
|
||||
& .header-container__block__app-name{
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
:root{
|
||||
--color_graphite_main: #323e48;
|
||||
--color_emerald_main: #77cb10;
|
||||
--color_emerald_light: #95fa77;
|
||||
--color_ruby_main: #ff0078;
|
||||
--color_purple_main: #7864eb;
|
||||
}
|
||||
Reference in New Issue
Block a user