diff options
Diffstat (limited to 'theme/admin/rsrc/css/main.scss')
| -rw-r--r-- | theme/admin/rsrc/css/main.scss | 771 |
1 files changed, 33 insertions, 738 deletions
diff --git a/theme/admin/rsrc/css/main.scss b/theme/admin/rsrc/css/main.scss index 680de79..40334c7 100644 --- a/theme/admin/rsrc/css/main.scss +++ b/theme/admin/rsrc/css/main.scss @@ -1,762 +1,57 @@ /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Selection +# Content background and border color ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -::-moz-selection { - background: #BBB; - color: #000; -} +$htmlBackgroundColor: #DDD; +$backgroundColor: #FFF; +$backgroundColorEmphasize: #EEE; +$borderColor: #AAA; /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Hyperlinks +# Header and navigation ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -a { - color: #0060A0; - text-decoration: none; - - &:focus { - background: #CCC; - } -} - -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Headings -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -h1, h2, h3 { - margin-bottom: 0; - text-transform: uppercase; - - +p { - margin-top: 0; - } - - .fa { - margin-right: 0.25rem; - } -} - -h1 { - margin-top: 0; - font-size: 0.80rem; -} - -h2 { - font-size: 0.70rem; -} - -h3 { - font-size: 0.65rem; -} - -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Document -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -html, body { - margin: 0; - padding: 0; -} - -html { - font-size: 1.25rem; - color: #333; - background: #DDD; - -webkit-hyphens: auto; - hyphens: auto; -} - -body { - font-family: "Ruda", "sans-serif"; - font-size: 0.7rem; - line-height: 1.2rem; - display: flex; - min-height: 100vh; - flex-direction: column; -} - -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Main content -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -#main-content { - flex: 1; - width: 100%; - background: #FFF; - box-sizing: border-box; - padding: 0.75rem; - // border definition in _responsive.scss - - &.wide { - max-width: 90rem; - } -} - -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Width -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -#main-content, .header-content { - max-width: 50rem; - margin: 0 auto; -} - -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Header -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -#main-header { - font-size: 0.6rem; -} - -#header-text, #header-desc { - text-shadow: 0 -1px #4E718F, 1px 0 #4E718F, 0 1px #4E718F, -1px 0 #4E718F; -} - -#header-text { - font-size: 0.8rem; - font-weight: 700; - text-transform: uppercase; -} - -#header-desc { - font-size: 0.6rem; - font-weight: 700; - line-height: 1rem; -} - -#header-logo { - display: block; - max-height: 5rem; - float: left; - margin-right: 0.5rem; -} - -.header-line { - padding: 0.5rem 0.75rem; - overflow: hidden; - background: #EEE; - - padding: 0.25rem 0.75rem; - - +.header-line { - border: 0.05rem solid #AAA; - border-left: none; - border-right: none; - } - - &.background { - background: #5E819F; - position: sticky; - top: 0; - } -} - -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Footer -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -#main-footer { - font-size: 0.6rem; - background: #EEE; - border-top: 0.05rem solid #AAA; - padding: 0.5rem 0.75rem; - text-align: center; - - ul { - margin: 0; - padding: 0; - list-style: none; - - li { - display: inline; - - .fa { - margin-right: 0.125rem; - } - } - - li:after { - content: " · "; - font-weight: bold; - } - - li:last-child:after { - content: none; - } - } -} - -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Main Navigation -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -#main-navi { - ul { - list-style: none; - margin: 0; - padding: 0; - - li { - display: inline; - - .fa { - margin-right: 0.25rem; - } - } - - li:last-child { - float: right; - } - - li:first-child { - float: none; - } - } - - a { - padding: 0.1rem 0.3rem; - background: #DDD; - border: 0.05rem solid #AAA; - color: inherit; - text-decoration: none; - text-align: center; - display: inline-block; - - &:hover, &:focus { - text-decoration: none; - background: #CCC; - } - } -} - -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Site Navigation -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -#site-navi { - clear: both; - display: flex; - box-sizing: border-box; - justify-content: space-between; - margin-top: 0.75rem; - - > div { - display: flex; - align-items: center; - border: 0.05rem solid #AAA; - background: #EEE; - - > a { - display: block; - } - } - - .disabled { - pointer-events: none; - color: #AAA; - } - - .active a { - background: #CCC !important; - font-weight: 600; - pointer-events: none; - } - - ol { - list-style: none; - margin: 0; - padding: 0; - - li { - float: left; - display: inline-block; - - + li { - border-left: 0.05rem solid #AAA; - } - } - } - - a { - padding: 0 0.5rem; - text-decoration: none; - color: inherit; - display: inline-block; - - &:hover, &:focus { - background: #CCC; - } - } -} - -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Actions -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -.actions { - margin: 0 0 0.5rem 0; - padding: 0; - list-style: none; - font-size: 0.6rem; - float: right; - text-align: center; - - .fa { - margin-right: 0.1rem; - } - - li { - display: inline-block; - font-weight: bold; - background: #EEE; - border: 0.05rem solid #AAA; - } - - a { - color: inherit; - display: block; - padding: 0 0.25rem; - } -} - -.actions-before { - float: left; -} - -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Elements -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -pre { - margin-bottom: 1rem; - overflow: auto; - -moz-tab-size: 4; - tab-size: 4; - background: #EEE; - padding: 0.5rem; - border: 0.05rem solid #AAA; - font-style: italic; -} - -code, pre { - font-family: "monospace"; -} - -code { - color: #008B45; -} - -p { - margin-top: 0; -} - -img { - border: none; - max-width: 100%; -} - -.red { - color: #B03060; -} - -.blue { - color: #40779A; -} - -.green { - color: #008B45; -} - -.right { - float: right; -} - -.hidden { - display: none; -} - -.no-visual-list { - margin: 0; - padding: 0; - list-style: none; -} - -#database-result { - color: inherit; -} - -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Item Element -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -.item { - display: flex; - flex-direction: column; - border: 0.05rem solid #AAA; - margin-bottom: 0.75rem; - clear: both; - - header { - padding: 0.5rem 0.75rem; - border-bottom: 0.05rem solid #AAA; - position: sticky; - top: 0; - - h2 { - margin-top: 0; - } - } - - footer { - border-top: 0.05rem solid #AAA; - - ul { - margin: 0; - padding: 0; - list-style: none; - - li { - display: inline-block; - float: left; - - &:last-child { - float: right; - } - } - } - - a { - color: inherit; - display: inline-block; - padding: 0.25rem 2rem; - - &:hover, &:active { - background: #DDD; - } - } - } - - header, footer { - background: #EEE; - overflow: hidden; - } - - blockquote { - margin: 0; - padding: 0.75rem; - overflow: hidden; - font-family: inherit; - flex-grow: 1; - - p { - margin-bottom: 0; - } - } - - &-id { - float: right; - color: #666; - font-size: 0.7rem; - font-weight: normal; - } - - &-meta { - margin: 0; - padding: 0; - list-style: none; - - &-right { - float: right; - - &:before { - content: none !important; - } - } - - li { - display: inline-block; - - +li:before { - content: " – "; - } - } - } - - &-image { - float: left; - display: block; - margin-right: 0.75rem; - width: 10rem; - height: 7rem; - object-fit: cover; - background: #EEE; - border: 0.05rem solid #AAA; - } - - &-container.grid { - width: 100%; - display: grid; - grid-template-columns: auto auto auto; - grid-column-gap: 1rem; - grid-row-gap: 1rem; - column-gap: 1rem; - row-gap: 1rem; - - .item { - margin-bottom: 0; - } - } -} - -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Argument list -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -.arguments { - list-style: none; - margin: 0; - padding: 0.25rem 0.75rem; - background: #EEE; - font-size: 0.6rem; - text-align: center; - border-top: 0.05rem solid #AAA; - - li { - display: inline; - - > span { - color: #40779A; - } - - &:after { - content: " · "; - font-weight: bold; - } - - &:last-child:after { - content: none; - } - } -} +$headerBarTextColor: #333; +$navigationLinkBackgroundColor: #DDD; +$navigationLinkFocusedBackgroundColor: #CCC; /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Grids +# Text colors ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -.form-grid { - display: grid; - grid-template-columns: 8rem auto 8rem auto; - - border-left: 0.05rem solid #AAA; - border-bottom: 0.05rem solid #AAA; - - &.two-columns { - grid-template-columns: auto auto; - } - - &.no-bottom-border { - border-bottom: none; - } - - > label { - display: flex; - align-items: center; - background: #DDD; - - .fa { - margin-left: 0.5rem; - margin-right: 1rem; - } - } - - &-item, - > label { - padding: 0.5rem; - border-top: 0.05rem solid #AAA; - border-right: 0.05rem solid #AAA; - } - - &-item.first { - grid-column-start: 2; - grid-column-end: 5; - } -} - -.form-border-box { - border: 0.05rem solid #AAA; - - &.padding { - padding: 0.5rem; - } - - &.background { - background: #DDD; - } - - &.nobordertop { - border-top: none; - } - - +.form-border-box { - border-top: none; - } -} +$textColor: #333; +$textColorLight: #666; +$textColorStrong: #000; +$formElementTextColor: #404040; +$codeTextColor: #008B45; +$linkColor: #0060A0; +$linkColorFocused: #CCC; +$warningTextColor: #B03060; /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Form buttons +# Misc ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -#emoticon-list-wrapper { - display: flex; - width: 100%; - justify-content: center; - box-sizing: border-box; -} - -#button-list-wrapper { - border-bottom: 0.05rem solid #AAA; - background: #EEE; - overflow: hidden; -} - -.button-list { - margin: 0; - padding: 0; - list-style: none; -} - -.button-list.emoticons > li { - font-size: 1.25rem; - display: inline-block; - padding: 0.2rem; - border-bottom: 0.2rem solid transparent; - border-radius: 0.1rem; - cursor: pointer; - - &:hover, &:active { - border-bottom: 0.2rem solid #AAA; - } -} - -.button-list.markdown > li { - float: left; - padding: 0.25rem; - cursor: pointer; - width: 1.75rem; - box-sizing: border-box; - text-align: center; - - &:hover, &:active { - color: #40779A; - } -} - -#content-editor { - border: none; - margin: 0; - - &-wrapper { - border-top: none; - } -} +$itemLinkHoverBackgroundColor: #DDD; +$paginationActiveBackgroundColor: #CCC; /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Form elements +# Forms ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -input, select, textarea { - width: 100%; - background: #EEE; - color: #404040; - font-family: inherit; - font-size: 0.7rem; - padding: 0.25rem; - border: 0.05rem solid #AAA; - box-sizing: border-box; - - &:focus { - outline: none; - } -} - -textarea { - font-family: "Kadwa", "sans-serif"; - box-sizing: border-box; - display: block; - resize: vertical; - min-height: 15rem; - line-height: 1.2rem; - padding: 0.5rem; - -webkit-hyphens: none; - hyphens: none; -} - -input { - &[type="submit"] { - text-transform: uppercase; - border-radius: 0.1rem; - } - - &:disabled { - background: #DDD; - color: #888; - - &:hover { - cursor: not-allowed; - } - } -} - -label { - text-transform: uppercase; - font-weight: normal; - - &:after { - content: ":"; - } -} +$formBackgroundColorEmphasize: #DDD; +$formButtonBorderColor: #404040; +$formButtonTextColor: #EEE; /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Form buttons ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -#insert-button, #update-button, #delete-button { - color: #EEE; - border: 0.05rem solid #404040; -} - -#insert-button { - background: #4D8D5D; - - &:active, &:focus { - background: darken(#4D8D5D, 10%) - } -} - -#update-button { - background: #6A8AA5; - - &:active, &:focus { - background: darken(#6A8AA5, 10%) - } -} - -#delete-button { - background: #C45C66; - - &:active, &:focus { - background: darken(#C45C66, 10%) - } -} +$insertButtonBackgroundColor: #4D8D5D; +$updateButtonBackgroundColor: #6A8AA5; +$deleteButtonBackgroundColor: #C45C66; /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Form message list +# Information message box ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -#message-list { - margin: 0; - padding: 0.5rem; - list-style: none; - background: #C45C66; - color: #EEE; - font-size: 0.6rem; - - &-wrapper { - margin-bottom: 0.5rem; - border: 0.1rem solid darken(#C45C66, 10%); - } -} +$messageListTextColor: #EEE; +$messageListBackgroundColor: #C45C66; /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Search form +# Import stylesheet ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -#search-form { - margin-bottom: 1rem; -} - -@import "import/responsive"; -@import "import/fontello"; -@import "import/fonts"; +@import "import/main"; |