redesign appearance dropdown

src/assets/index.html

@@ -209,45 +209,27 @@
                     <span class="icon" v-if="itemSelectedDetails.status=='unread'">{% inline "circle-full.svg" %}</span>
                     <span class="icon" v-if="itemSelectedDetails.status!='unread'">{% inline "circle.svg" %}</span>
                 </button>
-                <dropdown toggle-class="toolbar-item" drop="center">
+                <dropdown class="settings-dropdown" toggle-class="toolbar-item px-2" drop="center">
                     <template v-slot:button>
                         <span class="icon">{% inline "sliders.svg" %}</span>
                     </template>
-                    <div class="px-2" style="width: 200px;">
+                    <div class="row text-center m-0">
-                        <div class="d-flex">
+                        <button class="dropdown-item col-4 px-0"
-                            <label class="themepicker">
+                                :class="'theme-'+t"
-                                <input type="radio" name="settingsTheme" value="light" v-model="theme.name">
+                                @click.stop="theme.name = t"
-                                <div class="themepicker-label appearance-option"></div>
+                                v-for="t in ['light', 'sepia', 'night']">
-                            </label>
+                            <span class="icon" v-if="theme.name == t">{% inline "check.svg" %}</span>
-                            <label class="themepicker">
+                        </button>
-                                <input type="radio" name="settingsTheme" value="sepia" v-model="theme.name">
+                    </div>
-                                <div class="themepicker-label appearance-option"></div>
+
-                            </label>
+                    <button class="dropdown-item" :class="{active: !theme.font}" @click.stop="theme.font = ''">System Default</button>
-                            <label class="themepicker">
+                    <button class="dropdown-item" :class="{active: theme.font == f}" v-for="f in fonts" :key="f" @click.stop="theme.font = f">
-                                <input type="radio" name="settingsTheme" value="night" v-model="theme.name">
+                        {{ f }}
-                                <div class="themepicker-label appearance-option"></div>
+                    </button>
-                            </label>
+
-                        </div>
+                    <div class="d-flex text-center">
-                        <div class="mt-2">
+                        <button class="dropdown-item" style="font-size: 0.8rem" @click.stop="incrFont(-1)">A</button>
-                            <label class="selectgroup">
+                        <button class="dropdown-item" style="font-size: 1.2rem" @click.stop="incrFont(1)">A</button>
-                                <input type="radio" name="font" value="" v-model="theme.font">
-                                <div class="selectgroup-label appearance-option">
-                                    System Default
-                                </div>
-                            </label>
-                            <label class="selectgroup" v-for="f in fonts" :key="f">
-                                <input type="radio" name="font" :value="f" v-model="theme.font">
-                                <div class="selectgroup-label appearance-option":style="{'font-family': f}">
-                                    {{ f }}
-                                </div>
-                            </label>
-                        </div>
-                        <div class="btn-group d-flex mt-2">
-                            <button class="btn btn-outline appearance-option"
-                                    style="font-size: 0.8rem" @click="incrFont(-1)">A</button>
-                            <button class="btn btn-outline appearance-option"
-                                    style="font-size: 1.2rem" @click="incrFont(1)">A</button>
-                        </div>
                     </div>
                 </dropdown>
                 <button class="toolbar-item"

src/assets/stylesheets/app.css

@@ -355,51 +355,6 @@ select.form-control:not([multiple]):not([size]) {
   outline: none;
 }
 
-.themepicker {
-  position: relative;
-  background: none;
-  border: none;
-  width: 100%;
-  margin-bottom: 0;
-}
-
-.themepicker input {
-  opacity: 0;
-  position: absolute;
-  z-index: -1;
-  top: 0; left: 0;
-}
-
-.themepicker-label {
-  height: 1.75rem;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.themepicker input[value=light] + .themepicker-label {
-  box-shadow: inset 0 0 0px 1px #dee2e6;
-  background: #fff;
-}
-
-.themepicker + .themepicker {
-  margin-left: .5rem;
-}
-
-.themepicker-label:hover {
-  box-shadow: inset 0 0 0 2px rgb(1, 123, 254, .6) !important;
-}
-
-.themepicker input:checked + .themepicker-label {
-  box-shadow: inset 0 0 0px 2px #017bfe !important;
-}
-
-.appearance-option {
-  height: 2rem;
-  padding-top: 0 !important;
-  padding-bottom: 0 !important;
-  line-height: 2rem;
-}
-
 #opml-import-form input[type="file"]::-webkit-file-upload-button {
   position: absolute;
   top: -999px;
@@ -461,6 +416,7 @@ a,
   color: #0080d4;
 }
 
+.theme-light.dropdown-item:hover,
 .dropdown-item.active,
 .dropdown-item:active,
 .selectgroup input:checked + .selectgroup-label {
@@ -475,8 +431,8 @@ a,
 
 /* theme: sepia */
 
-.themepicker input[value=sepia] + .themepicker-label,
 .theme-sepia,
+.theme-sepia.dropdown-item:hover,
 .theme-sepia .toolbar-search {
   background-color: #f4f0e5;
 }
@@ -486,7 +442,6 @@ a,
 .theme-sepia .border-top {
   border-color: #e0d6ba !important;
 }
-.theme-sepia .selectgroup-label:not(.appearance-option):hover,
 .theme-sepia .toolbar-item:hover,
 .theme-sepia .toolbar-search:hover,
 .theme-sepia .toolbar-search:focus {
@@ -495,8 +450,8 @@ a,
 
 /* theme: night */
 
-.themepicker input[value=night] + .themepicker-label,
 .theme-night,
+.theme-night.dropdown-item:hover,
 .theme-night .toolbar-search {
   color: #d1d1d1;
   background-color: #0e0e0e;
@@ -509,7 +464,6 @@ a,
   border-color: #1a1a1a !important;
 }
 
-.theme-night .selectgroup-label:not(.appearance-option):hover,
 .theme-night .toolbar-item:hover,
 .theme-night .toolbar-search:hover,
 .theme-night .toolbar-search:focus {