TASK/TUP-495 Adding search styles (#383)

* tup-495-adding-search-styles

* added some more changes. added comments.

* adjust verticle align and text for search stats and branding

* Adjusts architecture of styles. Moved to trumps.

* fix: load new trumps CSS after other kinds

The change 36e5df3 alone had no effect. It was jsut a file move.

To have the desired effect[^1], the file must be loaded at the end.

[^1]: #383 (comment)

* docs: explain inconsistent use of anonymous layer

---------

Co-authored-by: Wesley Bomar <[email protected]>

apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-cms/trumps/search-elements.css

@@ -0,0 +1,137 @@
+#cms-content {
+    /* Whole Search Container */
+    /* removes padding from search container */
+    & .gsc-control-cse {
+        padding: unset;
+    }
+
+    /* make header same as news */
+    & h1 {
+        color: var(--global-color-primary--x-dark);
+    }
+
+
+
+
+
+    /* Table containing search stats and sorting selection options */
+    /* remove border from search analytics, add gray background */
+    & .gsc-above-wrapper-area {
+        border-bottom: unset;
+        margin-inline: -100vw;
+        padding-inline: 100vw;
+        background: var(--global-color-primary--x-light);
+    }
+
+    & .gsc-above-wrapper-area-container {
+        border-bottom: unset;
+    }
+
+    & tbody>tr:first-child>:is(td, th) {
+        border: unset;
+        padding-inline: unset;
+        background: unset;
+        vertical-align: middle;
+    }
+
+    & .gsc-selected-option-container {
+        background: #fff;
+        border: var(--global-border--normal);
+    }
+
+    & .gsc-result-info {
+        padding: unset;
+        font-size: var(--global-font-size--medium);
+    }
+
+
+
+
+
+    /* Suggestion phrase after "Did you mean:" */
+    & .gs-spelling a {
+        color: var(--global-color-accent--normal);
+    }
+
+    & .gs-spelling {
+        padding: unset;
+    }
+
+
+
+
+
+    /* Search Results */
+    /* search result body text */
+    & .gs-snippet {
+        color: var(--global-color-primary--dark);
+    }
+
+    /* url under search result title */
+    & .gs-webResult div.gs-visibleUrl {
+        color: var(--global-color-accent--secondary);
+    }
+
+    /* search result titles */
+    & a.gs-title:link {
+        color: var(--global-color-accent--normal);
+        text-decoration: none;
+        text-decoration-thickness: var(--global-border-width--normal);
+        text-underline-offset: 0.2em;
+    }
+
+    & a.gs-title:link:hover {
+        text-decoration-line: underline;
+        text-decoration-style: solid;
+    }
+
+    /* push search-result description to right */
+    & .gs-image-box {
+        margin-right: 10px;
+    }
+
+
+
+
+
+    /* Bottom Google Page Navigation */
+    & .gsc-cursor-box {
+        display: flex;
+        justify-content: center;
+        margin-block: var(--global-space--large);
+    }
+
+    & .gsc-cursor-current-page {
+        color: var(--global-color-accent--normal);
+        text-decoration: none;
+        text-decoration-thickness: var(--global-border-width--normal);
+        text-underline-offset: 0.2em;
+    }
+
+    & .gsc-cursor-current-page:hover {
+        text-decoration-line: underline;
+        text-decoration-style: solid;
+    }
+
+
+
+
+
+    /* adjusts google branding */
+    & .gcsc-find-more-on-google {
+        color: var(--global-color-accent--normal);
+        text-decoration: none;
+        text-decoration-thickness: var(--global-border-width--normal);
+        text-underline-offset: 0.2em;
+    }
+
+    & .gcsc-find-more-on-google:hover {
+        text-decoration-line: underline;
+        text-decoration-style: solid;
+    }
+
+    & .gcsc-branding-img-noclear {
+        vertical-align: unset;
+        top: 1px;
+    }
+}

apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/tup-cms.for-core-cms.css

@@ -22,3 +22,5 @@
 
 /* TRUMPS */
 /* … */
+/* FAQ: To certainly override third-party CSS, these load in anonymous layer */
+@import url("./for-core-cms/trumps/search-elements.css");