README principal et dev-ihm
This commit is contained in:
EmmanuelTiamzon
214
DEV-IHM/TP/TP-WireFrame/style.css
Normal file
214
DEV-IHM/TP/TP-WireFrame/style.css
Normal file
@@ -0,0 +1,214 @@
|
||||
/* Reset box model and remove default margin/padding */
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
html, body {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
/* Main body styling */
|
||||
body {
|
||||
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial;
|
||||
background: #ededed;
|
||||
min-height: 100vh;
|
||||
min-width: 100vw;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Main container ("post-it" effect) */
|
||||
.page {
|
||||
width: 96vw;
|
||||
height: 92vh;
|
||||
padding: 2vw;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 20px rgba(0,0,0,0.08);
|
||||
background: #ededed;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
/* Top area: left and right panels */
|
||||
.top-area {
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
/* Vertical separator between panels */
|
||||
.vertical-separator {
|
||||
width: 2px;
|
||||
background: #bbb;
|
||||
border-radius: 2px;
|
||||
align-self: stretch;
|
||||
margin: 0 24px;
|
||||
}
|
||||
|
||||
/* Left panel: search bar + grid */
|
||||
.left-panel {
|
||||
flex: 2.2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 22px;
|
||||
height: 100%;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
/* Search bar and filter icon row */
|
||||
.search-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.fake-search {
|
||||
flex: 1;
|
||||
height: 40px;
|
||||
border: 2px solid #333;
|
||||
border-radius: 8px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
/* Fake filter icon styling */
|
||||
.fake-filter {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 30px;
|
||||
border: 2px solid #333;
|
||||
background: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Grid: 4 columns x 2 rows for main cards */
|
||||
.grid-4x2 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
gap: 32px;
|
||||
width: 100%;
|
||||
height: 60vh;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
/* Main card styling */
|
||||
.big-card {
|
||||
background: white;
|
||||
border: 2px solid #333;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
aspect-ratio: 3/4;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
overflow: hidden;
|
||||
max-width: 95%;
|
||||
max-height: 95%;
|
||||
}
|
||||
|
||||
/* Wireframe lines under main cards */
|
||||
.big-card .line {
|
||||
width: 80%;
|
||||
height: 2px;
|
||||
background: #222;
|
||||
margin: 0 0 8px 0;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.big-card .line:last-child { margin-bottom: 16px; }
|
||||
|
||||
/* Right panel: library section */
|
||||
.right-panel {
|
||||
flex: 1.1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Vertical header for the library */
|
||||
.library-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.library-header-title {
|
||||
font-size: 1.1rem;
|
||||
font-weight: bold;
|
||||
background: #ededed;
|
||||
padding: 6px 18px;
|
||||
}
|
||||
|
||||
/* Fake add button styling */
|
||||
.fake-add {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
background: white;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.fake-add::after {
|
||||
content: "+";
|
||||
position: absolute;
|
||||
top: 50%; left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* Library grid: 2 columns x 3 rows for small cards */
|
||||
.library-list {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: repeat(3, 1fr);
|
||||
gap: 32px;
|
||||
width: 80%;
|
||||
height: 70vh;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
/* Small card styling (vertical) for library */
|
||||
.small-card {
|
||||
background: white;
|
||||
border: 2px solid #333;
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
aspect-ratio: 3/4;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
overflow: hidden;
|
||||
max-width: 95%;
|
||||
max-height: 95%;
|
||||
}
|
||||
|
||||
/* Wireframe lines under small cards */
|
||||
.small-card .line {
|
||||
width: 70%;
|
||||
height: 2px;
|
||||
background: #222;
|
||||
margin: 0 0 4px 0;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.small-card .line:last-child { margin-bottom: 10px; }
|
||||
Reference in New Issue
Block a user