History: Themes_tiki_org_custom_CSS
Source of version: 2
Copy to clipboard
This is the Look & Feel admin custom CSS used at this site as of the time of this writing.
To do: Page-specific CSS should be moved to the particular page (vertical timeline, for example). Other rules should be checked to see if they are still needed, etc.
{CODE()}
/* Change logo from black to white */
img.sitelogo {filter: invert(100%); }
/* Gitter chat sidecar */
aside.gitter-chat-embed { margin-top: 150px; }
/*** Link color definitions for "sister" sites ***/
article a[href^="http://"]::before,
article a[href^="https://"]::before,
article a.ext:before {
color: #fff;
display: inline-block;
font-size: 75%;
border-radius: 50%;
height: 0.952381em;
overflow: hidden;
margin-right: 0.285714em;
text-indent: -10em;
transition: transform .25s;
vertical-align: middle;
width: 0.952381em;
}
article a[href^="http://"]:hover::before,
article a[href^="https://"]:hover::before {
box-shadow: 0.5em 0.5em 1em -0.5em rgba(0,0,0,.5);
width: auto;
transition: text-indent .1s;
text-indent: 0;
padding: 0.142857em 0.357143em;
height: auto;
border-radius: 9em;
top: -1em;
position: absolute;
margin-left: -0.928571em;
word-break: normal;
}
article a[href^="http://"]:hover::after,
article a[href^="https://"]:hover::after {
border-left-width: .5em;
border-left-style: solid;
border-bottom-color: transparent;
border-bottom-width: .5em;
border-bottom-style: solid;
left: .5em;
margin-top: 1.39em;
top: -1em;
position: absolute;
transform: skewX(-20deg);
}
/* rules common for all URLs we want to match */
article a[href^="http://branding.tiki"]:hover,
article a[href^="https://branding.tiki"]:hover,
article a[href^="http://community.tiki"]:hover,
article a[href^="https://community.tiki"]:hover,
article a[href^="http://dev.tiki"]:hover,
article a[href^="https://dev.tiki"]:hover,
article a[href^="http://doc.tiki"]:hover,
article a[href^="https://doc.tiki"]:hover,
article a[href^="http://tiki"]:hover,
article a[href^="https://tiki"]:hover,
article a[href^="http://profiles.tiki"]:hover,
article a[href^="https://profiles.tiki"]:hover,
article a[href^="http://suite.tiki"]:hover,
article a[href^="https://suite.tiki"]:hover,
article a[href^="http://themes.tiki"]:hover,
article a[href^="https://themes.tiki"]:hover,
article a[href^="http://tiki.org"]:hover,
article a[href^="https://tiki.org"]:hover,
article a[href^="http://tikiwiki.org"]:hover,
article a[href^="https://tikiwiki.org"]:hover,
article a[href^="http://de.wikipedia.org"]:hover,
article a[href^="https://de.wikipedia.org"]:hover,
article a[href^="http://en.wikipedia.org"]:hover,
article a[href^="https://en.wikipedia.org"]:hover,
article a[href^="https://www.wikipedia.org"]:hover,
article a[href^="http://wikisuite.org"]:hover,
article a[href^="https://wikisuite.org"]:hover,
article a.ext_page:hover {
padding-left: 0.9285714285714286em;
position: relative;
}
/* Sometimes we want to prevent these so we can wrap the content in .rawlinks class and the links will display raw */
.rawlinks a::before, .rawlinks a::after {
display: none !important;
}
.rawlinks a.btn {
padding: 6px 12px !important;
}
.rawlinks a.btn-lg, .rawlinks .btn-group-lg > .btn {
padding: 10px 16px !important;
}
.rawlinks a.list-group-item {
padding: 10px 15px !important;
}
/* Color and badge definitions for specific URLs follow */
article a[href^="http://branding.tiki"]:hover:after,
article a[href^="https://branding.tiki"]:hover:after,
article a.branding:hover:after {
border-left-color: #eb0a82;
content: "";
}
article a[href^="http://branding.tiki"]:before,
article a[href^="https://branding.tiki"]:before,
article a.branding:before {
background-color: #eb0a82;
content: "branding:";
}
article a[href^="http://tiki.org"]:hover:after,
article a[href^="https://tiki.org"]:hover:after,
article a[href^="http://tikiwiki.org"]:hover:after,
article a[href^="https://tikiwiki.org"]:hover:after,
article a[href^="http://info.tiki"]:hover:after,
article a[href^="https://info.tiki"]:hover:after,
article a.info:hover:after {
border-left-color: #117485;
content: "";
}
article a[href^="http://tiki.org"]:before,
article a[href^="https://tiki.org"]:before,
article a[href^="http://tikiwiki.org"]:before,
article a[href^="https://tikiwiki.org"]:before,
article a[href^="http://info.tiki"]:before,
article a[href^="https://info.tiki"]:before,
article a.info:before {
background-color: #117485;
content: "info:";
}
/* orange for community ext wiki links */
article a[href^="http://community.tiki"]:hover:after,
article a[href^="https://community.tiki"]:hover:after,
article a.tw:hover:after {
border-left-color: #ec6223;
content: "";
}
article a[href^="http://community.tiki"]:before,
article a[href^="https://community.tiki"]:before,
article a.tw:before {
background-color: #ec6223;
content: "community:";
}
article a[href^="http://dev.tiki"]:hover:after,
article a[href^="https://dev.tiki"]:hover:after,
article a.dev:hover:after {
border-left-color: #c21e3b;
content: "";
}
article a[href^="http://dev.tiki"]:before,
article a[href^="https://dev.tiki"]:before,
article a.dev:before {
background-color: #c21e3b;
content: "dev:";
}
article a[href^="http://doc.tiki"]:hover:after,
article a[href^="https://doc.tiki"]:hover:after,
article a.doc:hover:after {
border-left-color: #96a032;
content: "";
}
article a[href^="http://doc.tiki"]:before,
article a[href^="https://doc.tiki"]:before,
article a.doc:before {
background-color: #96a032;
content: "doc:";
}
article a[href^="http://profiles.tiki"]:hover:after,
article a[href^="https://profiles.tiki"]:hover:after,
article a.profiles:hover:after {
border-left-color: #ffc506;
content: "";
}
article a[href^="http://profiles.tiki"]:before,
article a[href^="https://profiles.tiki"]:before,
article a.profiles:before {
background-color: #ffc506;
content: "profiles:";
}
article a[href^="http://suite.tiki"]:hover:after,
article a[href^="https://suite.tiki"]:hover:after,
article a.suite:hover:after {
border-left-color: #7001a7;
content: "";
}
article a[href^="http://suite.tiki"]:before,
article a[href^="https://suite.tiki"]:before,
article a.suite:before {
background-color: #7001a7;
content: "suite:";
}
article a[href^="http://themes.tiki"]:hover:after,
article a[href^="https://themes.tiki"]:hover:after,
article a.themes:hover:after {
border-left-color: #8e286a;
content: "";
}
article a[href^="http://themes.tiki"]:before,
article a[href^="https://themes.tiki"]:before,
article a.themes:before {
background-color: #8e286a;
content: "themes:";
}
article a[href^="http://de.wikipedia.org"]:hover:after,
article a[href^="https://de.wikipedia.org"]:hover:after,
article a[href^="http://en.wikipedia.org"]:hover:after,
article a[href^="https://en.wikipedia.org"]:hover:after,
article a[href^="https://www.wikipedia.org"]:hover:after,
article a.wikipedia:hover:after {
border-left-color: #cedff2;
content: "";
}
article a[href^="http://de.wikipedia.org"]:before,
article a[href^="https://de.wikipedia.org"]:before,
article a[href^="http://en.wikipedia.org"]:before,
article a[href^="https://en.wikipedia.org"]:before,
article a[href^="https://www.wikipedia.org"]:before,
article a.wikipedia:before {
background-color: #cedff2;
color: #000;
content: "wikipedia:";
}
article a[href^="http://de.wikipedia.org"]:before,
article a[href^="https://de.wikipedia.org"]:before,
article a.wikipedia.de:before {
content: "wikipedia (german):";
}
article a[href^="http://wikisuite.org"]:before,
article a[href^="https://wikisuite.org"]:before,
article a.wikisuite:before {
background-color: #192263;
border-radius: .25rem;
content: "wikisuite:";
transform: rotate(-45deg);
}
article a[href^="http://wikisuite.org"]:hover:after,
article a[href^="https://wikisuite.org"]:hover:after,
article a.wikisuite:hover:after {
border-left-color: #192263;
content: "";
}
article a[href^="http://wikisuite.org"]:hover:before,
article a[href^="https://wikisuite.org"]:hover:before,
article a.wikisuite:hover:before {
transform: rotate(0deg);
}
/* To have the “bubble” stay on the same line as the link */
article a[href^="http://"],
article a[href^="https://"] {
display: inline-block;
vertical-align: top;
word-break: break-all;
}
article .rawlinks a[href^="http://"], article .rawlinks a[href^="https://"] {
display: inherit;
padding-left: 0 !important;
word-break: normal;
}
/*** END of Link color definitions for "sister" sites ***/
/*.top_modules { float: right; }*/
.topbar_modules { width: 100%; }
#module_78 .nav { background: #f8e286a !important; } /* project site dropdown background */
@media (min-width: 768px) { .top_modules { min-width: 400px; } } /* prevent collapsing top navbar items when not logged in */
#outerToc {
top: 31px;
}
@media (max-width: 991px) {
.navbar-brand {
font-size: 12px; }
}
/*#module_66 {width: auto; background: url(dl146) repeat-x; text-align: center; color: #8E286A; text-shadow: 4px 4px 0px #fff;}
@media (min-width: 768px) {
#page_1 .middle_outer {margin-top: 350px;}
#module_66 {height:330px;margin-top: -330px; font-size: 90px;padding-top: 65px;
}
#page_1 .content_tiki_is { margin-top: 40px; margin-bottom: 40px;background: #8e286a; color: #fff;}
#page_1 .content_tiki_is .lead {padding: 40px 0 20px;}
} */
.content_next_steps .center-block {display: table;}
.content_next_steps {margin-bottom: 40px;}
#page_1 .pagetitle {display: none;}/* This shouldn't be needed, but the no-title option on the page edit screen doesn't seem to work. */
ul.ui-autocomplete {background: #fff;}
#page_356 #col2 { display:none; }
#page_356 #middle.container { width: 100%; }
#page_356 #col1 { width: 100%; left: 0; }
#page_356 .tiki .middle_outer { background: #28292b; }
#page_356 .top_row { background: #28292b; color: #fff; }
#page_356 .middle_row { background: #f2f2f2; color: #333; }
#page_356 .bottom_row { background: #fff; color: #333; }
/* testing menu dropdown visibility in site header */
.navbar-collapse.in { overflow: visible; }
/* Homepage parallax scrolling, etc. */
#page_1 h3#Featured_at_the_Marketplace { padding-bottom: 30px; }
#page_1 .row.site_intro { padding-bottom: 40px; }
#page_1 .row.site_intro h1 { font-size: 4.5rem; } /* updated in 21 */
#page_1 .container.middle h1 {font-size: 66px; margin-top: 60px; }
#page_1 body { background: #f9e5f2; }
#page_1 .container.middle article.wikitext { font-size: 110%; }
#page_1 .container.middle,
#page_1 .container.middle > .row > .col-md-12 { width: 100%; padding-left: 0; padding-right: 0; max-width: 100%; margin-left: 0; margin-right: 0; }
#page_1 .container.middle > .row,
#page_1 .topbar.row { margin-left: 0; margin-right: 0; }
/*
* Lulu Parallax v1.0
*
* Copyright 2016 Carlos Ruiz / carlosruiz.me
*/
.parallax-group {
height: 25vw;
/* float: left;*/
margin: 20px 0 40px 0; }
.parallax-group .parallax-container.background {
height: 50vw;
display: table; }
.parallax-group {
width: 100%;
position: relative;
overflow: hidden; }
.parallax-group .parallax-container.foreground {
height: 15vw;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.50);
color: #fff;
display: table; }
.parallax-group .parallax-container .info {
display: table-cell;
vertical-align: middle; }
.parallax-group .parallax-container .info.info-a { text-align: center; }
.parallax-group .parallax-container {
width: 100%;
position: absolute; }
.parallax-group .parallax-container.background {
background-repeat: no-repeat;
background-size: cover; }
.parallax-group .parallax-container.foreground.with,
.parallax-group .parallax-container.background.against {
top: 0; }
.parallax-group .parallax-container.background.with,
.parallax-group .parallax-container.foreground.against {
bottom: 0; }
.parallax-group .parallax-container.foreground {
height: 15vw;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.25);
color: #fff;
display: table; }
.parallax-group .parallax-container .info {
display: table-cell;
vertical-align: middle;
text-align: center; }
.parallax-group.group-a .parallax-container.background { background-image: url("display181"); }
.parallax-group.group-a.theme-info_intro .parallax-container.background { background-image: url("display182"); }
/*==================================
TIMELINE (used on https://themes.tiki.org/Simple_vertical_timeline .)
==================================*/
/*-- GENERAL STYLES
------------------------------*/
.timeline {
line-height: 1.4em;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.timeline h1, .timeline h2, .timeline h3, .timeline h4, .timeline h5, .timeline h6 {
line-height: inherit;
}
/*----- TIMELINE ITEM -----*/
.timeline-item {
padding-left: 40px;
position: relative;
}
.timeline-item:last-child {
padding-bottom: 0;
}
/*----- TIMELINE INFO -----*/
.timeline-info {
font-size: 12px;
font-weight: 700;
letter-spacing: 3px;
margin: 0 0 .5em 0;
text-transform: uppercase;
white-space: nowrap;
}
/*----- TIMELINE MARKER -----*/
.timeline-marker {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 15px;
}
.timeline-marker:before {
background: #FF6B6B;
border: 3px solid transparent;
border-radius: 100%;
content: "";
display: block;
height: 15px;
position: absolute;
top: 4px;
left: 0;
width: 15px;
transition: background 0.3s ease-in-out, border 0.3s ease-in-out;
}
.timeline-marker:after {
content: "";
width: 3px;
background: #CCD5DB;
display: block;
position: absolute;
top: 24px;
bottom: 0;
left: 6px;
}
.timeline-item:last-child .timeline-marker:after {
content: none;
}
.timeline-item:not(.period):hover .timeline-marker:before {
background: transparent;
border: 3px solid #FF6B6B;
}
/*----- TIMELINE CONTENT -----*/
.timeline-content {
padding-bottom: 40px;
}
.timeline-content p:last-child {
margin-bottom: 0;
}
/*----- TIMELINE PERIOD -----*/
.period {
padding: 0;
}
.period .timeline-info {
display: none;
}
.period .timeline-marker:before {
background: transparent;
content: "";
width: 15px;
height: auto;
border: none;
border-radius: 0;
top: 0;
bottom: 30px;
position: absolute;
border-top: 3px solid #CCD5DB;
border-bottom: 3px solid #CCD5DB;
}
.period .timeline-marker:after {
content: "";
height: 32px;
top: auto;
}
.period .timeline-content {
padding: 40px 0 70px;
}
.period .timeline-title {
margin: 0;
}
/*----------------------------------------------
MOD: TIMELINE CENTERED
----------------------------------------------*/
@media (min-width: 992px) {
.timeline-centered,
.timeline-centered .timeline-item,
.timeline-centered .timeline-info,
.timeline-centered .timeline-marker,
.timeline-centered .timeline-content {
display: block;
margin: 0;
padding: 0;
}
.timeline-centered .timeline-item {
padding-bottom: 40px;
overflow: hidden;
}
.timeline-centered .timeline-marker {
position: absolute;
left: 50%;
margin-left: -7.5px;
}
.timeline-centered .timeline-info,
.timeline-centered .timeline-content {
width: 50%;
}
.timeline-centered > .timeline-item:nth-child(odd) .timeline-info {
float: left;
text-align: right;
padding-right: 30px;
}
.timeline-centered > .timeline-item:nth-child(odd) .timeline-content {
float: right;
text-align: left;
padding-left: 30px;
}
.timeline-centered > .timeline-item:nth-child(even) .timeline-info {
float: right;
text-align: left;
padding-left: 30px;
}
.timeline-centered > .timeline-item:nth-child(even) .timeline-content {
float: left;
text-align: right;
padding-right: 30px;
}
.timeline-centered > .timeline-item.period .timeline-content {
float: none;
padding: 0;
width: 100%;
text-align: center;
}
.timeline-centered .timeline-item.period {
padding: 50px 0 90px;
}
.timeline-centered .period .timeline-marker:after {
height: 30px;
bottom: 0;
top: auto;
}
.timeline-centered .period .timeline-title {
left: auto;
}
}
/*----------------------------------------------
MOD: MARKER OUTLINE
----------------------------------------------*/
.marker-outline .timeline-marker:before {
background: transparent;
border-color: #FF6B6B;
}
.marker-outline .timeline-item:hover .timeline-marker:before {
background: #FF6B6B; }
footer.help-block { border-top: 1px solid #737373; padding: .7em 0; margin-bottom: 1.2em; }
/* New for branch 19 */
#pagebottom_modules {flex-wrap: wrap; }
#pagebottom_modules > .text-center { height: 3rem; }
#bottom_modules .icon-link-external { display: none; }
#bottom_modules h4 { font-size: 1.25rem; }
.nav-link.dropdown-toggle { white-space: nowrap; }
/* temp fix - Gary*/
.tiki .col-lg-9 {
flex-basis: 75%;
}
.postbody .card-header { background: #83286a; } /* May 7, 2019 */
,postbody .card-header a.label,
.postbody .card-header a.btn-link { color: #fff rgba(255,255,255,.75; }
/* Vertical Smartmenu experiment by Gary 2/13/2020 */
.smartmenu_vert .navbar-nav,
.smartmenu_vert .navbar-expand-lg .navbar-nav { flex-direction: column !important; }
.smartmenu_vert .navbar-nav .dropdown-menu { margin-left: 6rem !important; margin-top: -1.8rem !important; }
.smartmenu_vert .navbar, smartmenu_vert .navbar.bg-light, .smartmenu_vert .navbar.bg-dark { background: transparent !important; }
.smartmenu_vert .navbar-nav:not(.sm-collapsible) .nav-link .sub-arrow {
margin-left: .255em;
vertical-align: .0em;
border-left: .3em solid;
border-top: .3em solid transparent;
border-bottom: .3em solid transparent; }
{CODE}