MediaWiki: Tweeki.css: Difference between revisions
From Renoise User Manual
(Created page with "→CSS placed here will affect users of the Tweeki skin: →Scroll left sidebar with the entire screen: @media (min-width: 992px) { .sidebar-left-wrapper { positi...") |
No edit summary |
||
(33 intermediate revisions by 2 users not shown) | |||
Line 4: | Line 4: | ||
@media (min-width: 992px) { | @media (min-width: 992px) { | ||
.sidebar-left-wrapper { | .sidebar-left-wrapper { | ||
position:absolute; | position: absolute; | ||
} | } | ||
} | } | ||
/* Move left & right sidebars down and hide TOC (fix for IE) */ | |||
@media (max-width: 992px) { | |||
.sidebar-left-wrapper { | |||
position: static; | |||
} | |||
.sidebar-right-wrapper { | |||
position: static; | |||
display: none; | |||
} | |||
} | |||
/* More condensed site-map tree */ | /* More condensed site-map tree */ | ||
Line 20: | Line 32: | ||
/* Prevent that images in the main content flow into the right sidebar */ | /* Prevent that images in the main content flow into the right sidebar */ | ||
div#bodyContent img { | div#bodyContent img { | ||
max-width: | max-width: 100%; | ||
height: auto; | height: auto; | ||
} | |||
/* Change the padlock icon used for https links to the regular link icon */ | |||
#content a.external[href^="https://"],.link-https { | |||
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=) center right no-repeat; | |||
background: url(/skins/Tweeki/images/external-link-ltr-icon.png?b0b20) center right no-repeat!ie; | |||
} | |||
/* Navbar themeing */ | |||
.navbar-default { | |||
border:none; | |||
border-top:1px solid #333333; | |||
background:#151515; | |||
background: -ms-linear-gradient(top, #404040 0%, #212121 75%); | |||
background: -moz-linear-gradient(top, #404040 0%, #212121 75%); | |||
background: -o-linear-gradient(top, #404040 0%, #212121 75%); | |||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #404040), color-stop(0.75, #212121)); | |||
background: -webkit-linear-gradient(top, #404040 0%, #212121 75%); | |||
background: linear-gradient(top, #404040 0%, #212121 75%); | |||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#404040', endColorstr='#212121'); | |||
border-bottom: 5px solid #A55030; | |||
border-radius: 0px; | |||
-webkit-box-shadow: none; | |||
box-shadow: none | |||
} | |||
.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.open>a { | |||
background-image: -webkit-linear-gradient(top,#212121 0,#404040 100%); | |||
background-image: -o-linear-gradient(top,#212121 0,#404040 100%); | |||
background-image: -webkit-gradient(linear,left top,left bottom,from(#212121),to(#404040)); | |||
background-image: linear-gradient(to bottom,#212121 0,#404040 100%); | |||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#212121',endColorstr='#404040',GradientType=0); | |||
border-radius: 1px; | |||
background-repeat: repeat-x; | |||
-webkit-box-shadow: none; | |||
box-shadow: none; | |||
} | |||
.navbar-brand, .navbar-nav>li>a { | |||
text-shadow: none; | |||
} | |||
.navbar-brand img { | |||
height: 36px; | |||
margin-top: -8px; | |||
} | |||
.navbar-default .navbar-brand { | |||
color: #ddd | |||
} | |||
.navbar-default .navbar-brand:focus,.navbar-default .navbar-brand:hover { | |||
color: #ffffff; | |||
background-color: transparent | |||
} | |||
.navbar-default .navbar-text { | |||
color: #aaaaaa | |||
} | |||
.navbar-default .navbar-nav>li>a { | |||
color: #aaaaaa | |||
} | |||
.navbar-default .navbar-nav>li>a:focus,.navbar-default .navbar-nav>li>a:hover { | |||
color: #ffffff; | |||
background-color: transparent | |||
} | |||
.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.active>a:focus,.navbar-default .navbar-nav>.active>a:hover { | |||
color: #ffffff; | |||
background-color: none; | |||
} | |||
.navbar-default .navbar-nav>.disabled>a,.navbar-default .navbar-nav>.disabled>a:focus,.navbar-default .navbar-nav>.disabled>a:hover { | |||
color: #ccc; | |||
background-color: transparent | |||
} | |||
.navbar-default .navbar-toggle { | |||
border-color: #aaaaaa | |||
} | |||
.navbar-default .navbar-toggle:focus,.navbar-default .navbar-toggle:hover { | |||
background-color: #404040 | |||
} | |||
.navbar-default .navbar-toggle .icon-bar { | |||
background-color: #aaaaaa | |||
} | |||
.navbar-default .navbar-collapse,.navbar-default .navbar-form { | |||
border-color: #e7e7e7 | |||
} | |||
.navbar-default .navbar-nav>.open>a,.navbar-default .navbar-nav>.open>a:focus,.navbar-default .navbar-nav>.open>a:hover { | |||
color: #ffffff; | |||
background-color: #e7e7e7 | |||
} | |||
@media (max-width: 767px) { | |||
.navbar-default .navbar-nav .open .dropdown-menu>li>a { | |||
color:#aaaaaa | |||
} | |||
.navbar-default .navbar-collapse, .navbar-default .navbar-form { | |||
border-color: #444; | |||
} | |||
.navbar-default .navbar-nav .open .dropdown-menu>li>a:focus,.navbar-default .navbar-nav .open .dropdown-menu>li>a:hover { | |||
color: #ffffff; | |||
background-color: transparent | |||
} | |||
.navbar-default .navbar-nav .open .dropdown-menu>.active>a,.navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus,.navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover { | |||
color: #ffffff; | |||
background-color: #e7e7e7 | |||
} | |||
.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a,.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:focus,.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:hover { | |||
color: #aaaaaa; | |||
background-color: transparent | |||
} | |||
} | |||
.navbar-default .navbar-link { | |||
color: #aaaaaa | |||
} | |||
.navbar-light .navbar-nav .nav-link { | |||
color: #aaaaaa | |||
} | |||
.navbar-default .navbar-link:hover { | |||
color: #ffffff | |||
} | |||
.navbar-light .navbar-nav .nav-link:hover { | |||
color: #ffffff | |||
} | |||
.navbar-default .btn-link { | |||
color: #aaaaaa | |||
} | |||
.navbar-ligth .btn-link { | |||
color: #aaaaaa | |||
} | |||
.navbar-default .btn-link:focus,.navbar-default .btn-link:hover { | |||
color: #ffffff | |||
} | |||
.navbar-light .btn-link:focus,.navbar-light .btn-link:hover { | |||
color: #ffffff | |||
} | |||
.navbar-default .btn-link[disabled]:focus,.navbar-default .btn-link[disabled]:hover,fieldset[disabled] .navbar-default .btn-link:focus,fieldset[disabled] .navbar-default .btn-link:hover { | |||
color: #aaaaaa | |||
} | } |
Latest revision as of 13:42, 19 June 2023
/* CSS placed here will affect users of the Tweeki skin */ /* Scroll left sidebar with the entire screen */ @media (min-width: 992px) { .sidebar-left-wrapper { position: absolute; } } /* Move left & right sidebars down and hide TOC (fix for IE) */ @media (max-width: 992px) { .sidebar-left-wrapper { position: static; } .sidebar-right-wrapper { position: static; display: none; } } /* More condensed site-map tree */ .sidebar-left-wrapper ol, ul { padding-left: 1em; } /* Hide footer - it overflows the left, fixed side-bar */ #footer.footer { display: none; } /* Prevent that images in the main content flow into the right sidebar */ div#bodyContent img { max-width: 100%; height: auto; } /* Change the padlock icon used for https links to the regular link icon */ #content a.external[href^="https://"],.link-https { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=) center right no-repeat; background: url(/skins/Tweeki/images/external-link-ltr-icon.png?b0b20) center right no-repeat!ie; } /* Navbar themeing */ .navbar-default { border:none; border-top:1px solid #333333; background:#151515; background: -ms-linear-gradient(top, #404040 0%, #212121 75%); background: -moz-linear-gradient(top, #404040 0%, #212121 75%); background: -o-linear-gradient(top, #404040 0%, #212121 75%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #404040), color-stop(0.75, #212121)); background: -webkit-linear-gradient(top, #404040 0%, #212121 75%); background: linear-gradient(top, #404040 0%, #212121 75%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#404040', endColorstr='#212121'); border-bottom: 5px solid #A55030; border-radius: 0px; -webkit-box-shadow: none; box-shadow: none } .navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.open>a { background-image: -webkit-linear-gradient(top,#212121 0,#404040 100%); background-image: -o-linear-gradient(top,#212121 0,#404040 100%); background-image: -webkit-gradient(linear,left top,left bottom,from(#212121),to(#404040)); background-image: linear-gradient(to bottom,#212121 0,#404040 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#212121',endColorstr='#404040',GradientType=0); border-radius: 1px; background-repeat: repeat-x; -webkit-box-shadow: none; box-shadow: none; } .navbar-brand, .navbar-nav>li>a { text-shadow: none; } .navbar-brand img { height: 36px; margin-top: -8px; } .navbar-default .navbar-brand { color: #ddd } .navbar-default .navbar-brand:focus,.navbar-default .navbar-brand:hover { color: #ffffff; background-color: transparent } .navbar-default .navbar-text { color: #aaaaaa } .navbar-default .navbar-nav>li>a { color: #aaaaaa } .navbar-default .navbar-nav>li>a:focus,.navbar-default .navbar-nav>li>a:hover { color: #ffffff; background-color: transparent } .navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.active>a:focus,.navbar-default .navbar-nav>.active>a:hover { color: #ffffff; background-color: none; } .navbar-default .navbar-nav>.disabled>a,.navbar-default .navbar-nav>.disabled>a:focus,.navbar-default .navbar-nav>.disabled>a:hover { color: #ccc; background-color: transparent } .navbar-default .navbar-toggle { border-color: #aaaaaa } .navbar-default .navbar-toggle:focus,.navbar-default .navbar-toggle:hover { background-color: #404040 } .navbar-default .navbar-toggle .icon-bar { background-color: #aaaaaa } .navbar-default .navbar-collapse,.navbar-default .navbar-form { border-color: #e7e7e7 } .navbar-default .navbar-nav>.open>a,.navbar-default .navbar-nav>.open>a:focus,.navbar-default .navbar-nav>.open>a:hover { color: #ffffff; background-color: #e7e7e7 } @media (max-width: 767px) { .navbar-default .navbar-nav .open .dropdown-menu>li>a { color:#aaaaaa } .navbar-default .navbar-collapse, .navbar-default .navbar-form { border-color: #444; } .navbar-default .navbar-nav .open .dropdown-menu>li>a:focus,.navbar-default .navbar-nav .open .dropdown-menu>li>a:hover { color: #ffffff; background-color: transparent } .navbar-default .navbar-nav .open .dropdown-menu>.active>a,.navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus,.navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover { color: #ffffff; background-color: #e7e7e7 } .navbar-default .navbar-nav .open .dropdown-menu>.disabled>a,.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:focus,.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:hover { color: #aaaaaa; background-color: transparent } } .navbar-default .navbar-link { color: #aaaaaa } .navbar-light .navbar-nav .nav-link { color: #aaaaaa } .navbar-default .navbar-link:hover { color: #ffffff } .navbar-light .navbar-nav .nav-link:hover { color: #ffffff } .navbar-default .btn-link { color: #aaaaaa } .navbar-ligth .btn-link { color: #aaaaaa } .navbar-default .btn-link:focus,.navbar-default .btn-link:hover { color: #ffffff } .navbar-light .btn-link:focus,.navbar-light .btn-link:hover { color: #ffffff } .navbar-default .btn-link[disabled]:focus,.navbar-default .btn-link[disabled]:hover,fieldset[disabled] .navbar-default .btn-link:focus,fieldset[disabled] .navbar-default .btn-link:hover { color: #aaaaaa }