upd

README.MD

@@ -0,0 +1,3 @@
+Установка
+-----------------
+Главная фишка нашего проекта заключается в том, что 

css/files.css

@@ -41,8 +41,9 @@
 	min-width: 50%;
 	max-width: 100%;
 	max-height: 100%;
+	border-radius: 5px;
 	background-color: #000;
-	transition: all 0.2s ease-in-out;
+	transition: all 2s ease-in-out;
 
 }
 
@@ -86,4 +87,45 @@
 	justify-content: center;
 }
 
-
+
+/* .video-file{
+	/* display: inline-flex;
+	align-items: center;
+	justify-content: center;
+
+
+	background-color: hsla(0, 0%, 100%, .1);
+	border-radius: var(--bs-nav-pills-border-radius);
+
+	display: inline-block;
+	width: 128px;
+	height: 72px;
+	cursor: pointer;
+	vertical-align: top;
+	margin: 5px;
+	overflow: hidden;
+	transition: all 0.2s ease-in-out;
+	word-break: break-word;
+	background-position: center;
+	background-repeat: no-repeat;
+	background-size: contain; 
+}
+
+
+ .video-file:hover{
+	background-color: hsla(0, 0%, 100%, .3);
+} */
+
+
+.video .video-file .files-background-add{
+	opacity:60%;
+	backdrop-filter: blur(50px);
+
+
+}
+
+.name-file{
+	padding: 5px 10px;
+	text-shadow: 0 1px 3px rgb(0 0 0 / 100%);
+}
+

css/header.css

@@ -18,3 +18,31 @@ hr {
 	opacity: 0.25;
 }
 
+
+.nav-main-drop {
+	color: aliceblue;
+}
+
+.nav-main-drop:hover{
+	background: 0 0;
+	border: 0;
+	color:aliceblue;
+	border-radius: var(--bs-nav-pills-border-radius);
+	background-color: hsla(0, 0%, 100%, .05);
+}
+
+.nav-main-drop a:active {
+	color: aliceblue;
+}
+
+.dropdown-menu {
+	width: 100%;
+	background: 0 0;
+	border: 0;
+	color:aliceblue;
+	border-radius: var(--bs-nav-pills-border-radius);
+	background-color: rgba(0, 0, 0, 0.2);
+	backdrop-filter: blur(50px);
+}
+
+

css/preload.css

@@ -0,0 +1,38 @@
+.preloader{
+	overflow: hidden;
+	position: fixed;
+	left:0;
+	top:0;
+	width: 100%;
+	height: 100%;
+	background-color: #22262c;
+	z-index: 2000;
+	transition: 1s all;
+	opacity: 1;
+	visibility: visible;
+
+}
+
+.done{
+	overflow: auto;
+	opacity: 0;
+	visibility: hidden;
+}
+
+.loader {
+	position: absolute;
+	left:50%;
+	top:50%;
+	transform: translate(-50%,-50%);
+	animation: 2s spin infinite linear;
+	/* animation: 3s linear 1s slidein; */
+}
+
+@keyframes spin{
+	from{
+		transform: translate(-50%, -50%) scale(1.2);
+	}
+	to{
+		transform: translate(-50%, -50%) scale(1.6);
+	}
+}

css/settings.css

@@ -0,0 +1 @@
+

css/style.css

@@ -1,7 +1,9 @@
 @import url("header.css");
 @import url("files.css");
 @import url("modal.css");
-
+@import url("toolbar.css");
+@import url("preload.css");
+@import url("settings.css");
 
 ::-webkit-scrollbar {
 	width: 10px;
@@ -16,6 +18,7 @@
 }
 
 html, body{
+	max-height: 100vh;
 	width: 100%;
 }
 

css/timeline.css

@@ -19,7 +19,7 @@ body {
 
 :root {
 	--metalayer: hsla(0, 0%, 100%, 0.05);
-    --layer: #2e2e2e;
+    --layer: hsla(0, 0%, 100%, 0.1);
 	--separator: rgba(255, 255, 255, 0.1);
 	--text: #fff;
 	--text-em: #0084ff;
@@ -76,7 +76,7 @@ body {
 }
 
 .major::after {
-	border-color: rgba(255, 255, 255, 0.3);
+	border-color: dodgerblue;
 }
 
 .playhead {
@@ -101,7 +101,110 @@ body {
 }
 
 .layer {
-	min-height: 30px;
+	min-height: 50px;
 	position: relative;
-	padding: 5px 0;
+}
+
+.layer:nth-child(2n+1) {
+	background-color: var(--layer);
+  }
+
+.track {
+	display: flex;
+	justify-content: center;
+	flex-direction: column;
+	background-repeat: repeat-x;
+	background-color: var(--metalayer);
+	background-position: center;
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: var(--start);
+	width: var(--length);
+	overflow: hidden;
+  }
+  .dragging {
+	position: fixed;
+	height: 40px;
+	opacity: 0.5;
+	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
+	margin: 0;
+	bottom: auto;
+	pointer-events: none;
+  }
+
+  .trim {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	cursor: ew-resize;
+	width: 15px;
+  }
+  .trim-start {
+	left: 0;
+  }
+  .trim-start:hover {
+	border-left: 4px solid #0084ff;
+  }
+  .trim-end {
+	right: 0;
+  }
+
+  .trim-end:hover {
+	border-right: 4px solid #0084ff;
+  }
+
+  .selected {
+	position: relative;
+	margin: 0;
+	z-index: 10;
+	overflow: visible;
+	border: 2px solid #0084ff;
+  }
+  .audio.selected {
+	--background-size-y: 16px;
+  }
+
+  .no-selected {
+	font-size: 12px;
+	padding: 10px;
+  }
+
+  .placeholder {
+	background-color: var(--text-em);
+  }
+
+  .selection {
+	position: absolute;
+	border: 1px solid rgba(0, 255, 255, 0.5);
+	background-color: rgba(0, 255, 255, 0.5);
+  }
+
+  .selected .keys {
+	display: block;
+	min-height: 20px;
+  }
+  .selected .key-row {
+	position: relative;
+	height: 20px;
+  }
+
+  .exporting .main,
+.exporting .timeline-scroller {
+  pointer-events: none;
+  opacity: 0.5;
+}
+.exporting-msg {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  max-width: 500px;
+  text-align: center;
+  margin: 50px auto;
+  font-size: 16px;
+}
+.exporting .exporting-msg {
+  display: block;
 }

css/toolbar.css

@@ -0,0 +1,20 @@
+.toolbar {
+	color: aliceblue;
+	border-radius: var(--bs-nav-pills-border-radius);
+	background-color: hsla(0, 0%, 100%, .05);
+}
+
+.toolbar-main .toolbar-button {
+	background: 0 0;
+	border: 0;
+	color:aliceblue;
+	border-radius: var(--bs-nav-pills-border-radius);
+}
+
+.toolbar-main .toolbar-button:hover {
+	background: 0 0;
+	border: 0;
+	color:dodgerblue;
+	border-radius: var(--bs-nav-pills-border-radius);
+	transition: all 0.2s ease-in-out;
+}