Homec4science
Diffusion webapp_nextjs (master) Browse

R13029/app/globals.css
973f3d8f2ddbmaster

Last Change
Raw File

globals.css
View Options

:root {
--max-width: 1100px;
--border-radius: 12px;
--font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
--foreground-rgb: 0, 0, 0;
--background-start-rgb: 214, 219, 220;
--background-end-rgb: 255, 255, 255;
--primary-glow: conic-gradient(
from 180deg at 50% 50%,
#16abff33 0deg,
#0885ff33 55deg,
#54d6ff33 120deg,
#0071ff33 160deg,
transparent 360deg
);
--secondary-glow: radial-gradient(
rgba(255, 255, 255, 1),
rgba(255, 255, 255, 0)
);
--tile-start-rgb: 239, 245, 249;
--tile-end-rgb: 228, 232, 233;
--tile-border: conic-gradient(
#00000080,
#00000040,
#00000030,
#00000020,
#00000010,
#00000010,
#00000080
);
--callout-rgb: 238, 240, 241;
--callout-border-rgb: 172, 175, 176;
--card-rgb: 180, 185, 188;
--card-border-rgb: 131, 134, 135;
}
@media (prefers-color-scheme: dark) {
:root {
--foreground-rgb: 255, 255, 255;
--background-start-rgb: 0, 0, 0;
--background-end-rgb: 0, 0, 0;
--primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
--secondary-glow: linear-gradient(
to bottom right,
rgba(1, 65, 255, 0),
rgba(1, 65, 255, 0),
rgba(1, 65, 255, 0.3)
);
--tile-start-rgb: 2, 13, 46;
--tile-end-rgb: 2, 5, 19;
--tile-border: conic-gradient(
#ffffff80,
#ffffff40,
#ffffff30,
#ffffff20,
#ffffff10,
#ffffff10,
#ffffff80
);
--callout-rgb: 20, 20, 20;
--callout-border-rgb: 108, 108, 108;
--card-rgb: 100, 100, 100;
--card-border-rgb: 200, 200, 200;
}
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html,
body {
max-width: 100vw;
overflow-x: hidden;
}
body {
color: rgb(var(--foreground-rgb));
background: linear-gradient(
to bottom,
transparent,
rgb(var(--background-end-rgb))
)
rgb(var(--background-start-rgb));
}
a {
color: inherit;
text-decoration: none;
}
@media (prefers-color-scheme: dark) {
html {
color-scheme: dark;
}
}
/*custom*/
* {
box-sizing: border-box;
}
/* Style the search field */
forme.example input[type=text] {
padding: 10px;
font-size: 17px;
border: 1px solid grey;
float: left;
width: 80%;
background: #f1f1f1;
}
.topRightCorner{
position: absolute;
top: 0;
right: 0;
padding: 10px; /* padding for better appearance */
}
.topRightCorner a {
display: block;
}
#chartContainer2dMap {
position: relative;
}
.headerContainer {
position:relative
}
#description {
position: absolute;
width: 40%; /* To stretch across the parent container */
z-index: 1;
top:0;
left:0;
}
#mapContainer {
position: absolute;
width: 100%; /* To stretch across the parent container */
opacity: 1; /* Adjust this as needed to change transparency */
z-index: 2; /* Ensure this div is on top */
top:0;
left:0;
}
.tabulator-edit-list-item.active:hover {
background-color: #1d68cd !important;
cursor: pointer;
}
.tabulator-edit-list-item:hover {
background-color: green !important;
cursor: pointer;
}
.color-checkbox {
display: none;
}
.color-checkbox + label {
position: relative;
padding-left: 25px;
}
.color-checkbox + label:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 15px;
height: 15px;
border: 2px solid;
border-radius: 2px;
}
.color-checkbox:checked + label:before {
background-color: currentColor;
}
.color-checkbox:not(:checked) + label:before {
background-color: white;
}
.all-color + label:before {
border-color: black;
}
.all-color:checked + label:before {
background-color: black;
}
.cdh-color + label:before {
border-color: #d4d4d4;
}
.cdh-color:checked + label:before {
background-color: #d4d4d4;
}
.cdm-color + label:before {
border-color: #FBF4B1;
}
.cdm-color:checked + label:before {
background-color: #FBF4B1;
}
.enac-color + label:before {
border-color: #ff8e52;
}
.enac-color:checked + label:before {
background-color: #ff8e52;
}
.ic-color + label:before {
border-color: #c4fafa;
}
.ic-color:checked + label:before {
background-color: #c4fafa;
}
.sb-color + label:before {
border-color: #33cde2;
}
.sb-color:checked + label:before {
background-color: #33cde2;
}
.sti-color + label:before {
border-color: #b7aef3;
}
.sti-color:checked + label:before {
background-color: #b7aef3;
}
.sv-color + label:before {
border-color: #94e535;
}
.sv-color:checked + label:before {
background-color: #94e535;
}
#legend {
display: flex;
flex-direction: column;
position: absolute;
top: 0;
right: 0;
}
#legend .legend-item {
display: flex;
align-items: center;
margin-bottom: 10px;
}
#legend .legend-item .color-box {
width: 20px;
height: 20px;
margin-right: 10px;
}
#loading-spinner {
border: 8px solid #f3f3f3;
border-top: 8px solid #3498db;
border-radius: 50%;
width: 60px;
height: 60px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.expanded-info {
display: none;
word-wrap: break-word;
white-space: pre-wrap;
max-width:80%;
border:1px solid black;
}
#textarea {
width: 80%;
height: 100%;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
}
.block {
margin: 5px;
float:left;
padding:0px;
}
.btn-group{
display: inline-flex;
}
.btn-group2{
width: 20%;
margin:0;
padding:0;
}
.btn-group2 button {
background-color: #04AA6D; /* Green background */
border: 1px solid green; /* Green border */
color: white; /* White text */
padding: 0px 0px; /* Some padding */
cursor: pointer; /* Pointer/hand icon */
width: 100%; /* Set a width if needed */
height: 50%; /* Set a width if needed */
display: block; /* Make the buttons appear below each other */
}
.btn-group2 button:not(:last-child) {
border-bottom: none; /* Prevent double borders */
}
/* Add a background color on hover */
.btn-group2 button:hover {
background-color: #3e8e41;
}
#tooltipTable td:nth-child(2) { text-align: end; }
#controlers {
/*position: absolute;*/
/*top: 50px;*/
/*left: 10px;*/
/*height: 200px;*/
width: 300px;
background-color: rgba(255, 255, 255, 0.9);
z-index: 1;
}
forme.example input[type=textarea] {
padding: 10px;
font-size: 17px;
border: 1px solid grey;
float: left;
width: 80%;
background: #f1f1f1;
resize: both;
overflow: auto;
}
forme.example textarea {
padding: 10px;
font-size: 17px;
border: 1px solid grey;
float: left;
width: 80%;
background: #f1f1f1;
resize: both;
overflow: auto;
}
/* Style the submit button */
forme.example button {
float: left;
width: 20%;
padding: 10px;
/*background: #2196F3;*/
background: #c80000;
color: white;
font-size: 17px;
border: 1px solid grey;
border-left: none; /* Prevent double borders */
cursor: pointer;
}
.rounded {
border-radius: 5px;
padding:20px;
margin:2px;
width: 100%;
}
forme.example button:hover {
background: #0b7dda;
}
/* Clear floats */
form.example::after {
content: "";
clear: both;
display: table;
}
.nonMagicConcept {
width: 30%;
}
.btnCssClass {
opacity: 80%;
}
#selected-id{
width:100%;
}
.link-wiki {
margin-left:10px !important;
}
.concept a, .concept button {
padding: 0px 5px;
margin:0;
width: 22px;
font-size:70%;
}
.border-left {
border-left: 1px solid #000;
}
.border-right {
border-right: 1px solid #000;
}
.no-border {
border:none !important;
}
#selected-id div, .popover .concept {
float: left;
padding: 0;
background-color: #eee;
}
.clear {
height:10px;
clear: both;
}
#search-bar {
margin: 15px 0;
border-radius: 33px;
}
iframe {
width: 100%;
height: 600px;
overflow: scroll;
}
/*#result-table {*/
/* width:100%;*/
/* margin-top:20px;*/
/*}*/
#no-result {
display:none;
margin-top:20px;
}
.conceptNotFound {
background-color:#fff3cd !important;
}
.testpopover ul {
font-size:70%;
}
.list-group-item {
padding: 2px 10px !important;
background-color:#ccc;
}
.list-group-hover .list-group-item:hover {
background-color: #f5f5f5;
}
th .concept button {
display:none;
}
#title {
padding-left:20px;
font-size:1em;
}
/*test*/
body{
font-family:arial, sans-serif
}
/*#example-table{*/
/* overflow-y: scroll;*/
/*}*/
/*.tabulator{*/
/* overflow: visible;*/
/*}*/
body.waiting * {
cursor: progress;
}
.tabulator {
background-color: transparent;
}
.custom-modal .modal-dialog {
min-height: 80vh;
display: flex;
flex-direction: column;
justify-content: center;
overflow: auto;
}
/*#peity-tooltip {*/
/* background-color: #000;*/
/* border-radius: 0.25rem;*/
/* color: #fff;*/
/* display: block;*/
/* font-family: "Helvetica Neue",Arial,sans-serif;*/
/* font-size: 0.875rem;*/
/* font-style: normal;*/
/* font-weight: 400;*/
/* letter-spacing: normal;*/
/* line-height: 1.5;*/
/* max-width: 500px;*/
/* opacity: 1;*/
/* overflow-wrap: break-word;*/
/* padding: 3px 8px;*/
/* position: absolute;*/
/* text-align: left;*/
/* text-decoration: none;*/
/* text-shadow: none;*/
/* text-transform: none;*/
/* transition: opacity .2s ease-in-out;*/
/* white-space: normal;*/
/* word-break: normal;*/
/* word-spacing: normal;*/
/* z-index: 1070;*/
/*}*/
/*#peity-tooltip.show{*/
/* opacity:1*/
/*}*/
#graph-force.show{
opacity:1
}
#graph-force{
opacity:1
}
.peity-color1{
fill:#f00;
}
.peity-color1:hover{
fill:#f44;
}
.peity-color2{
fill:#ddd;
}
.peity-color2:hover{
fill:#e1e1e1;
}
/* range input */
.rangeControllerButtonGeneral{
margin: 15px 0;
display: inline-block;
vertical-align: top;
background-color : #a4a4a4;
}
.rangeControllerButtonConcept{
margin: 15px 0;
display: inline-block;
vertical-align: top;
background-color : #94bafe;
}
.rangeControllerButtonPeople{
margin: 15px 0;
display: inline-block;
vertical-align: top;
background-color : #d97f56;
}
input[type=range] {
height: 33px;
-webkit-appearance: none;
margin: 10px 0;
width: 100%;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 10px;
cursor: pointer;
animate: 0.2s;
box-shadow: 1px 1px 1px #000000;
/*background: #94bafe;*/
border-radius: 5px;
border: 1px solid #000000;
}
.conceptRange::-webkit-slider-runnable-track {
background: #94bafe;
}
.peopleRange::-webkit-slider-runnable-track {
background: #d97f56;
}
.nodeSizeRange::-webkit-slider-runnable-track {
background: #a4a4a4;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 1px 1px 1px #000000;
border: 1px solid #000000;
height: 25px;
width: 14px;
border-radius: 5px;
/*background: #94bafe;*/
cursor: pointer;
-webkit-appearance: none;
margin-top: -8.5px;
}
.conceptRange::-webkit-slider-thumb {
background: #94bafe;
}
.peopleRange::-webkit-slider-thumb {
background: #d97f56;
}
.nodeSizeRange::-webkit-slider-thumb {
background: #a4a4a4;
}
/*input[type=range]:focus::-webkit-slider-runnable-track {*/
/* background: #1B67A9;*/
/*}*/
/*input[type=range]::-moz-range-track {*/
/* width: 100%;*/
/* height: 10px;*/
/* cursor: pointer;*/
/* animate: 0.2s;*/
/* box-shadow: 1px 1px 1px #000000;*/
/* background: #1B67A9;*/
/* border-radius: 5px;*/
/* border: 1px solid #000000;*/
/*}*/
/*input[type=range]::-moz-range-thumb {*/
/* box-shadow: 1px 1px 1px #000000;*/
/* border: 1px solid #000000;*/
/* height: 25px;*/
/* width: 14px;*/
/* border-radius: 5px;*/
/* background: #645525;*/
/* cursor: pointer;*/
/*}*/
/*input[type=range]::-ms-track {*/
/* width: 100%;*/
/* height: 10px;*/
/* cursor: pointer;*/
/* animate: 0.2s;*/
/* background: transparent;*/
/* border-color: transparent;*/
/* color: transparent;*/
/*}*/
/*input[type=range]::-ms-fill-lower {*/
/* background: #1B67A9;*/
/* border: 1px solid #000000;*/
/* border-radius: 10px;*/
/* box-shadow: 1px 1px 1px #000000;*/
/*}*/
/*input[type=range]::-ms-fill-upper {*/
/* background: #1B67A9;*/
/* border: 1px solid #000000;*/
/* border-radius: 10px;*/
/* box-shadow: 1px 1px 1px #000000;*/
/*}*/
/*input[type=range]::-ms-thumb {*/
/* margin-top: 1px;*/
/* box-shadow: 1px 1px 1px #000000;*/
/* border: 1px solid #000000;*/
/* height: 25px;*/
/* width: 14px;*/
/* border-radius: 5px;*/
/* background: #fa0f47;*/
/* cursor: pointer;*/
/*}*/
/*input[type=range]:focus::-ms-fill-lower {*/
/* background: #1B67A9;*/
/*}*/
/*input[type=range]:focus::-ms-fill-upper {*/
/* background: #1B67A9;*/
/*}*/
/*.dropdown {*/
/* !*background-color: #3e8e41;*!*/
/* position: absolute ;*/
/* top: 0;*/
/* right: 0;*/
/* padding: 10px;*/
/*}*/
/*.dropdown-content {*/
/* display: none;*/
/* position: absolute;*/
/* right: 0; !* position it on the right side *!*/
/* background-color: #f9f9f9;*/
/* min-width: 160px;*/
/* box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);*/
/* z-index: 1;*/
/*}*/
/*.dropdown-content a {*/
/* color: black;*/
/* padding: 12px 16px;*/
/* text-decoration: none;*/
/* display: block;*/
/*}*/
/*.dropdown:hover .dropdownCustom-content {display: block;}*/
/*.dropdown-content-item:hover {background-color: #f1f1f1;}*/
c4science · Help