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:52:40 +02:00
parent ad2e526b2b
commit 39ee81ff15
5 changed files with 141 additions and 136 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

138
data/www/scss/base/_context.scss Normal file
View File

@ -0,0 +1,138 @@
main {
.context-bar {
padding: 10px;
position: sticky;
top: 0;
z-index: 1000;
max-height: 80px;
border-bottom: $layoutBorder;
display: flex;
flex-direction: row;
align-items: center;
.context-menu {
flex: 1;
.inner {
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: 30px;
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: #333;
background: $white;
font-weight: bold;
span {
background: rgba(0, 0, 0, 0.2);
margin-right: 30px;
width: 42px;
}
}
}
&:last-child a {
margin-right: 0;
}
}
}
}
}
.context-divider {
width: 1px;
height: 100%;
background: #222;
margin-left: 20px;
margin-right: 20px;
}
.context-user {
display: flex;
margin-right: 20px;
.trigger {
color: white;
.avatar {
width: 32px;
height: 32px;
border-radius: $baseRadius;
background: $seaBlue;
margin-right: 10px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
text-align: center;
font-weight: bold;
font-size: 14px;
border: 1px solid #444;
}
i {
margin-top: -5px;
margin-left: 10px;
}
}
}
}
}

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

@ -24,141 +24,6 @@ main {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.context-bar {
padding: 10px;
position: sticky;
top: 0;
z-index: 1000;
max-height: 80px;
border-bottom: $layoutBorder;
display: flex;
flex-direction: row;
align-items: center;
.context-menu {
flex: 1;
.inner {
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: 30px;
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: #333;
background: $white;
font-weight: bold;
span {
background: rgba(0, 0, 0, 0.2);
margin-right: 30px;
width: 42px;
}
}
}
&:last-child a {
margin-right: 0;
}
}
}
}
}
.context-divider {
width: 1px;
height: 100%;
background: #222;
margin-left: 20px;
margin-right: 20px;
}
.context-user {
display: flex;
margin-right: 20px;
.trigger {
color: white;
.avatar {
width: 32px;
height: 32px;
border-radius: $baseRadius;
background: $seaBlue;
margin-right: 10px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
text-align: center;
font-weight: bold;
font-size: 14px;
border: 1px solid #444;
}
i {
margin-top: -5px;
margin-left: 10px;
}
}
}
}
.main-container { .main-container {
display: flex; display: flex;
flex: 1; flex: 1;

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

@ -86,6 +86,7 @@ menu {
position: relative; position: relative;
transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1); transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
margin: 10px 0; margin: 10px 0;
border-radius: $baseRadius;
a { a {
color: rgba(255, 255, 255, 0.9); color: rgba(255, 255, 255, 0.9);

1
data/www/scss/main.scss
View File

@ -6,6 +6,7 @@
@import 'base/fonts'; @import 'base/fonts';
@import 'base/html'; @import 'base/html';
@import 'base/menu'; @import 'base/menu';
@import 'base/context';
@import 'base/tachyons'; @import 'base/tachyons';
// Import layout styles // Import layout styles