slicejs-web-framework 1.0.19 → 1.0.21

package/src/Components/AppComponents/WhatIsSlice/WhatIsSlice.css

@@ -1,475 +0,0 @@
-slice-whatisslice {
-  font-family: var(--font-family);
-  color: var(--font-primary-color);
-}
-
-slice-whatisslice .whatisslice-container {
-  max-width: 1000px;
-  margin: 0 auto;
-  padding: 20px;
-}
-
-slice-whatisslice h1 {
-  color: var(--primary-color);
-  font-size: 2.5em;
-  margin-bottom: 30px;
-  text-align: center;
-}
-
-slice-whatisslice h2 {
-  color: var(--primary-color);
-  font-size: 1.8em;
-  margin: 40px 0 20px;
-  padding-bottom: 8px;
-  border-bottom: 1px solid var(--secondary-background-color);
-}
-
-slice-whatisslice h3 {
-  color: var(--font-primary-color);
-  font-size: 1.4em;
-  margin: 20px 0 15px;
-}
-
-slice-whatisslice h4 {
-  font-size: 1.2em;
-  margin: 15px 0 10px;
-}
-
-slice-whatisslice p {
-  line-height: 1.6;
-  margin-bottom: 15px;
-}
-
-/* Intro Section */
-slice-whatisslice .intro-section {
-  display: flex;
-  align-items: center;
-  margin: 30px 0;
-  gap: 40px;
-}
-
-slice-whatisslice .intro-text {
-  flex: 3;
-}
-
-slice-whatisslice .intro-image {
-  flex: 1;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-slice-whatisslice .slice-logo-container {
-  width: 150px;
-  height: 186px;
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-
-slice-whatisslice .slice-logo {
-  max-width: 200px;
-  height: auto;
-  transition: transform 0.3s ease;
-  /* Apply theme's primary color using CSS filter */
-  filter: brightness(0) saturate(100%) drop-shadow(0 0 0.1rem var(--primary-color));
-}
-
-slice-whatisslice .slice-logo-container:hover .slice-logo {
-  transform: scale(1.05);
-  filter: brightness(0) saturate(100%) drop-shadow(0 0 0.2rem var(--primary-color));
-}
-
-/* Tabs */
-slice-whatisslice .tabs-container {
-  margin: 40px 0;
-  border-radius: var(--border-radius-slice);
-  overflow: hidden;
-  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
-}
-
-slice-whatisslice .tabs {
-  display: flex;
-  background-color: var(--secondary-background-color);
-  border-bottom: 1px solid var(--primary-color-shade);
-}
-
-slice-whatisslice .tab {
-  padding: 15px 20px;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  font-weight: bold;
-  text-align: center;
-  flex: 1;
-}
-
-slice-whatisslice .tab:hover {
-  background-color: var(--primary-background-color);
-  color: var(--primary-color);
-}
-
-slice-whatisslice .tab.active {
-  background-color: var(--primary-color);
-  color: var(--primary-color-contrast);
-}
-
-slice-whatisslice .tab-contents {
-  background-color: var(--primary-background-color);
-  padding: 25px;
-  min-height: 400px;
-}
-
-slice-whatisslice .tab-content {
-  display: none;
-}
-
-slice-whatisslice .tab-content.active {
-  display: block;
-  animation: fadeIn 0.5s ease;
-}
-
-/* Core Principles Grid */
-slice-whatisslice .principles-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 25px;
-  margin: 30px 0;
-}
-
-slice-whatisslice .principle {
-  background-color: var(--secondary-background-color);
-  padding: 20px;
-  border-radius: var(--border-radius-slice);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  transition: transform 0.3s ease;
-}
-
-slice-whatisslice .principle:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
-}
-
-slice-whatisslice .principle h3 {
-  color: var(--primary-color);
-  margin-top: 0;
-  border-bottom: 1px solid var(--primary-color-shade);
-  padding-bottom: 8px;
-}
-
-/* Features List */
-slice-whatisslice .features-list {
-  list-style: none;
-  padding-left: 0;
-  margin: 20px 0;
-}
-
-slice-whatisslice .features-list li {
-  margin-bottom: 12px;
-  padding-left: 30px;
-  position: relative;
-}
-
-slice-whatisslice .features-list li:before {
-  content: "✓";
-  position: absolute;
-  left: 0;
-  color: var(--primary-color);
-  font-weight: bold;
-}
-
-slice-whatisslice .feature-highlight {
-  color: var(--primary-color);
-  font-weight: bold;
-}
-
-/* Architecture Diagram */
-slice-whatisslice .architecture-diagram {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  margin: 30px 0;
-  position: relative;
-}
-
-slice-whatisslice .component-box {
-  padding: 20px;
-  border-radius: var(--border-radius-slice);
-  text-align: center;
-  cursor: pointer;
-  transition: all 0.3s ease;
-}
-
-slice-whatisslice .component-box h3 {
-  margin: 0 0 10px;
-}
-
-slice-whatisslice .component-box p {
-  margin: 0;
-  font-size: 0.9em;
-}
-
-slice-whatisslice .component-box.visual {
-  background-color: rgba(var(--primary-color-rgb), 0.15);
-  border: 2px solid var(--primary-color);
-}
-
-slice-whatisslice .component-box.structural {
-  background-color: rgba(var(--secondary-color-rgb), 0.15);
-  border: 2px solid var(--secondary-color);
-}
-
-slice-whatisslice .component-box.service {
-  background-color: var(--secondary-background-color);
-  border: 2px solid var(--font-primary-color);
-}
-
-slice-whatisslice .component-description {
-  position: absolute;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 250px;
-  background-color: var(--primary-background-color);
-  border: 1px solid var(--primary-color-shade);
-  border-radius: var(--border-radius-slice);
-  padding: 15px;
-  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
-  opacity: 0;
-  visibility: hidden;
-  transition: all 0.3s ease;
-  z-index: 2;
-}
-
-slice-whatisslice .component-description.visible {
-  opacity: 1;
-  visibility: visible;
-}
-
-slice-whatisslice .component-description h4 {
-  margin-top: 0;
-  color: var(--primary-color);
-}
-
-slice-whatisslice .component-description code {
-  display: block;
-  background-color: var(--secondary-background-color);
-  padding: 5px;
-  margin-top: 10px;
-  font-family: monospace;
-  border-radius: 3px;
-}
-
-/* Data Flow */
-slice-whatisslice .data-flow {
-  margin: 20px 0;
-  padding-left: 25px;
-}
-
-slice-whatisslice .data-flow li {
-  margin-bottom: 10px;
-}
-
-/* Component Sections */
-slice-whatisslice .component-section {
-  margin-bottom: 40px;
-}
-
-slice-whatisslice .code-example {
-  background-color: var(--secondary-background-color);
-  border-radius: var(--border-radius-slice);
-  overflow: hidden;
-  margin: 20px 0;
-}
-
-slice-whatisslice pre {
-  margin: 0;
-  padding: 15px;
-  overflow-x: auto;
-}
-
-slice-whatisslice code {
-  font-family: 'Courier New', monospace;
-}
-
-slice-whatisslice .lifecycle-list {
-  list-style: none;
-  padding-left: 0;
-}
-
-slice-whatisslice .lifecycle-list li {
-  margin-bottom: 10px;
-  padding-left: 20px;
-  position: relative;
-}
-
-slice-whatisslice .lifecycle-list li:before {
-  content: "•";
-  position: absolute;
-  left: 0;
-  color: var(--primary-color);
-  font-size: 1.5em;
-  line-height: 0.8;
-}
-
-/* Code Files */
-slice-whatisslice .code-files {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-slice-whatisslice .code-file {
-  flex: 1;
-  background-color: var(--secondary-background-color);
-  border-radius: var(--border-radius-slice);
-  overflow: hidden;
-}
-
-slice-whatisslice .code-file h4 {
-  background-color: var(--primary-color);
-  color: var(--primary-color-contrast);
-  margin: 0;
-  padding: 8px 15px;
-}
-
-/* Benefits Grid */
-slice-whatisslice .benefits-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 25px;
-  margin: 30px 0;
-}
-
-slice-whatisslice .benefit {
-  background-color: var(--secondary-background-color);
-  padding: 20px;
-  border-radius: var(--border-radius-slice);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  transition: all 0.3s ease;
-}
-
-slice-whatisslice .benefit:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
-}
-
-slice-whatisslice .benefit h3 {
-  color: var(--primary-color);
-  margin-top: 0;
-}
-
-/* Comparison Table */
-slice-whatisslice .comparison-section {
-  margin: 40px 0;
-}
-
-slice-whatisslice .comparison-table {
-  overflow-x: auto;
-  margin: 20px 0;
-}
-
-slice-whatisslice table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-slice-whatisslice th, 
-slice-whatisslice td {
-  padding: 12px 15px;
-  text-align: center;
-  border: 1px solid var(--primary-color-shade);
-}
-
-slice-whatisslice th {
-  background-color: var(--primary-color);
-  color: var(--primary-color-contrast);
-}
-
-slice-whatisslice tr:nth-child(even) {
-  background-color: var(--secondary-background-color);
-}
-
-/* Get Started Section */
-slice-whatisslice .get-started-section {
-  background-color: var(--secondary-background-color);
-  border-radius: var(--border-radius-slice);
-  padding: 30px;
-  margin: 40px 0 20px;
-  text-align: center;
-}
-
-slice-whatisslice .action-buttons {
-  display: flex;
-  justify-content: center;
-  gap: 20px;
-  margin-top: 25px;
-}
-
-slice-whatisslice .action-button {
-  background-color: var(--primary-color);
-  color: var(--primary-color-contrast);
-  text-decoration: none;
-  padding: 12px 25px;
-  border-radius: var(--border-radius-slice);
-  font-weight: bold;
-  transition: all 0.3s ease;
-  display: inline-block;
-  border: none;
-  cursor: pointer;
-  font-size: 1em;
-}
-
-slice-whatisslice .action-button:hover {
-  background-color: var(--secondary-color);
-  transform: translateY(-3px);
-}
-
-slice-whatisslice .action-button.github {
-  background-color: #333;
-}
-
-slice-whatisslice .action-button.github:hover {
-  background-color: #555;
-}
-
-/* Animations */
-@keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-/* Responsive Design */
-@media (max-width: 768px) {
-  slice-whatisslice .intro-section {
-    flex-direction: column;
-    gap: 20px;
-  }
-  
-  slice-whatisslice .principles-grid,
-  slice-whatisslice .benefits-grid {
-    grid-template-columns: 1fr;
-  }
-  
-  slice-whatisslice .tabs {
-    flex-direction: column;
-  }
-  
-  slice-whatisslice .action-buttons {
-    flex-direction: column;
-    align-items: center;
-  }
-  
-  slice-whatisslice .component-description {
-    position: static;
-    width: auto;
-    transform: none;
-    margin-top: 10px;
-    display: none;
-  }
-  
-  slice-whatisslice .component-description.visible {
-    display: block;
-  }
-}