UI/UX Refresh

disqus/README.txt

@@ -14,6 +14,8 @@ Disqus is the web's most popular comment system. Use Disqus to increase engageme
 
 The Disqus for WordPress plugin lets site owners and developers easily add Disqus to their sites, replacing the default WordPress comment system. Disqus installs in minutes and automatically imports your existing comments.
 
+In addition to our free-to-use, ad-supported Basic plan, we also offer ad-optional subscription plans that come with more advanced features and access to priority support. Please see our [pricing page](https://disqus.com/pricing/) for more details.
+
 = Why Disqus? =
 
 * Simple one-click installation that seamlessly integrates with WordPress without ever needing to edit a single line of code or losing any of your existing comments

disqus/admin/css/disqus-admin.css

@@ -3,146 +3,268 @@
  * included in this file.
  */
 
+
 #wpadminbar #wp-admin-bar-disqus .ab-icon:before {
     content: "\f101";
     top: 3px;
 }
 
-.dsq-admin-header {
-    background: #494e58;
-    height: 100px;
-    position: absolute;
-    top: 0;
-    left: -20px;
-    right: -20px;
-    color: white;
-}
+#disqus-admin {
+    --disqus-blue: rgb(46, 159, 255);
+    .dsq-admin-header {
+        background: #494e58;
+        height: 100px;
+        position: absolute;
+        top: 0;
+        left: -20px;
+        right: -20px;
+        color: white;
+    }
 
-.dsq-admin-wrapper {
-    margin-top: 20px;
-}
+    .dsq-admin-wrapper {
+        margin-top: 20px;
+        a {
+            &:hover {
+                color: white;
+                background-color: var(--disqus-blue);
+                transition: color .3s ease-in-out, background-color .3s ease-in-out;
+            }
+        }
+        .disqus-logo {
+            img {
+                padding: 3px;
+                border: 3px transparent solid;
+            }
+            &:hover {
+                background-color: transparent;
+                img {
+                    border-bottom: 3px var(--disqus-blue) solid;
+                }
+            }
+            &:focus {
+                box-shadow: unset !important;
+            }
+        }
 
-.button-hero .disqus-icon {
-    float: left;
-    margin-top: 7px;
-    margin-right: 7px;
-}
+        input {
+            border-radius: 6px;
+        }
+        textarea {
+            border-radius: 0;
+        }
+    }
 
-.welcome-panel {
-    overflow: hidden;
-}
+    .button-hero .disqus-icon {
+        float: left;
+        margin-top: 7px;
+        margin-right: 7px;
+    }
 
-.about-description {
-    font-size: 40px !important;
-    color: #dcdcde;
-    font-weight: bold;
-    align-items: center;
-    text-align: center;
-}
+    .whats-new {
+        padding: 5px;
+        &.visible {
+            border: 2px black solid;
+            border-radius: 12px;
+            background-color: white;
+        }
+    }
 
-.welcome-panel-column .button {
-    margin-bottom: 1.33em;
-}
+    .welcome-panel {
+        overflow: hidden;
+        border-radius: 12px;
+        .welcome-panel-content {
+            min-height: unset;
+        }
+    }
 
-.button-large .dashicons {
-    margin-top: 4px;
-}
+    .about-description {
+        font-size: 40px !important;
+        color: var(--disqus-blue);
+        font-weight: bold;
+        align-items: center;
+        text-align: center;
+    }
 
-.submit .button-link {
-    text-decoration: none;
-}
+    .welcome-panel .welcome-panel-content .welcome-panel-column-container {
+        display: flex;
+        justify-content: center;
+        gap: 10vw;
+        padding: 12px;
+        @media screen and (max-width: 768px) {
+            flex-direction: column;
+            align-items: center;
+            gap: 0px;
+            ul {
+                display: flex;
+                flex-direction: column;
+            }
+        }
+        .welcome-panel-column {
+            display: flex;
+            flex-direction: column;
+            gap: 0px;
+            width: fit-content;
+            max-width: 300px;
+            .button {
+                margin-bottom: 1.33em;
+            }
+            li {
+                box-shadow: inset 0 0 0 0 var(--disqus-blue);
+                padding: .25rem;
+                transition: color 1.3s ease-in-out, box-shadow .3s ease-in-out;
+                white-space: nowrap;
+                border-radius: 12px;
+                &:hover {
+                    box-shadow: inset 150px 0 0 0 var(--disqus-blue);
+                    a {
+                        color: white;
+                    }
+                }
+                a:focus {
+                    box-shadow: unset !important;
+                }
+            }
+        }
+    }
 
-/* Placeholder spinner */
+    .nav-tab-wrapper {
+        display: flex;
+        gap: 10px;
+        border-bottom: none;
+        @media screen and (max-width: 682px) {
+            overflow: scroll hidden;
+        }
+        .nav-tab {
+            border-radius: 12px;
+            border: 1px solid #c3c4c7;
+            margin-left: 0;
+            transition: color .3s ease-in-out, background-color .3s ease-in-out;
+            &:hover {
+                background-color: var(--disqus-blue);
+                color: white;
+            }
+        }
+    }
 
-.dsq-loading-container {
-    height: 130px;
-    padding-top: 120px;
-}
+    .button-large .dashicons {
+        margin-top: 4px;
+    }
 
-.dsq-spinner {
-    z-index: 500;
+    .submit .button-link {
+        text-decoration: none;
+    }
 
-    border: 3px solid transparent;
-    border-color: transparent #c2c9d4 transparent #c2c9d4;
+    .button {
+        border-radius: 12px !important;
+        &:hover {
+            background-color: var(--disqus-blue) !important;
+            color: white !important;
+            transition: color .1s ease-in-out, background-color .3s ease-in-out !important;
+        }
+    }
 
-    animation: rotate-loading 1.2s linear 0s infinite normal;
-    transform-origin: 50% 50%;
+    .button.button-link {
+        padding: 0px 5px;
+        border-radius: 6px;
+    }
 
-    margin: auto;
-    width: 25px;
-    height: 25px;
+    /* Placeholder spinner */
 
-    border-radius: 28px;
-}
+    .dsq-loading-container {
+        height: 130px;
+        padding-top: 120px;
+    }
+
+    .dsq-spinner {
+        z-index: 500;
+
+        border: 3px solid transparent;
+        border-color: transparent #c2c9d4 transparent #c2c9d4;
 
-@keyframes rotate-loading {
-    0%  {
-        transform: rotate(0deg);
+        animation: rotate-loading 1.2s linear 0s infinite normal;
+        transform-origin: 50% 50%;
+
+        margin: auto;
+        width: 25px;
+        height: 25px;
+
+        border-radius: 28px;
     }
 
-    100% {
-        transform: rotate(360deg);
+    @keyframes rotate-loading {
+        0%  {
+            transform: rotate(0deg);
+        }
+
+        100% {
+            transform: rotate(360deg);
+        }
     }
-}
 
-.dsq-installation__instruction-list {
-    padding-left: 0px;
-    counter-reset: li 0;
-    margin: 35px 0px 0px 70px;
-}
+    .dsq-installation__instruction-list {
+        padding-left: 0px;
+        counter-reset: li 0;
+        margin: 35px 0px 0px 70px;
+    }
 
-.dsq-installation__instruction-list::before, .installation__instruction-list::after {
-    content: " ";
-    display: table;
-}
+    .dsq-installation__instruction-list::before, .installation__instruction-list::after {
+        content: " ";
+        display: table;
+    }
 
-.dsq-installation__instruction-list > li {
-    font-size: 16px;
-    line-height: 1.5em;
-    position: relative;
-    z-index: 200;
-    margin-bottom: 40px;
-    list-style: none;
-}
+    .dsq-installation__instruction-list > li {
+        font-size: 16px;
+        line-height: 1.5em;
+        position: relative;
+        z-index: 200;
+        margin-bottom: 40px;
+        list-style: none;
+    }
 
-.dsq-installation__instruction-list > li::before {
-    content: counter(li);
-    counter-increment: li 1;
-    position: absolute;
-    top: -8px;
-    left: -65px;
-    width: 40px;
-    height: 22px;
-    margin-right: 8px;
-    color: rgb(255, 255, 255);
-    font-size: 21px;
-    font-weight: 600;
-    text-align: center;
-    padding: 0.42em 0px;
-    background: rgb(255, 211, 79);
-    border-radius: 1em;
-}
+    .dsq-installation__instruction-list > li::before {
+        content: counter(li);
+        counter-increment: li 1;
+        position: absolute;
+        top: -8px;
+        left: -65px;
+        width: 40px;
+        height: 22px;
+        margin-right: 8px;
+        color: rgb(255, 255, 255);
+        font-size: 21px;
+        font-weight: 600;
+        text-align: center;
+        padding: 0.42em 0px;
+        background: rgb(255, 211, 79);
+        border-radius: 1em;
+    }
 
-.dsq-icon-support {
-    font-size: 72px;
-    width: 72px;
-    height: 72px;
-    display: block;
-    margin: 0 auto 5px auto;
-}
+    .dsq-icon-support {
+        font-size: 72px;
+        width: 72px;
+        height: 72px;
+        display: block;
+        margin: 0 auto 5px auto;
+    }
 
-.dsq-support-list-container {
-    display: flex;
-    flex-wrap: wrap;
-    list-style: none;
-}
+    .dsq-support-list-container {
+        display: flex;
+        flex-wrap: wrap;
+        list-style: none;
+    }
 
-.dsq-support-list-item {
-    text-align: center;
-    padding: 10px 30px;
-}
+    .dsq-support-list-item {
+        text-align: center;
+        padding: 10px 30px;
+    }
 
-.dsq-support-list-item a {
-    text-decoration: none;
-    font-size: 14px;
+    .dsq-support-list-item a {
+        text-decoration: none;
+        font-size: 14px;
+        &:hover {
+            border-bottom: 1px var(--disqus-blue) solid;
+            background-color: transparent;
+            color: var(--disqus-blue);
+        }
+    }
 }