PHP Classes

File: public/assets/css/style.css

Recommend this page to a friend!
  Classes of Rodrigo Faustino   PHP MVC App   public/assets/css/style.css   Download  
File: public/assets/css/style.css
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: PHP MVC App
MVC based application for the Web and as an API
Author: By
Last change:
Date: 26 days ago
Size: 2,708 bytes
 

Contents

Class file image Download
/* Estrutura SMACSS Base: Estilos globais e reset. Layout: Estruturas principais da página. Module: Componentes reutilizáveis. State: Estados como dark mode. Theme: Variáveis e temas. */ /* CSS Reset */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Base */ :root { --primary-color: #3498db; --secondary-color: #2ecc71; --background-color: #ffffff; --text-color: #333333; /* Dark mode variables */ --background-color-dark: #1e1e1e; --text-color-dark: #f5f5f5; } body { margin: 0; font-family: Arial, sans-serif; background-color: var(--background-color); color: var(--text-color); transition: background-color 0.3s, color 0.3s; } h1, h2, h3, h4, h5, h6 { margin: 0; } /* Layout */ header { background-color: var(--primary-color); color: #ffffff; padding: 1rem; text-align: center; } nav { display: flex; justify-content: center; gap: 1rem; } ul{ list-style: none; padding: 0; margin: 0; display: flex; gap: 1rem; } main { padding: 2rem; } .container { display: flex; flex-direction: column; align-items: center; justify-content: center; max-width: 1200px; margin: 0 auto; padding: 1rem; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); border-radius: 5px; } footer { background-color: var(--secondary-color); color: #ffffff; text-align: center; padding: 1rem; position: fixed; bottom: 0; width: 100%; } /* Module */ .button { padding: 6px; border: none; border-radius: 5px; cursor: pointer; font-size: 1rem; transition: background-color 0.3s, color 0.3s; } .primary { background-color: var(--primary-color); color: #ffffff; } .secondary { background-color: var(--secondary-color); color: #ffffff; } /* State */ body.dark-mode { background-color: var(--background-color-dark); color: var(--text-color-dark); } body.dark-mode header, body.dark-mode footer { background-color: var(--text-color-dark); color: var(--background-color-dark); } body.dark-mode button.primary { background-color: var(--text-color-dark); color: var(--background-color-dark); } /* Theme */ .theme-toggle { position: fixed; top: 1rem; right: 1rem; background-color: var(--primary-color); color: #ffffff; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.2rem; transition: background-color 0.3s, color 0.3s; } body.dark-mode .theme-toggle { background-color: var(--text-color-dark); color: var(--background-color-dark); }