Add channel skip profiles

Author: ajayyy

maze-utils

@@ -116,14 +116,26 @@ html, body {
     color: white;
 }
 
-.option-group > div {
+.option-group > div, .extraOptionGroup {
     min-height: 50px;
     padding: 15px 0;
-    border-bottom: 1px solid var(--border-color);
     border-image: linear-gradient(to right, var(--border-color), #00000000 80%)  1;
 }
+.option-group > div {
+    border-bottom: 1px solid var(--border-color);
+}
+.extraOptionGroup {
+    border-top: 1px solid var(--border-color);
+}
+.extraOptionGroup tr:not(:last-child) {
+    padding-bottom: 15px;
+    display: block;
+}
+#category-type {
+    padding: 0;
+}
 
-.categoryExtraOptions {
+.categoryChooserTable .categoryExtraOptions {
     padding-bottom: 15px;
 }
 
@@ -364,6 +376,11 @@ input[type='number'] {
     padding: 4px;
 }
 
+.sb-number-input {
+    margin-left: 4px;
+    margin-right: 4px;
+}
+
 .switch-label {
     width: inherit;
 }
@@ -744,4 +761,40 @@ svg {
 .advanced-config-help-message {
     margin-bottom: 10px;
     transition: none;
+}
+
+.categoryChooserTopRow {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    margin-bottom: 10px;
+}
+
+.partiallyHidden {
+    opacity: 0.5;
+}
+
+.partiallyHidden:hover {
+    opacity: 1;
+}
+
+.reset-button svg {
+    margin-left: 5px;
+    width: 10px;
+    fill: var(--white);
+
+    cursor: pointer;
+}
+
+.skipProfileMenu {
+    position: absolute;
+}
+
+.configurationInfo > *:not(:last-child) {
+    margin-bottom: 10px;
+}
+
+.configurationInfo .option-text-box {
+    width: 100%;
 }

public/_locales

@@ -80,66 +80,6 @@
                     </a>
 				</div>
 
-				<div data-type="toggle" data-sync="muteSegments">
-					<div class="switch-container">
-						<label class="switch">
-							<input id="muteSegments" type="checkbox" checked>
-							<span class="slider round"></span>
-						</label>
-						<label class="switch-label" for="muteSegments">
-							__MSG_muteSegments__
-						</label>
-					</div>
-				</div>
-				
-				<div data-type="toggle" data-sync="fullVideoSegments" class="no-bottom-border">
-					<div class="switch-container">
-						<label class="switch">
-							<input id="fullVideoSegments" type="checkbox" checked>
-							<span class="slider round"></span>
-						</label>
-						<label class="switch-label" for="fullVideoSegments">
-							__MSG_fullVideoSegments__
-						</label>
-					</div>
-				</div>
-
-				<div data-type="toggle" data-sync="fullVideoLabelsOnThumbnails" 
-						data-dependent-on="fullVideoSegments">
-					<div class="switch-container">
-						<label class="switch">
-							<input id="fullVideoLabelsOnThumbnails" type="checkbox" checked>
-							<span class="slider round"></span>
-						</label>
-						<label class="switch-label" for="fullVideoLabelsOnThumbnails">
-							__MSG_fullVideoLabelsOnThumbnails__
-						</label>
-					</div>
-				</div>
-
-				<div data-type="number-change" data-sync="minDuration">
-					<label class="number-container">
-						<span class="optionLabel">__MSG_minDuration__</span>
-						<input type="number" step="0.1" min="0">
-					</label>
-	
-					<div class="small-description">__MSG_minDurationDescription__</div>
-				</div>
-				
-				<div data-type="toggle" data-sync="manualSkipOnFullVideo">
-					<div class="switch-container">
-						<label class="switch">
-							<input id="manualSkipOnFullVideo" type="checkbox" checked>
-							<span class="slider round"></span>
-						</label>
-						<label class="switch-label" for="manualSkipOnFullVideo">
-							__MSG_enableManualSkipOnFullVideo__
-						</label>
-					</div>
-	
-					<div class="small-description">__MSG_whatManualSkipOnFullVideo__</div>
-				</div>
-
 				<div data-type="react-AdvancedSkipOptionsComponent"></div>
 
 				<div data-type="toggle" data-sync="forceChannelCheck">

public/options/options.css

@@ -277,8 +277,8 @@
   border-radius: 8px;
   background-color: var(--sb-grey-bg-color);
   justify-content: space-evenly;
-  overflow: hidden;
   display: flex;
+  position: relative;
 }
 .sbControlsMenu-item {
   display: flex;
@@ -627,4 +627,62 @@
 .sbPopupButton {
   width: 16px;
   fill: var(--sb-main-fg-color);
+}
+
+#skipProfileMenu {
+  position: absolute;
+  top: 80px;
+  left: 50%;
+
+  background-color: #292828;
+  border-radius: 10px;
+  padding: 10px;
+
+  transform: translateX(-50%);
+}
+
+#skipProfileActions {
+  padding-top: 10px;
+}
+
+.skipOptionAction {
+  transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
+  font-size: 14px;
+  padding: 5px;
+  margin: 5px;
+
+  background-color: #222;
+  border-radius: 5px;
+
+  cursor: help;
+  user-select: none;
+
+  border-color: transparent;
+  border-width: 2px;
+  border-style: solid;
+}
+.skipOptionAction:not(.highlighted, .disabled):hover {
+  background-color: var(--sb-grey-bg-color);
+}
+.skipOptionAction.selected {
+  border-color: var(--sb-red-bg-color);
+}
+.skipOptionAction.highlighted {
+  border-color: rgb(127, 0, 0);
+}
+.skipOptionAction:not(.highlighted, .disabled) {
+  cursor: pointer;
+}
+.skipOptionAction.disabled {
+  color: #808080
+}
+
+.optionsSelector {
+    background-color: #c00000;
+    color: white;
+    
+    border: none;
+    font-size: 14px;
+    padding: 5px;
+    border-radius: 5px;
 }