Dropdown style

epicyon-profile.css

@@ -690,19 +690,8 @@ a, button, input:focus, input[type='button'], input[type='reset'], input[type='s
     font-size:2rem;
     letter-spacing:1px;
     outline:none;
-    box-shadow: 20px 38px 34px -26px hsla(0,0%,0%,.2);
-    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
-    border-top-left-radius: 255px 15px;
-    border-top-right-radius: 15px 225px;
-    border-bottom-right-radius: 225px 15px;
-    border-bottom-left-radius:15px 255px;
-}
-.button-msgScope button:hover {
-    box-shadow:2px 8px 4px -6px hsla(0,0%,0%,.3);
 }
 .btn {
-    background: #fff;
-    border: 1px solid #BEE7ED;
     margin: -3px 0 0 0;
 }
 
@@ -710,16 +699,6 @@ aside .toggle-msgScope input[type='checkbox'] {
   float: right;
 }
 
-aside .toggle-inside li {
-  padding-left: 20px;
-  border-bottom: 1px solid #EEEDEE;
-  border-left: 5px solid rgba(101, 110, 127, 0.34);
-  width: 100%;
-  margin-left: -15px;
-  overflow: hidden;
-  box-shadow: 0 1px 1px #F0F1F3;
-}
-
 .dropdown-menutoggle {
   -webkit-margin-start: 0px;
   -webkit-margin-end: 0px;
@@ -729,24 +708,20 @@ aside .toggle-inside li {
   position: absolute;
   top: 100%;
   left: 21px;
+  width: 300%;
+  min-width: 100%;
   z-index: 1000;
   display: block;
   float: left;
-  min-width: 169px;
   padding: 0 17px !important;
   margin: 2px 0 0 !important;
-  font-size: 14px;
+  font-size: var(--font-size2);
   text-align: left;
   list-style: none;
   color: var(--dropdown-fg-color);
   background-color: var(--dropdown-bg-color);
   -webkit-background-clip: padding-box;
   background-clip: padding-box;
-  border: 1px solid #ccc;
-  border: 1px solid rgba(0, 0, 0, .15);
-  border-radius: 4px;
-  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175) !important;
-  box-shadow: 0 6px 12px rgba(0, 0, 0, .175) !important;
 }
 
 .dropdown-menutoggle a {
@@ -761,6 +736,11 @@ aside .toggle-inside li {
     line-height: 2rem;
     font-size: 2.5rem;
 }
+.toggle-msgScope img {
+    width: 32px;
+    height: 32px;
+    padding: 0px 0px;
+} 
 .toggle-msgScope div[class*='toggle-inside'] {
    /* margin: -22px 0 13px 0;*/
     overflow: hidden;
@@ -772,40 +752,26 @@ aside .toggle-msgScope input[type='checkbox'] {
 }
 aside .toggle-inside li {
     padding-left: 20px;
-    border-bottom: 1px solid #EEEDEE;
-    border-left: 5px solid rgba(101, 110, 127, 0.34);
     width: 100%;
     margin-left: -15px;
     overflow: hidden;
-    box-shadow: 0 1px 1px #F0F1F3;
 }
-.nav li {
+.nav li:hover {
-    border-top: 0 solid #fff !important;
+    color: var(--dropdown-fg-color-hover);
+    background-color: var(--dropdown-bg-color-hover);
 }
 .nav .toggle-msgScope {
     overflow: visible;
 }
-footer .msgscope {
-    height: 6rem;
-}
 #msgscope label div {
-    color: #fff !important;
     -webkit-transition: all 0.1s ease-in-out;
     -moz-transition: all 0.1s ease-in-out;
     -ms-transition: all 0.1s ease-in-out;
     -o-transition: all 0.1s ease-in-out;
     transition: all 0.1s ease-in-out;
     /*width: 170px;*/
-    padding: 15px;
     margin: 0 auto;
-    border: 1px solid #ccc;
-    /*border-radius: 33px;
-    -webkit-border-radius: 3px;
-    -moz-border-radius: 3px;
-    border-radius: 3px;
-    border-radius: 4px;*/
     font-size: 1.5rem;
-    padding: 10px 10px 10px 10px;
     text-decoration: none;
     display: inline-block;
     font-weight: bold;
@@ -818,8 +784,7 @@ footer .msgscope {
     cursor: pointer;
     background-image: none;
     white-space: nowrap;
-    padding: 6px 12px;
+    font-size: 0px;
-    font-size: 14px;
     line-height: 1.42857143;
     -webkit-user-select: none;
     -moz-user-select: none;
@@ -827,29 +792,6 @@ footer .msgscope {
     user-select: none;
     margin-top: 10px;
 }
-#msgscope ul .divider {
-    height: 1px;
-    margin: 9px 0;
-    overflow: hidden;
-    background-color: #e5e5e5;
-}
-#msgscope label div:active {
-    background-color: #CE1119;
-    outline: 0;
-    background-image: none;
-    -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
-    box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
-    border-color: #adadad;
-    background-image: none;
-}
-#msgscope label div:active:focus {
-    outline: thin dotted;
-    outline: 5px auto -webkit-focus-ring-color;
-    outline-offset: -2px;
-}
-#msgscope label div:focus {
-    background-color: #e6e6e6;
-}
 [id*='toggle'] .container, [class*='toggle'] .container  {
     transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
 }
@@ -881,23 +823,14 @@ footer .msgscope {
     float: left;
 }
 #msgscope label div {
-    color: #fff !important;
     -webkit-transition: all 0.1s ease-in-out;
     -moz-transition: all 0.1s ease-in-out;
     -ms-transition: all 0.1s ease-in-out;
     -o-transition: all 0.1s ease-in-out;
     transition: all 0.1s ease-in-out;
     /*width: 170px;*/
-    padding: 15px;
     margin: 0 auto;
-    border: 1px solid #ccc;
-    /*border-radius: 33px;
-    -webkit-border-radius: 3px;
-    -moz-border-radius: 3px;
-    border-radius: 3px;
-    border-radius: 4px;*/
     font-size: 1.5rem;
-    padding: 10px 10px 10px 10px;
     text-decoration: none;
     display: inline-block;
     font-weight: bold;
@@ -906,13 +839,12 @@ footer .msgscope {
     background-color: #e85c41;
     display: inline-block;
     margin-bottom: 0;
-    text-align: center;
+    text-align: left;
     vertical-align: middle;
     cursor: pointer;
     background-image: none;
     white-space: nowrap;
-    padding: 6px 12px;
+    font-size: 0px;
-    font-size: 14px;
     line-height: 1.42857143;
     -webkit-user-select: none;
     -moz-user-select: none;
@@ -920,29 +852,6 @@ footer .msgscope {
     user-select: none;
     margin-top: 10px;
 }
-#msgscope ul .divider {
-    height: 1px;
-    margin: 9px 0;
-    overflow: hidden;
-    background-color: #e5e5e5;
-}
-#msgscope label div:active {
-    background-color: #CE1119;
-    outline: 0;
-    background-image: none;
-    -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
-    box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
-    border-color: #adadad;
-    background-image: none;
-}
-#msgscope label div:active:focus {
-    outline: thin dotted;
-    outline: 5px auto -webkit-focus-ring-color;
-    outline-offset: -2px;
-}
-#msgscope label div:focus {
-    background-color: #e6e6e6;
-}
 [id*='toggle'] .container, [class*='toggle'] .container  {
     transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
 }

webinterface.py

@@ -1968,10 +1968,10 @@ def htmlNewPost(mediaInstance: bool, translate: {},
         dropdownDMSuffix += '?mention=' + mentionedActor
         dropdownReportSuffix += '?mention=' + mentionedActor
 
-    dropDownContent = \
+    # dropDownContent = \
-        '<img loading="lazy" alt="" title="" src="/' + iconsDir + \
+    #     '<img loading="lazy" alt="" title="" src="/' + iconsDir + \
-        '/' + scopeIcon + '"/><b class="scope-desc">' + \
+    #     '/' + scopeIcon + '"/><b class="scope-desc">' + \
-        scopeDescription + '</b>'
+    #     scopeDescription + '</b>'
     if not reportUrl:
         dropDownContent += "<div class='msgscope-collapse collapse "
         dropDownContent += "right desktoponly' id='msgscope'>\n"