[bug] fix theme saved edit control border radius not being the correct shape

Author: zombieFox

package-lock.json

@@ -1,6 +1,6 @@
 {
 "name": "nightTab",
-"version": "5.24.0",
+"version": "5.24.1",
 "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
 "main": "index.js",
 "scripts":{

package.json

@@ -1,8 +1,13 @@
 .theme-preset-item,
 .theme-custom-item{
+position: relative;
+}
+
+.theme-preset-tile,
+.theme-custom-tile{
+position: relative;
 width:var(--theme-preview-size);
 height:var(--theme-preview-size);
-position: relative;
 }
 
 .theme-preset-button,
@@ -20,43 +25,63 @@
 transition: height var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast), border-radius var(--layout-timing-extra-fast);
 }
 
+.is-theme-custom-edit .theme-custom-button{
+border-radius:var(--theme-radius) var(--theme-radius) 00;
+height:calc(100%-var(--theme-custom-edit-height));
+box-shadow:var(--theme-shadow-bottom-medium);
+}
+
+.is-theme-custom-edit .theme-custom-button:hover{
+box-shadow:var(--form-ring-hover);
+}
+
+.is-theme-custom-edit .theme-custom-button:focus,
+.is-theme-custom-edit .theme-custom-button:active{
+box-shadow:var(--form-ring-accent);
+}
+
 .theme-custom-control{
-border-radius:00var(--theme-radius) var(--theme-radius);
+border-radius:var(--theme-radius);
 width:100%;
-height:0;
+height:100%;
 position: absolute;
 bottom:0;
 overflow: hidden;
 display: flex;
-justify-content: flex-start;
-align-items: stretch;
+align-items: flex-end;
 z-index:1;
-transition: height var(--layout-timing-extra-fast);
+transition: height var(--layout-timing-extra-fast), border-radius var(--layout-timing-extra-fast);
 }
 
-.theme-custom-control-item{
+.theme-custom-control .theme-custom-control-item{
 padding:0;
 border-radius:0;
 flex:11 auto;
+position: relative;
+bottom:0;
+min-height: initial;
+height:0;
+transition: height var(--layout-timing-extra-fast);
 }
 
-.is-theme-custom-edit .theme-custom-button{
-border-radius:var(--theme-radius) var(--theme-radius) 00;
-height:calc(100%-var(--theme-custom-edit-height));
-box-shadow:var(--theme-shadow-bottom-medium);
+.is-theme-custom-edit .theme-custom-control-item{
+height:var(--theme-custom-edit-height);
 }
 
-.is-theme-custom-edit .theme-custom-button:hover{
-box-shadow:var(--form-ring-hover);
+.theme-custom-control-item .button-icon{
+font-size:1em;
+position: relative;
+transition: bottom var(--layout-timing-extra-fast), left var(--layout-timing-extra-fast), right var(--layout-timing-extra-fast);
 }
 
-.is-theme-custom-edit .theme-custom-button:focus,
-.is-theme-custom-edit .theme-custom-button:active{
-box-shadow:var(--form-ring-accent);
+.theme-custom-control-item:first-child .button-icon{
+bottom:calc(var(--theme-radius) /16);
+left:calc(var(--theme-radius) /8);
 }
 
-.is-theme-custom-edit .theme-custom-control{
-height:var(--theme-custom-edit-height);
+.theme-custom-control-item:last-child .button-icon{
+bottom:calc(var(--theme-radius) /16);
+right:calc(var(--theme-radius) /8);
 }
 
 .theme-preset-preview,
@@ -85,8 +110,8 @@
 .theme-custom-background-03,
 .theme-custom-background-04,
 .theme-custom-accent{
-width:100%;
-height:100%;
+width:var(--theme-preview-size);
+height:var(--theme-preview-size);
 position: absolute;
 top:0;
 left:0;
@@ -155,7 +180,7 @@
 .theme-preset-accent,
 .theme-custom-accent{
 z-index:5;
-clip-path:circle(30% at 100%100%);
+clip-path:circle(30% at calc(100%-calc(var(--theme-radius) /12)) calc(100%-calc(var(--theme-radius) /12)));
 }
 
 .theme-preset-accent{
@@ -167,27 +192,27 @@
 }
 
 .is-theme-custom-edit .theme-custom-accent{
-clip-path:circle(30% at 100%60%);
+clip-path:circle(30% at calc(100%-calc(var(--theme-radius) /12)) calc(60%-calc(var(--theme-radius) /12)));
 }
 
 .theme-preset-name,
 .theme-custom-name{
 color:rgb(var(--theme-style-text));
 font-style: normal;
-font-size:0.8em;
+font-size:0.75em;
 text-align: left;
 display: block;
-max-width:calc(100%-2em);
-max-height:calc(100%-2em);
+max-width:calc(100%-1.5em-calc(var(--theme-radius) /3));
+max-height:calc(100%-1.5em-calc(var(--theme-radius) /3));
 position: absolute;
-top:1em;
-left:1em;
+top:calc(0.75em+calc(var(--theme-radius) /6));
+left:calc(0.75em+calc(var(--theme-radius) /6));
 z-index:6;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: initial;
 transform:scale(1);
-transition: transform var(--layout-timing-extra-fast);
+transition:color var(--layout-timing-extra-fast),transformvar(--layout-timing-extra-fast), max-width var(--layout-timing-extra-fast), max-height var(--layout-timing-extra-fast), top var(--layout-timing-extra-fast), leftvar(--layout-timing-extra-fast);
 }
 
 .theme-preset-button:focus .theme-preset-background-02,
@@ -215,12 +240,12 @@
 .theme-preset-button:hover .theme-preset-accent,
 .theme-custom-button:focus .theme-custom-accent,
 .theme-custom-button:hover .theme-custom-accent{
-clip-path:circle(40% at 100%100%);
+clip-path:circle(40% at calc(100%-calc(var(--theme-radius) /12)) calc(100%-calc(var(--theme-radius) /12)));
 }
 
 .is-theme-custom-edit .theme-custom-button:focus .theme-custom-accent,
 .is-theme-custom-edit .theme-custom-button:hover .theme-custom-accent{
-clip-path:circle(40% at 100%60%);
+clip-path:circle(40% at calc(100%-calc(var(--theme-radius) /12)) calc(60%-calc(var(--theme-radius) /12)));
 }
 
 .theme-color-box{

src/css/theme.css

@@ -2275,10 +2275,10 @@ var theme = (function(){
 varthemeCustomButton=helper.node("button|class:theme-custom-button button button-block button-ring,tabindex:-1");
 varthemeCustomPreview=helper.node("span|class:theme-custom-preview");
 varthemeCustomControl=helper.node("div|class:theme-custom-control");
-varthemeCustomEdit=helper.node("button|class:theme-custom-control-item theme-custom-control-item-remove button button-small,tabindex:-1");
-varthemeCustomEditIcon=helper.node("spa|class:button-icon icon-edit");
-varthemeCustomRemove=helper.node("button|class:theme-custom-control-item theme-custom-control-item-remove button button-small,tabindex:-1");
-varthemeCustomRemoveIcon=helper.node("spa|class:button-icon icon-close");
+varthemeCustomEdit=helper.node("button|class:theme-custom-control-item theme-custom-control-item-remove button,tabindex:-1");
+varthemeCustomEditIcon=helper.node("span|class:button-icon icon-edit");
+varthemeCustomRemove=helper.node("button|class:theme-custom-control-item theme-custom-control-item-remove button,tabindex:-1");
+varthemeCustomRemoveIcon=helper.node("span|class:button-icon icon-close");
 varshadeSteps=4;
 varrgb=arrayItem.color.rgb;
 varhsl=arrayItem.color.hsl;

src/js/theme.js

@@ -1,6 +1,6 @@
 varversion=(function(){
 
-varcurrent="5.24.0";
+varcurrent="5.24.1";
 
 varname="Zonked Tarsier";
 

src/js/version.js

@@ -2,7 +2,7 @@
 "name": "nightTab",
 "short_name": "nightTab",
 "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
-"version": "5.24.0",
+"version": "5.24.1",
 "manifest_version": 2,
 "chrome_url_overrides":{
 "newtab": "index.html"