[CSS][PLUGIN] ProfileColor now handles both the background and foreground colors. Various button CSS fixes.

plugins/ProfileColor/Controller/ProfileColor.php

@@ -64,11 +64,17 @@ class ProfileColor
         $current_profile_color = DB::find('profile_color', ['actor_id' => $actor_id]);
 
         $form = Form::create([
-            ['color',   ColorType::class, [
+            ['background_color',   ColorType::class, [
+                'html5' => true,
+                'data' => $current_profile_color ? $current_profile_color->getBackground() : "#000000",
+                'label' => _m('Profile background color'),
+                'help' => _m('Choose your Profile background color')]
+            ],
+            ['foreground_color',   ColorType::class, [
                 'html5' => true,
                 'data' => $current_profile_color ? $current_profile_color->getColor() : "#000000",
-                'label' => _m('Profile Color'),
-                'help' => _m('Choose your Profile Color')]
+                'label' => _m('Profile foreground color'),
+                'help' => _m('Choose your Profile foreground color')]
             ],
             ['hidden', HiddenType::class, []],
             ['save_profile_color',   SubmitType::class, ['label' => _m('Submit')]],
@@ -84,7 +90,7 @@ class ProfileColor
             }
 
             $data = $form->getData();
-            $current_profile_color  = Entity\ProfileColor::create(['actor_id' => $actor_id, 'color' => $data['color']]);
+            $current_profile_color  = Entity\ProfileColor::create(['actor_id' => $actor_id, 'color' => $data['foreground_color'], 'background' => $data['background_color']]);
             DB::persist($current_profile_color);
             DB::flush();
 

plugins/ProfileColor/Entity/ProfileColor.php

@@ -40,6 +40,7 @@ class ProfileColor extends Entity
     // @codeCoverageIgnoreStart
     private int $actor_id;
     private string $color;
+    private string $background;
     private \DateTimeInterface $created;
     private \DateTimeInterface $modified;
 
@@ -65,6 +66,17 @@ class ProfileColor extends Entity
         return $this->color;
     }
 
+    public function setBackground(string $background): self
+    {
+        $this->background = $background;
+        return $this;
+    }
+
+    public function getBackground(): string
+    {
+        return $this->background;
+    }
+
     public function setCreated(DateTimeInterface $created): self
     {
         $this->created = $created;
@@ -94,10 +106,11 @@ class ProfileColor extends Entity
         return [
             'name'   => 'profile_color',
             'fields' => [
-                'actor_id' => ['type' => 'int',       'foreign key' => true, 'target' => 'Actor.id', 'multiplicity' => 'one to one', 'not null' => true, 'description' => 'foreign key to actor table'],
-                'color'    => ['type' => 'text',      'not null' => true, 'description' => 'color hex code'],
-                'created'  => ['type' => 'datetime',  'not null' => true, 'description' => 'date this record was created',  'default' => 'CURRENT_TIMESTAMP'],
-                'modified' => ['type' => 'timestamp', 'not null' => true, 'description' => 'date this record was modified', 'default' => 'CURRENT_TIMESTAMP'],
+                'actor_id'      => ['type' => 'int',       'foreign key' => true, 'target' => 'Actor.id', 'multiplicity' => 'one to one', 'not null' => true, 'description' => 'foreign key to actor table'],
+                'background'    => ['type' => 'text',      'not null' => true, 'description' => 'color hex code'],
+                'color'         => ['type' => 'text',      'not null' => true, 'description' => 'color hex code'],
+                'created'       => ['type' => 'datetime',  'not null' => true, 'description' => 'date this record was created',  'default' => 'CURRENT_TIMESTAMP'],
+                'modified'      => ['type' => 'timestamp', 'not null' => true, 'description' => 'date this record was modified', 'default' => 'CURRENT_TIMESTAMP'],
             ],
             'primary key' => ['actor_id'],
         ];

plugins/ProfileColor/ProfileColor.php

@@ -93,13 +93,15 @@ class ProfileColor extends Plugin
             $actor_id = $actor->getId();
 
             try {
-                $color = DB::findOneBy('profile_color', ['actor_id' => $actor_id]);
+                $profile_color_tab = DB::findOneBy('profile_color', ['actor_id' => $actor_id]);
             } catch (NotFoundException $e) {
                 return Event::next;
             }
 
+            $color = DB::findBy('profile_color', ['actor_id'=>$actor_id])[0];
             if ($color !== null) {
-                $res[] = Formatting::twigRenderFile('/profileColor/profileColorView.html.twig', ['profile_color' => $color, 'actor' => $actor_id]);
+                $color = $color->getColor();
+                $res[] = Formatting::twigRenderFile('/profileColor/profileColorView.html.twig', ['profile_color' => $profile_color_tab, 'actor' => $actor_id]);
             }
         }
 

plugins/ProfileColor/templates/profileColor/profileColorView.html.twig

@@ -1,7 +1,10 @@
 {% block stylesheets %}
     <style>
         #profile-{{ actor }} {
-            background: {{ profile_color.color }} !important;
+            background: {{ profile_color.background }} !important;
+        }
+        #profile-{{ actor }} * {
+            color: {{ profile_color.color }} !important;
         }
     </style>
 {% endblock stylesheets %}

public/assets/default_theme/css/base.css

@@ -62,6 +62,7 @@ details>summary::-webkit-details-marker {
 }
 body,
 html {
+    all: unset;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     background-attachment: fixed;
@@ -211,6 +212,7 @@ url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVE
     .button-container:focus,
     .button-container:hover,
     .set-background-color-accent,
+    input[type=checkbox],
     input[type=checkbox]:focus,
     input[type=checkbox]:hover,
     input[type=radio]:focus,
@@ -218,16 +220,15 @@ url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVE
         background-color: #8081BA !important
     }
     .note-actions-set,
-    .set-background-color-foreground,
-    input[type=radio]:checked {
+    .set-background-color-foreground {
         background-color: #FFF !important
     }
     *,
     .set-foreground-color,
     ::file-selector-button,
     input[type=file] {
-        color: #FFF !important;
-        fill: #FFF !important
+        color: #FFF;
+        fill: #FFF
     }
     .accessibility-menu,
     .set-border-accent {
@@ -239,8 +240,7 @@ url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVE
     .section-widget,
     .set-border-soft,
     button,
-    input,
-    input[type=radio],
+    input:not([type=checkbox], [type=radio]),
     select,
     textarea,
     .section-settings,
@@ -314,7 +314,7 @@ url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVE
     input,
     select,
     textarea {
-        background-color: #eceff488
+        background-color: #eceff488 !important;
     }
     .set-background-color-gradient,
     button:not(.button-container),
@@ -344,15 +344,16 @@ url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVE
     }
     .note-actions-set,
     .set-background-color-foreground,
-    input[type=radio]:checked {
+    input[type=radio]:checked,
+    input[type=checkbox]:checked {
         background-color: #2e3440 !important
     }
     *,
     .set-foreground-color,
     ::file-selector-button,
     input[type=file] {
-        color: #2e3440 !important;
-        fill: #2e3440 !important
+        color: #2e3440;
+        fill: #2e3440
     }
     .accessibility-menu,
     .set-border-accent {
@@ -548,6 +549,9 @@ hr {
     padding: 0.6rem;
     overflow-y: auto
 }
+#panel-right-icon {
+    margin-left: 12px !important;
+}
 @media only screen and (min-width: 1281px) {
     .content {
         padding: 0.6rem 1.62rem 0

public/assets/default_theme/css/widgets/buttons.css

@@ -1,43 +1,32 @@
-button {
-    cursor: pointer !important;
-    float: right !important;
-    align-self: end !important
-}
-input {
-    cursor: text !important
-}
-button,
 input {
     all: unset;
-    padding: 5px 10px
 }
-button,
-select,
-input:not([type=text]) {
-    cursor: pointer !important
+input + label {
+    align-self: center;
 }
-input:not([type=button],
-[type=color],
-[type=checkbox],
-[type=radio]) {
-    cursor: auto !important
+button {
+    cursor: pointer !important;
+    float: right !important;
+    align-self: end !important
 }
 *|*::-moz-button-content {
-    all: unset
-}
-input[type=checkbox] {
-    display: inline-flex;
-    width: 1em;
-    height: 1em
+    all: unset !important;
 }
+input[type=checkbox],
 input[type=radio] {
     all: unset;
-    cursor: pointer !important;
     display: inline-block;
-    width: 1em;
-    height: 1em;
-    border-radius: 50%;
-    margin: 3px 3px 0 5px
+    cursor: pointer !important;
+    width: 1em !important;
+    height: 1em !important;
+}
+input[type=checkbox]:not(:hover, :focus),
+input[type=radio]:not(:hover, :focus) {
+    opacity: 75%;
+}
+input[type=radio] {
+    border-radius: 50% !important;
+    margin: 3px 3px 0 5px !important;
 }
 input[type=file] {
     all: unset;
@@ -45,10 +34,6 @@ input[type=file] {
     width: 100%;
     border-radius: 0.6rem !important
 }
-input+label {
-    all: unset;
-    align-self: center
-}
 ::file-selector-button {
     cursor: pointer;
     background-color: unset;
@@ -63,20 +48,17 @@ button {
 select,
 button,
 textarea,
-input {
-    display: inline-block;
+input:not([type=radio], [type=checkbox]) {
+    display: inline-flex !important;
     overflow: hidden;
     font-size: inherit !important;
-    padding: 6px 8px;
+    padding: 6px 8px !important;
     border-radius: 0.6rem
 }
-button {
-    padding: 4px 12px;
-    margin-left: auto
-}
 select {
     -webkit-appearance: none !important;
     -moz-appearance: none !important;
+    cursor: pointer;
     background-repeat: no-repeat;
     background-size: 16px;
     background-position: center right 5px;
@@ -86,10 +68,6 @@ input[type=radio] {
     border: solid 0.25em !important
 }
 input[type=checkbox] {
-    all: unset;
-    display: inline-block;
-    width: 1.3rem;
-    height: 1.3rem;
     vertical-align: middle;
     background-size: cover;
     margin-right: 2px;

public/assets/default_theme/css/widgets/sections.css

@@ -10,8 +10,8 @@
 }
 .profile *[class*="profile-info-"] {
     flex: 1;
-    mix-blend-mode: difference
 }
+
 .profile-info {
     display: flex;
     flex-wrap: wrap;