419 lines
6.6 KiB
CSS
419 lines
6.6 KiB
CSS
|
|
/* inicio estilo imagen zoom */
|
|
/* Estilo para el modal */
|
|
.modal-img {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.8); /* Fondo oscuro con opacidad */
|
|
display: none; /* Ocultarlo por defecto */
|
|
justify-content: center;
|
|
align-items: center;
|
|
backdrop-filter: blur(10px); /* Efecto borroso */
|
|
z-index: 1000;
|
|
}
|
|
|
|
/* Contenido del modal */
|
|
.modal-img-content {
|
|
position: relative;
|
|
max-width: 90%; /* Limita el tamaño de la imagen */
|
|
max-height: 90%;
|
|
}
|
|
|
|
/* Imagen ampliada */
|
|
.modal-img-content img {
|
|
width: 100%;
|
|
height: auto;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
/* Clase activa para mostrar el modal */
|
|
.modal-img.active {
|
|
display: flex;
|
|
}
|
|
|
|
/* Cursor de la imagen zoomable */
|
|
.zoomable img {
|
|
cursor: zoom-in;
|
|
}
|
|
|
|
/* Botón de cierre */
|
|
.close-btn {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
background: none;
|
|
border: none;
|
|
color: #fb8500;
|
|
font-size: 40px;
|
|
cursor: pointer;
|
|
z-index: 1001;
|
|
}
|
|
|
|
.close-btn:hover {
|
|
color: red;
|
|
}
|
|
|
|
/* final estilo imagen zoom */
|
|
|
|
|
|
div.img{
|
|
/* border: 2px solid red; */
|
|
text-align: center;
|
|
& img{
|
|
/* width: 100vw !important; */
|
|
height: auto;
|
|
border-radius: 10px;
|
|
margin-top: 1em;
|
|
margin-bottom: 1em;
|
|
}
|
|
}
|
|
|
|
a.link {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.lst{
|
|
& li{
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
|
|
#accordionExample{
|
|
margin-top: 1em;
|
|
}
|
|
|
|
.subtitle {
|
|
margin-top: 0.5em;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.alert-primary {
|
|
margin-top: 0.5em;
|
|
margin-bottom: 0.5em;
|
|
display: none;
|
|
}
|
|
|
|
/* inicio estilo sección de código */
|
|
i.bi-copy {
|
|
font-size: 0.95em;
|
|
cursor: pointer;
|
|
/* padding-left: 0.5em; */
|
|
}
|
|
|
|
/* final estilo sección de código */
|
|
|
|
.a_noStyle {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.tema_imgs_div {
|
|
display: grid;
|
|
row-gap: 2em;
|
|
}
|
|
|
|
.sng_img {
|
|
margin-top: 1.5em;
|
|
margin-bottom: 1.5em;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
li {
|
|
margin-top: 0.5em;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
/* inicio pre>code */
|
|
|
|
/* inicio otro test */
|
|
/*
|
|
|
|
Atom One Light by Daniel Gamage
|
|
Original One Light Syntax theme from https://github.com/atom/one-light-syntax
|
|
|
|
base: #fafafa
|
|
mono-1: #383a42
|
|
mono-2: #686b77
|
|
mono-3: #a0a1a7
|
|
hue-1: #0184bb
|
|
hue-2: #4078f2
|
|
hue-3: #a626a4
|
|
hue-4: #50a14f
|
|
hue-5: #e45649
|
|
hue-5-2: #c91243
|
|
hue-6: #986801
|
|
hue-6-2: #c18401
|
|
|
|
*/
|
|
|
|
|
|
pre {
|
|
margin-top: 1em;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
|
|
|
|
.code_lightMode {
|
|
&.hljs {
|
|
border: 2px solid black !important;
|
|
}
|
|
|
|
&.hljs {
|
|
color: #383a42 !important;
|
|
background: #fafafa !important;
|
|
border-radius: 6px !important;
|
|
}
|
|
|
|
.hljs-quote,
|
|
.hljs-comment {
|
|
color: #a0a1a7 !important;
|
|
font-style: italic !important;
|
|
}
|
|
|
|
.hljs-doctag,
|
|
.hljs-keyword,
|
|
.hljs-formula {
|
|
color: #a626a4 !important;
|
|
}
|
|
|
|
.hljs-section,
|
|
.hljs-name,
|
|
.hljs-selector-tag,
|
|
.hljs-deletion,
|
|
.hljs-subst {
|
|
color: #e45649 !important;
|
|
}
|
|
|
|
.hljs-literal {
|
|
color: #0184bb !important;
|
|
}
|
|
|
|
.hljs-string,
|
|
.hljs-regexp,
|
|
.hljs-addition,
|
|
.hljs-attribute,
|
|
.hljs-meta .hljs-string {
|
|
color: #50a14f !important;
|
|
}
|
|
|
|
.hljs-attr,
|
|
.hljs-variable,
|
|
.hljs-template-variable,
|
|
.hljs-type,
|
|
.hljs-selector-class,
|
|
.hljs-selector-attr,
|
|
.hljs-selector-pseudo,
|
|
.hljs-number {
|
|
color: #986801 !important;
|
|
}
|
|
|
|
.hljs-symbol,
|
|
.hljs-bullet,
|
|
.hljs-link,
|
|
.hljs-meta,
|
|
.hljs-selector-id,
|
|
.hljs-title {
|
|
color: #4078f2 !important;
|
|
}
|
|
|
|
.hljs-built_in,
|
|
.hljs-title.class_,
|
|
.hljs-class,
|
|
.hljs-title {
|
|
color: #c18401 !important;
|
|
}
|
|
|
|
.hljs-emphasis {
|
|
font-style: italic !important;
|
|
}
|
|
|
|
.hljs-strong {
|
|
font-weight: bold !important;
|
|
}
|
|
|
|
.hljs-link {
|
|
text-decoration: underline !important;
|
|
}
|
|
}
|
|
|
|
/* inicio tema dos */
|
|
/*
|
|
|
|
Atom One Dark by Daniel Gamage
|
|
Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax
|
|
|
|
base: #282c34
|
|
mono-1: #abb2bf
|
|
mono-2: #818896
|
|
mono-3: #5c6370
|
|
hue-1: #56b6c2
|
|
hue-2: #61aeee
|
|
hue-3: #c678dd
|
|
hue-4: #98c379
|
|
hue-5: #e06c75
|
|
hue-5-2: #be5046
|
|
hue-6: #d19a66
|
|
hue-6-2: #e6c07b
|
|
|
|
*/
|
|
|
|
.code_darktMode {
|
|
&.hljs {
|
|
color: #abb2bf;
|
|
background: #282c34;
|
|
border: 2px solid white;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.hljs-comment,
|
|
.hljs-quote {
|
|
color: #5c6370;
|
|
font-style: italic;
|
|
}
|
|
|
|
.hljs-doctag,
|
|
.hljs-keyword,
|
|
.hljs-formula {
|
|
color: #c678dd;
|
|
}
|
|
|
|
.hljs-section,
|
|
.hljs-name,
|
|
.hljs-selector-tag,
|
|
.hljs-deletion,
|
|
.hljs-subst {
|
|
color: #e06c75;
|
|
}
|
|
|
|
.hljs-literal {
|
|
color: #56b6c2;
|
|
}
|
|
|
|
.hljs-string,
|
|
.hljs-regexp,
|
|
.hljs-addition,
|
|
.hljs-attribute,
|
|
.hljs-meta .hljs-string {
|
|
color: #98c379;
|
|
}
|
|
|
|
.hljs-attr,
|
|
.hljs-variable,
|
|
.hljs-template-variable,
|
|
.hljs-type,
|
|
.hljs-selector-class,
|
|
.hljs-selector-attr,
|
|
.hljs-selector-pseudo,
|
|
.hljs-number {
|
|
color: #d19a66;
|
|
}
|
|
|
|
.hljs-symbol,
|
|
.hljs-bullet,
|
|
.hljs-link,
|
|
.hljs-meta,
|
|
.hljs-selector-id,
|
|
.hljs-title {
|
|
color: #61aeee;
|
|
}
|
|
|
|
.hljs-built_in,
|
|
.hljs-title.class_,
|
|
.hljs-class .hljs-title {
|
|
color: #e6c07b;
|
|
}
|
|
|
|
.hljs-emphasis {
|
|
font-style: italic;
|
|
}
|
|
|
|
.hljs-strong {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.hljs-link {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
/* fin otro test */
|
|
|
|
/* :root {
|
|
--selection: rgba(224, 146, 58, 0.35);
|
|
--background: #242424;
|
|
--text: #000000;
|
|
--string: #67b26d;
|
|
--number: #e78c45;
|
|
--title: #9e4ee8;
|
|
--built_in: #d54e53;
|
|
--keyword: #e5b742;
|
|
--function: #e0923a;
|
|
--params: #508be5;
|
|
--comment: green;
|
|
--attribute: #e7c547;
|
|
}
|
|
|
|
.hljs-comment,
|
|
.hljs-quote {
|
|
color: var(--comment);
|
|
}
|
|
|
|
/* media querys */
|
|
@media only screen and (max-width: 767px) {
|
|
/* Reglas CSS para pantallas de celulares */
|
|
/* red */
|
|
/* .navbar-brand {
|
|
background-color: red;
|
|
} */
|
|
div.img{
|
|
|
|
& img{
|
|
width: 75vw;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media only screen and (min-width: 768px) and (max-width: 991px) {
|
|
/* Reglas CSS para tablets */
|
|
/* purple */
|
|
/* .navbar-brand {
|
|
background-color: purple;
|
|
} */
|
|
div.img{
|
|
& img{
|
|
width: 65vw;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media only screen and (min-width: 992px) and (max-width: 1199px) {
|
|
/* Reglas CSS para laptops */
|
|
/* green */
|
|
/* .navbar-brand {
|
|
background-color: green;
|
|
} */
|
|
div.img{
|
|
|
|
& img{
|
|
width: 60vw;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media only screen and (min-width: 1200px) {
|
|
/* Reglas CSS para monitores ultra wide */
|
|
/* yellow */
|
|
/* .navbar-brand {
|
|
background-color: yellow;
|
|
} */
|
|
div.img{
|
|
& img{
|
|
width: 50vw;
|
|
}
|
|
}
|
|
} |