Vivaldi es uno de los navegadores que más libertad da a los usuarios, tanto en forma de funciones como de personalización. No sólo permite usar temas y editar el redondeado de las pestañas, entre otras cosas; también permite que creemos un archivo de configuración desde el que editar cualquier parte del navegador.
Lo que os vamos a enseñar hoy es algo que han pedido algunos usuarios en el foro del navegador, pero que en estos momentos no está implementado. Vivaldi permite ocultar el panel lateral con F4, y también tiene una opción en forma de pequeña pestaña que mostrará el panel al hacerle clic. Lo que le faltaría para completar el círculo es que este panel sólo aparezca si pasamos el cursor por encima, y vamos a explicar una manera de conseguirlo.
Modificación de Vivaldi que podría interesarte
En este artículo explicamos cómo activar la opción para editar cualquier parte del navegador y cómo crear un archivo para estos menesteres. Resumiendo, se activa la opción en vivaldi://experiments/, se indica la carpeta en donde meteremos estas modificaciones y se crea un archivo .css con los cambios que nos interesen.
Para conseguir lo de que el panel lateral esté oculto y aparezca al hacerle lo que se conoce como hover, en algún punto de ese archivo tenemos que añadir algo como esto:
#panels-container {
opacity: 0;
width: 1px !important;
transition: 0.3s !important
}
#panels-container:hover {
opacity: 1;
width: 35px !important
}
Explicando lo que hemos hecho
Los paneles están en un contenedor, un elemento de Vivaldi que se llama panels-container. En la primera parte hacemos que tenga una opacidad de 0, es decir, que sea totalmente transparente, y le damos una anchura de 1px como mínimo, para que exista y haya algo por lo que pasar el cursor. En la segunda, que es para cuando hacemos ese hover, la opacidad pasará a ser de 1 – totalmente visible – y le daremos la anchura normal, que por defecto y en todos los aparatos en los que lo he mirado es de 35px.
Queda algo más, y es una transición. Es opcional, pero si se añade esa parte, el panel aparecerá desde el borde y le dará un efecto que está bien… si es que os gusta.
Otras opciones
Si se conoce el lenguaje del CSS, y como ya explicamos en su día, las posibilidades son virtualmente infinitas. Otro ejemplo que se me ocurre para lo explicado aquí es el de ponerle una altura de unos pocos pixeles para que el efecto sea de izquierda a derecha y de abajo a arriba o lo contrario. Pero es algo que no aconsejo porque encontrar el punto exacto sobre el que pasar el cursor sería algo difícil. También hay otras maneras de conseguir lo del panel, y alguna he visto por los foros y en Reddit. Pero la mayoría usan más líneas de CSS y encima dejan que se vea un borde sin panel en el lugar en donde debería estar, con lo que se gana más bien poco.
Y hablando de opciones, también os cuento mi elección: aunque coincido en que estaría bien esto de que aparezca el panel al pasar el cursor por el borde, creo que tiene que estar mejor implementado. Lo que hemos explicado aquí es un apaño que no pasa de eso: algo que hace lo que queremos y nos saca del «apuro». Además, si lo que echamos de menos es una ventana que vaya de lado a lado sin panel, podemos hacer que «se vaya» presionando F4 tal y como hemos explicado al principio de esta nota.
Así que lo que yo he hecho al final ha sido probar a cambiarlo por mi cuenta, compartirlo por si le sirve a alguien y quedarme en lo que me ofrece el navegador por defecto. Quién sabe, si en un futuro sus desarrolladores deciden que es buena idea y ofrecen algo mejor, quizá yo, como otros muchos, use la función. Vivaldi seguirá a lo suyo: ofreciendo opciones.
.barra {display: flex;justify-content: flex-end;height: 25px; background-color: #333;border-radius: 5px 5px 0 0;}.rojo, .naranja, .verde{width: 12px;height: 12px; position: relative;border-radius: 50%;top: 7px; margin: 0 3px;}.rojo{background-color: rgb(248, 82, 82); margin-right: 7px;}.naranja{background-color: rgb(252, 186, 63);}.verde{background-color: rgb(17, 187, 17);}.terminal{background-color: black !important; border-radius: 5px !important; margin-bottom:20px}pre{font-family:monospace !important; padding: 0 10px 10px; line-height: 1.5em; overflow: auto; background-color: black !important; color: #0EE80E !important} code {background-color: rgba(255, 255, 0, 0.18); color: #d63384; padding: 1px 3px; font-family: monospace; border-radius: 2px;}
from Linux Adictos https://ift.tt/Ktw5Fxg
via IFTTT
