colors and filters
This commit is contained in:
@@ -4,6 +4,12 @@
|
||||
overflow: visible;
|
||||
.autocomplete-option {
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
padding: 3px 10px;
|
||||
&:hover {
|
||||
background: var(--p40);
|
||||
border-radius: 12px;
|
||||
}
|
||||
}
|
||||
&:focus-within {
|
||||
.autocomplete-results{
|
||||
@@ -17,19 +23,17 @@
|
||||
font-size: 13px;
|
||||
margin-top: 10px;
|
||||
border-radius: 12px;
|
||||
background: var(--background);
|
||||
filter: brightness(97%);
|
||||
background: var(--p30);
|
||||
padding: 3px 10px;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
line-height: 22px;
|
||||
&:hover {
|
||||
background: var(--p40);
|
||||
}
|
||||
}
|
||||
|
||||
.autocomplete-selected-value:hover {
|
||||
opacity: .8;
|
||||
background-color: #eee;
|
||||
}
|
||||
.autocomplete-results {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
@@ -38,10 +42,10 @@
|
||||
position: absolute;
|
||||
border-radius: 12px;
|
||||
z-index: 20;
|
||||
background: var(--background);
|
||||
filter: brightness(97%);
|
||||
background: var(--p30);
|
||||
//border: 1px solid var(--p40);
|
||||
transition: 600ms;
|
||||
flex-grow: 1;
|
||||
top: 45px;
|
||||
min-width: max-content;
|
||||
width: 100%;
|
||||
}
|
||||
+48
-11
@@ -1,35 +1,49 @@
|
||||
.button{
|
||||
border-radius: 12px;
|
||||
background: var(--background-button);
|
||||
background: var(--p20);
|
||||
padding: 3px 10px;
|
||||
cursor: pointer;
|
||||
border: 1px solid var(--border-color);
|
||||
border: 0px solid var(--p30);
|
||||
font-size: 14px;
|
||||
min-height: 27px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: var(--text);
|
||||
|
||||
&.secondary{
|
||||
background: var(--secondary);
|
||||
}
|
||||
&.primary{
|
||||
background: var(--primary);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
filter: brightness(94%);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
filter: brightness(94%);
|
||||
background: var(--p30);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: var(--p50)!important;
|
||||
box-shadow: none;
|
||||
}
|
||||
&.active {
|
||||
filter: brightness(74%);
|
||||
background: var(--p30);
|
||||
}
|
||||
|
||||
&.secondary{
|
||||
background: red;
|
||||
}
|
||||
&.primary{
|
||||
background: var(--p70);
|
||||
color: var(--p10);
|
||||
|
||||
&:hover {
|
||||
background: var(--p90);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&[disabled] {
|
||||
pointer-events: none;
|
||||
opacity: .7;
|
||||
color: var(--text);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -42,6 +56,8 @@
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
font-weight: normal;
|
||||
background: var(--p80)!important;
|
||||
color: var(--p10);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -50,4 +66,25 @@
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
.spinner-border {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border: 2px solid var(--p10);
|
||||
border-bottom-color: var(--p30);
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
animation: rotation 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes rotation {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
+10
-10
@@ -1,9 +1,9 @@
|
||||
|
||||
@supports (-webkit-appearance: none) or (-moz-appearance: none) {
|
||||
.checkbox-wrapper input[type=checkbox] {
|
||||
--active-inner: #fff;
|
||||
--focus: 2px rgba(39, 94, 254, .3);
|
||||
--border-hover: #275EFE;
|
||||
--active-inner: var(--p10);
|
||||
--focus: 2px var(--p30);
|
||||
--border-hover: var(--p30);
|
||||
--disabled: #F6F8FF;
|
||||
--disabled-inner: #E1E6F9;
|
||||
-webkit-appearance: none;
|
||||
@@ -15,8 +15,8 @@
|
||||
position: relative;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
border: 1px solid var(--bc, var(--border-color));
|
||||
background: var(--b, var(--background));
|
||||
border: 1px solid var(--bc, var(--p30));
|
||||
background: var(--b, var(--p10));
|
||||
transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
|
||||
}
|
||||
.checkbox-wrapper input[type=checkbox]:after {
|
||||
@@ -28,8 +28,8 @@
|
||||
transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
|
||||
}
|
||||
.checkbox-wrapper input[type=checkbox]:checked {
|
||||
--b: var(--secondary);
|
||||
--bc: var(--secondary);
|
||||
--b: var(--p40);
|
||||
--bc: var(--p40);
|
||||
--d-o: .3s;
|
||||
--d-t: .6s;
|
||||
--d-t-e: cubic-bezier(.2, .85, .32, 1.2);
|
||||
@@ -41,7 +41,7 @@
|
||||
}
|
||||
.checkbox-wrapper input[type=checkbox]:disabled:checked {
|
||||
--b: var(--disabled-inner);
|
||||
--bc: var(--border-color);
|
||||
--bc: var(--p40);
|
||||
}
|
||||
.checkbox-wrapper input[type=checkbox]:disabled + label {
|
||||
cursor: not-allowed;
|
||||
@@ -95,8 +95,8 @@
|
||||
}
|
||||
|
||||
.checkbox-wrapper input[type=checkbox]:indeterminate {
|
||||
--b: var(--secondary);
|
||||
--bc: var(--secondary);
|
||||
--b: var(--p40);
|
||||
--bc: var(--p40);
|
||||
--d-o: .3s;
|
||||
--d-t: .6s;
|
||||
--d-t-e: cubic-bezier(.2, .85, .32, 1.2);
|
||||
|
||||
@@ -1,5 +1,19 @@
|
||||
.is-editable-false{
|
||||
.cm-content{
|
||||
background-color: #f5f5f5;
|
||||
background-color: var(--p10);
|
||||
}
|
||||
}
|
||||
.cm-focused{
|
||||
|
||||
.cm-content{
|
||||
background-color: var(--p10);
|
||||
}
|
||||
}
|
||||
|
||||
.cm-content{
|
||||
background-color: var(--p20);
|
||||
}
|
||||
|
||||
.cm-activeLine{
|
||||
background-color: var(--p20)!important;
|
||||
}
|
||||
@@ -18,11 +18,12 @@ dialog {
|
||||
background-color: #fff;
|
||||
padding: 34px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
border-radius: 12px;
|
||||
overflow: auto;
|
||||
max-height: 96vh;
|
||||
box-shadow: none;
|
||||
//position: relative;
|
||||
z-index: 2;
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
|
||||
@@ -19,13 +19,13 @@
|
||||
position: absolute;
|
||||
border-radius: 12px;
|
||||
z-index: 20;
|
||||
background: var(--background);
|
||||
filter: brightness(97%);
|
||||
background: var(--p20);
|
||||
transition: 600ms;
|
||||
flex-grow: 1;
|
||||
top: 35px;
|
||||
min-width: max-content;
|
||||
|
||||
|
||||
&.orientation-right {
|
||||
right: 0;
|
||||
}
|
||||
@@ -42,8 +42,6 @@
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
text-wrap: nowrap;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.dropdown-header {
|
||||
@@ -53,11 +51,16 @@
|
||||
.dropdown-item {
|
||||
font-size: 14px;
|
||||
padding: 3px 10px;
|
||||
&:hover{
|
||||
background: var(--background);
|
||||
filter: brightness(97%);
|
||||
|
||||
&:hover {
|
||||
background: var(--p30);
|
||||
border-radius: 12px;
|
||||
|
||||
button {
|
||||
background: var(--p30);
|
||||
}
|
||||
}
|
||||
|
||||
.button-icon {
|
||||
flex-shrink: 0;
|
||||
|
||||
|
||||
+20
-9
@@ -7,24 +7,35 @@ label {
|
||||
|
||||
input[type=text],input[type=number],input[type=search],textarea{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input[type=text],input[type=number],input[type=search],textarea{
|
||||
background: var(--input-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
background: var(--p20);
|
||||
border: 1px solid var(--p50);
|
||||
border-radius: 5px;
|
||||
padding: 5px 7px;
|
||||
font-size: 16px;
|
||||
filter: brightness(95%);
|
||||
}
|
||||
input[type=text]:focus,textarea:focus{
|
||||
filter: brightness(101%);
|
||||
&:focus{
|
||||
background: var(--p10);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
textarea{
|
||||
resize: none;
|
||||
}
|
||||
|
||||
select{
|
||||
width: 100%;
|
||||
background: var(--p20);
|
||||
border: 1px solid var(--p50);
|
||||
border-radius: 5px;
|
||||
padding: 5px 7px;
|
||||
font-size: 16px;
|
||||
&:focus{
|
||||
background: var(--p10);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.htmx-indicator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -5,13 +5,14 @@
|
||||
}
|
||||
|
||||
.main-content {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
width: fit-content;
|
||||
min-width: 900px;
|
||||
}
|
||||
|
||||
.main-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 40px;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
|
||||
+12
-15
@@ -1,32 +1,29 @@
|
||||
.notice {
|
||||
background-color: var(--background);
|
||||
padding: 25px 14px 14px;
|
||||
background-color: var(--p20);
|
||||
padding: 14px;
|
||||
margin: 2rem 0;
|
||||
filter: brightness(1.03);
|
||||
position: relative;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
border: 3px solid var(--border-color);
|
||||
border-radius: 12px;
|
||||
//border: 3px solid var(--border-base);
|
||||
}
|
||||
|
||||
.notice .title {
|
||||
content: "NOTE";
|
||||
position: absolute;
|
||||
background: var(--background);
|
||||
min-width: 90px;
|
||||
border: 3px solid var(--border-color);
|
||||
color: var(--text);
|
||||
//position: absolute;
|
||||
border-radius: 12px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
left: 14px;
|
||||
top: -18px;
|
||||
padding: 2px 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.notice.success{
|
||||
border-color: var(--success);
|
||||
border-color: green;
|
||||
& .title{
|
||||
border-color: var(--success);
|
||||
border-color: green;
|
||||
}
|
||||
}
|
||||
|
||||
.notice.notice-error{
|
||||
background: var(--err10);
|
||||
}
|
||||
@@ -14,9 +14,11 @@
|
||||
font-size: 14px;
|
||||
border-radius: 12px;
|
||||
padding: 4px 18px;
|
||||
background: var(--background);
|
||||
background: var(--p20);
|
||||
|
||||
filter: brightness(90%);
|
||||
&:hover{
|
||||
background: var(--p30);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -27,7 +29,7 @@
|
||||
|
||||
&.active {
|
||||
span{
|
||||
background: var(--secondary);
|
||||
background: var(--p30);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
background: var(--background-2);
|
||||
background: var(--p10);
|
||||
border-radius: 12px;
|
||||
.image{
|
||||
|
||||
@@ -18,19 +18,38 @@
|
||||
}
|
||||
|
||||
&:hover{
|
||||
background: var(--background-3);
|
||||
background: var(--p30);
|
||||
.trash-action{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.preview-reference{
|
||||
background: var(--background-2);
|
||||
padding: 10px 20px;
|
||||
margin-bottom: 4px;
|
||||
|
||||
.file-preview-small{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
border-radius: 12px;
|
||||
padding: 4px;
|
||||
//background: var(--p10);
|
||||
}
|
||||
|
||||
|
||||
.preview-reference{
|
||||
background: var(--p10);
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
.sortable-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.sortable-ghost{
|
||||
border: 2px dashed var(--primary);
|
||||
border: 2px dashed var(--p60);
|
||||
}
|
||||
|
||||
.sortable-drag { opacity: 0 !important; } .sortable-ghost { opacity: 1 !important; }
|
||||
@@ -2,7 +2,7 @@
|
||||
position: relative;
|
||||
|
||||
.invalid-feedback {
|
||||
color: var(--error);
|
||||
color: var(--text-error);
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
margin-top: 10px;
|
||||
@@ -33,17 +33,23 @@
|
||||
z-index: 20;
|
||||
padding: 10px;
|
||||
border-radius: 12px;
|
||||
background: var(--background);
|
||||
filter: brightness(97%);
|
||||
background: var(--p20);
|
||||
}
|
||||
|
||||
.editor-field {
|
||||
background: var(--background-stack);
|
||||
background: var(--p20);
|
||||
padding: 18px;
|
||||
position: relative;
|
||||
border-radius: 12px;
|
||||
margin: 6px 0;
|
||||
border-color: transparent;
|
||||
|
||||
.button{
|
||||
background: var(--p30);
|
||||
&:hover{
|
||||
background: var(--p40);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.field-header {
|
||||
@@ -71,7 +77,6 @@
|
||||
|
||||
.help-text {
|
||||
font-size: 14px;
|
||||
opacity: .7;
|
||||
line-height: 14px
|
||||
}
|
||||
|
||||
@@ -83,7 +88,6 @@
|
||||
|
||||
.system-help-text {
|
||||
font-size: 14px;
|
||||
opacity: .7;
|
||||
line-height: 14px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
@@ -1,34 +1,42 @@
|
||||
.reference-tags {
|
||||
position: relative;
|
||||
z-index: 20;
|
||||
|
||||
.reference-tags-option {
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
padding: 3px 10px;
|
||||
|
||||
&:hover {
|
||||
background: var(--p40);
|
||||
border-radius: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-within {
|
||||
.reference-tags-results{
|
||||
.reference-tags-results {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.reference-tags-selected-value {
|
||||
font-size: 13px;
|
||||
margin-top: 10px;
|
||||
border-radius: 12px;
|
||||
background: var(--background);
|
||||
filter: brightness(97%);
|
||||
background: var(--p30);
|
||||
padding: 3px 10px;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
line-height: 22px;
|
||||
|
||||
&:hover {
|
||||
background: var(--p40);
|
||||
}
|
||||
}
|
||||
|
||||
.reference-tags-selected-value:hover {
|
||||
opacity: .8;
|
||||
background-color: #eee;
|
||||
}
|
||||
.reference-tags-results {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
@@ -37,10 +45,16 @@
|
||||
position: absolute;
|
||||
border-radius: 12px;
|
||||
z-index: 20;
|
||||
background: var(--background);
|
||||
filter: brightness(97%);
|
||||
background: var(--p30);
|
||||
//border: 2px solid var(--background-2);
|
||||
transition: 600ms;
|
||||
flex-grow: 1;
|
||||
top: 45px;
|
||||
min-width: max-content;
|
||||
width: 100%;
|
||||
|
||||
.start-typing {
|
||||
font-style: italic;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
}
|
||||
+10
-16
@@ -1,24 +1,22 @@
|
||||
.sidebar-top{
|
||||
|
||||
border: 0px solid var(--p30);
|
||||
font-size: 18px;
|
||||
padding: 20px 20px ;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: var(--background);
|
||||
filter: brightness(97%);
|
||||
background: var(--p20);
|
||||
margin-bottom: 15px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
border: 0px solid var(--border-color);
|
||||
//border: 1px solid var(--border-context);
|
||||
border-radius: 12px;
|
||||
font-size: 15px;
|
||||
line-height: 28px;
|
||||
padding: 20px;
|
||||
background: var(--background);
|
||||
filter: brightness(97%);
|
||||
background: var(--p20);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
@@ -29,17 +27,15 @@
|
||||
cursor: pointer;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: var(--background);
|
||||
background: var(--p30);
|
||||
font-size: 16px;
|
||||
padding: 3px 12px 6px;
|
||||
color: var(--text);
|
||||
filter: brightness(94%);
|
||||
border: none;
|
||||
//border-bottom: 0px solid var(--border-color);
|
||||
border-radius: 12px;
|
||||
|
||||
&:hover {
|
||||
background: var(--secondary);
|
||||
background: var(--p40);
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
@@ -57,7 +53,6 @@
|
||||
font-size: 14px;
|
||||
padding: 3px 12px;
|
||||
text-decoration: none;
|
||||
border-bottom: 0px solid var(--border-color);
|
||||
transition: 600ms;
|
||||
border-radius: 12px;
|
||||
&:last-child {
|
||||
@@ -65,11 +60,11 @@
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--secondary);
|
||||
background: var(--p30);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: var(--secondary);
|
||||
background: var(--p40);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -82,10 +77,9 @@
|
||||
.top-nav-item{
|
||||
border-radius: 12px;
|
||||
font-size: 14px;
|
||||
filter: brightness(97%);
|
||||
background: var(--background);
|
||||
background: var(--p20);
|
||||
padding: 3px 10px ;
|
||||
&:hover {
|
||||
background: var(--secondary);
|
||||
background: var(--p30);
|
||||
}
|
||||
}
|
||||
@@ -2,7 +2,7 @@ input.switch {
|
||||
-webkit-appearance: none;
|
||||
width: 34px;
|
||||
height: 18px;
|
||||
border: 2px solid var(--border-color);
|
||||
border: 1px solid var(--p40);
|
||||
position: relative;
|
||||
border-radius: 50px;
|
||||
box-sizing: content-box;
|
||||
@@ -18,17 +18,17 @@ input.switch::after {
|
||||
content: " ";
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background: var(--border-color);
|
||||
box-shadow: inset 0 0 0px 1px var(--border-color);
|
||||
background: var(--p40);
|
||||
box-shadow: inset 0 0 0px 1px var(--p40);
|
||||
position: absolute;
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
input.switch:checked {
|
||||
background: var(--secondary);
|
||||
background: var(--p50);
|
||||
}
|
||||
|
||||
input.switch:checked::after {
|
||||
left: calc(100% - 17px);
|
||||
background: var(--background);
|
||||
background: var(--p10);
|
||||
}
|
||||
|
||||
+37
-15
@@ -1,27 +1,44 @@
|
||||
.table {
|
||||
min-width: 600px;
|
||||
overflow: auto;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
background: var(--background);
|
||||
filter: brightness(97%);
|
||||
background: var(--p20);
|
||||
padding: 1px;
|
||||
font-size: 14px;
|
||||
border-radius: 12px;
|
||||
table {
|
||||
background: var(--p20);
|
||||
width: 100%;
|
||||
border-collapse:separate;
|
||||
border: none;
|
||||
border-spacing: 0;
|
||||
}
|
||||
thead{
|
||||
border-radius: 12px;
|
||||
tr{
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
th {
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
white-space: nowrap;
|
||||
max-width: 400px;
|
||||
border: none;
|
||||
background: var(--p20);
|
||||
text-align: left;
|
||||
padding: 8px 16px;
|
||||
background: var(--background);
|
||||
filter: brightness(90%);
|
||||
|
||||
&.is-sort {
|
||||
font-weight: 700;
|
||||
}
|
||||
&:first-child{
|
||||
border-radius: 12px 0 0 0 ;
|
||||
}
|
||||
&:last-child{
|
||||
border-radius: 0 12px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
@@ -30,7 +47,7 @@
|
||||
max-width: 400px;
|
||||
height: 48px;
|
||||
padding: 4px 16px;
|
||||
|
||||
border: none;
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
@@ -39,7 +56,7 @@
|
||||
//}
|
||||
|
||||
.status{
|
||||
color:var(--accent);
|
||||
color:var(--text);
|
||||
font-size: 80%;
|
||||
}
|
||||
.row-name{
|
||||
@@ -56,16 +73,21 @@
|
||||
line-height: 14px;
|
||||
}
|
||||
}
|
||||
tr {
|
||||
background: var(--background);
|
||||
&:has(input:checked){
|
||||
filter: brightness(90%);
|
||||
}
|
||||
&:hover {
|
||||
box-shadow: inset 0em 0em 0em 10em rgba(0, 0, 0, 0.1);
|
||||
tbody{
|
||||
tr {
|
||||
border-radius: 12px;
|
||||
background: var(--p10);
|
||||
border: none;
|
||||
&:has(input:checked){
|
||||
background: var(--p30);
|
||||
}
|
||||
&:hover{
|
||||
background: var(--p20);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
tr:nth-child(odd) {
|
||||
//background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
@@ -6,6 +6,5 @@
|
||||
.tab{
|
||||
list-style: none;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
@@ -7,14 +7,36 @@
|
||||
|
||||
input.search{
|
||||
border-radius: 12px;
|
||||
background: var(--background);
|
||||
padding: 3px 10px;
|
||||
background: var(--p20);
|
||||
padding: 4px 10px;
|
||||
cursor: pointer;
|
||||
filter: brightness(97%);
|
||||
border: none;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
||||
.selected-filter{
|
||||
font-size: 13px;
|
||||
border-radius: 12px;
|
||||
margin: 2px 0;
|
||||
background: var(--p30);
|
||||
padding: 3px 10px;
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.filter-input{
|
||||
|
||||
margin: 10px 0 ;
|
||||
input{
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.applied-filter{
|
||||
background: var(--p30);
|
||||
}
|
||||
}
|
||||
.toolbar-filters{ display: flex;
|
||||
align-items: center;
|
||||
@@ -28,7 +50,7 @@
|
||||
.applied-filter {
|
||||
font-size: 13px;
|
||||
border-radius: 12px;
|
||||
background: var(--background);
|
||||
background: var(--p20);
|
||||
padding: 3px 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@@ -37,7 +59,6 @@
|
||||
}
|
||||
|
||||
.applied-filter:hover {
|
||||
opacity: .8;
|
||||
background-color: #eee;
|
||||
background-color: var(--p30);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -31,26 +31,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
}
|
||||
|
||||
.light-text{
|
||||
color: var(--text-light);
|
||||
}
|
||||
+36
-152
@@ -1,138 +1,35 @@
|
||||
// Include any default variable overrides here (though functions won't be available)
|
||||
|
||||
/* SCSS HEX */
|
||||
$green-crayola: #0dab76ff;
|
||||
$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(
|
||||
0deg,
|
||||
#0dab76ff,
|
||||
#139a43ff,
|
||||
#0b5d1eff,
|
||||
#053b06ff,
|
||||
#000000ff
|
||||
);
|
||||
$gradient-right: linear-gradient(
|
||||
90deg,
|
||||
#0dab76ff,
|
||||
#139a43ff,
|
||||
#0b5d1eff,
|
||||
#053b06ff,
|
||||
#000000ff
|
||||
);
|
||||
$gradient-bottom: linear-gradient(
|
||||
180deg,
|
||||
#0dab76ff,
|
||||
#139a43ff,
|
||||
#0b5d1eff,
|
||||
#053b06ff,
|
||||
#000000ff
|
||||
);
|
||||
$gradient-left: linear-gradient(
|
||||
270deg,
|
||||
#0dab76ff,
|
||||
#139a43ff,
|
||||
#0b5d1eff,
|
||||
#053b06ff,
|
||||
#000000ff
|
||||
);
|
||||
$gradient-top-right: linear-gradient(
|
||||
45deg,
|
||||
#0dab76ff,
|
||||
#139a43ff,
|
||||
#0b5d1eff,
|
||||
#053b06ff,
|
||||
#000000ff
|
||||
);
|
||||
$gradient-bottom-right: linear-gradient(
|
||||
135deg,
|
||||
#0dab76ff,
|
||||
#139a43ff,
|
||||
#0b5d1eff,
|
||||
#053b06ff,
|
||||
#000000ff
|
||||
);
|
||||
$gradient-top-left: linear-gradient(
|
||||
225deg,
|
||||
#0dab76ff,
|
||||
#139a43ff,
|
||||
#0b5d1eff,
|
||||
#053b06ff,
|
||||
#000000ff
|
||||
);
|
||||
$gradient-bottom-left: linear-gradient(
|
||||
315deg,
|
||||
#0dab76ff,
|
||||
#139a43ff,
|
||||
#0b5d1eff,
|
||||
#053b06ff,
|
||||
#000000ff
|
||||
);
|
||||
$gradient-radial: radial-gradient(
|
||||
#0dab76ff,
|
||||
#139a43ff,
|
||||
#0b5d1eff,
|
||||
#053b06ff,
|
||||
#000000ff
|
||||
);
|
||||
|
||||
$primary: #5b86be;
|
||||
$secondary: #d9cca1;
|
||||
$success: #80c671;
|
||||
$background: #f4f6fa;
|
||||
|
||||
$table-striped-bg-factor: 0.03;
|
||||
$dropdown-bg: rgb(206, 223, 210);
|
||||
|
||||
|
||||
//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,
|
||||
),
|
||||
);
|
||||
: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: #cecece;
|
||||
--main-font: ‘Open Sans‘, Arial, Helvetica, sans-serif;
|
||||
--main-font-color: #444;
|
||||
--input-bg: rgb(245, 245, 249);
|
||||
--text: #010b05;
|
||||
--background: #f7fefa;
|
||||
--background-stack: #f0f6f3;
|
||||
--background-2: #E8EBEAFF;
|
||||
--background-3: #C2C7C5FF;
|
||||
--background-button: #ddd;
|
||||
--primary: #1ce776;
|
||||
--secondary: #7bc8f1;
|
||||
--accent: #5086ed;
|
||||
--success: #80c671;
|
||||
--error: red;
|
||||
|
||||
--p10: #f4f9ff;
|
||||
--p20: #eaf1f9;
|
||||
--p30: #b3ceff;
|
||||
--p40: #8db5ff;
|
||||
--p50: #70a2ff;
|
||||
--p60: #679cff;
|
||||
--p70: #4284ff;
|
||||
--p80: #1c6bff;
|
||||
--p90: #002b7a;
|
||||
--p100: #000C23;
|
||||
|
||||
|
||||
|
||||
--err10: #ffb9d0;
|
||||
--err20: #ff9bb3;
|
||||
--err30: #fe7e97;
|
||||
--err40: #de617b;
|
||||
--err50: #be4461;
|
||||
--err80: #61001a;
|
||||
--err90: #560012;
|
||||
|
||||
--grey-dark: #424656;
|
||||
--grey-light: #a6abbd;
|
||||
|
||||
--text: var(--p100);
|
||||
--text-light: var(--grey-dark);
|
||||
--text-error: var(--err50);
|
||||
|
||||
--main-font: ‘Open Sans‘, Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
|
||||
@@ -163,8 +60,14 @@ $themes: (
|
||||
@import "./reference-tags";
|
||||
|
||||
body {
|
||||
background-color: var(--background);
|
||||
background-color: var(--p10);
|
||||
font-family: var(--main-font), sans-serif;
|
||||
color: var(--text);
|
||||
|
||||
:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 1px 2px var(--p70);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-spinner .spinner-border {
|
||||
@@ -185,25 +88,6 @@ a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.spinner-border {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border: 2px solid #FFF;
|
||||
border-bottom-color: #FF3D00;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
animation: rotation 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes rotation {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.lucent-component {
|
||||
position: relative;
|
||||
|
||||
Reference in New Issue
Block a user