v.03

Nourmasrieh · May 8, 2023 · b538a98 · b538a98
1 parent 9a449bd
commit b538a98
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 63 deletions.
diff --git a/client/css/_socialselement.css b/client/css/_socialselement.css
@@ -1,22 +1,34 @@
-.SocialsElement .cards_style .card,
-.socialpage .card{
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    min-width: 0;
-    word-wrap: break-word;
-    background-color: #fff;
-    background-clip: border-box;
-    border: 1px solid rgba(0,0,0,.125);
-    border-radius: .25rem;
+.socialcard *{
+    font-size: 16px;
+    color: #000;
+}
+.socialcard .platform__icon{
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    color: #fff !important;
+}
+.socialcard .username{
+    color: #000;
+    font-size: 14px !important;
 }
-.SocialsElement .card {
+.socialcard .card,
+.socialcard .card-footer,
+.socialcard .card-body,
+.socialcard .card-header{
     border: none;
-    border-top-left-radius: 10px !important;
-    border-top-right-radius: 10px !important;
+    border-radius: 0;
+    padding: 0;
+}
+.socialcard .card-footer {
+    background-color: #fff;
 }
-.socialpage .socialcard .rounded-social-buttons .social-button, 
-.SocialsElement .socialcard .rounded-social-buttons .social-button {
+.socialcard .profileimage {
+    border-radius: 50px;
+    width: 35px !important;
+    height: 35px !important;
+}
+.socialcard .rounded-social-buttons .social-button {
     display: inline-block;
     position: relative;
     cursor: pointer;
@@ -26,53 +38,22 @@
     padding: 0;
     text-decoration: none;
     text-align: center;
-    color: #005C89;
+    color: #fff;
     font-weight: normal;
     font-size: 24px;
-    line-height: 2em;
+    line-height: 1.8;
     border-radius: 1.6875rem;
     transition: all 0.5s ease;
     margin-right: 0.25rem;
     margin-bottom: 0.25rem;
-    background: #009a44;
+    background: #fff
 }
-
-.socialpage .socialcard .rounded-social-buttons .social-button:hover,
-.SocialsElement .socialcard .rounded-social-buttons .social-button:hover{
-    background: #005C89 !important;
+.socialcard .rounded-social-buttons .social-button:focus,
+.socialcard .rounded-social-buttons .social-button:hover{
+    color: #000;
+    background: #fff;
+    border-color: #fff;
     -webkit-transform: rotate(360deg);
     -ms-transform: rotate(360deg);
         transform: rotate(360deg);
-}
-.socialpage .socialcard .rounded-social-buttons :not(i), 
-.SocialsElement .socialcard .rounded-social-buttons :not(i) {
-    color: #005C89;
-    font-size: 18px;
-}
-.socialpage i,
-.SocialsElement  i{
-    color: #fff;
-}
-.socialpage .socialcard .rounded-social-buttons .social-button:hover i,
-.SocialsElement .socialcard .rounded-social-buttons .social-button:hover i{
-    color: #fff;
-}
-.socialpage .socialcard :not(i), 
-.SocialsElement .socialcard :not(i) {
-    color: #0158A3;
-    font-size: 13px;
-    line-height: 18px;
-}
-
-.socialpage .platform__icon,
-.SocialsElement .platform__icon {
-    position: absolute;
-    top: 5rem;
-    right: 1rem;
-}
-.socialpage .socialcard .profileimage, 
-.SocialsElement .socialcard .profileimage {
-    border-radius: 50%;
-    width: 35px;
-    height: 35px;
 }
diff --git a/templates/NourAlmasrieh/SocialWall/Layout/SocialPage.ss b/templates/NourAlmasrieh/SocialWall/Layout/SocialPage.ss
@@ -1,7 +1,5 @@
-<% require javascript('client/javascript/masonry.min.js') %>
-<% require javascript('client/javascript/swiper.min.js') %>
-<% require themedCSS('client/scss/_socialselement') %>
-<% require css('client/css/swiper.min.css') %>
+<% require javascript('nour-almasrieh/socialwall: client/javascript/masonry.min.js') %>
+<% require css('nour-almasrieh/socialwall: client/scss/_socialselement.scss') %>
 <% include PageHeader %>
 <div class="socialpage position-relative">
     <div class="container typography">

diff --git a/templates/NourAlmasrieh/SocialWall/SocialsElement.ss b/templates/NourAlmasrieh/SocialWall/SocialsElement.ss
@@ -1,7 +1,7 @@
-<% require javascript('client/javascript/masonry.min.js') %>
-<% require javascript('client/javascript/swiper.min.js') %>
-<% require themedCSS('client/scss/_socialselement') %>
-<% require css('client/css/swiper.min.css') %>
+<% require javascript('nour-almasrieh/socialwall: client/javascript/masonry.min.js') %>
+<% require javascript('nour-almasrieh/socialwall: client/javascript/swiper.min.js') %>
+<% require css('nour-almasrieh/socialwall: client/css/swiper.min.css') %>
+<% require css('nour-almasrieh/socialwall: client/scss/_socialselement.scss') %>
 <div ID="SocialsElement{$ID}" class="SocialsElement py-5" style="background-color: $BackgroundColor;">
     <% if $Title || $Content || $ButtonCaption %>
         <div class="container typography socialcards">