153 lines
4.7 KiB
CSS
153 lines
4.7 KiB
CSS
/**
|
||
* Solo - A small and beautiful blogging system written in Java.
|
||
* Copyright (c) 2010-2019, b3log.org & hacpai.com
|
||
*
|
||
* This program is free software: you can redistribute it and/or modify
|
||
* it under the terms of the GNU Affero General Public License as published by
|
||
* the Free Software Foundation, either version 3 of the License, or
|
||
* (at your option) any later version.
|
||
*
|
||
* This program is distributed in the hope that it will be useful,
|
||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||
* GNU Affero General Public License for more details.
|
||
*
|
||
* You should have received a copy of the GNU Affero General Public License
|
||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||
*/
|
||
/* ------------------------------------------
|
||
PURE CSS SPEECH BUBBLES
|
||
by Nicolas Gallagher
|
||
- http://nicolasgallagher.com/pure-css-speech-bubbles/
|
||
|
||
http://nicolasgallagher.com
|
||
http://twitter.com/necolas
|
||
|
||
Created: 02 March 2010
|
||
Version: 1.2 (03 March 2011)
|
||
|
||
Dual licensed under MIT and GNU GPLv2 <20> Nicolas Gallagher
|
||
------------------------------------------ */
|
||
|
||
/* NOTE: Some declarations use longhand notation so that it can be clearly
|
||
explained what specific properties or values do and what their relationship
|
||
is to other properties or values in creating the effect */
|
||
|
||
/* ============================================================================================================================
|
||
== GENERAL STYLES
|
||
** ============================================================================================================================ */
|
||
|
||
|
||
|
||
|
||
|
||
|
||
/* ============================================================================================================================
|
||
== BUBBLE WITH A BORDER AND TRIANGLE
|
||
** ============================================================================================================================ */
|
||
|
||
/* THE SPEECH BUBBLE
|
||
------------------------------------------------------------------------------------------------------------------------------- */
|
||
|
||
.triangle-border {
|
||
position:relative;
|
||
padding:15px;
|
||
margin:1em 0 3em;
|
||
border:5px solid #5a8f00;
|
||
color:#333;
|
||
background:#fff;
|
||
/* css3 */
|
||
-webkit-border-radius:10px;
|
||
-moz-border-radius:10px;
|
||
border-radius:10px;
|
||
}
|
||
|
||
/* Variant : for left positioned triangle
|
||
------------------------------------------ */
|
||
|
||
.triangle-border.left {
|
||
margin-left:30px;
|
||
}
|
||
|
||
/* Variant : for right positioned triangle
|
||
------------------------------------------ */
|
||
|
||
.triangle-border.right {
|
||
margin-right:30px;
|
||
}
|
||
|
||
/* THE TRIANGLE
|
||
------------------------------------------------------------------------------------------------------------------------------- */
|
||
|
||
.triangle-border:before {
|
||
content:"";
|
||
position:absolute;
|
||
bottom:-20px; /* value = - border-top-width - border-bottom-width */
|
||
left:40px; /* controls horizontal position */
|
||
border-width:20px 20px 0;
|
||
border-style:solid;
|
||
border-color:#5a8f00 transparent;
|
||
/* reduce the damage in FF3.0 */
|
||
display:block;
|
||
width:0;
|
||
}
|
||
|
||
/* creates the smaller triangle */
|
||
.triangle-border:after {
|
||
content:"";
|
||
position:absolute;
|
||
bottom:-13px; /* value = - border-top-width - border-bottom-width */
|
||
left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */
|
||
border-width:13px 13px 0;
|
||
border-style:solid;
|
||
border-color:#fff transparent;
|
||
/* reduce the damage in FF3.0 */
|
||
display:block;
|
||
width:0;
|
||
}
|
||
|
||
/* Variant : left
|
||
------------------------------------------ */
|
||
|
||
/* creates the larger triangle */
|
||
.triangle-border.left:before {
|
||
top:10px; /* controls vertical position */
|
||
bottom:auto;
|
||
left:-30px; /* value = - border-left-width - border-right-width */
|
||
border-width:15px 30px 15px 0;
|
||
border-color:transparent #5a8f00;
|
||
}
|
||
|
||
|
||
/* creates the smaller triangle */
|
||
.triangle-border.left:after {
|
||
top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
|
||
bottom:auto;
|
||
left:-21px; /* value = - border-left-width - border-right-width */
|
||
border-width:9px 21px 9px 0;
|
||
border-color:transparent #fff;
|
||
}
|
||
|
||
/* Variant : right
|
||
------------------------------------------ */
|
||
|
||
/* creates the larger triangle */
|
||
.triangle-border.right:before {
|
||
top:10px; /* controls vertical position */
|
||
bottom:auto;
|
||
left:auto;
|
||
right:-30px; /* value = - border-left-width - border-right-width */
|
||
border-width:15px 0 15px 30px;
|
||
border-color:transparent pink;
|
||
}
|
||
|
||
/* creates the smaller triangle */
|
||
.triangle-border.right:after {
|
||
top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
|
||
bottom:auto;
|
||
left:auto;
|
||
right:-21px; /* value = - border-left-width - border-right-width */
|
||
border-width:9px 0 9px 21px;
|
||
border-color:transparent #fff;
|
||
}
|