transition
This commit is contained in:
@@ -0,0 +1,22 @@
|
||||
.scope-login {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
|
||||
.bg-image {
|
||||
width: 50%;
|
||||
background: url("/vendor/lucent/public/art.jpg");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
.login-form{
|
||||
width: 50%;
|
||||
height: 100vh;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
|
||||
label {
|
||||
display: block;
|
||||
font-weight: 700;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
input{
|
||||
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
input,textarea{
|
||||
background: var(--input-bg);
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 5px;
|
||||
padding: 5px 7px;
|
||||
font-size: 16px;
|
||||
filter: brightness(95%);
|
||||
}
|
||||
input:focus,textarea:focus{
|
||||
filter: brightness(101%);
|
||||
}
|
||||
|
||||
textarea{
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.htmx-indicator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.htmx-request .htmx-indicator {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.htmx-request.htmx-indicator {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
|
||||
.bt {
|
||||
appearance: none;
|
||||
background-color: #000;
|
||||
background-image: none;
|
||||
border: 1px solid #000;
|
||||
border-radius: 4px;
|
||||
box-shadow: #fff 4px 4px 0 0, #000 4px 4px 0 1px;
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-family: ITCAvantGardeStd-Bk, Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
margin: 0 5px 10px 0;
|
||||
overflow: visible;
|
||||
padding: 8px 40px;
|
||||
text-align: center;
|
||||
text-transform: none;
|
||||
touch-action: manipulation;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.bt:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.bt:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.bt:active {
|
||||
box-shadow: rgba(0, 0, 0, .125) 0 3px 5px inset;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.bt:not([disabled]):active {
|
||||
box-shadow: #fff 2px 2px 0 0, #000 2px 2px 0 1px;
|
||||
transform: translate(2px, 2px);
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
.mt-1{margin-top: 4px}
|
||||
.mt-2{margin-top: 8px}
|
||||
.mt-3{margin-top: 12px}
|
||||
.mt-4{margin-top: 16px}
|
||||
.mt-5{margin-top: 20px}
|
||||
|
||||
.mb-1{margin-bottom: 4px}
|
||||
.mb-2{margin-bottom: 8px}
|
||||
.mb-3{margin-bottom: 12px}
|
||||
.mb-4{margin-bottom: 16px}
|
||||
.mb-5{margin-bottom: 20px}
|
||||
|
||||
.pt-1{padding-top: 4px}
|
||||
.pt-2{padding-top: 8px}
|
||||
.pt-3{padding-top: 12px}
|
||||
.pt-4{padding-top: 16px}
|
||||
.pt-5{padding-top: 20px}
|
||||
|
||||
.pb-1{padding-bottom: 4px}
|
||||
.pb-2{padding-bottom: 8px}
|
||||
.pb-3{padding-bottom: 12px}
|
||||
.pb-4{padding-bottom: 16px}
|
||||
.pb-5{padding-bottom: 20px}
|
||||
|
||||
.gap-1{gap: 4px}
|
||||
.gap-2{gap: 8px}
|
||||
.gap-3{gap: 12px}
|
||||
.gap-4{gap: 16px}
|
||||
.gap-5{gap: 20px}
|
||||
|
||||
.hide{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.d-block{
|
||||
display: block;
|
||||
}
|
||||
|
||||
.d-inline-block{
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.is-bold{
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.in-place{
|
||||
padding: 36px;
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
.in-place{
|
||||
padding: 36px;
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
.sidebar {
|
||||
}
|
||||
|
||||
.main-content {
|
||||
width: 100%;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.main-wrapper {
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
padding: 20px;
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
.lx-nav{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: rgba(255,255,255,1);
|
||||
margin-bottom:0px ;
|
||||
.nav-item{
|
||||
padding:16px 0;
|
||||
margin: 0 16px;
|
||||
color: $primary;
|
||||
|
||||
}
|
||||
a{
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
.notice {
|
||||
background-color: $background;
|
||||
padding: 25px 14px 14px;
|
||||
margin: 2rem 0;
|
||||
filter: brightness(1.03);
|
||||
position: relative;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
border: 3px solid $border-color;
|
||||
}
|
||||
|
||||
.notice .title {
|
||||
content: "NOTE";
|
||||
position: absolute;
|
||||
background: $background;
|
||||
min-width: 90px;
|
||||
border: 3px solid $border-color;
|
||||
color: $text;
|
||||
display: block;
|
||||
text-align: center;
|
||||
left: 14px;
|
||||
top: -18px;
|
||||
padding: 2px 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.notice.success{
|
||||
border-color: $success;
|
||||
& .title{
|
||||
border-color: $success;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
/*
|
||||
1. Use a more-intuitive box-sizing model.
|
||||
*/
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
/*
|
||||
2. Remove default margin
|
||||
*/
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
/*
|
||||
Typographic tweaks!
|
||||
3. Add accessible line-height
|
||||
4. Improve text rendering
|
||||
*/
|
||||
body {
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
/*
|
||||
5. Improve media defaults
|
||||
*/
|
||||
img, picture, video, canvas, svg {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
/*
|
||||
6. Remove built-in form typography styles
|
||||
*/
|
||||
input, button, textarea, select {
|
||||
font: inherit;
|
||||
}
|
||||
/*
|
||||
7. Avoid text overflows
|
||||
*/
|
||||
p, h1, h2, h3, h4, h5, h6 {
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
/*
|
||||
8. Create a root stacking context
|
||||
*/
|
||||
#root, #__next {
|
||||
isolation: isolate;
|
||||
}
|
||||
+36
-76
@@ -1,89 +1,49 @@
|
||||
|
||||
.sidebar {
|
||||
background-color: $dark;
|
||||
min-height: 100vh;
|
||||
font-size: 15px;
|
||||
line-height: 28px;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 12px;
|
||||
min-height: 100vh;
|
||||
font-size: 15px;
|
||||
line-height: 28px;
|
||||
min-width: 300px;
|
||||
max-width: 400px;
|
||||
background: $background;
|
||||
filter: brightness(104%);
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
color: $white;
|
||||
position: relative;
|
||||
padding: 0 10px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
&:hover .actions {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
background: $background;
|
||||
font-size: 16px;
|
||||
padding: 12px 12px 6px;
|
||||
color: $text;
|
||||
filter: brightness(94%);
|
||||
|
||||
.sidebar .actions {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 8px;
|
||||
background-color: $dark;
|
||||
visibility: hidden;
|
||||
}
|
||||
.sidebar .sidebar-header .actions {
|
||||
background-color: $dark;
|
||||
}
|
||||
.sidebar .sidebar-item .actions {
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
.sidebar .sidebar-item.active .actions {
|
||||
background-color: $primary;
|
||||
}
|
||||
.sidebar .sidebar-header .actions a,
|
||||
.sidebar .sidebar-header .actions span {
|
||||
color: $white !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sidebar .sidebar-item .actions a {
|
||||
color: $dark !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sidebar .sidebar-item.active .actions a {
|
||||
color: $white !important;
|
||||
cursor: pointer;
|
||||
&:first-child {
|
||||
border-bottom: none;
|
||||
border-radius: 12px 12px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-item {
|
||||
a {
|
||||
color: $white;
|
||||
text-decoration: none;
|
||||
padding: 0 0px;
|
||||
}
|
||||
&:hover {
|
||||
background-color: $light;
|
||||
a {
|
||||
color: $dark;
|
||||
}
|
||||
}
|
||||
position: relative;
|
||||
padding: 0 10px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
color: $white;
|
||||
&:hover .actions {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
color: $text;
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
padding: 6px 12px;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid $border-color;
|
||||
transition: 600ms;
|
||||
|
||||
.sidebar hr {
|
||||
color: $white;
|
||||
line-height: 30px;
|
||||
}
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
border-radius: 0 0 12px 12px;
|
||||
}
|
||||
|
||||
.sidebar .active {
|
||||
background-color: $primary;
|
||||
a {
|
||||
color: $white;
|
||||
}
|
||||
&:hover {
|
||||
background: $secondary;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: $secondary;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
.lx-table {
|
||||
min-width: 600px;
|
||||
overflow: auto;
|
||||
background-color: #f9f9f9;
|
||||
table {
|
||||
width: 100%;
|
||||
min-width: 600px;
|
||||
|
||||
}
|
||||
th {
|
||||
|
||||
@@ -1,4 +0,0 @@
|
||||
.lx-small-text {
|
||||
font-size: 12px;
|
||||
line-height: 15px;
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
|
||||
|
||||
.content{
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
p{
|
||||
|
||||
margin-bottom: 14px;
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0 0 0 16px;
|
||||
list-style: none outside none;
|
||||
|
||||
li::before {
|
||||
content: "—";
|
||||
opacity: .5;
|
||||
font-size: 12px;
|
||||
padding-right: 6px;
|
||||
vertical-align: 10%;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.title-separator{
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
padding: 30px 0 10px;
|
||||
margin-bottom: 30px;
|
||||
position: relative;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
//&:after {
|
||||
// position: absolute;
|
||||
// left: 0;
|
||||
// right: 0;
|
||||
// top: 70px;
|
||||
// margin: auto;
|
||||
// display: block;
|
||||
// width: 270px;
|
||||
// border-bottom: 1px solid var(--border-color);
|
||||
// content: "";
|
||||
//}
|
||||
}
|
||||
.lx-small-text {
|
||||
font-size: 12px;
|
||||
line-height: 15px;
|
||||
}
|
||||
@@ -120,6 +120,6 @@
|
||||
}
|
||||
|
||||
.header-small {
|
||||
text-align: center;
|
||||
text-align: left;
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
+58
-8
@@ -6,6 +6,10 @@ $green-pigment: #139a43ff;
|
||||
$lincoln-green: #0b5d1eff;
|
||||
$forest-green-traditional: #053b06ff;
|
||||
$black: #000000ff;
|
||||
$dark: #000000ff;
|
||||
$white: #ffffff;
|
||||
$light: #eee;
|
||||
$danger: red;
|
||||
|
||||
/* SCSS Gradient */
|
||||
$gradient-top: linear-gradient(
|
||||
@@ -80,25 +84,71 @@ $gradient-radial: radial-gradient(
|
||||
#000000ff
|
||||
);
|
||||
|
||||
$primary: $lincoln-green;
|
||||
$primary: #5b86be;
|
||||
$secondary: #d9cca1;
|
||||
$success: #80c671;
|
||||
$background: #f4f6fa;
|
||||
$table-striped-bg-factor: 0.03;
|
||||
$dropdown-bg: rgb(206, 223, 210);
|
||||
$border-color: #000;
|
||||
$text: #04060b;
|
||||
$accent: #80c671;
|
||||
|
||||
@import "../node_modules/bootstrap/scss/bootstrap";
|
||||
//https://www.realtimecolors.com/?colors=04060b-f4f6fa-5b86be-d9cca1-80c671&fonts=Anek Telugu-Anek Telugu
|
||||
$themes: (
|
||||
light: (
|
||||
text: #04060b,
|
||||
background: #f4f6fa,
|
||||
primary: #5b86be,
|
||||
secondary: #d9cca1,
|
||||
accent: #80c671,
|
||||
),
|
||||
dark: (
|
||||
text: #f4f6fb,
|
||||
background: #05070a,
|
||||
primary: #416ca4,
|
||||
secondary: #5e5126,
|
||||
accent: #488e39,
|
||||
),
|
||||
);
|
||||
|
||||
|
||||
|
||||
//@import "../node_modules/bootstrap/scss/bootstrap";
|
||||
@import "./reset";
|
||||
@import "./helpers";
|
||||
@import "./notice";
|
||||
@import "./auth";
|
||||
@import "./typography";
|
||||
@import "./sidebar";
|
||||
@import "./form";
|
||||
@import "./table";
|
||||
@import "./avatar";
|
||||
@import "./codemirror";
|
||||
@import "./layout";
|
||||
@import "./wrappers";
|
||||
@import "./in-place";
|
||||
@import "./text";
|
||||
@import "./card";
|
||||
@import "./nav";
|
||||
@import "./files";
|
||||
@import "./revisions";
|
||||
|
||||
:root{
|
||||
--linearPrimarySecondary: linear-gradient(#5b86be, #d9cca1);
|
||||
--linearPrimaryAccent: linear-gradient(#5b86be, #80c671);
|
||||
--linearSecondaryAccent: linear-gradient(#d9cca1, #80c671);
|
||||
--radialPrimarySecondary: radial-gradient(#5b86be, #d9cca1);
|
||||
--radialPrimaryAccent: radial-gradient(#5b86be, #80c671);
|
||||
--radialSecondaryAccent: radial-gradient(#d9cca1, #80c671);
|
||||
--border-color: $border-color;
|
||||
--main-font: ‘Open Sans‘, Arial, Helvetica, sans-serif;
|
||||
--main-font-color: #444;
|
||||
--input-bg: rgb(245,245,249);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
body {
|
||||
background-color: rgba(11, 93, 30, 0.04);
|
||||
background-color: $background;
|
||||
}
|
||||
|
||||
.btn-spinner .spinner-border {
|
||||
@@ -119,8 +169,8 @@ body {
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
border: 0px;
|
||||
border: 0;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0px 0px 4px #ccc;
|
||||
box-shadow: 0 0 4px #ccc;
|
||||
padding: 30px 15px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user