csmith1865/obscreen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 16 Wiki Activity

wip

Browse Source
This commit is contained in:
jr-k 2024-07-05 01:42:39 +02:00
parent 506160deda
commit 4a53178cba
5 changed files with 140 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
data/www/css/compiled/main.css
View File

File diff suppressed because one or more lines are too long

91
data/www/scss/base/_html.scss
View File

@ -68,7 +68,7 @@ main {
top: 0;
z-index: 1000;
max-height: 80px;
border-bottom: 2px solid rgba(0, 0, 0, 0.2);
border-bottom: $layoutBorder;
display: flex;
flex-direction: row;
align-items: center;
@ -77,13 +77,83 @@ main {
flex: 1;
.inner {
border-radius: 4px;
background: #777;
display: flex;
ul {
background: #222;
padding: 6px 4px 5px 4px;
box-shadow: 1px 1px .5px .5px inset rgba(0, 0, 0, 0.2);
border: 1px solid #222;
border-radius: $baseRadius;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
list-style: none;
margin: 0;
li {
&.divider {
margin: 0 20px;
width: 1px;
height: 100%;
background: #333;
}
&:hover {
a {
opacity: 0.9;
}
}
a {
border-radius: $baseRadius;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
color: white;
overflow: hidden;
padding-right: 15px;
text-align: center;
background: rgba(0, 0, 0, 0.2);
margin-right: 5px;
span {
display: flex;
justify-content: center;
align-items: center;
margin-right: 20px;
height: 32px;
background: rgba(0, 0, 0, 0.2);
width: 42px;
}
}
&.active {
border: none;
a {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
color: white;
padding-right: 15px;
background: $seaBlue;
font-weight: bold;
span {
background: rgba(0, 0, 0, 0.2);
margin-right: 10px;
width: 42px;
}
}
}
&:last-child a {
margin-right: 0;
}
}
}
}
@ -107,8 +177,8 @@ main {
.avatar {
width: 32px;
height: 32px;
background: $pinkyRed;
border-radius: 4px;
border-radius: $baseRadius;
background: $seaBlue;
margin-right: 10px;
display: flex;
flex-direction: row;
@ -137,7 +207,16 @@ main {
flex: 2;
overflow-y: auto;
padding: 20px;
background: $layoutBackground;
}
.left-panel {
flex: 1;
overflow-y: auto;
padding: 20px;
background-color: transparent;
border-right: $layoutBorder;
background: $layoutBackground;
}
.right-panel {
@ -145,6 +224,8 @@ main {
overflow-y: auto;
padding: 20px;
background-color: transparent;
border-left: $layoutBorder;
background: $layoutBackground;
}
}
}

6
data/www/scss/base/_menu.scss
View File

@ -1,7 +1,7 @@
menu {
width: 300px;
background: #111;
background: $layoutBackground;
overflow-y: auto;
overflow-x: visible;
padding: 20px;
@ -10,7 +10,7 @@ menu {
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
border-right: 2px solid rgba(0, 0, 0, 0.2);
border-right: $layoutBorder;
h1.logo {
margin: 40px 0 0 0;
@ -110,7 +110,7 @@ menu {
align-self: stretch;
padding: 10px 10px;
width: 40px;
border-radius: 2px;
border-radius: $baseRadius;
text-align: center;
margin-right: 20px;
}

6
data/www/scss/utils/_variables.scss
View File

@ -3,6 +3,7 @@ $blueDark: rgb(15, 0, 53);
$seaBlue: rgb(2, 123, 255);
$pinkyRed: rgb(239, 14, 93);
$limeGreen: rgb(14, 239, 95);
$bitterGreen: rgb(17, 169, 72);
$bitterPurple: rgb(105, 47, 189);
$sweetPurple: rgb(188, 72, 255);
$neutralGrey: rgb(70, 70, 70);
@ -15,3 +16,8 @@ $success: $limeGreen;
$danger: $pinkyRed;
$primary: $seaBlue;
$baseRadius: 4px;
$layoutBorder: 2px solid rgba(0, 0, 0, 0.2);
$layoutBackground: #111;

46
views/base.jinja.html
View File

@ -143,8 +143,32 @@
<div class="context-menu">
<div class="inner">
<ul>
<li>Page 1</li>
<li>Page 2</li>
<li class="active">
<a href="">
<span class="icon">
<i class="fa fa-image"></i>
</span>
Bibliothèque
</a>
</li>
{# <li class="divider"></li>#}
<li class="acti">
<a href="">
<span class="icon">
<i class="fa fa-clock"></i>
</span>
Planifier
</a>
</li>
{# <li class="divider"></li>#}
<li class="actifve">
<a href="">
<span class="icon">
<i class="fa fa-list-alt"></i>
</span>
Playlist
</a>
</li>
</ul>
</div>
</div>
@ -174,6 +198,22 @@
</div>
</div>
<div class="main-container">
<div class="left-panel ">
<!-- Right panel content -->
<p>Panel droit</p>
<p>Contenu du panel droit...</p>
<p>Contenu du panel droit...</p>
<p>Contenu du panel droit...</p>
<p>Contenu du panel droit...</p>
<p>Contenu du panel droit...</p>
<p>Contenu du panel droit...</p>
<p>Contenu du panel drfsdfdsfoit...</p>
<p>Contenu du panel droit...</p>
<p>Contenu du panel droit...</p>
<p>Contenu du panel droit...</p>
<p>Contenu du panel droit...</p>
<!-- Add more content if needed -->
</div>
<div class="main-content">
<!-- Main content -->
<p>Contenu principal</p>
@ -194,7 +234,7 @@
<p>Lorem ipsum dolor sit amet...</p>
<!-- Add more content if needed -->
</div>
<div class="right-panel hidden">
<div class="right-panel ">
<!-- Right panel content -->
<p>Panel droit</p>
<p>Contenu du panel droit...</p>