Merge branch 'master' into fix-autocomplete-codeblock

browser/main/modals/PreferencesModal/ConfigTab.styl

@@ -1,8 +1,111 @@
 @import('./Tab')
 
+.container
+  display flex
+  flex-direction column
+  align-items center
+  justify-content center
+  position relative
+  margin-bottom 2em
+  margin-left 2em
+
+.box-minmax
+  width 608px
+  height 45px
+  display flex
+  justify-content space-between
+  font-size $tab--button-font-size
+  color $ui-text-color
+  span first-child
+  margin-top 18px
+  padding-right 10px
+  padding-left  10px
+  padding-top 8px
+  position relative
+  border $ui-borderColor
+  border-radius 5px
+  background $ui-backgroundColor
+
+div[id^="secondRow"]
+  position absolute
+  z-index 2
+  left 0
+  top 0
+  margin-bottom -42px
+  .rs-label
+    margin-left -20px
+  
+div[id^="firstRow"]
+  position absolute
+  z-index 2
+  left 0
+  top 0
+  margin-bottom -25px
+  .rs-range
+      &::-webkit-slider-thumb
+        margin-top 0px
+        transform rotate(180deg)
+  .rs-label
+    margin-bottom -85px
+    margin-top 85px
+  
+
+.rs-range
+  margin-top 29px
+  width 600px
+  -webkit-appearance none
+  &:focus
+    outline black
+  &::-webkit-slider-runnable-track
+    width 100%
+    height 0.1px
+    cursor pointer
+    box-shadow none
+    background $ui-backgroundColor
+    border-radius 0px
+    border 0px solid #010101
+    cursor none
+    
+  &::-webkit-slider-thumb
+    box-shadow none
+    border 1px solid $ui-borderColor
+    box-shadow 0px 10px 10px rgba(0, 0, 0, 0.25)
+    height 32px
+    width 32px
+    border-radius 22px
+    background white
+    cursor pointer
+    -webkit-appearance none
+    margin-top -20px
+    border-color $ui-default-button-backgroundColor
+    height 32px
+    border-top-left-radius 10%
+    border-top-right-radius 10%
+
+.rs-label
+  position relative
+  transform-origin center center
+  display block
+  background transparent
+  border-radius none
+  line-height 30px
+  font-weight normal
+  box-sizing border-box
+  border none
+  margin-bottom -5px
+  margin-top -10px
+  clear both
+  float left
+  height 17px
+  margin-left -25px
+  left attr(value)
+  color $ui-text-color
+  font-style normal
+  font-weight normal
+  line-height normal
+  font-size $tab--button-font-size
 .root
   padding 15px
-  color $ui-text-color
   margin-bottom 30px
 
 .group
@@ -14,10 +117,17 @@
 
 .group-header2
   font-size 20px
-  color $ui-text-color
   margin-bottom 15px
   margin-top 30px
 
+.group-header--sub
+  @extend .group-header
+  margin-bottom 10px
+
+.group-header2--sub
+  @extend .group-header2
+  margin-bottom 10px
+
 .group-section
   margin-bottom 20px
   display flex
@@ -135,30 +245,30 @@ colorDarkControl()
   background-color $ui-dark-backgroundColor
   color $ui-dark-text-color
 
-colorSolarizedDarkControl()
+colorThemedControl(theme)
   border none
-  background-color $ui-solarized-dark-button-backgroundColor
-  color $ui-solarized-dark-text-color
+  background-color get-theme-var(theme, 'button-backgroundColor')
+  color get-theme-var(theme, 'text-color')
 
-colorMonokaiControl()
-  border none
-  background-color $ui-monokai-button-backgroundColor
-  color $ui-monokai-text-color
+body[data-theme="default"],
+body[data-theme="white"]
+  .root
+      color $ui-text-color
 
-colorDraculaControl()
-  border none
-  background-color $ui-dracula-button-backgroundColor
-  color $ui-dracula-text-color
+  .group-header2
+      color $ui-text-color
 
 body[data-theme="dark"]
   .root
     color $ui-dark-text-color
 
   .group-header
+  .group-header--sub
     color $ui-dark-text-color
     border-color $ui-dark-borderColor
 
   .group-header2
+  .group-header2--sub
     color $ui-dark-text-color
 
   .group-section-control-input
@@ -176,85 +286,44 @@ body[data-theme="dark"]
   .group-section-control
     select, .group-section-control-input
       colorDarkControl()
+  .rs-label
+    color $ui-dark-text-color
 
 
-body[data-theme="solarized-dark"]
-  .root
-    color $ui-solarized-dark-text-color
+apply-theme(theme)
+  body[data-theme={theme}]
+    .root
+      color get-theme-var(theme, 'text-color')
 
-  .group-header
-    color $ui-solarized-dark-text-color
-    border-color $ui-solarized-dark-borderColor
+    .group-header
+    .group-header--sub
+      color get-theme-var(theme, 'text-color')
+      border-color get-theme-var(theme, 'borderColor')
 
-  .group-header2
-    color $ui-solarized-dark-text-color
+    .group-header2
+    .group-header2--sub
+      color get-theme-var(theme, 'text-color')
 
-  .group-section-control-input
-    border-color $ui-solarized-dark-borderColor
+    .group-section-control-input
+      border-color get-theme-var(theme, 'borderColor')
 
-  .group-control
-    border-color $ui-solarized-dark-borderColor
-  .group-control-leftButton
-    colorDarkDefaultButton()
-    border-color $ui-solarized-dark-borderColor
-  .group-control-rightButton
-    colorSolarizedDarkPrimaryButton()
-  .group-hint
-    colorSolarizedDarkControl()
-  .group-section-control
-    select, .group-section-control-input
-      colorSolarizedDarkControl()
+    .group-control
+      border-color get-theme-var(theme, 'borderColor')
+    .group-control-leftButton
+      colorDarkDefaultButton()
+      border-color get-theme-var(theme, 'borderColor')
+    .group-control-rightButton
+      colorThemedPrimaryButton(theme)
+    .group-hint
+      colorThemedControl(theme)
+    .group-section-control
+      select, .group-section-control-input
+        colorThemedControl(theme)
+    .rs-label
+      color get-theme-var(theme, 'text-color')
 
-body[data-theme="monokai"]
-  .root
-    color $ui-monokai-text-color
+for theme in 'solarized-dark' 'dracula'
+  apply-theme(theme)
 
-  .group-header
-    color $ui-monokai-text-color
-    border-color $ui-monokai-borderColor
-
-  .group-header2
-    color $ui-monokai-text-color
-
-  .group-section-control-input
-    border-color $ui-monokai-borderColor
-
-  .group-control
-    border-color $ui-monokai-borderColor
-  .group-control-leftButton
-    colorDarkDefaultButton()
-    border-color $ui-monokai-borderColor
-  .group-control-rightButton
-    colorMonokaiPrimaryButton()
-  .group-hint
-    colorMonokaiControl()
-  .group-section-control
-    select, .group-section-control-input
-      colorMonokaiControl()
-
-body[data-theme="dracula"]
-  .root
-    color $ui-dracula-text-color
-
-  .group-header
-    color $ui-dracula-text-color
-    border-color $ui-dracula-borderColor
-
-  .group-header2
-    color $ui-dracula-text-color
-
-  .group-section-control-input
-    border-color $ui-dracula-borderColor
-
-  .group-control
-    border-color $ui-dracula-borderColor
-  .group-control-leftButton
-    colorDarkDefaultButton()
-    border-color $ui-dracula-borderColor
-  .group-control-rightButton
-    colorDraculaPrimaryButton()
-  .group-hint
-    colorDraculaControl()
-  .group-section-control
-    select, .group-section-control-input
-      colorDraculaControl()
+for theme in $themes
+  apply-theme(theme)