Last active
May 31, 2019 18:26
-
-
Save jfmherokiller/cb1151eb67ad659357be76f4b8d5addd to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* ==UserStyle== | |
@name Bepis | |
@namespace github.com/openstyles/stylus | |
@version 1.0.0 | |
@description A new userstyle | |
@author Me | |
@preprocessor less | |
==/UserStyle== */ | |
@-moz-document regexp(.*) { | |
/* | |
// Swatch 2.3.1 | |
// Variables | |
// -------------------------------------------------- | |
// Global values | |
// -------------------------------------------------- | |
// Grays | |
// ------------------------- | |
*/ | |
@black: #000; | |
@grayDarker: #222; | |
@grayDark: #333; | |
@gray: #555; | |
@grayLight: #999; | |
@grayLighter: #eee; | |
@white: #fff; | |
/* | |
// Accent colors | |
// ------------------------- | |
*/ | |
@blue: #0000ff; | |
@blueDark: #000099; | |
@green: #00ff00; | |
@red: #ff0000; | |
@yellow: #ffff00; | |
@orange: #ffaa00; | |
@pink: #ff00ff; | |
@purple: #aa00ff; | |
/* | |
// Scaffolding | |
// ------------------------- | |
*/ | |
@bodyBackground: blue; | |
@textColor: #ffff00; | |
/* | |
// Links | |
// ------------------------- | |
*/ | |
@linkColor: #00EEEE; | |
@linkColorHover: #00EEEE; | |
/* | |
// Typography | |
// ------------------------- | |
*/ | |
@sansFontFamily: "Comic Sans", "Comic Sans MS", "Chalkboard", "ChalkboardSE-Regular", "Marker Felt", "Purisa", "URW Chancery L", cursive, sans-serif; | |
@serifFontFamily: "Times New Roman", Times, serif; | |
@monoFontFamily: "Courier New", Courier, monospace; | |
@baseFontSize: 16px; | |
@baseFontFamily: @sansFontFamily; | |
@baseLineHeight: 20px; | |
@altFontFamily: @serifFontFamily; | |
@headingsFontFamily: inherit; /*// empty to use BS default, @baseFontFamily */ | |
@headingsFontWeight: bold; /*// instead of browser default, bold */ | |
@headingsColor: inherit; /*// empty to use BS default, @textColor */ | |
/* | |
// Component sizing | |
// ------------------------- | |
// Based on 14px font-size and 20px line-height | |
*/ | |
@fontSizeLarge: @baseFontSize * 1.25; /*// ~18px*/ | |
@fontSizeSmall: @baseFontSize * 0.85; /*// ~12px*/ | |
@fontSizeMini: @baseFontSize * 0.75; /*// ~11px*/ | |
@paddingLarge: 11px 19px; /*// 44px*/ | |
@paddingSmall: 2px 10px; /*// 26px*/ | |
@paddingMini: 1px 6px; /*// 24px*/ | |
@baseBorderRadius: none; | |
@borderRadiusLarge: none; | |
@borderRadiusSmall: none; | |
/* | |
// Tables | |
// ------------------------- | |
*/ | |
@tableBackground: transparent; /*// overall background-color*/ | |
@tableBackgroundAccent: black; /*// for striping*/ | |
@tableBackgroundHover: blue; /*// for hover*/ | |
@tableBorder: green; /*// table and cell border*/ | |
/* | |
// Buttons | |
// ------------------------- | |
*/ | |
@btnBackground: darken(@white, 10%); | |
@btnBackgroundHighlight: darken(@white, 10%); | |
@btnBorder: #bbb; | |
@btnPrimaryBackground: @linkColor; | |
@btnPrimaryBackgroundHighlight: @linkColor; | |
@btnInfoBackground: #00ffff; | |
@btnInfoBackgroundHighlight: @btnInfoBackground; | |
@btnSuccessBackground: #00ff00; | |
@btnSuccessBackgroundHighlight: @btnSuccessBackground; | |
@btnWarningBackground: @orange; | |
@btnWarningBackgroundHighlight: @orange; | |
@btnDangerBackground: #ff0000; | |
@btnDangerBackgroundHighlight: @btnDangerBackground; | |
@btnInverseBackground: black; | |
@btnInverseBackgroundHighlight: black; | |
/* | |
// Forms | |
// ------------------------- | |
*/ | |
@inputBackground: black; | |
@inputBorder: #00ff00; | |
@inputBorderRadius: 0; | |
@inputDisabledBackground: #cccccc; | |
@formActionsBackground: blue; | |
@inputHeight: @baseLineHeight + 10px; /*// base line-height + 8px vertical padding + 2px top/bottom border*/ | |
/* | |
// Dropdowns | |
// ------------------------- | |
*/ | |
@dropdownBackground: @white; | |
@dropdownBorder: rgba(0,0,0,.2); | |
@dropdownDividerTop: #e5e5e5; | |
@dropdownDividerBottom: @white; | |
@dropdownLinkColor: @grayDark; | |
@dropdownLinkColorHover: @white; | |
@dropdownLinkColorActive: @dropdownLinkColor; | |
@dropdownLinkBackgroundActive: @linkColor; | |
@dropdownLinkBackgroundHover: @dropdownLinkBackgroundActive; | |
/* | |
// COMPONENT VARIABLES | |
// -------------------------------------------------- | |
// Z-index master list | |
// ------------------------- | |
// Used for a bird's eye view of components dependent on the z-axis | |
// Try to avoid customizing these :) | |
*/ | |
@zindexDropdown: 1000; | |
@zindexPopover: 1010; | |
@zindexTooltip: 1030; | |
@zindexFixedNavbar: 1030; | |
@zindexModalBackdrop: 1040; | |
@zindexModal: 1050; | |
/* | |
// Sprite icons path | |
// ------------------------- | |
*/ | |
@iconSpritePath: "https://cdn.jsdelivr.net/gh/divshot/geo-bootstrap/img/glyphicons-halflings.png"; | |
@iconWhiteSpritePath: "https://cdn.jsdelivr.net/gh/divshot/geo-bootstrap/img/glyphicons-halflings-white.png"; | |
/* | |
// Input placeholder text color | |
// ------------------------- | |
*/ | |
@placeholderText: @grayLight; | |
/* | |
// Hr border color | |
// ------------------------- | |
*/ | |
@hrBorder: @grayLighter; | |
/* | |
// Horizontal forms & lists | |
// ------------------------ | |
*/ | |
@horizontalComponentOffset: 180px; | |
/* | |
// Wells | |
// ------------------------- | |
*/ | |
@wellBackground: black; | |
/* | |
// Navbar | |
// ------------------------- | |
*/ | |
@navbarCollapseWidth: 979px; | |
@navbarCollapseDesktopWidth: @navbarCollapseWidth + 1; | |
@navbarHeight: 40px; | |
@navbarBackgroundHighlight: black; | |
@navbarBackground: black; | |
@navbarBorder: darken(@navbarBackground, 12%); | |
@navbarText: #ff00ff; | |
@navbarLinkColor: #00ff00; | |
@navbarLinkColorHover: @grayDark; | |
@navbarLinkColorActive: @gray; | |
@navbarLinkBackgroundHover: transparent; | |
@navbarLinkBackgroundActive: darken(@navbarBackground, 5%); | |
@navbarBrandColor: @navbarLinkColor; | |
/* | |
// Inverted navbar | |
*/ | |
@navbarInverseBackground: #ff00ff; | |
@navbarInverseBackgroundHighlight: #ff00ff; | |
@navbarInverseBorder: green; | |
@navbarInverseText: black; | |
@navbarInverseLinkColor: blue; | |
@navbarInverseLinkColorHover: blue; | |
@navbarInverseLinkColorActive: blue; | |
@navbarInverseLinkBackgroundHover: transparent; | |
@navbarInverseLinkBackgroundActive: @navbarInverseBackground; | |
@navbarInverseSearchBackground: lighten(@navbarInverseBackground, 25%); | |
@navbarInverseSearchBackgroundFocus: @white; | |
@navbarInverseSearchBorder: @navbarInverseBackground; | |
@navbarInverseSearchPlaceholderColor: #ccc; | |
@navbarInverseBrandColor: @navbarInverseLinkColor; | |
/* | |
// Pagination | |
// ------------------------- | |
*/ | |
@paginationBackground: #fff; | |
@paginationBorder: #ddd; | |
@paginationActiveBackground: #f5f5f5; | |
/* | |
// Hero unit | |
// ------------------------- | |
*/ | |
@heroUnitBackground: @grayLighter; | |
@heroUnitHeadingColor: inherit; | |
@heroUnitLeadColor: inherit; | |
/* | |
// Form states and alerts | |
// ------------------------- | |
*/ | |
@warningText: black; | |
@warningBackground: yellow; | |
@warningBorder: red; | |
@errorText: white; | |
@errorBackground: red; | |
@errorBorder: #aa0000; | |
@successText: white; | |
@successBackground: green; | |
@successBorder: #00aa00; | |
@infoText: black; | |
@infoBackground: #00ffff; | |
@infoBorder: #aaaa00; | |
/* | |
// Tooltips and popovers | |
// ------------------------- | |
*/ | |
@tooltipColor: #fff; | |
@tooltipBackground: #000; | |
@tooltipArrowWidth: 5px; | |
@tooltipArrowColor: @tooltipBackground; | |
@popoverBackground: #fff; | |
@popoverArrowWidth: 10px; | |
@popoverArrowColor: #fff; | |
@popoverTitleBackground: darken(@popoverBackground, 3%); | |
/* | |
// Special enhancement for popovers | |
*/ | |
@popoverArrowOuterWidth: @popoverArrowWidth + 1; | |
@popoverArrowOuterColor: rgba(0,0,0,.25); | |
/* | |
// GRID | |
// -------------------------------------------------- | |
// Default 940px grid | |
// ------------------------- | |
*/ | |
@gridColumns: 12; | |
@gridColumnWidth: 60px; | |
@gridGutterWidth: 20px; | |
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); | |
/* | |
// 1200px min | |
*/ | |
@gridColumnWidth1200: 70px; | |
@gridGutterWidth1200: 30px; | |
@gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1)); | |
/* | |
// 768px-979px | |
*/ | |
@gridColumnWidth768: 42px; | |
@gridGutterWidth768: 20px; | |
@gridRowWidth768: (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1)); | |
/* | |
// Fluid grid | |
// ------------------------- | |
*/ | |
@fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth); | |
@fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth); | |
/* | |
// 1200px min | |
*/ | |
@fluidGridColumnWidth1200: percentage(@gridColumnWidth1200/@gridRowWidth1200); | |
@fluidGridGutterWidth1200: percentage(@gridGutterWidth1200/@gridRowWidth1200); | |
/* | |
// 768px-979px | |
*/ | |
@fluidGridColumnWidth768: percentage(@gridColumnWidth768/@gridRowWidth768); | |
@fluidGridGutterWidth768: percentage(@gridGutterWidth768/@gridRowWidth768); | |
/* | |
// Swatch 2.3.1 | |
// Bootswatch | |
// ----------------------------------------------------- | |
// TYPOGRAPHY | |
// ----------------------------------------------------- | |
*/ | |
h1 { color: #ff0000; } | |
h2 { color: #ffcc00; } | |
h3 { color: #ffff00; } | |
h4 { color: #66ff00; } | |
h5 { color: #0000ff; } | |
h6 { color: #ff00ff; } | |
.page-header { | |
border-bottom: 1px solid #B6B2A3; | |
} | |
a { | |
text-decoration: underline; | |
} | |
a:hover { | |
text-decoration: underline !important; | |
} | |
blink { | |
animation: blink 1s linear infinite; | |
} | |
/* | |
// SCAFFOLDING | |
// ----------------------------------------------------- | |
*/ | |
body { | |
background: @bodyBackground url('https://cdn.jsdelivr.net/gh/divshot/geo-bootstrap/img/microfab.gif') top left; | |
} | |
/* | |
// NAVBAR | |
// ----------------------------------------------------- | |
*/ | |
.navbar { | |
border-bottom: 1px solid #fff; | |
} | |
.navbar-inner { | |
border-bottom: 1px solid #D4D0C8; | |
background: #000 url('https://cdn.jsdelivr.net/gh/divshot/geo-bootstrap/img/stars.gif') top left; | |
} | |
/* | |
// NAV | |
// ----------------------------------------------------- | |
// BUTTONS | |
// ----------------------------------------------------- | |
*/ | |
.btn { | |
border: 6px ridge @btnBorder; | |
} | |
.btn-primary { | |
background: #000 url('https://cdn.jsdelivr.net/gh/divshot/geo-bootstrap/img/rainbow.gif') top left; | |
} | |
/* | |
// TABLES | |
// ----------------------------------------------------- | |
// FORMS | |
// ----------------------------------------------------- | |
*/ | |
legend { | |
font-weight: bold; | |
color: yellow; | |
} | |
.control-group.error input { | |
background: #000 url('https://cdn.jsdelivr.net/gh/divshot/geo-bootstrap/img/flames.gif') 0 -30px repeat-x; | |
} | |
/* | |
// DROPDOWNS | |
// ----------------------------------------------------- | |
*/ | |
.dropdown-menu { | |
} | |
/* | |
// ALERTS, LABELS, BADGES | |
// ----------------------------------------------------- | |
*/ | |
.label-important, | |
.badge-important { | |
background-color: red; | |
} | |
.label-important[href], | |
.badge-important[href] { | |
background-color: red; | |
} | |
.label-warning, | |
.badge-warning { | |
background-color: yellow; | |
color: black; | |
} | |
.label-warning[href], | |
.badge-warning[href] { | |
background-color: yellow; | |
color: black; | |
} | |
.label-success, | |
.badge-success { | |
background-color: green; | |
} | |
.label-success[href], | |
.badge-success[href] { | |
background-color: green; | |
} | |
.label-info, | |
.badge-info { | |
background-color: #00ffff; | |
} | |
.label-info[href], | |
.badge-info[href] { | |
background-color: #00ffff; | |
} | |
.label-inverse, | |
.badge-inverse { | |
background-color: black; | |
} | |
.label-inverse[href], | |
.badge-inverse[href] { | |
background-color: black; | |
} | |
/* | |
// MISC | |
// ----------------------------------------------------- | |
*/ | |
.hero-unit, .well { | |
background: #000 url('https://cdn.jsdelivr.net/gh/divshot/geo-bootstrap/img/stars.gif') top left; | |
} | |
.breadcrumb { | |
background: black; | |
color: white; | |
} | |
.nav-tabs > li > a:hover, | |
.nav-tabs > li > a:focus { | |
border-color: black; | |
background: black; | |
} | |
.progress .bar { | |
background: #C0C0C0 url("https://cdn.jsdelivr.net/gh/divshot/geo-bootstrap/img/progress.gif") top left repeat-x !important; | |
border: 1px solid #fff; | |
border-top: 1px solid #808080; | |
border-left: 1px solid #808080; | |
} | |
/* | |
// ANIMATIONS | |
// ----------------------------------------------------- | |
// Spec | |
*/ | |
@keyframes blink { | |
0% { opacity: 0; } | |
40% { opacity: 0; } | |
41% { opacity: 1; } | |
99% { opacity: 1; } | |
100% { opacity: 0; } | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment