edit: création d'une structure responsive qui servira de base pour la suite (structure html & composants vue , class css communes, typo, gamme colorée)

2026-03-04 02:19:09 +01:00
parent f43a578671
commit 01bfa58f27
5 changed files with 378 additions and 7 deletions
@@ -1 +1,157 @@
+/*=====================Gamme color + theme*/
+:root[data-theme="purple"]{
+  --dark-color: #380052;
+  --light-color: #C303FF;
+  --accent-color: #00FF76;
+}

+:root[data-theme="orange"]{
+  --dark-color: #E67300;
+  --light-color: #99FF99;
+  --accent-color: #00CC00;
+}
+
+:root[data-theme="green"]{
+  --dark-color: #004D33;
+  --light-color: #33FF77;
+  --accent-color: #E600E6;
+}
+
+/*====================Typo*/
+@font-face {
+  font-family: 'lineal';
+  src: url('./typo/Lineal-Heavy.ttf');
+}
+
+@font-face {
+  font-family: 'pressStart2P';
+  src: url('./typo/PressStart2P-Regular.ttf');
+}
+
+@font-face {
+  font-family: 'velvelyne';
+  src: url('./typo/Velvelyne-Light.ttf') format('truetype');
+  font-weight:lighter;
+}
+
+@font-face {
+  font-family: 'avara';
+  src: url('./typo/Avara-Black.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'velvelyne';
+  src:url('./typo/Velvelyne-Bold.ttf') format('truetype');
+  font-weight: bold;
+}
+
+/*================App racine vue*/
+#app{
+  inset:0;
+  position: fixed;
+  background-color: var(--dark-color);
+}
+
+/*===================Desact. Default*/
+input {
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+a{
+  text-decoration: none;
+}
+
+/*=====================Classes générales*/
+.windowContainer{
+  border-style: solid;
+  border-width: thin;
+  border-color: var(--light-color);
+  border-radius: 16.1px;
+  background-color: transparent;
+  position: relative;
+  height: 90%;
+  width: 90%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  contain: layout;
+}
+
+.windowTitle{
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  background-color: var(--light-color);
+  color: var(--dark-color);
+  font-family: 'lineal';
+  font-size: 16.1px;
+  top: 0;
+  border-radius: 16.1px 16.1px 0 0;
+  width:100%;
+  height: 33px;
+}
+
+.titleContent{
+  box-sizing: border-box;
+  padding-left: 16.1px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+.titleBtn{
+  margin-right: 16.1px;
+  background-color: var(--light-color);
+  font-family: 'lineal';
+  font-size: 16.1px;
+  color: var(--dark-color);
+  border-color: var(--dark-color);
+  border-style: solid;
+  border-radius: 16.1px;
+  border-width: thin;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  height: 27px;
+  padding: 0 16.1px 0 16.1px;
+}
+
+.titleBtn:hover{
+  background-color: var(--accent-color);
+}
+
+/*=====================Animation*/
+.floating {
+  position: fixed;
+  animation: float 1s ease-in-out infinite;
+}
+
+.floating:hover{
+  animation: none;
+}
+
+@keyframes float {
+  0%   { transform: translateY(0px); }
+  35%  { transform: translateY(1px); }
+  50%  { transform: translateY(-10px); }
+  65%  { transform: translateY(1px); }
+  100% { transform: translateY(0px); }
+}
+
+.blinking{
+  animation: blink 3.33s ease-in-out infinite;
+}
+
+@keyframes blink {
+  0%   { border-color: var(--accent-color);}
+  25%  { border-color: var(--dark-color);}
+  50%  { border-color: var(--accent-color);}
+  75%  { border-color: var(--dark-color);}
+  100%  { border-color: var(--accent-color);}
+}