word-games-theme 2.1.7 → 2.1.8

data/assets/css/wordgames-result.css

@@ -0,0 +1,498 @@
+/***************
+ Result page css 
+ ***************/
+
+/* common loader css */
+.loader {
+  width: 100%;
+  text-align: center;
+}
+
+.loader img {
+  height: 100px;
+}
+
+
+ input:-webkit-autofill,
+ input:-webkit-autofill:hover,
+ input:-webkit-autofill:focus,
+ input:-webkit-autofill:active {
+   transition: background-color 5000s ease-in-out 0s;
+ }
+ 
+ .btn-info:not(:disabled):not(.disabled).active:focus,
+ .btn-info:not(:disabled):not(.disabled):active:focus,
+ .show>.btn-info.dropdown-toggle:focus {
+   box-shadow: unset;
+   border-color: rgba(0, 0, 0, 0.1);
+ }
+ 
+ /* navbar css for result page */
+ .result_navbar_section {
+   width: 100%;
+   padding: .8rem 9% !important;
+   position: sticky;
+   top: 0;
+   z-index: 99999;
+ }
+ .header_bars{
+  background-color: var(--black-color);
+ }
+ 
+ .result_navbar_section .mobile_bars {
+  cursor: pointer;
+    position: absolute;
+    top: 13px;
+    /* margin: 0 40px; */
+    left: 110px;
+ }
+ 
+ .mobile_bars .bars {
+   position: relative;
+   color: #000;
+   font-size: 35px;
+ }
+ 
+ .fillterWrapper .filter-tooltip{
+  top: 10px !important
+ }
+ .result_navbar_section #open_list_bar {
+   position: fixed;
+   top: 0px;
+   left: -100%;
+   z-index: 999;
+   height: 100vh;
+   transition: all .5s ease-in-out;
+   list-style: none;
+   box-shadow: 0 0 5px grey;
+   background: #f8f9fa;
+   overflow-y: scroll;
+ }
+ 
+ #open_list_bar .cat_bar_logo_link {
+   padding: 0 15px;
+ }
+ 
+ #open_list_bar .cat_bar_logo_link .cat_bar_img {
+   width: 30px;
+ }
+ 
+ #open_list_bar .cat_title {
+   color: #000;
+   font-weight: 900;
+   font-size: 14px;
+   position: relative;
+   left: 10px;
+   top: 3px;
+ }
+ 
+ #open_list_bar .close_bar_btn {
+   position: absolute;
+   right: 8px;
+   font-size: 28px;
+   top: 15px;
+   cursor: pointer;
+ }
+ 
+ .list-items-container .list_cat_heading {
+   padding: 8px 15px;
+   background-color: var(--primary-color);
+   color: #fff;
+   font-size: 13px;
+ }
+ 
+ .list-items-container .list_cat_name {
+   padding: 8px 15px;
+   font-size: 12px;
+   border-bottom: 1px solid rgb(209, 213, 219)
+ }
+ 
+ .list-items-container .list_cat_name:active {
+   color: #000 !important
+ }
+ 
+ .list-items-container .list_cat_name:hover {
+   background-color: #e9ecef;
+ }
+ 
+ /* h1,h2 for result page , searchbox and length selector css*/
+ .pageHeading>.result_heading {
+   font-size: 22px;
+   font-weight: 600;
+   color: #000;
+ }
+ 
+ .serachSection {
+   height: auto;
+ }
+ 
+ 
+ .letter-close-button-commonPage {
+   position: absolute;
+   right: 300px;
+   top: 24px;
+   font-size: 15px;
+   cursor: pointer;
+   display: none;
+ }
+ 
+ .ltr-cls-btn-commonPage {
+   display: block;
+ }
+ 
+ .tab_link_wrapper {
+   display: flex;
+   width: 100%;
+   justify-content: center;
+   background: var(--black-color);
+   border-radius: 40px;
+   margin: 10px 0px;;
+   padding: 10px;
+   /* border: 2px solid var(--black-color); */
+ }
+ 
+ .tab_link_wrapper .flex-row {
+   -ms-flex-direction: row !important;
+   flex-direction: row !important;
+   display: flex;
+   overflow: hidden;
+   margin: 0 25px;
+ }
+ 
+ .tab_link_wrapper #next {
+   background: url('/assets/images/next.webp');
+   background-size: cover;
+   width: 21px;
+   height: 21px;
+   object-fit: cover;
+   padding: 3px;
+   border: none;
+   position: absolute;
+   top: 6px;
+   right: 10px;
+ }
+ 
+ .tab_link_wrapper #prev {
+   background: url('/assets/images/prev.webp');
+   background-size: cover;
+   width: 21px;
+   height: 21px;
+   object-fit: cover;
+   padding: 3px;
+   border: none;
+   position: absolute;
+   top: 6px;
+   left: 10px;
+ }
+ 
+ .active-tab {
+   border-bottom: solid 3px var(--primary-color) !important;
+ }
+ 
+ .tab_link_wrapper .tab_link {
+   font-size: 15px;
+   font-weight: 900;
+   margin: 0 5px;
+   padding-top: 5px;
+   border: none;
+   outline: none;
+   background-color: inherit;
+   color: white
+ }
+ 
+ /* advanced filter and sorting css */
+ .Advancedbtn .filter_count {
+   width: 20px;
+   color: white;
+   height: 20px;
+   text-align: center;
+   background-color: #808080;
+   padding-top: 2px;
+   border-radius: 50%;
+   margin-right: 1px;
+   position: relative;
+   left: 150px;
+ }
+ 
+ .Advancedbtn .filterButton {
+   background: #f8f9fa;
+   box-shadow: 0 0 3px #343a4063;
+   width: 190px;
+   border-radius: 10px;
+   border: none;
+   outline: none;
+   font-weight: 900;
+   font-size: 13px;
+   padding: 8.5px;
+   text-align: left;
+ }
+ 
+ .Advancedbtn .angle-arrow {
+   background: url(../images/angle-arrow-down.svg) no-repeat;
+   background-size: contain;
+   width: 10px;
+   height: 20px;
+   font-weight: 900;
+   position: absolute;
+   top: 20px;
+   right: 5px;
+   margin: -3px 0;
+ }
+
+ 
+ /* .fillterWrapper .same {
+   margin-bottom: 10px;
+ } */
+/*  
+ .tick {
+   background: url("/assets/images/close-btn.svg") no-repeat;
+   background-position: 95% 50%;
+ } */
+ 
+ 
+ .sort-select,
+ #select_dropDown {
+   background: #f8f9fa;
+   border: solid 1px var(--black-color);
+   box-shadow: 2px 2px 1px 0px var(--black-color);
+   word-wrap: normal;
+   width: 190px;
+   border-radius: 10px;
+   cursor: pointer;
+   padding: 10px;
+   text-align: left;
+   color: #1c1107;
+   font-size: 13px;
+   font-weight: 600;
+   font-stretch: normal;
+   font-style: normal;
+   outline: none;
+ }
+ .length-select{
+  background: #f8f9fa;
+    border: solid 1px var(--black-color);
+    box-shadow: 2px 2px 1px 0px var(--black-color);
+    word-wrap: normal;
+    width: 190px;
+    border-radius: 10px;
+    cursor: pointer;
+    padding: 10px;
+    text-align: left;
+    color: #1c1107;
+    font-size: 13px;
+    font-weight: 600;
+    font-stretch: normal;
+    font-style: normal;
+    outline: none;
+ }
+ 
+ /* result data css */
+ #home_page_search_result {
+   padding: 10px;
+   font-size: 12px;
+ }
+ 
+ #home_page_search_result:hover {
+   text-decoration: underline !important;
+ }
+ 
+ .wordCount {
+   text-indent: 10px;
+   font-size: 18px;
+ }
+ 
+ .filterSortedIcons {
+   flex-basis: 11%;
+   display: flex;
+   font-size: 20px;
+   gap: 20px;
+   cursor: pointer;
+   display: none
+ }
+ 
+ .allGroupWords {
+   background-color: white !important;
+   width: auto;
+   height: auto;
+   border-radius: 15px;
+   box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
+   margin: 10px 0;
+   border:2px solid var(--black-color)
+ }
+ 
+ .allGroupWords>.wordListHeading {
+   background: var(--black-color);
+   padding: 10px 0px 5px 25px;
+   border-top-right-radius: 13px;
+   border-top-left-radius: 13px;
+   color: #fff;
+ }
+ 
+ .wordListHeading>h3 {
+   font-size: 20px;
+   font-weight: 600;
+ }
+ 
+ .wordList {
+   padding: 15px;
+ }
+ 
+ .wordList>ul {
+   display: inline-flex;
+   width: 100%;
+   flex-wrap: wrap;
+ }
+ .fillterWrapper input{
+  padding: 10px !important;
+  font-size: 14px;
+  width: 140px;
+ }
+ .fillterWrapper .filter-tooltip img{
+  width: 22px;
+ }
+ 
+ .wordList>ul li {
+  
+   padding: 8px 0;
+   background: #f8f9fa;
+   border-radius: 5px;
+   margin: 6px 6px;
+   width: auto;
+   min-width: 100px;
+   text-align: center;
+   border: solid 1px var(--black-color);
+   box-shadow: 2px 2px 1px 0px var(--black-color);
+ }
+ 
+ .wordList .anchor__style {
+   color: #000 !important;
+   font-size: 15px;
+   text-decoration: none !important;
+   font-weight: 600;
+ }
+ 
+ .wordList .anchor__style .highlight {
+   color: #ff0000 !important;
+ }
+ 
+ .points {
+   color: #73716e;
+   font-weight: 600;
+ }
+ 
+ .errorMsg {
+   text-align: center;
+   font-size: 20px;
+   color: red;
+   font-weight: 800;
+ }
+ 
+ /* close */
+ 
+ 
+ @media (max-width: 768px) {
+ 
+   /* result page navbar, closebtn, heading css for mobile */
+   .allGroupWords,.allGroupWords>.wordListHeading{
+    border-radius: 0px;
+    border: none;
+   }
+   .result_navbar_section {
+     padding: 1.2rem 15px !important;
+   }
+ 
+   .nav_menu_bar {
+     display: none;
+   }
+ 
+   .result_navbar_section .mobile_bars {
+     display: block;
+     position: absolute;
+     top: 30px;
+     margin: 0;
+     left: 30px;
+   }
+ 
+   .letter-close-button-commonPage {
+    right: 45%;
+    top: 17px;
+    font-size: 15px;
+   }
+   .letter-close-button-commonPage  svg{
+    width: 30px;
+   }
+ 
+   .pageHeading>.result_heading {
+     font-size: 1.8rem;
+     padding-left: 25px;
+   }
+ 
+   /* length selector css for mobile */
+ 
+   .tab_link_wrapper .flex-row {
+     margin: 0 15px;
+   }
+ 
+   .tab_link_wrapper .tab_link {
+     font-size: 12px;
+   }
+ 
+   .tab_link_wrapper #prev {
+     top: 6px;
+     left: 5px;
+     width: 16px;
+     height: 16px;
+   }
+ 
+   .tab_link_wrapper #next {
+     top: 6px;
+     right: 5px;
+     width: 16px;
+     height: 16px;
+   }
+ 
+   /* advanced filter and sorting css for mobile */
+   .angle-arrow {
+     display: none;
+   }
+ 
+   .Advancedbtn .filterButton {
+     display: none;
+   }
+ 
+   .fillterWrapper {
+     right: auto;
+     position: fixed;
+     left: 0px;
+     top: 135px;
+     width: 100%;
+   }
+ 
+   .Advancedbtn .filter_count {
+     display: none !important;
+   }
+ 
+   .filterSortedIcons {
+     display: flex;
+     gap: 8px;
+   }
+   .fillterWrapper{
+    position: static;
+   }
+   .filters{
+    flex-direction: column;
+   }
+   #sort-select{
+    margin-top: 1rem;
+   }
+ 
+   /* result data css for mobile */
+   .pad {
+     padding-bottom: 50px;
+   }
+ 
+   .wordCount {
+     font-size: 1.3rem;
+   }
+ 
+ }

data/assets/css/wordgames-theme.css

@@ -0,0 +1,227 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;1,300&display=swap');
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html {
+    scroll-behavior: smooth;
+    font-size: 62.5%;
+}
+
+body {
+    padding: 0;
+    margin: 0;
+    -webkit-font-smoothing: antialiased;
+    font-family: var(--font-family);
+    overflow-x: hidden !important;
+}
+
+/* header && navbar css */
+header {
+    width: 100%;
+    position: sticky;
+    top: 0;
+    left: 0;
+    z-index: 999;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.navbar {
+    background-color: var(--black-color);
+    padding: 1.2rem 9% !important;
+}
+
+.navbar-brand {
+    font-size: 2.2rem;
+    color: var(--white-color) !important;
+    font-weight: 900;
+    position: relative;
+}
+
+.navbar-dark .navbar-toggler {
+    padding: 0px !important;
+}
+
+.header_bars {
+    width: 25px;
+    height: 0.2rem;
+    background-color: var(--white-color);
+    margin: 6px 0;
+}
+
+.navbar-nav .nav-item {
+    padding: 0 15px;
+}
+
+.navbar-nav .nav-link {
+    text-decoration: none !important;
+    font-size: 16px;
+    color: var(--white-color) !important;
+}
+
+.navbar-nav .nav-link:hover {
+    color: var(--white-color) !important;
+    transition: all 0.2s linear;
+}
+
+.navbar-nav .top_tool_bar {
+    max-height: 700px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    font-size: 14px;
+    border: none;
+    background: var(--white-color);
+    top: 60px !important;
+    width: 100%;
+}
+
+.dropdown-menu.show {
+    padding: 3.5rem 9% !important;
+    grid-template-columns: auto auto auto auto !important;
+}
+
+.dropdown-item {
+    color: var(--black-color) !important
+}
+
+
+/* Footer design css */
+.footer-section {
+    padding: 20px 0px;
+    background-color: var(--black-color);
+    margin-top: 3rem;
+}
+
+.footer-section .txt-primary {
+    color: var(--white-color);
+    font-size: 16px;
+    text-decoration: none !important;
+}
+
+.footer-section .txt-secondary {
+    color: var(--white-color);
+    font-size: 15px;
+    text-decoration: none;
+    /* margin: 1rem 0px; */
+}
+
+.footer-section .txt-secondary:hover {
+    color: var(--white-color);
+    text-decoration: underline;
+}
+
+.footer-logo-cont {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    font-size: 20px;
+    color: var(--white-color);
+    font-weight: 900;
+}
+
+.footer_hr {
+    width: 50px;
+    margin: 2rem auto;
+    border: 2px solid var(--white-color);
+}
+
+.footer-social-list .list-inline {
+    padding-left: 0;
+    list-style: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 40px;
+}
+
+.footer-social-list ul li a i {
+    width: 35px;
+    height: 35px;
+    line-height: 35px;
+    text-align: center;
+    vertical-align: middle;
+    font-size: 18px;
+    background: #000;
+    color: transparent;
+    transition: all 0.3s ease-in;
+}
+
+.copyright-text {
+    font-size: 17px;
+    color: #3E3E3E;
+    justify-content: space-around;
+}
+
+.footer-bottom .drop-down-btn {
+    cursor: pointer;
+    outline: 0px;
+    border: 0px;
+    width: auto;
+    overflow: visible;
+    display: flex;
+    -webkit-box-align: center;
+    align-items: center;
+    background-color: transparent;
+    transition: background-color 0.1s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+    color: rgb(26, 26, 26);
+}
+
+.footer-bottom .drop-down-btn svg {
+    height: 22px;
+}
+
+.footer-bottom .language-drop-down-menu {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    flex-wrap: wrap;
+}
+
+.footer-bottom .language-drop-down-item {
+    width: 50%;
+    padding: 10px 12px 1px 1px;
+    text-align: center;
+    font-size: 15px;
+    margin-bottom: 0;
+    list-style: none;
+}
+
+.footer-bottom .language-drop-down-item a {
+    justify-content: space-between;
+    display: flex;
+    width: 100%;
+    align-items: center;
+    padding: 9px 9px;
+    color: #11304e;
+    border-bottom: 1px solid rgb(224, 224, 224);
+}
+
+.footer-bottom .language-drop-down-item a:hover {
+    background: rgb(238, 238, 238);
+    border-radius: 3px;
+}
+
+.footer-bottom .language-drop-down-item a i {
+    margin: 0;
+}
+
+.footer-bottom .language-drop-down-menu .active-lang {
+    background: rgb(238, 238, 238);
+    border-radius: 3px;
+}
+
+.footer-bottom .modal .modal-title {
+    font-size: 2.28rem;
+}
+
+.footer-bottom .modal .close {
+    font-size: 3rem;
+}

data/assets/css/wordgames-variables.css

@@ -0,0 +1,20 @@
+:root {
+    --primary-color: #0CC48B;
+    --font-size: 16px;
+    --secondary-color: #E0FDFE;
+    --secondary-color-1: #fafafa;
+    --secondary-color-3: #f4f5ff;
+    --black-color: #191919;
+    --white-color: #ffffff;
+    --black-light: #777777;
+    --font-family: 'Poppins', sans-serif;
+    --text-color: #303030;
+    --success-color: #3de968;
+    --error-color: #e33e3e;
+    --warning-color: #efcf2a;
+    --dark-gray: #4d4d4d;
+    --mid-gray: #1d1d1d;
+    --light-gray: rgb(137, 137, 137);
+    --tooltip-padding: 0.5rem;
+    --tooltip-border-style: 0.5rem;
+  }