start of react migration
This commit is contained in:
michalcourson
355
electron-ui/src/old/styles.css
Normal file
355
electron-ui/src/old/styles.css
Normal file
@ -0,0 +1,355 @@
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #1e1e1e;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
color: #ffffffd3;
|
||||
}
|
||||
|
||||
.titlebar {
|
||||
height: 30px;
|
||||
background: #262626;
|
||||
-webkit-app-region: drag;
|
||||
color: white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.app-container {
|
||||
display: flex;
|
||||
height: calc(100vh);
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 250px;
|
||||
background-color: #1e1e1e;
|
||||
border-right: 1px solid #303030;
|
||||
padding: 5px 20px 20px 20px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.sidebar-section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.sidebar-section h3 {
|
||||
margin-bottom: 10px;
|
||||
border-bottom: 1px solid #393939;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.sidebar-section .add-collection-btn {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
margin-top: 10px;
|
||||
background-color: #6e44ba;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
color: #ffffffd3;
|
||||
}
|
||||
|
||||
.sidebar-section .add-collection-btn:hover {
|
||||
background-color: #4f3186;
|
||||
}
|
||||
|
||||
.section-item, .collection-item {
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
margin-bottom: 3px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.section-item:hover, .collection-item:hover {
|
||||
background-color: #303030;
|
||||
}
|
||||
|
||||
.section-item.active, .collection-item.active {
|
||||
background-color: rgba(110, 68, 186, 0.3);
|
||||
color: #ccb1ff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.audio-trimmers-section {
|
||||
background-color: #1e1e1e;
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.audio-trimmers-list {
|
||||
flex-grow: 1;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
padding: 20px;
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none; /* Internet Explorer 10+ */
|
||||
}
|
||||
|
||||
.audio-trimmers-list::-webkit-scrollbar { /* WebKit */
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.audio-trimmer-item {
|
||||
position: relative;
|
||||
background-color: #1e1e1e;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
margin-bottom: 0px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.audio-trimmer-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.audio-trimmer-title-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.audio-trimmer-title {
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.audio-trimmer-filename {
|
||||
color: #888;
|
||||
font-weight: regular;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.audio-trimmer-controls {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.waveform-container {
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.waveform {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.audio-controls {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.trim-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
/* margin-bottom: 20px; */
|
||||
}
|
||||
|
||||
.trim-time {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
|
||||
.play-pause-btn, .save-trim {
|
||||
background-color: #6e44ba;
|
||||
border: none;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
color: #ffffffd3;
|
||||
}
|
||||
|
||||
.play-pause-btn:hover, .save-trim:hover {
|
||||
background-color: #4f3186;
|
||||
}
|
||||
|
||||
.play-pause-btn svg, .save-trim svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
fill: white;
|
||||
}
|
||||
|
||||
select {
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
background-color: #383838;
|
||||
border-radius: 5px;
|
||||
border-color:#303030;
|
||||
color: #ffffffd3;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
input{
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
background-color: #383838;
|
||||
border-radius: 5px;
|
||||
border-color:#303030;
|
||||
color: #ffffffd3;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
border-color: #303030;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
select:focus {
|
||||
border-color: #303030;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
select:active {
|
||||
border-color: #303030;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Settings Modal */
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background-color: #2a2a2a;
|
||||
margin: auto;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
width: 500px;
|
||||
color: #ffffffd3;
|
||||
}
|
||||
|
||||
.settings-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.settings-group label {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
|
||||
.close-modal {
|
||||
color: #aaa;
|
||||
float: right;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.close-modal:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
#save-settings {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
background-color: #6e44ba;
|
||||
color: #ffffffd3;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#save-settings:hover {
|
||||
background-color: #4f3186;
|
||||
}
|
||||
|
||||
#select-output-folder {
|
||||
width: 15%;
|
||||
height: 36px;
|
||||
padding: 10px;
|
||||
background-color: #6e44ba;
|
||||
color: #ffffffd3;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
#select-output-folder:hover {
|
||||
background-color: #4f3186;
|
||||
}
|
||||
|
||||
|
||||
#input-device {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
}
|
||||
#output-folder {
|
||||
width: 84%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.nav-btn svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
fill: #ffffffd3;
|
||||
}
|
||||
|
||||
/* Zoom controls styling */
|
||||
.zoom-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.zoom-controls button {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background-color: #f0f0f0;
|
||||
border: 1px solid #ccc;
|
||||
cursor: pointer;
|
||||
}
|
||||
.zoom-controls .zoom-slider {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
#recording-length, #osc-port {
|
||||
width: 20%;
|
||||
}
|
||||
Reference in New Issue
Block a user