dpaste/client/scss/_globals.scss

85 lines
1.6 KiB
SCSS

body {
min-width: 800px; // FIXME: MOBILE
font-family: $baseFont;
font-weight: $baseFontRegular;
// By default, all pages have a dark background. Since
// most pages have 'code' snippets, that allows the code
// that is out of canvas to be visible (scroll right).
background-color: $codeBgColor;
}
// But pure text/content pages have a white background.
// With that, pages which are shorter than the browser
// window, won't have a dark stripe at the bottom.
body[code-page] { background-color: $bgColor; }
body[text-page] { background-color: $bgColor; }
// Platform is set by Javascript.
body[data-platform=win] .platform-mac { display: none; }
body[data-platform=mac] .platform-win { display: none; }
.btn {
padding: 6px 0;
position: relative;
display: inline-block;
color: $btnTextColor;
background-color: $btnBgColor;
border: 1px solid $btnBorderColor;
border-radius: 3px;
font-size: 13px;
font-weight: $baseFontDemiBold;
text-decoration: none;
text-align: center;
cursor: pointer;
.sep {
@include separator();
}
&:hover {
text-decoration: none;
background-color: darken($btnBgColor, 5%);
}
&:active {
top: 1px;
}
}
.confirm-modal {
@include colored-links;
background-color: $confirmBgColor;
color: $confirmTextColor;
// Hidden by default
overflow: hidden;
max-height: 0;
// Foldout animation
transition: max-height .15s ease-in;
form {
display: block;
padding: 20px $boxPadding;
}
.btn {
padding: 6px 15px;
margin: 0 10px;
}
.no {
font-size: 13px;
}
&:target {
max-height: 80px;
}
}