mirror of
https://github.com/DMOJ/online-judge.git
synced 2024-11-25 16:32:37 +08:00
Convert all SASS stylesheets to SCSS (#640)
This commit is contained in:
Tudor Brindus
Guanzhong Chen
parent
6024cd670e
commit
6f7bd95749
@ -1,528 +0,0 @@
|
||||
@charset "UTF-8"
|
||||
@import vars
|
||||
|
||||
@-ms-viewport
|
||||
min-width: 480px
|
||||
max-width: device-width
|
||||
|
||||
@-o-viewport
|
||||
min-width: 480px
|
||||
max-width: device-width
|
||||
|
||||
@viewport
|
||||
min-width: 480px
|
||||
max-width: device-width
|
||||
|
||||
a
|
||||
color: #1958c1
|
||||
&:hover
|
||||
color: #0645ad
|
||||
&:active
|
||||
color: #faa700
|
||||
|
||||
img
|
||||
max-width: 100%
|
||||
// height: auto
|
||||
|
||||
.full
|
||||
width: 100%
|
||||
|
||||
table.sortable thead
|
||||
background-color: $background_gray
|
||||
color: #666
|
||||
font-weight: bold
|
||||
cursor: default
|
||||
|
||||
th
|
||||
&.tablesorter-headerAsc:after
|
||||
content: " ▴"
|
||||
&.tablesorter-headerDesc:after
|
||||
content: " ▾"
|
||||
|
||||
div
|
||||
&.tablesorter-header-inner
|
||||
display: inline
|
||||
|
||||
pre
|
||||
white-space: pre-wrap
|
||||
|
||||
hr
|
||||
display: block
|
||||
height: 0
|
||||
border: 0
|
||||
font-style: italic
|
||||
border-bottom: 1px solid $border_gray
|
||||
padding: 0
|
||||
|
||||
.dashed
|
||||
border-bottom: 1px dashed $border_gray
|
||||
|
||||
th
|
||||
vertical-align: middle
|
||||
|
||||
.form-area
|
||||
display: inline-block
|
||||
background: $background_light_gray
|
||||
padding: 5px 10px 10px 15px
|
||||
border-radius: $widget_border_radius
|
||||
border: 1px solid $border_gray
|
||||
|
||||
div.info-float
|
||||
float: right
|
||||
padding: 10px
|
||||
|
||||
footer
|
||||
color: gray
|
||||
display: block
|
||||
width: 100%
|
||||
position: absolute
|
||||
bottom: 0
|
||||
|
||||
body
|
||||
position: relative
|
||||
min-height: 100%
|
||||
margin: 0 auto
|
||||
max-width: 107em
|
||||
font-size: $base_font_size
|
||||
line-height: 1.231
|
||||
background: $background_light_gray
|
||||
font-family: 'Segoe UI', 'Lucida Grande', Arial, sans-serif
|
||||
color: #000
|
||||
height: 100%
|
||||
|
||||
.unselectable
|
||||
cursor: default
|
||||
|
||||
h1
|
||||
font-size: 5em
|
||||
letter-spacing: -2px
|
||||
margin: 0
|
||||
padding: 0
|
||||
line-height: 1em
|
||||
|
||||
b
|
||||
font-weight: bold
|
||||
|
||||
h2
|
||||
font-weight: 400
|
||||
font-size: 2em
|
||||
border-radius: $widget_border_radius
|
||||
padding: 0
|
||||
margin: 0
|
||||
|
||||
h3
|
||||
font-weight: 400
|
||||
font-size: 1.4em
|
||||
border-radius: $widget_border_radius
|
||||
padding: 0
|
||||
margin: 0
|
||||
|
||||
h4
|
||||
font-size: 1.1em
|
||||
padding: 0
|
||||
margin: 0
|
||||
|
||||
header
|
||||
background: #111
|
||||
color: #aaa
|
||||
text-align: left
|
||||
display: block
|
||||
height: 60px
|
||||
margin-top: -10px
|
||||
padding: 10px 10px 10px 5%
|
||||
|
||||
#user-links
|
||||
top: 0
|
||||
right: 0
|
||||
position: absolute
|
||||
color: #5c5954
|
||||
.anon
|
||||
position: absolute
|
||||
bottom: 6px
|
||||
right: 5px
|
||||
white-space: nowrap
|
||||
a
|
||||
color: #FFF
|
||||
li
|
||||
text-transform: none
|
||||
& > ul
|
||||
display: block
|
||||
margin: 0
|
||||
& > li > a > span
|
||||
font-size: 13px
|
||||
height: 36px
|
||||
padding-top: 8px
|
||||
display: block
|
||||
white-space: nowrap
|
||||
& > img
|
||||
vertical-align: middle
|
||||
border-radius: $widget_border_radius
|
||||
display: inline
|
||||
margin: 2px 6px 0 5px
|
||||
& > span
|
||||
color: #eee
|
||||
vertical-align: middle
|
||||
display: inline
|
||||
margin-top: 11px
|
||||
margin-right: 9px
|
||||
padding: 0
|
||||
|
||||
#nav-shadow
|
||||
height: 3px
|
||||
background: linear-gradient(rgba(0, 0, 0, 0.5), transparent)
|
||||
|
||||
#nav-container
|
||||
background: $widget_black
|
||||
// opacity: 0.77
|
||||
// filter: alpha(opacity=77)
|
||||
height: 100%
|
||||
|
||||
#navigation
|
||||
position: fixed
|
||||
top: 0
|
||||
left: 0
|
||||
right: 0
|
||||
|
||||
nav
|
||||
position: relative
|
||||
position: -webkit-sticky
|
||||
position: sticky
|
||||
top: 0
|
||||
width: 100%
|
||||
margin: 0 auto
|
||||
z-index: 500
|
||||
text-align: left
|
||||
ul
|
||||
margin: 0 0 0 -5px !important
|
||||
padding: 0 0 0 1%
|
||||
text-align: left
|
||||
display: inline
|
||||
list-style: none
|
||||
background: transparent
|
||||
li
|
||||
display: inline-block
|
||||
color: #FFF
|
||||
text-transform: uppercase
|
||||
position: relative
|
||||
&.home-nav-element a
|
||||
padding: 0
|
||||
height: 44px
|
||||
&:hover
|
||||
border-bottom: none
|
||||
padding-top: 0
|
||||
padding-bottom: 0
|
||||
a, button
|
||||
display: inline-block
|
||||
text-decoration: none
|
||||
vertical-align: middle
|
||||
color: #FFF
|
||||
padding: 13px 7px
|
||||
height: 18px
|
||||
&:link
|
||||
color: #FFF
|
||||
&:hover
|
||||
color: #FFF
|
||||
background: rgba(255, 255, 255, 0.25)
|
||||
margin: 0
|
||||
&.active
|
||||
color: #FFF
|
||||
background: $highlight_blue
|
||||
.nav-expand
|
||||
display: none
|
||||
ul
|
||||
padding: 0
|
||||
position: absolute
|
||||
left: 5px
|
||||
display: none
|
||||
color: #fff
|
||||
background: $widget_black
|
||||
margin: 0 !important
|
||||
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4)
|
||||
li
|
||||
&:first-child
|
||||
a.active
|
||||
border-top: 1px solid $widget_black
|
||||
li
|
||||
display: block
|
||||
a, button
|
||||
padding: 8px 20px 8px 8px !important
|
||||
font-size: .8em
|
||||
line-height: 18px
|
||||
display: block
|
||||
border-left: 4px solid $highlight_blue
|
||||
white-space: nowrap
|
||||
button
|
||||
background: none
|
||||
text-align: left
|
||||
border: none
|
||||
width: 100%
|
||||
border-radius: 0
|
||||
height: auto
|
||||
&:hover > ul, &:active > ul, &:focus > ul
|
||||
display: block !important
|
||||
&.home-nav-element a:hover
|
||||
border-bottom: 0
|
||||
padding-top: 0
|
||||
padding-bottom: 0
|
||||
background: transparent
|
||||
.nav-divider
|
||||
width: 1px
|
||||
vertical-align: middle
|
||||
padding-left: 3px
|
||||
display: inline-block
|
||||
height: 32px
|
||||
margin-right: 1px
|
||||
border-right: 3px solid rgba(255, 255, 255, 0.15)
|
||||
|
||||
hr
|
||||
color: rgba(0, 0, 0, 0.2)
|
||||
|
||||
#content
|
||||
margin: 52px auto auto
|
||||
// Header
|
||||
width: 90%
|
||||
height: 100%
|
||||
min-height: 25em
|
||||
max-width: 1300px
|
||||
display: block
|
||||
.title
|
||||
color: #393630
|
||||
|
||||
footer
|
||||
text-align: center
|
||||
height: 40px
|
||||
border-top: 1px solid $border_gray
|
||||
background: #ededed
|
||||
|
||||
html
|
||||
position: relative
|
||||
height: 100%
|
||||
|
||||
a
|
||||
text-decoration: none
|
||||
display: inline
|
||||
|
||||
noscript #noscript
|
||||
font-family: Arial, sans-serif
|
||||
font-size: 111%
|
||||
color: white
|
||||
font-weight: bold
|
||||
background: $announcement_red
|
||||
text-align: center
|
||||
padding: 5px 0
|
||||
left: 0
|
||||
right: 0
|
||||
position: fixed
|
||||
z-index: 100
|
||||
|
||||
#announcement
|
||||
font-family: Arial, sans-serif
|
||||
font-size: 111%
|
||||
color: white
|
||||
font-weight: bold
|
||||
background: $announcement_red
|
||||
text-align: center
|
||||
max-width: 30%
|
||||
position: fixed
|
||||
border-radius: $widget_border_radius
|
||||
z-index: 100
|
||||
bottom: -4px
|
||||
right: -4px
|
||||
padding: 5px 6px 6px 5px
|
||||
a
|
||||
color: orange
|
||||
|
||||
.time
|
||||
color: #555
|
||||
|
||||
.toggle
|
||||
font-weight: bold
|
||||
.fa
|
||||
transition: transform 0.4s
|
||||
&.open .fa
|
||||
transform: rotate(90deg)
|
||||
|
||||
#form-errors
|
||||
background: rgba(255, 0, 0, 0.3)
|
||||
border: 3px solid red
|
||||
border-radius: $widget_border_radius
|
||||
padding: 0 1em .1em 1em
|
||||
margin: 0.3em 0 0.5em 0
|
||||
|
||||
#navicon
|
||||
display: none
|
||||
|
||||
#nav-placeholder
|
||||
height: 47px
|
||||
max-width: 107em
|
||||
background: white
|
||||
border-right: 1px solid $border_gray
|
||||
border-left: 1px solid $border_gray
|
||||
|
||||
#contest-info
|
||||
font-size: 1.25em
|
||||
border: 5px solid $highlight_blue
|
||||
border-left: 5px dotted white
|
||||
border-radius: 0 $widget_border_radius $widget_border_radius 0
|
||||
background: rgba(0,0,0,.77)
|
||||
z-index: 100000
|
||||
padding: 10px 12px
|
||||
color: white
|
||||
cursor: move
|
||||
position: fixed
|
||||
left: 20px
|
||||
top: 90%
|
||||
display: none
|
||||
|
||||
a
|
||||
height: 1.4em
|
||||
padding: 0
|
||||
margin: 0
|
||||
color: white
|
||||
display: block
|
||||
|
||||
#contest-time-remaining
|
||||
display: inline-block
|
||||
|
||||
.spacer
|
||||
display: inline-block
|
||||
flex: 1 1 1px
|
||||
|
||||
#user-links
|
||||
height: 100%
|
||||
ul
|
||||
margin: 0
|
||||
li
|
||||
display: block
|
||||
height: 100%
|
||||
a
|
||||
display: block
|
||||
padding: 0
|
||||
height: 100%
|
||||
|
||||
#page-container
|
||||
min-height: 100%
|
||||
max-width: 1300px
|
||||
position: relative
|
||||
margin: 0 auto
|
||||
border-right: 1px solid $border_gray
|
||||
border-left: 1px solid $border_gray
|
||||
background: white
|
||||
// border-bottom: 1px solid rgb(204, 204, 204)
|
||||
// border-bottom-left-radius: 4px
|
||||
// border-bottom-right-radius: 4px
|
||||
|
||||
#content-body
|
||||
padding-bottom: 4em
|
||||
// Offset the footer
|
||||
|
||||
.title-line-action
|
||||
float: right
|
||||
margin-top: 1.2em
|
||||
|
||||
math
|
||||
font-size: 1.155em
|
||||
|
||||
.MathJax
|
||||
&:focus
|
||||
outline: none
|
||||
|
||||
.moment-time-toggle
|
||||
.absolute
|
||||
display: none
|
||||
|
||||
.relative
|
||||
display: inline
|
||||
|
||||
&:hover >
|
||||
.relative
|
||||
display: none
|
||||
|
||||
.absolute
|
||||
display: inline
|
||||
|
||||
&.too-long-ago
|
||||
.relative
|
||||
display: none !important
|
||||
|
||||
.absolute
|
||||
display: inline !important
|
||||
|
||||
@media(max-width: 1300px)
|
||||
#page-container
|
||||
border-left: none
|
||||
border-right: none
|
||||
border-bottom-left-radius: 0
|
||||
border-bottom-right-radius: 0
|
||||
|
||||
@media (max-width: 760px)
|
||||
#navigation
|
||||
height: 36px
|
||||
#navicon
|
||||
transition-duration: .25s
|
||||
display: block
|
||||
line-height: 26px
|
||||
font-size: 2em
|
||||
color: #FFF
|
||||
padding: 0 .25em
|
||||
margin: 4px .25em
|
||||
white-space: nowrap
|
||||
float: left
|
||||
&.hover
|
||||
color: #4db7fe
|
||||
text-shadow: 0 0 5px $highlight_blue
|
||||
transition-duration: 0.25s
|
||||
#nav-list
|
||||
display: none
|
||||
padding: 0
|
||||
margin-left: 0
|
||||
border-left: 4px solid $highlight_blue
|
||||
position: fixed
|
||||
top: 36px
|
||||
background: $widget_black
|
||||
bottom: 0
|
||||
width: 8em
|
||||
left: 0
|
||||
box-shadow: none
|
||||
li
|
||||
display: block
|
||||
a
|
||||
display: block
|
||||
.nav-expand
|
||||
float: right
|
||||
display: block
|
||||
height: inherit
|
||||
margin: -13px -7px
|
||||
padding: inherit
|
||||
ul
|
||||
left: 8em
|
||||
top: auto
|
||||
bottom: auto
|
||||
margin-top: -36px
|
||||
&.home-nav-element
|
||||
display: none
|
||||
#user-links
|
||||
bottom: 6px
|
||||
right: 6px
|
||||
position: absolute
|
||||
& > ul > li
|
||||
& > a > span
|
||||
padding-top: 4px
|
||||
height: 32px
|
||||
& > ul
|
||||
left: 0 !important
|
||||
margin-top: 0 !important
|
||||
#content
|
||||
width: auto
|
||||
padding: 0 5px
|
||||
|
||||
@media not all and (max-width: 760px)
|
||||
#nav-list
|
||||
display: block !important
|
||||
li
|
||||
&.home-menu-item
|
||||
display: none
|
||||
&:not(:hover) > ul
|
||||
display: none !important
|
||||
ul
|
||||
left: 0 !important
|
||||
705
resources/base.scss
Normal file
705
resources/base.scss
Normal file
@ -0,0 +1,705 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import "vars";
|
||||
|
||||
@-ms-viewport {
|
||||
min-width: 480px;
|
||||
max-width: device-width;
|
||||
}
|
||||
|
||||
@-o-viewport {
|
||||
min-width: 480px;
|
||||
max-width: device-width;
|
||||
}
|
||||
|
||||
@viewport {
|
||||
min-width: 480px;
|
||||
max-width: device-width;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #1958c1;
|
||||
|
||||
&:hover {
|
||||
color: #0645ad;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: #faa700;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
|
||||
// height: auto
|
||||
}
|
||||
|
||||
.full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
table.sortable thead {
|
||||
background-color: $background_gray;
|
||||
color: #666;
|
||||
font-weight: bold;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
th {
|
||||
&.tablesorter-headerAsc:after {
|
||||
content: " ▴";
|
||||
}
|
||||
|
||||
&.tablesorter-headerDesc:after {
|
||||
content: " ▾";
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
&.tablesorter-header-inner {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
hr {
|
||||
display: block;
|
||||
height: 0;
|
||||
border: 0;
|
||||
font-style: italic;
|
||||
border-bottom: 1px solid $border_gray;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.dashed {
|
||||
border-bottom: 1px dashed $border_gray;
|
||||
}
|
||||
|
||||
th {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.form-area {
|
||||
display: inline-block;
|
||||
background: $background_light_gray;
|
||||
padding: 5px 10px 10px 15px;
|
||||
border-radius: $widget_border_radius;
|
||||
border: 1px solid $border_gray;
|
||||
}
|
||||
|
||||
div.info-float {
|
||||
float: right;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
footer {
|
||||
color: gray;
|
||||
display: block;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
margin: 0 auto;
|
||||
max-width: 107em;
|
||||
font-size: $base_font_size;
|
||||
line-height: 1.231;
|
||||
background: $background_light_gray;
|
||||
font-family: "Segoe UI", "Lucida Grande", Arial, sans-serif;
|
||||
color: #000;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.unselectable {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 5em;
|
||||
letter-spacing: -2px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
b {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-weight: 400;
|
||||
font-size: 2em;
|
||||
border-radius: $widget_border_radius;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-weight: 400;
|
||||
font-size: 1.4em;
|
||||
border-radius: $widget_border_radius;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.1em;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
background: #111;
|
||||
color: #aaa;
|
||||
text-align: left;
|
||||
display: block;
|
||||
height: 60px;
|
||||
margin-top: -10px;
|
||||
padding: 10px 10px 10px 5%;
|
||||
}
|
||||
|
||||
#user-links {
|
||||
top: 0;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
color: #5c5954;
|
||||
|
||||
.anon {
|
||||
position: absolute;
|
||||
bottom: 6px;
|
||||
right: 5px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
li {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
& > ul {
|
||||
display: block;
|
||||
margin: 0;
|
||||
|
||||
& > li > a > span {
|
||||
font-size: 13px;
|
||||
height: 36px;
|
||||
padding-top: 8px;
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
|
||||
& > img {
|
||||
vertical-align: middle;
|
||||
border-radius: $widget_border_radius;
|
||||
display: inline;
|
||||
margin: 2px 6px 0 5px;
|
||||
}
|
||||
|
||||
& > span {
|
||||
color: #eee;
|
||||
vertical-align: middle;
|
||||
display: inline;
|
||||
margin-top: 11px;
|
||||
margin-right: 9px;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#nav-shadow {
|
||||
height: 3px;
|
||||
background: linear-gradient(rgba(0, 0, 0, 0.5), transparent);
|
||||
}
|
||||
|
||||
#nav-container {
|
||||
background: $widget_black;
|
||||
|
||||
// opacity: 0.77
|
||||
// filter: alpha(opacity=77)
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#navigation {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
nav {
|
||||
position: relative;
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
z-index: 500;
|
||||
text-align: left;
|
||||
|
||||
ul {
|
||||
margin: 0 0 0 -5px !important;
|
||||
padding: 0 0 0 1%;
|
||||
text-align: left;
|
||||
display: inline;
|
||||
list-style: none;
|
||||
background: transparent;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
color: #FFF;
|
||||
text-transform: uppercase;
|
||||
position: relative;
|
||||
|
||||
&.home-nav-element a {
|
||||
padding: 0;
|
||||
height: 44px;
|
||||
|
||||
&:hover {
|
||||
border-bottom: none;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
a, button {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
vertical-align: middle;
|
||||
color: #FFF;
|
||||
padding: 13px 7px;
|
||||
height: 18px;
|
||||
|
||||
&:link {
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #FFF;
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #FFF;
|
||||
background: $highlight_blue;
|
||||
}
|
||||
|
||||
.nav-expand {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
display: none;
|
||||
color: #fff;
|
||||
background: $widget_black;
|
||||
margin: 0 !important;
|
||||
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
|
||||
|
||||
li {
|
||||
&:first-child {
|
||||
a.active {
|
||||
border-top: 1px solid $widget_black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
display: block;
|
||||
|
||||
a, button {
|
||||
padding: 8px 20px 8px 8px !important;
|
||||
font-size: 0.8em;
|
||||
line-height: 18px;
|
||||
display: block;
|
||||
border-left: 4px solid $highlight_blue;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
background: none;
|
||||
text-align: left;
|
||||
border: none;
|
||||
width: 100%;
|
||||
border-radius: 0;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&:hover > ul, &:active > ul, &:focus > ul {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
&.home-nav-element a:hover {
|
||||
border-bottom: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-divider {
|
||||
width: 1px;
|
||||
vertical-align: middle;
|
||||
padding-left: 3px;
|
||||
display: inline-block;
|
||||
height: 32px;
|
||||
margin-right: 1px;
|
||||
border-right: 3px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
#content {
|
||||
margin: 52px auto auto;
|
||||
|
||||
// Header
|
||||
width: 90%;
|
||||
height: 100%;
|
||||
min-height: 25em;
|
||||
max-width: 1300px;
|
||||
display: block;
|
||||
|
||||
.title {
|
||||
color: #393630;
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
height: 40px;
|
||||
border-top: 1px solid $border_gray;
|
||||
background: #ededed;
|
||||
}
|
||||
|
||||
html {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
noscript #noscript {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 111%;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
background: $announcement_red;
|
||||
text-align: center;
|
||||
padding: 5px 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
#announcement {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 111%;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
background: $announcement_red;
|
||||
text-align: center;
|
||||
max-width: 30%;
|
||||
position: fixed;
|
||||
border-radius: $widget_border_radius;
|
||||
z-index: 100;
|
||||
bottom: -4px;
|
||||
right: -4px;
|
||||
padding: 5px 6px 6px 5px;
|
||||
|
||||
a {
|
||||
color: orange;
|
||||
}
|
||||
}
|
||||
|
||||
.time {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.toggle {
|
||||
font-weight: bold;
|
||||
|
||||
.fa {
|
||||
transition: transform 0.4s;
|
||||
}
|
||||
|
||||
&.open .fa {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
#form-errors {
|
||||
background: rgba(255, 0, 0, 0.3);
|
||||
border: 3px solid red;
|
||||
border-radius: $widget_border_radius;
|
||||
padding: 0 1em 0.1em 1em;
|
||||
margin: 0.3em 0 0.5em 0;
|
||||
}
|
||||
|
||||
#navicon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#nav-placeholder {
|
||||
height: 47px;
|
||||
max-width: 107em;
|
||||
background: white;
|
||||
border-right: 1px solid $border_gray;
|
||||
border-left: 1px solid $border_gray;
|
||||
}
|
||||
|
||||
#contest-info {
|
||||
font-size: 1.25em;
|
||||
border: 5px solid $highlight_blue;
|
||||
border-left: 5px dotted white;
|
||||
border-radius: 0 $widget_border_radius $widget_border_radius 0;
|
||||
background: rgba(0, 0, 0, 0.77);
|
||||
z-index: 100000;
|
||||
padding: 10px 12px;
|
||||
color: white;
|
||||
cursor: move;
|
||||
position: fixed;
|
||||
left: 20px;
|
||||
top: 90%;
|
||||
display: none;
|
||||
|
||||
a {
|
||||
height: 1.4em;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
color: white;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
#contest-time-remaining {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
display: inline-block;
|
||||
flex: 1 1 1px;
|
||||
}
|
||||
|
||||
#user-links {
|
||||
height: 100%;
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
display: block;
|
||||
height: 100%;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#page-container {
|
||||
min-height: 100%;
|
||||
max-width: 1300px;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
border-right: 1px solid $border_gray;
|
||||
border-left: 1px solid $border_gray;
|
||||
background: white;
|
||||
}
|
||||
|
||||
// border-bottom: 1px solid rgb(204, 204, 204)
|
||||
// border-bottom-left-radius: 4px
|
||||
// border-bottom-right-radius: 4px
|
||||
|
||||
#content-body {
|
||||
padding-bottom: 4em;
|
||||
}
|
||||
|
||||
// Offset the footer
|
||||
|
||||
.title-line-action {
|
||||
float: right;
|
||||
margin-top: 1.2em;
|
||||
}
|
||||
|
||||
math {
|
||||
font-size: 1.155em;
|
||||
}
|
||||
|
||||
.MathJax {
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.moment-time-toggle {
|
||||
.absolute {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.relative {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
&:hover > {
|
||||
.relative {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.absolute {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
&.too-long-ago {
|
||||
.relative {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.absolute {
|
||||
display: inline !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 1300px) {
|
||||
#page-container {
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
#navigation {
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
#navicon {
|
||||
transition-duration: 0.25s;
|
||||
display: block;
|
||||
line-height: 26px;
|
||||
font-size: 2em;
|
||||
color: #FFF;
|
||||
padding: 0 0.25em;
|
||||
margin: 4px 0.25em;
|
||||
white-space: nowrap;
|
||||
float: left;
|
||||
|
||||
&.hover {
|
||||
color: #4db7fe;
|
||||
text-shadow: 0 0 5px $highlight_blue;
|
||||
transition-duration: 0.25s;
|
||||
}
|
||||
}
|
||||
|
||||
#nav-list {
|
||||
display: none;
|
||||
padding: 0;
|
||||
margin-left: 0;
|
||||
border-left: 4px solid $highlight_blue;
|
||||
position: fixed;
|
||||
top: 36px;
|
||||
background: $widget_black;
|
||||
bottom: 0;
|
||||
width: 8em;
|
||||
left: 0;
|
||||
box-shadow: none;
|
||||
|
||||
li {
|
||||
display: block;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
|
||||
.nav-expand {
|
||||
float: right;
|
||||
display: block;
|
||||
height: inherit;
|
||||
margin: (-13px) -7px;
|
||||
padding: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
left: 8em;
|
||||
top: auto;
|
||||
bottom: auto;
|
||||
margin-top: -36px;
|
||||
}
|
||||
|
||||
&.home-nav-element {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#user-links {
|
||||
bottom: 6px;
|
||||
right: 6px;
|
||||
position: absolute;
|
||||
|
||||
& > ul > li {
|
||||
& > a > span {
|
||||
padding-top: 4px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
& > ul {
|
||||
left: 0 !important;
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#content {
|
||||
width: auto;
|
||||
padding: 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@media not all and (max-width: 760px) {
|
||||
#nav-list {
|
||||
display: block !important;
|
||||
|
||||
li {
|
||||
&.home-menu-item {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:not(:hover) > ul {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
ul {
|
||||
left: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,90 +0,0 @@
|
||||
@import vars
|
||||
|
||||
.blog-content
|
||||
padding-right: 0em
|
||||
flex: 73.5%
|
||||
vertical-align: top
|
||||
margin-right: 0
|
||||
|
||||
.post
|
||||
border-bottom: 1px solid $border_gray
|
||||
padding-top: 0.5em
|
||||
|
||||
.title
|
||||
font-weight: 600
|
||||
font-size: 1.7em
|
||||
a
|
||||
color: #5b80b9 !important
|
||||
&:hover
|
||||
color: #0645ad !important
|
||||
|
||||
&:last-child
|
||||
border-bottom: none
|
||||
|
||||
.blog-sidebar
|
||||
flex: 26.5%
|
||||
|
||||
.blog-sidebox
|
||||
h3
|
||||
padding-bottom: 0.25em
|
||||
padding-left: 0.5em
|
||||
|
||||
ul
|
||||
list-style: none
|
||||
padding-left: 1em
|
||||
padding-right: 0.5em
|
||||
li
|
||||
margin-bottom: 0.75em
|
||||
|
||||
.contest
|
||||
padding: 1.25em 0 1.5em 0
|
||||
text-align: center
|
||||
border-bottom: 1px solid $border_gray
|
||||
|
||||
&:last-child
|
||||
border-bottom: none
|
||||
|
||||
.name
|
||||
font-size: 1.25em
|
||||
font-weight: 500
|
||||
|
||||
a
|
||||
color: #5b80b9 !important
|
||||
&:hover
|
||||
color: #0645ad !important
|
||||
|
||||
@media (min-width: 800px)
|
||||
.blog-content, .blog-sidebar
|
||||
display: block !important
|
||||
.blog-content
|
||||
margin-right: 1em !important
|
||||
|
||||
#mobile.tabs
|
||||
display: none
|
||||
|
||||
#blog-container
|
||||
display: flex
|
||||
|
||||
#mobile.tabs
|
||||
margin: 0
|
||||
margin-bottom: 1em
|
||||
|
||||
.rssatom
|
||||
text-align: right
|
||||
padding: 0.25em
|
||||
display: block
|
||||
span
|
||||
width: 1em
|
||||
height: 1em
|
||||
padding: 0.1em
|
||||
font-size: 0.8em
|
||||
color: white
|
||||
border-radius: 0.2em
|
||||
display: inline-block
|
||||
margin-right: 0.2em
|
||||
border: 1px solid rgb(201, 90, 18)
|
||||
background: #fb9e39
|
||||
background: linear-gradient(135deg, #e46d27 0, #fb9e39 47%, #e46d27 100%)
|
||||
i
|
||||
text-align: center
|
||||
display: block
|
||||
122
resources/blog.scss
Normal file
122
resources/blog.scss
Normal file
@ -0,0 +1,122 @@
|
||||
@import "vars";
|
||||
|
||||
.blog-content {
|
||||
padding-right: 0em;
|
||||
flex: 73.5%;
|
||||
vertical-align: top;
|
||||
margin-right: 0;
|
||||
|
||||
.post {
|
||||
border-bottom: 1px solid $border_gray;
|
||||
padding-top: 0.5em;
|
||||
|
||||
.title {
|
||||
font-weight: 600;
|
||||
font-size: 1.7em;
|
||||
|
||||
a {
|
||||
color: #5b80b9 !important;
|
||||
|
||||
&:hover {
|
||||
color: #0645ad !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.blog-sidebar {
|
||||
flex: 26.5%;
|
||||
}
|
||||
|
||||
.blog-sidebox {
|
||||
h3 {
|
||||
padding-bottom: 0.25em;
|
||||
padding-left: 0.5em;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding-left: 1em;
|
||||
padding-right: 0.5em;
|
||||
|
||||
li {
|
||||
margin-bottom: 0.75em;
|
||||
}
|
||||
}
|
||||
|
||||
.contest {
|
||||
padding: 1.25em 0 1.5em 0;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid $border_gray;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 1.25em;
|
||||
font-weight: 500;
|
||||
|
||||
a {
|
||||
color: #5b80b9 !important;
|
||||
|
||||
&:hover {
|
||||
color: #0645ad !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 800px) {
|
||||
.blog-content, .blog-sidebar {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.blog-content {
|
||||
margin-right: 1em !important;
|
||||
}
|
||||
|
||||
#mobile.tabs {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#blog-container {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
#mobile.tabs {
|
||||
margin: 0;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.rssatom {
|
||||
text-align: right;
|
||||
padding: 0.25em;
|
||||
display: block;
|
||||
|
||||
span {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
padding: 0.1em;
|
||||
font-size: 0.8em;
|
||||
color: white;
|
||||
border-radius: 0.2em;
|
||||
display: inline-block;
|
||||
margin-right: 0.2em;
|
||||
border: 1px solid rgb(201, 90, 18);
|
||||
background: #fb9e39;
|
||||
background: linear-gradient(135deg, #e46d27 0, #fb9e39 47%, #e46d27 100%);
|
||||
|
||||
i {
|
||||
text-align: center;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,106 +0,0 @@
|
||||
@import vars
|
||||
|
||||
.comment-score
|
||||
font-weight: bold
|
||||
text-align: center
|
||||
|
||||
a
|
||||
&.upvote-link, &.downvote-link
|
||||
color: black
|
||||
|
||||
&.voted
|
||||
text-shadow: 0 0 4px black, 0 0 9px blue
|
||||
|
||||
.comment-area
|
||||
margin-right: 30px
|
||||
h2
|
||||
margin-bottom: 20px
|
||||
|
||||
.no-comments-message
|
||||
margin-top: -15px
|
||||
margin-left: 2.75em
|
||||
|
||||
.comment-author
|
||||
font-weight: bold
|
||||
color: #333
|
||||
|
||||
.comment-header
|
||||
color: rgba(1, 1, 1, 1)
|
||||
background: rgba(0, 0, 0, 0.1)
|
||||
padding: 5px 10px 5px 5px
|
||||
margin-left: 30px
|
||||
border: 1px solid $border_gray
|
||||
border-radius: $widget_border_radius
|
||||
display: flex
|
||||
|
||||
.comment-spacer
|
||||
flex: 1
|
||||
|
||||
.comment-edits:not(:empty)
|
||||
padding-right: 2px
|
||||
color: #444
|
||||
|
||||
.comment-operation
|
||||
float: right
|
||||
|
||||
.fa
|
||||
color: #444
|
||||
|
||||
a + a
|
||||
padding-left: 2px
|
||||
|
||||
.comments.top-level-comments
|
||||
margin-right: -26px
|
||||
|
||||
.comment-submit
|
||||
width: 100%
|
||||
|
||||
.comment-post-wrapper
|
||||
div
|
||||
padding-bottom: 2px
|
||||
padding-right: 10px
|
||||
input, textarea
|
||||
min-width: 100%
|
||||
max-width: 100%
|
||||
// Hack for 4k on Chrome
|
||||
font-size: $base_font_size
|
||||
|
||||
.comment-box
|
||||
border-radius: $widget_border_radius
|
||||
padding: 5px 10px 10px 15px
|
||||
border: 1px solid $border_gray
|
||||
background: rgba(0, 0, 0, .01)
|
||||
|
||||
.comment
|
||||
list-style: none none
|
||||
border-radius: $widget_border_radius
|
||||
margin: -50px -4px 10px -40px
|
||||
padding-top: 50px
|
||||
|
||||
&:target > .comment-box
|
||||
border-left: 10px solid $highlight_blue
|
||||
padding-left: 5px
|
||||
|
||||
&:before
|
||||
display: block
|
||||
content: " "
|
||||
margin-top: -50px
|
||||
height: 50px
|
||||
visibility: hidden
|
||||
|
||||
.comment-title
|
||||
font-weight: bold
|
||||
|
||||
.comment-author
|
||||
margin-bottom: 1em
|
||||
|
||||
img
|
||||
width: 1.25em
|
||||
height: 1.25em
|
||||
border-radius: 0.2em
|
||||
vertical-align: bottom
|
||||
margin-right: 0.3em
|
||||
|
||||
.comment-body
|
||||
word-wrap: break-word
|
||||
|
||||
135
resources/comments.scss
Normal file
135
resources/comments.scss
Normal file
@ -0,0 +1,135 @@
|
||||
@import "vars";
|
||||
|
||||
.comment-score {
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
a {
|
||||
&.upvote-link, &.downvote-link {
|
||||
color: black;
|
||||
}
|
||||
|
||||
&.voted {
|
||||
text-shadow: 0 0 4px black, 0 0 9px blue;
|
||||
}
|
||||
}
|
||||
|
||||
.comment-area {
|
||||
margin-right: 30px;
|
||||
|
||||
h2 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.no-comments-message {
|
||||
margin-top: -15px;
|
||||
margin-left: 2.75em;
|
||||
}
|
||||
|
||||
.comment-author {
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.comment-header {
|
||||
color: rgba(1, 1, 1, 1);
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
padding: 5px 10px 5px 5px;
|
||||
margin-left: 30px;
|
||||
border: 1px solid $border_gray;
|
||||
border-radius: $widget_border_radius;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.comment-spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.comment-edits:not(:empty) {
|
||||
padding-right: 2px;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.comment-operation {
|
||||
float: right;
|
||||
|
||||
.fa {
|
||||
color: #444;
|
||||
}
|
||||
|
||||
a + a {
|
||||
padding-left: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.comments.top-level-comments {
|
||||
margin-right: -26px;
|
||||
}
|
||||
|
||||
.comment-submit {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.comment-post-wrapper {
|
||||
div {
|
||||
padding-bottom: 2px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
min-width: 100%;
|
||||
max-width: 100%;
|
||||
|
||||
// Hack for 4k on Chrome
|
||||
font-size: $base_font_size;
|
||||
}
|
||||
}
|
||||
|
||||
.comment-box {
|
||||
border-radius: $widget_border_radius;
|
||||
padding: 5px 10px 10px 15px;
|
||||
border: 1px solid $border_gray;
|
||||
background: rgba(0, 0, 0, 0.01);
|
||||
}
|
||||
|
||||
.comment {
|
||||
list-style: none none;
|
||||
border-radius: $widget_border_radius;
|
||||
margin: (-50px) -4px 10px -40px;
|
||||
padding-top: 50px;
|
||||
|
||||
&:target > .comment-box {
|
||||
border-left: 10px solid $highlight_blue;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
display: block;
|
||||
content: " ";
|
||||
margin-top: -50px;
|
||||
height: 50px;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.comment-title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.comment-author {
|
||||
margin-bottom: 1em;
|
||||
|
||||
img {
|
||||
width: 1.25em;
|
||||
height: 1.25em;
|
||||
border-radius: 0.2em;
|
||||
vertical-align: bottom;
|
||||
margin-right: 0.3em;
|
||||
}
|
||||
}
|
||||
|
||||
.comment-body {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
@ -1,186 +0,0 @@
|
||||
@import vars
|
||||
|
||||
.content-description
|
||||
line-height: 1.5em
|
||||
font-size: 1em
|
||||
font-family: 'Segoe UI', 'Lucida Grande', Arial, sans-serif
|
||||
p
|
||||
margin: 1em 0 !important
|
||||
padding: 0 !important
|
||||
img
|
||||
max-width: 100%
|
||||
height: auto
|
||||
h1, h2, h3, h4, h5, h6
|
||||
font-weight: normal
|
||||
color: #111
|
||||
margin-bottom: .75em
|
||||
padding: 0
|
||||
background: 0
|
||||
h3, h4, h5, h6
|
||||
font-weight: bold
|
||||
h1
|
||||
font-size: 2.5em
|
||||
h2
|
||||
font-size: 2em
|
||||
h3
|
||||
font-size: 1.6em
|
||||
margin: 0
|
||||
padding: 0
|
||||
h4
|
||||
font-size: 1.4em
|
||||
border-bottom: 1px solid #EEE
|
||||
line-height: 1.225
|
||||
padding-bottom: 0.3em
|
||||
padding-top: 0.5em
|
||||
h5
|
||||
font-size: 1.15em
|
||||
margin-top: 0
|
||||
h6
|
||||
font-size: 0.9em
|
||||
blockquote
|
||||
color: #666
|
||||
margin: 0
|
||||
padding-left: 1.5em
|
||||
border-left: 0.5em #EEE solid
|
||||
hr
|
||||
display: block
|
||||
height: 0
|
||||
border: 0
|
||||
font-style: italic
|
||||
border-bottom: 1px solid $border_gray
|
||||
margin: 25px 0 20px 0
|
||||
padding: 0
|
||||
pre, code, kbd, samp, span.code
|
||||
color: #000
|
||||
page-break-inside: avoid
|
||||
font-family: monospace, monospace
|
||||
_font-family: 'courier new', monospace
|
||||
font-size: 0.98em
|
||||
code, span.code
|
||||
font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace !important
|
||||
margin: 0 2px
|
||||
padding: 0 5px
|
||||
border: 1px solid $border_gray
|
||||
background-color: #f8f8f8
|
||||
border-radius: $widget_border_radius
|
||||
font-size: .95em
|
||||
color: #444
|
||||
pre
|
||||
code, div.code
|
||||
border: 0
|
||||
line-height: 1em
|
||||
margin: 0
|
||||
padding: 0
|
||||
background: transparent
|
||||
font-size: 1em
|
||||
color: black
|
||||
white-space: pre-wrap
|
||||
word-wrap: break-word
|
||||
margin: 1.5em 0 1.5em 0
|
||||
padding: 1em
|
||||
border: 1px solid $border_gray
|
||||
background-color: #f8f8f8
|
||||
color: black
|
||||
border-radius: $widget_border_radius
|
||||
b, strong
|
||||
font-weight: bold
|
||||
dfn
|
||||
font-style: italic
|
||||
ins
|
||||
background: #ff9
|
||||
color: #000
|
||||
text-decoration: none
|
||||
mark
|
||||
background: #ff0
|
||||
color: #000
|
||||
font-style: italic
|
||||
font-weight: bold
|
||||
sub
|
||||
font-size: 75%
|
||||
line-height: 0
|
||||
position: relative
|
||||
vertical-align: baseline
|
||||
sup
|
||||
font-size: 75%
|
||||
line-height: 0
|
||||
position: relative
|
||||
vertical-align: baseline
|
||||
top: -0.5em
|
||||
sub
|
||||
bottom: -0.25em
|
||||
ul, ol
|
||||
padding: 0 0 0 2em !important
|
||||
li p:last-child
|
||||
margin: 0
|
||||
dd
|
||||
margin: 0 0 0 2em
|
||||
img
|
||||
border: 0
|
||||
-ms-interpolation-mode: bicubic
|
||||
vertical-align: middle
|
||||
td
|
||||
vertical-align: top
|
||||
|
||||
.display-math
|
||||
display: block
|
||||
text-align: center
|
||||
margin-left: auto
|
||||
margin-right: auto
|
||||
|
||||
@media (min-width: 700px)
|
||||
#common-content
|
||||
display: flex
|
||||
flex-direction: row-reverse
|
||||
|
||||
#content-left
|
||||
flex: 86%
|
||||
width: 100%
|
||||
|
||||
&.split-common-content
|
||||
max-width: 86%
|
||||
|
||||
.content-description
|
||||
width: 100%
|
||||
|
||||
#content-right
|
||||
flex: 14%
|
||||
max-width: 12.5em
|
||||
min-width: 8em
|
||||
padding-left: 1.5em
|
||||
padding-top: 1em
|
||||
|
||||
.info-float
|
||||
float: none
|
||||
padding: 10px 0 0
|
||||
position: sticky
|
||||
top: 60px
|
||||
width: 100%
|
||||
|
||||
@media not all and (min-width: 700px)
|
||||
#content-right .info-float
|
||||
float: none
|
||||
width: 100% !important
|
||||
position: static !important
|
||||
box-sizing: border-box
|
||||
|
||||
a.view-pdf
|
||||
padding-top: 0.6em
|
||||
display: inline-block
|
||||
|
||||
.problem-title
|
||||
display: -webkit-box
|
||||
display: -webkit-flex
|
||||
display: -ms-flexbox
|
||||
display: flex
|
||||
|
||||
.spacer
|
||||
display: inline-block
|
||||
flex: 1 1 1px
|
||||
|
||||
.info-float .fa
|
||||
color: #000
|
||||
padding-right: 0.2em
|
||||
|
||||
#problem-types, #allowed-langs
|
||||
.toggled
|
||||
margin-left: 1.3em
|
||||
259
resources/content-description.scss
Normal file
259
resources/content-description.scss
Normal file
@ -0,0 +1,259 @@
|
||||
@import "vars";
|
||||
|
||||
.content-description {
|
||||
line-height: 1.5em;
|
||||
font-size: 1em;
|
||||
font-family: "Segoe UI", "Lucida Grande", Arial, sans-serif;
|
||||
|
||||
p {
|
||||
margin: 1em 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: normal;
|
||||
color: #111;
|
||||
margin-bottom: 0.75em;
|
||||
padding: 0;
|
||||
background: 0;
|
||||
}
|
||||
|
||||
h3, h4, h5, h6 {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.6em;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.4em;
|
||||
border-bottom: 1px solid #EEE;
|
||||
line-height: 1.225;
|
||||
padding-bottom: 0.3em;
|
||||
padding-top: 0.5em;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1.15em;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
color: #666;
|
||||
margin: 0;
|
||||
padding-left: 1.5em;
|
||||
border-left: 0.5em #EEE solid;
|
||||
}
|
||||
|
||||
hr {
|
||||
display: block;
|
||||
height: 0;
|
||||
border: 0;
|
||||
font-style: italic;
|
||||
border-bottom: 1px solid $border_gray;
|
||||
margin: 25px 0 20px 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
pre, code, kbd, samp, span.code {
|
||||
color: #000;
|
||||
page-break-inside: avoid;
|
||||
font-family: monospace, monospace;
|
||||
_font-family: "courier new", monospace;
|
||||
font-size: 0.98em;
|
||||
}
|
||||
|
||||
code, span.code {
|
||||
font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace !important;
|
||||
margin: 0 2px;
|
||||
padding: 0 5px;
|
||||
border: 1px solid $border_gray;
|
||||
background-color: #f8f8f8;
|
||||
border-radius: $widget_border_radius;
|
||||
font-size: 0.95em;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
pre {
|
||||
code, div.code {
|
||||
border: 0;
|
||||
line-height: 1em;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
font-size: 1em;
|
||||
color: black;
|
||||
}
|
||||
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
margin: 1.5em 0 1.5em 0;
|
||||
padding: 1em;
|
||||
border: 1px solid $border_gray;
|
||||
background-color: #f8f8f8;
|
||||
color: black;
|
||||
border-radius: $widget_border_radius;
|
||||
}
|
||||
|
||||
b, strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
ins {
|
||||
background: #ff9;
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
mark {
|
||||
background: #ff0;
|
||||
color: #000;
|
||||
font-style: italic;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
sub {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
padding: 0 0 0 2em !important;
|
||||
}
|
||||
|
||||
li p:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin: 0 0 0 2em;
|
||||
}
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
-ms-interpolation-mode: bicubic;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
td {
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
.display-math {
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 700px) {
|
||||
#common-content {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
#content-left {
|
||||
flex: 86%;
|
||||
width: 100%;
|
||||
|
||||
&.split-common-content {
|
||||
max-width: 86%;
|
||||
}
|
||||
|
||||
.content-description {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
#content-right {
|
||||
flex: 14%;
|
||||
max-width: 12.5em;
|
||||
min-width: 8em;
|
||||
padding-left: 1.5em;
|
||||
padding-top: 1em;
|
||||
|
||||
.info-float {
|
||||
float: none;
|
||||
padding: 10px 0 0;
|
||||
position: sticky;
|
||||
top: 60px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media not all and (min-width: 700px) {
|
||||
#content-right .info-float {
|
||||
float: none;
|
||||
width: 100% !important;
|
||||
position: static !important;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
a.view-pdf {
|
||||
padding-top: 0.6em;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.problem-title {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
|
||||
.spacer {
|
||||
display: inline-block;
|
||||
flex: 1 1 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.info-float .fa {
|
||||
color: #000;
|
||||
padding-right: 0.2em;
|
||||
}
|
||||
|
||||
#problem-types, #allowed-langs {
|
||||
.toggled {
|
||||
margin-left: 1.3em;
|
||||
}
|
||||
}
|
||||
@ -1,143 +0,0 @@
|
||||
@import vars
|
||||
|
||||
#contest-calendar
|
||||
border-collapse: collapse
|
||||
th
|
||||
border-bottom: 1px solid $border_gray
|
||||
|
||||
&.sun
|
||||
border-left: 1px solid $border_gray
|
||||
|
||||
&.sun, &.mon, &.tue, &.wed, &.thu, &.fri, &.sat
|
||||
font-size: 0.95em
|
||||
border-right: 1px solid $border_gray
|
||||
background: $background_light_gray
|
||||
|
||||
td
|
||||
height: 110px
|
||||
width: 170px
|
||||
color: #000
|
||||
vertical-align: top
|
||||
text-align: right
|
||||
font-size: 0.75em
|
||||
border-right: 1px solid $border_gray
|
||||
border-bottom: 1px solid $border_gray
|
||||
transition-duration: 0.2s
|
||||
|
||||
.num
|
||||
font-size: 1.1em
|
||||
font-weight: bold
|
||||
display: block
|
||||
border-bottom: 1px dashed $border_gray
|
||||
padding-right: 0.2em
|
||||
margin-bottom: 0.4em
|
||||
|
||||
ul
|
||||
text-decoration: none
|
||||
text-align: left
|
||||
padding: 0
|
||||
margin: 0
|
||||
|
||||
li
|
||||
margin-left: 17px
|
||||
margin-bottom: 0.2em
|
||||
|
||||
i.fa
|
||||
color: orange
|
||||
|
||||
a
|
||||
text-decoration: none
|
||||
color: #222
|
||||
|
||||
&:hover
|
||||
text-decoration: underline
|
||||
|
||||
&:hover
|
||||
background: rgba(0, 0, 255, 0.3)
|
||||
color: white
|
||||
|
||||
.num
|
||||
font-weight: bold
|
||||
|
||||
ul li a
|
||||
font-weight: normal
|
||||
|
||||
.noday
|
||||
background: #f1f1f1
|
||||
|
||||
.today
|
||||
background: rgba(255, 255, 100, 0.5)
|
||||
|
||||
tr td:first-child
|
||||
border-left: 1px solid #aaa
|
||||
|
||||
#banner
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.2)
|
||||
padding-bottom: 1em
|
||||
a.date
|
||||
display: block
|
||||
text-decoration: none
|
||||
text-align: center
|
||||
line-height: 1.3
|
||||
font-size: 2.3em
|
||||
padding-bottom: 0.15em
|
||||
&:link, &:visited
|
||||
color: #5B80B9
|
||||
|
||||
&:hover
|
||||
color: #0645AD
|
||||
#time
|
||||
text-align: center
|
||||
display: block
|
||||
color: rgb(85, 85, 85)
|
||||
font-size: $base_font_size
|
||||
|
||||
.contest-list
|
||||
td
|
||||
vertical-align: middle !important
|
||||
&:nth-child(2)
|
||||
min-width: 4em
|
||||
|
||||
&:nth-child(3)
|
||||
min-width: 6em
|
||||
|
||||
tbody tr
|
||||
height: 4em
|
||||
|
||||
.floating-time-left
|
||||
position: absolute
|
||||
left: 0
|
||||
|
||||
.floating-time-right
|
||||
position: absolute
|
||||
right: 0
|
||||
line-height: 1.2em
|
||||
|
||||
.floating-time
|
||||
position: absolute
|
||||
right: 0
|
||||
bottom: 0
|
||||
|
||||
.contest-tags
|
||||
padding-left: 0.75em
|
||||
vertical-align: top
|
||||
|
||||
.participate-button
|
||||
display: inline-block
|
||||
width: 90px
|
||||
|
||||
.contest-block
|
||||
text-align: left
|
||||
padding: 0.5em 0.5em 0.5em 1em
|
||||
|
||||
.contest-tag
|
||||
box-shadow: inset 0 -0.1em 0 rgba(0, 0, 0, 0.12)
|
||||
padding: 0.15em .3em
|
||||
border-radius: 0.15em
|
||||
font-weight: 600
|
||||
margin-right: 0.45em
|
||||
position: relative
|
||||
|
||||
.contest-list-title
|
||||
font-size: 18px
|
||||
font-weight: 600
|
||||
183
resources/contest.scss
Normal file
183
resources/contest.scss
Normal file
@ -0,0 +1,183 @@
|
||||
@import "vars";
|
||||
|
||||
#contest-calendar {
|
||||
border-collapse: collapse;
|
||||
|
||||
th {
|
||||
border-bottom: 1px solid $border_gray;
|
||||
|
||||
&.sun {
|
||||
border-left: 1px solid $border_gray;
|
||||
}
|
||||
|
||||
&.sun, &.mon, &.tue, &.wed, &.thu, &.fri, &.sat {
|
||||
font-size: 0.95em;
|
||||
border-right: 1px solid $border_gray;
|
||||
background: $background_light_gray;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
height: 110px;
|
||||
width: 170px;
|
||||
color: #000;
|
||||
vertical-align: top;
|
||||
text-align: right;
|
||||
font-size: 0.75em;
|
||||
border-right: 1px solid $border_gray;
|
||||
border-bottom: 1px solid $border_gray;
|
||||
transition-duration: 0.2s;
|
||||
|
||||
.num {
|
||||
font-size: 1.1em;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
border-bottom: 1px dashed $border_gray;
|
||||
padding-right: 0.2em;
|
||||
margin-bottom: 0.4em;
|
||||
}
|
||||
|
||||
ul {
|
||||
text-decoration: none;
|
||||
text-align: left;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
margin-left: 17px;
|
||||
margin-bottom: 0.2em;
|
||||
|
||||
i.fa {
|
||||
color: orange;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #222;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 255, 0.3);
|
||||
color: white;
|
||||
|
||||
.num {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
ul li a {
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.noday {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
|
||||
.today {
|
||||
background: rgba(255, 255, 100, 0.5);
|
||||
}
|
||||
|
||||
tr td:first-child {
|
||||
border-left: 1px solid #aaa;
|
||||
}
|
||||
}
|
||||
|
||||
#banner {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
|
||||
padding-bottom: 1em;
|
||||
|
||||
a.date {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
line-height: 1.3;
|
||||
font-size: 2.3em;
|
||||
padding-bottom: 0.15em;
|
||||
|
||||
&:link, &:visited {
|
||||
color: #5B80B9;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #0645AD;
|
||||
}
|
||||
}
|
||||
|
||||
#time {
|
||||
text-align: center;
|
||||
display: block;
|
||||
color: rgb(85, 85, 85);
|
||||
font-size: $base_font_size;
|
||||
}
|
||||
}
|
||||
|
||||
.contest-list {
|
||||
td {
|
||||
vertical-align: middle !important;
|
||||
|
||||
&:nth-child(2) {
|
||||
min-width: 4em;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
min-width: 6em;
|
||||
}
|
||||
}
|
||||
|
||||
tbody tr {
|
||||
height: 4em;
|
||||
}
|
||||
|
||||
.floating-time-left {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.floating-time-right {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
.floating-time {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.contest-tags {
|
||||
padding-left: 0.75em;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.participate-button {
|
||||
display: inline-block;
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
.contest-block {
|
||||
text-align: left;
|
||||
padding: 0.5em 0.5em 0.5em 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.contest-tag {
|
||||
box-shadow: inset 0 -0.1em 0 rgba(0, 0, 0, 0.12);
|
||||
padding: 0.15em 0.3em;
|
||||
border-radius: 0.15em;
|
||||
font-weight: 600;
|
||||
margin-right: 0.45em;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.contest-list-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
@ -1,125 +0,0 @@
|
||||
#problem-table
|
||||
td
|
||||
&.category
|
||||
text-align: left
|
||||
padding: 0 1em
|
||||
|
||||
&.problem
|
||||
text-align: left
|
||||
padding-left: 1em
|
||||
width: 100%
|
||||
|
||||
&.pp
|
||||
text-align: left
|
||||
padding-left: 1em
|
||||
width: 100%
|
||||
|
||||
&.users
|
||||
text-align: left
|
||||
padding: 0 1em
|
||||
white-space: nowrap
|
||||
|
||||
&.types
|
||||
text-align: left
|
||||
padding: 0 1em
|
||||
|
||||
&.ac-rate
|
||||
white-space: nowrap
|
||||
|
||||
&.points
|
||||
white-space: nowrap
|
||||
|
||||
tr
|
||||
transition: background-color linear .2s
|
||||
|
||||
&:hover
|
||||
background: #eaeaea
|
||||
|
||||
#filter-form
|
||||
vertical-align: top
|
||||
margin-bottom: 0.5em
|
||||
margin-top: 0.75em
|
||||
|
||||
a
|
||||
margin-right: 5px
|
||||
display: inline-block
|
||||
padding: 3px 10px
|
||||
vertical-align: middle
|
||||
|
||||
input
|
||||
vertical-align: middle
|
||||
margin-bottom: 0.5em
|
||||
|
||||
label
|
||||
vertical-align: middle
|
||||
|
||||
.filter-form-group
|
||||
margin-top: 5px
|
||||
|
||||
#content-right
|
||||
&.problems
|
||||
flex: 26.5%
|
||||
max-width: unset
|
||||
padding-top: 2.25em
|
||||
|
||||
#content-left
|
||||
&.problems
|
||||
flex: 73.5%
|
||||
|
||||
#search
|
||||
width: 100%
|
||||
height: 2.3em
|
||||
|
||||
label[for="category"], label[for="type"]
|
||||
padding-bottom: 0.25em
|
||||
display: block
|
||||
|
||||
#category
|
||||
margin-top: 0.5em
|
||||
width: 100%
|
||||
|
||||
#types
|
||||
width: 100%
|
||||
|
||||
span.type-tag
|
||||
white-space: nowrap
|
||||
|
||||
ul.problem-list
|
||||
list-style: none
|
||||
padding-left: 1em
|
||||
padding-right: 0.5em
|
||||
li
|
||||
margin-bottom: 0.5em
|
||||
|
||||
.pi-name
|
||||
font-weight: bold
|
||||
|
||||
.pi-name:after
|
||||
content: ' '
|
||||
|
||||
.authors-value
|
||||
padding-left: 1.5em
|
||||
|
||||
.lang-name:after
|
||||
content: ': '
|
||||
|
||||
.lang-limit
|
||||
margin-left: 1.5em
|
||||
|
||||
.solved-problem-color
|
||||
color: #44AD41
|
||||
|
||||
.unsolved-problem-color
|
||||
color: #DE2121
|
||||
|
||||
.attempted-problem-color
|
||||
color: orange
|
||||
|
||||
.submissions-left
|
||||
color: black
|
||||
font-weight: 600
|
||||
text-align: center
|
||||
margin-top: 0.5em
|
||||
|
||||
.no-submissions-left
|
||||
color: red
|
||||
163
resources/problem.scss
Normal file
163
resources/problem.scss
Normal file
@ -0,0 +1,163 @@
|
||||
#problem-table {
|
||||
td {
|
||||
&.category {
|
||||
text-align: left;
|
||||
padding: 0 1em;
|
||||
}
|
||||
|
||||
&.problem {
|
||||
text-align: left;
|
||||
padding-left: 1em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.pp {
|
||||
text-align: left;
|
||||
padding-left: 1em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.users {
|
||||
text-align: left;
|
||||
padding: 0 1em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&.types {
|
||||
text-align: left;
|
||||
padding: 0 1em;
|
||||
}
|
||||
|
||||
&.ac-rate {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&.points {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
tr {
|
||||
transition: background-color linear 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: #eaeaea;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#filter-form {
|
||||
vertical-align: top;
|
||||
margin-bottom: 0.5em;
|
||||
margin-top: 0.75em;
|
||||
|
||||
a {
|
||||
margin-right: 5px;
|
||||
display: inline-block;
|
||||
padding: 3px 10px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
input {
|
||||
vertical-align: middle;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
label {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.filter-form-group {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
#content-right {
|
||||
&.problems {
|
||||
flex: 26.5%;
|
||||
max-width: unset;
|
||||
padding-top: 2.25em;
|
||||
}
|
||||
}
|
||||
|
||||
#content-left {
|
||||
&.problems {
|
||||
flex: 73.5%;
|
||||
}
|
||||
}
|
||||
|
||||
#search {
|
||||
width: 100%;
|
||||
height: 2.3em;
|
||||
}
|
||||
|
||||
label[for="category"], label[for="type"] {
|
||||
padding-bottom: 0.25em;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#category {
|
||||
margin-top: 0.5em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#types {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
span.type-tag {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
ul.problem-list {
|
||||
list-style: none;
|
||||
padding-left: 1em;
|
||||
padding-right: 0.5em;
|
||||
|
||||
li {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.pi-name {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.pi-name:after {
|
||||
content: " ";
|
||||
}
|
||||
|
||||
.authors-value {
|
||||
padding-left: 1.5em;
|
||||
}
|
||||
|
||||
.lang-name:after {
|
||||
content: ": ";
|
||||
}
|
||||
|
||||
.lang-limit {
|
||||
margin-left: 1.5em;
|
||||
}
|
||||
|
||||
.solved-problem-color {
|
||||
color: #44AD41;
|
||||
}
|
||||
|
||||
.unsolved-problem-color {
|
||||
color: #DE2121;
|
||||
}
|
||||
|
||||
.attempted-problem-color {
|
||||
color: orange;
|
||||
}
|
||||
|
||||
.submissions-left {
|
||||
color: black;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
.no-submissions-left {
|
||||
color: red;
|
||||
}
|
||||
@ -1,89 +0,0 @@
|
||||
.admin a, .admin
|
||||
color: black !important
|
||||
font-weight: bold !important
|
||||
|
||||
.rate-box
|
||||
width: 1em
|
||||
height: 1em
|
||||
border-radius: 1em
|
||||
overflow: hidden
|
||||
position: relative
|
||||
border: solid 2px
|
||||
display: block
|
||||
span
|
||||
width: 1em
|
||||
position: absolute
|
||||
bottom: 0
|
||||
display: block
|
||||
&.rate-none
|
||||
border: none
|
||||
&.rate-newbie
|
||||
border-color: #999
|
||||
&.rate-amateur
|
||||
border-color: #00a900
|
||||
&.rate-expert
|
||||
border-color: #66f
|
||||
&.rate-candidate-master
|
||||
border-color: #f6f
|
||||
&.rate-master
|
||||
border-color: #dc0
|
||||
&.rate-grandmaster, &.rate-target
|
||||
border-color: #e00
|
||||
&.rate-newbie span
|
||||
background: #999
|
||||
&.rate-amateur span
|
||||
background: #00a900
|
||||
&.rate-expert span
|
||||
background: #66f
|
||||
&.rate-candidate-master span
|
||||
background: #f6f
|
||||
&.rate-master span
|
||||
background: #dc0
|
||||
&.rate-grandmaster span
|
||||
background: #e00
|
||||
&.rate-target span
|
||||
top: 0.28em
|
||||
bottom: 0.28em
|
||||
left: 0.28em
|
||||
right: 0.28em
|
||||
background: #e00
|
||||
height: auto !important
|
||||
width: auto !important
|
||||
border-radius: 50%
|
||||
|
||||
.rating
|
||||
font-weight: bold
|
||||
|
||||
.rate-none, .rate-none a
|
||||
color: black
|
||||
font-weight: normal
|
||||
|
||||
.rate-newbie, .rate-newbie a
|
||||
color: #999
|
||||
|
||||
.rate-amateur, .rate-amateur a
|
||||
color: #00a900
|
||||
|
||||
.rate-expert, .rate-expert a
|
||||
color: blue
|
||||
|
||||
.rate-candidate-master, .rate-candidate-master a
|
||||
color: purple
|
||||
|
||||
.rate-master, .rate-master a
|
||||
color: #ffb100
|
||||
|
||||
.rate-grandmaster, .rate-grandmaster a, .rate-target, .rate-target a
|
||||
color: #e00
|
||||
|
||||
.rate-group
|
||||
white-space: nowrap
|
||||
display: inline-block
|
||||
color: black
|
||||
.rating
|
||||
display: inline-block
|
||||
.rate-box
|
||||
display: inline-block
|
||||
margin-right: 0.2em
|
||||
vertical-align: bottom
|
||||
font-size: 0.8em
|
||||
134
resources/ranks.scss
Normal file
134
resources/ranks.scss
Normal file
@ -0,0 +1,134 @@
|
||||
.admin a, .admin {
|
||||
color: black !important;
|
||||
font-weight: bold !important;
|
||||
}
|
||||
|
||||
.rate-box {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
border-radius: 1em;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
border: solid 2px;
|
||||
display: block;
|
||||
|
||||
span {
|
||||
width: 1em;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.rate-none {
|
||||
border: none;
|
||||
}
|
||||
|
||||
&.rate-newbie {
|
||||
border-color: #999;
|
||||
}
|
||||
|
||||
&.rate-amateur {
|
||||
border-color: #00a900;
|
||||
}
|
||||
|
||||
&.rate-expert {
|
||||
border-color: #66f;
|
||||
}
|
||||
|
||||
&.rate-candidate-master {
|
||||
border-color: #f6f;
|
||||
}
|
||||
|
||||
&.rate-master {
|
||||
border-color: #dc0;
|
||||
}
|
||||
|
||||
&.rate-grandmaster, &.rate-target {
|
||||
border-color: #e00;
|
||||
}
|
||||
|
||||
&.rate-newbie span {
|
||||
background: #999;
|
||||
}
|
||||
|
||||
&.rate-amateur span {
|
||||
background: #00a900;
|
||||
}
|
||||
|
||||
&.rate-expert span {
|
||||
background: #66f;
|
||||
}
|
||||
|
||||
&.rate-candidate-master span {
|
||||
background: #f6f;
|
||||
}
|
||||
|
||||
&.rate-master span {
|
||||
background: #dc0;
|
||||
}
|
||||
|
||||
&.rate-grandmaster span {
|
||||
background: #e00;
|
||||
}
|
||||
|
||||
&.rate-target span {
|
||||
top: 0.28em;
|
||||
bottom: 0.28em;
|
||||
left: 0.28em;
|
||||
right: 0.28em;
|
||||
background: #e00;
|
||||
height: auto !important;
|
||||
width: auto !important;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.rating {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.rate-none, .rate-none a {
|
||||
color: black;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.rate-newbie, .rate-newbie a {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.rate-amateur, .rate-amateur a {
|
||||
color: #00a900;
|
||||
}
|
||||
|
||||
.rate-expert, .rate-expert a {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.rate-candidate-master, .rate-candidate-master a {
|
||||
color: purple;
|
||||
}
|
||||
|
||||
.rate-master, .rate-master a {
|
||||
color: #ffb100;
|
||||
}
|
||||
|
||||
.rate-grandmaster, .rate-grandmaster a, .rate-target, .rate-target a {
|
||||
color: #e00;
|
||||
}
|
||||
|
||||
.rate-group {
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
color: black;
|
||||
|
||||
.rating {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.rate-box {
|
||||
display: inline-block;
|
||||
margin-right: 0.2em;
|
||||
vertical-align: bottom;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
}
|
||||
@ -1,35 +0,0 @@
|
||||
.AB
|
||||
background-color: #CCC
|
||||
color: black
|
||||
|
||||
.AC
|
||||
background-color: #53f23f
|
||||
color: green
|
||||
|
||||
._AC
|
||||
background-color: #DFFF00
|
||||
color: green
|
||||
|
||||
.WA
|
||||
background-color: #CCC
|
||||
color: #ef1b53
|
||||
|
||||
.TLE, .MLE
|
||||
background-color: #CCC
|
||||
color: black
|
||||
|
||||
.OLE, .IR, .RTE, .OTH
|
||||
background-color: #FAB623
|
||||
color: black
|
||||
|
||||
.CE
|
||||
background-color: #CCC
|
||||
color: black
|
||||
|
||||
.IE
|
||||
background-color: red
|
||||
color: black
|
||||
|
||||
.QU, .G
|
||||
background: white
|
||||
color: black
|
||||
44
resources/status.scss
Normal file
44
resources/status.scss
Normal file
@ -0,0 +1,44 @@
|
||||
.AB {
|
||||
background-color: #CCC;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.AC {
|
||||
background-color: #53f23f;
|
||||
color: green;
|
||||
}
|
||||
|
||||
._AC {
|
||||
background-color: #DFFF00;
|
||||
color: green;
|
||||
}
|
||||
|
||||
.WA {
|
||||
background-color: #CCC;
|
||||
color: #ef1b53;
|
||||
}
|
||||
|
||||
.TLE, .MLE {
|
||||
background-color: #CCC;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.OLE, .IR, .RTE, .OTH {
|
||||
background-color: #FAB623;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.CE {
|
||||
background-color: #CCC;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.IE {
|
||||
background-color: red;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.QU, .G {
|
||||
background: white;
|
||||
color: black;
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
@import "base"
|
||||
@import "table"
|
||||
@import "math"
|
||||
@import "status"
|
||||
@import "blog"
|
||||
@import "problem"
|
||||
@import "ranks"
|
||||
@import "users"
|
||||
@import "content-description"
|
||||
@import "widgets"
|
||||
@import "comments"
|
||||
@import "submission"
|
||||
@import "contest"
|
||||
13
resources/style.scss
Normal file
13
resources/style.scss
Normal file
@ -0,0 +1,13 @@
|
||||
@import "base";
|
||||
@import "table";
|
||||
@import "math";
|
||||
@import "status";
|
||||
@import "blog";
|
||||
@import "problem";
|
||||
@import "ranks";
|
||||
@import "users";
|
||||
@import "content-description";
|
||||
@import "widgets";
|
||||
@import "comments";
|
||||
@import "submission";
|
||||
@import "contest";
|
||||
@ -1,158 +0,0 @@
|
||||
.info-float
|
||||
position: sticky
|
||||
top: 60px
|
||||
width: 20%
|
||||
|
||||
#submissions-table
|
||||
border: 0
|
||||
margin-left: 0
|
||||
tr
|
||||
transition: background-color linear .2s
|
||||
&:hover
|
||||
background: #F2F2F2
|
||||
|
||||
col
|
||||
&.sub-result
|
||||
min-width: 80px
|
||||
|
||||
&.sub-prop
|
||||
text-align: right
|
||||
|
||||
#submissions-table tr td
|
||||
border-top: none
|
||||
border-bottom: 1px solid #d4d4d4
|
||||
|
||||
#submissions-table td:first-child
|
||||
border-bottom: 1px solid white
|
||||
|
||||
#submissions-table tr:first-child td
|
||||
border-top: 1px solid #d4d4d4
|
||||
|
||||
#submissions-table tr:last-child td:first-child
|
||||
border-bottom: 1px solid #d4d4d4
|
||||
|
||||
td
|
||||
&.sub-result
|
||||
min-width: 80px
|
||||
.state
|
||||
font-size: 0.7em
|
||||
font-weight: bold
|
||||
padding-top: 0.5em
|
||||
|
||||
.score
|
||||
font-size: 1.3em
|
||||
color: #000
|
||||
|
||||
&.sub-info
|
||||
.name
|
||||
font-weight: 700
|
||||
font-size: 1.2em
|
||||
|
||||
&.sub-info-grading
|
||||
width: auto !important
|
||||
min-width: 58% !important
|
||||
|
||||
&.sub-testcase
|
||||
color: #555
|
||||
white-space: nowrap
|
||||
vertical-align: middle
|
||||
text-align: right
|
||||
padding-right: 2%
|
||||
border-right: none
|
||||
|
||||
&.sub-prop
|
||||
text-align: right
|
||||
a
|
||||
white-space: nowrap
|
||||
|
||||
&.sub-usage
|
||||
white-space: nowrap
|
||||
min-width: 4em
|
||||
.time
|
||||
font-weight: bold
|
||||
|
||||
col.sub-info, td.sub-info
|
||||
width: 90%
|
||||
text-align: left
|
||||
padding-left: 20px
|
||||
border-right: none
|
||||
|
||||
.sub-prop .fa
|
||||
display: none
|
||||
|
||||
label[for="language"], label[for="status"]
|
||||
padding-bottom: 0.25em
|
||||
display: block
|
||||
|
||||
#language
|
||||
margin-top: 0.5em
|
||||
width: 100%
|
||||
|
||||
#status
|
||||
width: 100%
|
||||
|
||||
#statistics-table tr:not(:first-child) td
|
||||
border-top: 1px solid white !important
|
||||
|
||||
#statistics-table tr:not(:last-child) td:not(:last-child)
|
||||
border-right: 1px solid white
|
||||
|
||||
#content-left.submission
|
||||
flex: 70%
|
||||
|
||||
#content-right.submission
|
||||
flex: 12%
|
||||
min-width: initial
|
||||
max-width: 235px
|
||||
padding-top: 2.25em
|
||||
|
||||
@media(max-width: 700px)
|
||||
.sub-prop
|
||||
.label
|
||||
display: none
|
||||
|
||||
.fa
|
||||
display: inline-block
|
||||
|
||||
#fake-info-float
|
||||
display: none
|
||||
|
||||
#statistics-table
|
||||
display: none
|
||||
|
||||
#content-left.submission
|
||||
flex: 100%
|
||||
|
||||
#content-right.submission
|
||||
display: none
|
||||
|
||||
.submission-contest
|
||||
color: #555
|
||||
|
||||
.source-ln
|
||||
color: gray
|
||||
border-right: 1px solid gray
|
||||
padding-right: 5px
|
||||
text-align: right
|
||||
a
|
||||
color: gray
|
||||
display: block
|
||||
&:hover
|
||||
text-decoration: underline
|
||||
&::before
|
||||
display: block
|
||||
content: " "
|
||||
margin-top: -50px
|
||||
height: 50px
|
||||
visibility: hidden
|
||||
|
||||
.source-code pre, .source-ln pre
|
||||
margin: 0
|
||||
padding: 0
|
||||
white-space: pre
|
||||
|
||||
.source-code
|
||||
padding-left: 15px
|
||||
|
||||
.source-wrap
|
||||
overflow-x: auto
|
||||
214
resources/submission.scss
Normal file
214
resources/submission.scss
Normal file
@ -0,0 +1,214 @@
|
||||
.info-float {
|
||||
position: sticky;
|
||||
top: 60px;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
#submissions-table {
|
||||
border: 0;
|
||||
margin-left: 0;
|
||||
|
||||
tr {
|
||||
transition: background-color linear 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: #F2F2F2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
col {
|
||||
&.sub-result {
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
&.sub-prop {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
#submissions-table tr td {
|
||||
border-top: none;
|
||||
border-bottom: 1px solid #d4d4d4;
|
||||
}
|
||||
|
||||
#submissions-table td:first-child {
|
||||
border-bottom: 1px solid white;
|
||||
}
|
||||
|
||||
#submissions-table tr:first-child td {
|
||||
border-top: 1px solid #d4d4d4;
|
||||
}
|
||||
|
||||
#submissions-table tr:last-child td:first-child {
|
||||
border-bottom: 1px solid #d4d4d4;
|
||||
}
|
||||
|
||||
td {
|
||||
&.sub-result {
|
||||
min-width: 80px;
|
||||
|
||||
.state {
|
||||
font-size: 0.7em;
|
||||
font-weight: bold;
|
||||
padding-top: 0.5em;
|
||||
}
|
||||
|
||||
.score {
|
||||
font-size: 1.3em;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
&.sub-info {
|
||||
.name {
|
||||
font-weight: 700;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
|
||||
&.sub-info-grading {
|
||||
width: auto !important;
|
||||
min-width: 58% !important;
|
||||
}
|
||||
|
||||
&.sub-testcase {
|
||||
color: #555;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
text-align: right;
|
||||
padding-right: 2%;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
&.sub-prop {
|
||||
text-align: right;
|
||||
|
||||
a {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
&.sub-usage {
|
||||
white-space: nowrap;
|
||||
min-width: 4em;
|
||||
|
||||
.time {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
col.sub-info, td.sub-info {
|
||||
width: 90%;
|
||||
text-align: left;
|
||||
padding-left: 20px;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.sub-prop .fa {
|
||||
display: none;
|
||||
}
|
||||
|
||||
label[for="language"], label[for="status"] {
|
||||
padding-bottom: 0.25em;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#language {
|
||||
margin-top: 0.5em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#status {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#statistics-table tr:not(:first-child) td {
|
||||
border-top: 1px solid white !important;
|
||||
}
|
||||
|
||||
#statistics-table tr:not(:last-child) td:not(:last-child) {
|
||||
border-right: 1px solid white;
|
||||
}
|
||||
|
||||
#content-left.submission {
|
||||
flex: 70%;
|
||||
}
|
||||
|
||||
#content-right.submission {
|
||||
flex: 12%;
|
||||
min-width: initial;
|
||||
max-width: 235px;
|
||||
padding-top: 2.25em;
|
||||
}
|
||||
|
||||
@media(max-width: 700px) {
|
||||
.sub-prop {
|
||||
.label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fa {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
#fake-info-float {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#statistics-table {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#content-left.submission {
|
||||
flex: 100%;
|
||||
}
|
||||
|
||||
#content-right.submission {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.submission-contest {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.source-ln {
|
||||
color: gray;
|
||||
border-right: 1px solid gray;
|
||||
padding-right: 5px;
|
||||
text-align: right;
|
||||
|
||||
a {
|
||||
color: gray;
|
||||
display: block;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&::before {
|
||||
display: block;
|
||||
content: " ";
|
||||
margin-top: -50px;
|
||||
height: 50px;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.source-code pre, .source-ln pre {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.source-code {
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.source-wrap {
|
||||
overflow-x: auto;
|
||||
}
|
||||
@ -1,60 +0,0 @@
|
||||
@import vars
|
||||
|
||||
$table_header_rounding: 6px
|
||||
|
||||
.table
|
||||
border-spacing: 0
|
||||
width: 100%
|
||||
margin-left: auto
|
||||
margin-right: auto
|
||||
margin-bottom: .5em
|
||||
background: rgba(0, 0, 0, 0.01)
|
||||
&.striped tr:nth-child(even)
|
||||
background: #f7f7f7
|
||||
td:first-child
|
||||
border-color: $border_gray
|
||||
border-width: 1px 1px 0 1px
|
||||
tr:last-child td
|
||||
&:first-child
|
||||
border: 1px solid $border_gray
|
||||
border-color: $border_gray
|
||||
border-width: 1px 1px 1px 0
|
||||
thead th
|
||||
vertical-align: middle
|
||||
&:first-child
|
||||
border-top-left-radius: $table_header_rounding
|
||||
&:last-child
|
||||
border-top-right-radius: $table_header_rounding
|
||||
|
||||
th
|
||||
height: 2em
|
||||
color: #FFF
|
||||
background-color: $widget_black
|
||||
border-color: #555
|
||||
border-width: 1px 1px 0 0
|
||||
border-style: solid
|
||||
padding: 4px 10px
|
||||
vertical-align: middle
|
||||
text-align: center
|
||||
white-space: nowrap
|
||||
font-weight: 600
|
||||
font-size: 1.1em
|
||||
&:first-child
|
||||
border-top-left-radius: $table_header_rounding
|
||||
&:last-child
|
||||
border-top-right-radius: $table_header_rounding
|
||||
td
|
||||
border-color: $border_gray
|
||||
border-width: 1px 1px 0 0
|
||||
border-style: solid
|
||||
padding: 7px 5px
|
||||
vertical-align: middle
|
||||
text-align: center
|
||||
|
||||
// Monkey-patches for awkward table rounding
|
||||
tr:not(:first-child) th
|
||||
border-radius: 0
|
||||
tr:last-child th
|
||||
border-bottom-left-radius: $table_header_rounding
|
||||
thead tr th
|
||||
border-bottom-left-radius: 0 !important
|
||||
87
resources/table.scss
Normal file
87
resources/table.scss
Normal file
@ -0,0 +1,87 @@
|
||||
@import "vars";
|
||||
|
||||
$table_header_rounding: 6px;
|
||||
|
||||
.table {
|
||||
border-spacing: 0;
|
||||
width: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 0.5em;
|
||||
background: rgba(0, 0, 0, 0.01);
|
||||
|
||||
&.striped tr:nth-child(even) {
|
||||
background: #f7f7f7;
|
||||
}
|
||||
|
||||
td:first-child {
|
||||
border-color: $border_gray;
|
||||
border-width: 1px 1px 0 1px;
|
||||
}
|
||||
|
||||
tr:last-child td {
|
||||
&:first-child {
|
||||
border: 1px solid $border_gray;
|
||||
}
|
||||
|
||||
border-color: $border_gray;
|
||||
border-width: 1px 1px 1px 0;
|
||||
}
|
||||
|
||||
thead th {
|
||||
vertical-align: middle;
|
||||
|
||||
&:first-child {
|
||||
border-top-left-radius: $table_header_rounding;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-top-right-radius: $table_header_rounding;
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
height: 2em;
|
||||
color: #FFF;
|
||||
background-color: $widget_black;
|
||||
border-color: #555;
|
||||
border-width: 1px 1px 0 0;
|
||||
border-style: solid;
|
||||
padding: 4px 10px;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
font-weight: 600;
|
||||
font-size: 1.1em;
|
||||
|
||||
&:first-child {
|
||||
border-top-left-radius: $table_header_rounding;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-top-right-radius: $table_header_rounding;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
border-color: $border_gray;
|
||||
border-width: 1px 1px 0 0;
|
||||
border-style: solid;
|
||||
padding: 7px 5px;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// Monkey-patches for awkward table rounding
|
||||
tr:not(:first-child) th {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
tr:last-child th {
|
||||
border-bottom-left-radius: $table_header_rounding;
|
||||
}
|
||||
|
||||
thead tr th {
|
||||
border-bottom-left-radius: 0 !important;
|
||||
}
|
||||
}
|
||||
@ -1,35 +0,0 @@
|
||||
@media(min-width: 400px)
|
||||
#content-right
|
||||
&.users
|
||||
padding-left: 1.5em
|
||||
|
||||
#content-right
|
||||
&.users
|
||||
flex: 40%
|
||||
max-width: 17em
|
||||
|
||||
#content-left
|
||||
&.users
|
||||
flex: 60%
|
||||
|
||||
td.user-name
|
||||
padding-left: 2em
|
||||
text-align: left
|
||||
|
||||
tr
|
||||
padding-bottom: 96px
|
||||
&:target
|
||||
background: #fff897
|
||||
|
||||
th.header.rank
|
||||
padding-left: 5px
|
||||
|
||||
#search-handle
|
||||
width: 100%
|
||||
height: 2.3em
|
||||
|
||||
.user-search-image, .user-search-name
|
||||
vertical-align: middle
|
||||
|
||||
.user-search-name
|
||||
padding-left: 0.5em
|
||||
50
resources/users.scss
Normal file
50
resources/users.scss
Normal file
@ -0,0 +1,50 @@
|
||||
@media(min-width: 400px) {
|
||||
#content-right {
|
||||
&.users {
|
||||
padding-left: 1.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#content-right {
|
||||
&.users {
|
||||
flex: 40%;
|
||||
max-width: 17em;
|
||||
}
|
||||
}
|
||||
|
||||
#content-left {
|
||||
&.users {
|
||||
flex: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
td.user-name {
|
||||
padding-left: 2em;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
tr {
|
||||
padding-bottom: 96px;
|
||||
|
||||
&:target {
|
||||
background: #fff897;
|
||||
}
|
||||
}
|
||||
|
||||
th.header.rank {
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
#search-handle {
|
||||
width: 100%;
|
||||
height: 2.3em;
|
||||
}
|
||||
|
||||
.user-search-image, .user-search-name {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.user-search-name {
|
||||
padding-left: 0.5em;
|
||||
}
|
||||
@ -1,9 +0,0 @@
|
||||
$highlight_blue: #2980B9
|
||||
$widget_black: #3b3b3b
|
||||
$border_gray: #ccc
|
||||
$background_gray: #ededed
|
||||
$background_light_gray: #fafafa
|
||||
$announcement_red: #ae0000
|
||||
|
||||
$base_font_size: 14px
|
||||
$widget_border_radius: 4px
|
||||
9
resources/vars.scss
Normal file
9
resources/vars.scss
Normal file
@ -0,0 +1,9 @@
|
||||
$highlight_blue: #2980B9;
|
||||
$widget_black: #3b3b3b;
|
||||
$border_gray: #ccc;
|
||||
$background_gray: #ededed;
|
||||
$background_light_gray: #fafafa;
|
||||
$announcement_red: #ae0000;
|
||||
|
||||
$base_font_size: 14px;
|
||||
$widget_border_radius: 4px;
|
||||
@ -1,374 +0,0 @@
|
||||
@import vars
|
||||
|
||||
.social i
|
||||
display: inline
|
||||
font-size: 1.9em
|
||||
|
||||
.facebook-this, .tweet-this, .gplus-this
|
||||
display: inline
|
||||
|
||||
.tweet-this i
|
||||
color: #55ACEE
|
||||
|
||||
.facebook-this it
|
||||
color: #133783
|
||||
|
||||
.gplus-this i
|
||||
color: #DD4B38
|
||||
|
||||
.social
|
||||
font-size: 1.3em
|
||||
float: right
|
||||
|
||||
// Bootstrap-y buttons
|
||||
.button, button, input[type=submit]
|
||||
color: white !important
|
||||
text-decoration: none !important
|
||||
cursor: pointer
|
||||
vertical-align: middle
|
||||
white-space: nowrap
|
||||
font-weight: 400
|
||||
line-height: 1.4
|
||||
background: rgb(51, 122, 183) none repeat scroll 0 (0% / auto) padding-box border-box
|
||||
background: -webkit-linear-gradient(top, #337ab7 0, #265a88 100%) repeat-x
|
||||
background: linear-gradient(to bottom, #337ab7 0, #265a88 100%) repeat-x
|
||||
border-radius: $widget_border_radius
|
||||
padding: 6px 12px
|
||||
display: block
|
||||
border: 1px solid #245580
|
||||
text-align: center
|
||||
// 4k hack
|
||||
font-size: $base_font_size
|
||||
&:hover
|
||||
background: #265a88
|
||||
|
||||
&.disabled
|
||||
background: linear-gradient(to bottom, darkgray 0, gray 100%) repeat-x !important
|
||||
border-color: grey !important
|
||||
cursor: not-allowed
|
||||
|
||||
.button.full, input[type=submit].full, button.full
|
||||
padding: 6px 0
|
||||
|
||||
button:hover, button:hover, input[type=submit]:hover
|
||||
background: #265a88
|
||||
|
||||
.button:active, button:active, input[type=submit]:hover
|
||||
border-color: #245580
|
||||
background: #265a88
|
||||
|
||||
input
|
||||
&[type=text], &[type=password], &[type=email], &[type=number]
|
||||
padding: 4px 8px
|
||||
color: #555
|
||||
background: #FFF none
|
||||
border: 1px solid $border_gray
|
||||
border-radius: $widget_border_radius
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset
|
||||
transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s
|
||||
box-sizing: border-box
|
||||
// Need this explicitly because UA stylesheet for Chrome on 4k makes
|
||||
// everything look bad otherwise (forces it to 9.3px)
|
||||
font-size: $base_font_size
|
||||
|
||||
&[type=number]
|
||||
padding: 2px 0 2px 5px
|
||||
|
||||
textarea
|
||||
padding: 4px 8px
|
||||
color: #555
|
||||
background: #FFF none
|
||||
border: 1px solid $border_gray
|
||||
border-radius: $widget_border_radius
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset
|
||||
transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s
|
||||
box-sizing: border-box
|
||||
|
||||
textarea:hover
|
||||
border-color: rgba(82, 168, 236, 0.8)
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px rgba(82, 168, 236, 0.6)
|
||||
|
||||
input
|
||||
&[type="text"]:hover, &[type="password"]:hover
|
||||
border-color: rgba(82, 168, 236, 0.8)
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px rgba(82, 168, 236, 0.6)
|
||||
|
||||
textarea:focus
|
||||
border-color: rgba(82, 168, 236, 0.8)
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6)
|
||||
outline: 0
|
||||
|
||||
input
|
||||
&[type="text"]:focus, &[type="password"]:focus
|
||||
border-color: rgba(82, 168, 236, 0.8)
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6)
|
||||
outline: 0
|
||||
|
||||
// Bootstrap-y copy button
|
||||
.btn-clipboard
|
||||
top: 0
|
||||
right: 0
|
||||
display: block
|
||||
font-size: 12px
|
||||
color: #767676
|
||||
cursor: pointer
|
||||
background-color: #FFF
|
||||
border: 1px solid #E1E1E8
|
||||
border-radius: 0 $widget_border_radius
|
||||
position: absolute
|
||||
padding: 5px 8px
|
||||
|
||||
.copy-clipboard
|
||||
position: relative
|
||||
margin-top: 1.5em
|
||||
|
||||
// Bootstrap-y tabs
|
||||
.ul_tab_a_active
|
||||
color: black
|
||||
cursor: default
|
||||
background-color: #fff
|
||||
border: 1px solid $border_gray
|
||||
border-bottom-color: transparent
|
||||
border-image: none
|
||||
|
||||
.tabs
|
||||
border-bottom: 1px solid $border_gray
|
||||
margin: 0 0 8px
|
||||
width: 100%
|
||||
display: flex
|
||||
|
||||
&.tabs-no-flex
|
||||
display: block
|
||||
|
||||
.tab
|
||||
.tab-icon
|
||||
padding-right: 0.3em
|
||||
color: gray
|
||||
a
|
||||
border-top-width: 3px !important
|
||||
&.active
|
||||
a
|
||||
border-top-color: $highlight_blue !important
|
||||
.tab-icon
|
||||
color: black
|
||||
|
||||
h2
|
||||
color: #393630
|
||||
|
||||
> ul
|
||||
margin: 0
|
||||
padding: 0
|
||||
list-style: outside none none
|
||||
display: flex
|
||||
|
||||
> li
|
||||
margin-bottom: -1px
|
||||
position: relative
|
||||
display: block
|
||||
&.active > a
|
||||
@extend .ul_tab_a_active
|
||||
&:hover
|
||||
@extend .ul_tab_a_active
|
||||
&:focus
|
||||
@extend .ul_tab_a_active
|
||||
|
||||
> a
|
||||
margin-right: 2px
|
||||
line-height: 1.42857
|
||||
border: 1px solid transparent
|
||||
border-radius: $widget_border_radius $widget_border_radius 0 0
|
||||
position: relative
|
||||
display: block
|
||||
padding: 10px 15px
|
||||
color: #555
|
||||
text-decoration: none
|
||||
white-space: nowrap
|
||||
|
||||
// Bootstrap-y pagination
|
||||
ul.pagination a:hover
|
||||
color: #FFF
|
||||
background: rgba(0, 0, 0, 0.55)
|
||||
|
||||
ul.pagination
|
||||
display: inline-block
|
||||
padding-left: 0
|
||||
margin: 0
|
||||
border-radius: $widget_border_radius
|
||||
>
|
||||
li
|
||||
display: inline
|
||||
&:first-child >
|
||||
a, span
|
||||
margin-left: 0
|
||||
border-top-left-radius: $widget_border_radius
|
||||
border-bottom-left-radius: $widget_border_radius
|
||||
&:last-child >
|
||||
a, span
|
||||
margin-left: 0
|
||||
border-top-right-radius: $widget_border_radius
|
||||
border-bottom-right-radius: $widget_border_radius
|
||||
>
|
||||
a, span
|
||||
position: relative
|
||||
float: left
|
||||
padding: 4px 12px
|
||||
line-height: 1.42857
|
||||
text-decoration: none
|
||||
color: #FFF
|
||||
background-color: $widget_black
|
||||
border: 1px solid #505050
|
||||
margin-left: -1px
|
||||
.disabled-page >
|
||||
a
|
||||
color: #888
|
||||
background-color: $widget_black
|
||||
border-color: #282828
|
||||
span
|
||||
color: #888
|
||||
background-color: $widget_black
|
||||
border-color: #505050
|
||||
.active-page >
|
||||
a
|
||||
z-index: 2
|
||||
color: #FFF
|
||||
background-color: $highlight_blue
|
||||
border-color: transparent
|
||||
cursor: default
|
||||
span
|
||||
z-index: 2
|
||||
color: #FFF
|
||||
background-color: $highlight_blue
|
||||
border-color: transparent
|
||||
cursor: default
|
||||
|
||||
.alert
|
||||
padding: 15px
|
||||
margin-bottom: 20px
|
||||
border: 1px solid transparent
|
||||
border-radius: $widget_border_radius
|
||||
|
||||
.alert-info
|
||||
color: #31708f
|
||||
background-color: #d9edf7
|
||||
border-color: #bce8f1
|
||||
|
||||
.alert-warning
|
||||
color: #8a6d3b
|
||||
background-color: #fcf8e3
|
||||
border-color: #faebcc
|
||||
|
||||
.alert-danger
|
||||
color: #a94442
|
||||
background-color: #f2dede
|
||||
border-color: #ebccd1
|
||||
|
||||
.alert-dismissable, .alert-dismissible
|
||||
padding-right: 35px
|
||||
|
||||
.alert-dismissable .close, .alert-dismissible .close
|
||||
position: relative
|
||||
top: -2px
|
||||
right: -21px
|
||||
color: inherit
|
||||
|
||||
.close
|
||||
float: right
|
||||
font-size: 21px
|
||||
font-weight: 700
|
||||
line-height: 1
|
||||
color: #000
|
||||
text-shadow: 0 1px 0 #fff
|
||||
filter: alpha(opacity=20)
|
||||
opacity: .2
|
||||
|
||||
a.close
|
||||
text-decoration: none !important
|
||||
font-size: 18px !important
|
||||
line-height: 1
|
||||
&:hover
|
||||
color: black !important
|
||||
|
||||
.close
|
||||
&:focus, &:hover
|
||||
color: #000
|
||||
text-decoration: none
|
||||
cursor: pointer
|
||||
filter: alpha(opacity = 50)
|
||||
opacity: .5
|
||||
|
||||
.badge
|
||||
min-width: 10px
|
||||
padding: 0 7px
|
||||
font-size: 12px
|
||||
font-weight: 700
|
||||
line-height: 1
|
||||
color: #fff
|
||||
text-align: center
|
||||
white-space: nowrap
|
||||
vertical-align: middle
|
||||
background-color: #e84848
|
||||
border-radius: 10px
|
||||
box-sizing: border-box
|
||||
|
||||
.form-submit-group
|
||||
border-top: 1px solid #EEE
|
||||
margin-top: 0.8em
|
||||
padding-top: 0.5em
|
||||
text-align: right
|
||||
|
||||
ul.select2-selection__rendered
|
||||
padding: 0 5px !important
|
||||
|
||||
|
||||
.sidebox h3
|
||||
margin: 0 -5px
|
||||
background: $widget_black
|
||||
border-radius: $widget_border_radius $widget_border_radius 0 0
|
||||
color: white
|
||||
padding-top: 5px
|
||||
padding-bottom: 5px
|
||||
padding-left: 7px
|
||||
font-size: 1.3em
|
||||
|
||||
.sidebox h3 .fa
|
||||
color: white
|
||||
float: right
|
||||
margin: 0.2em 0.4em 0 0
|
||||
|
||||
.sidebox-content
|
||||
border: 1px solid $border_gray
|
||||
border-top: none
|
||||
margin: 0 -5px
|
||||
padding: 1px 0.5em 3px
|
||||
|
||||
&.sidebox-table
|
||||
border: none
|
||||
padding: 0
|
||||
|
||||
.table
|
||||
margin: 0 !important
|
||||
|
||||
.sidebox
|
||||
border-top-left-radius: $widget_border_radius
|
||||
border-top-right-radius: $widget_border_radius
|
||||
padding: 0 5px !important
|
||||
padding-bottom: 1.5em !important
|
||||
|
||||
|
||||
.ws-closed
|
||||
position: sticky
|
||||
top: 42px
|
||||
background: $announcement_red
|
||||
border-radius: 5px 5px 0 0
|
||||
display: none
|
||||
|
||||
.ws-closed a
|
||||
display: block
|
||||
padding: 7px 0
|
||||
text-align: center
|
||||
color: white
|
||||
font-weight: 600
|
||||
|
||||
.semibold
|
||||
font-weight: 600
|
||||
|
||||
468
resources/widgets.scss
Normal file
468
resources/widgets.scss
Normal file
@ -0,0 +1,468 @@
|
||||
@import "vars";
|
||||
|
||||
.social i {
|
||||
display: inline;
|
||||
font-size: 1.9em;
|
||||
}
|
||||
|
||||
.facebook-this, .tweet-this, .gplus-this {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.tweet-this i {
|
||||
color: #55ACEE;
|
||||
}
|
||||
|
||||
.facebook-this it {
|
||||
color: #133783;
|
||||
}
|
||||
|
||||
.gplus-this i {
|
||||
color: #DD4B38;
|
||||
}
|
||||
|
||||
.social {
|
||||
font-size: 1.3em;
|
||||
float: right;
|
||||
}
|
||||
|
||||
// Bootstrap-y buttons
|
||||
.button, button, input[type=submit] {
|
||||
color: white !important;
|
||||
text-decoration: none !important;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
font-weight: 400;
|
||||
line-height: 1.4;
|
||||
background: rgb(51, 122, 183) none repeat scroll 0 (0% / auto) padding-box border-box;
|
||||
background: -webkit-linear-gradient(top, #337ab7 0, #265a88 100%) repeat-x;
|
||||
background: linear-gradient(to bottom, #337ab7 0, #265a88 100%) repeat-x;
|
||||
border-radius: $widget_border_radius;
|
||||
padding: 6px 12px;
|
||||
display: block;
|
||||
border: 1px solid #245580;
|
||||
text-align: center;
|
||||
|
||||
// 4k hack
|
||||
font-size: $base_font_size;
|
||||
|
||||
&:hover {
|
||||
background: #265a88;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
background: linear-gradient(to bottom, darkgray 0, gray 100%) repeat-x !important;
|
||||
border-color: grey !important;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.button.full, input[type=submit].full, button.full {
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
button:hover, button:hover, input[type=submit]:hover {
|
||||
background: #265a88;
|
||||
}
|
||||
|
||||
.button:active, button:active, input[type=submit]:hover {
|
||||
border-color: #245580;
|
||||
background: #265a88;
|
||||
}
|
||||
|
||||
input {
|
||||
&[type=text], &[type=password], &[type=email], &[type=number] {
|
||||
padding: 4px 8px;
|
||||
color: #555;
|
||||
background: #FFF none;
|
||||
border: 1px solid $border_gray;
|
||||
border-radius: $widget_border_radius;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
|
||||
transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
|
||||
box-sizing: border-box;
|
||||
|
||||
// Need this explicitly because UA stylesheet for Chrome on 4k makes
|
||||
// everything look bad otherwise (forces it to 9.3px)
|
||||
font-size: $base_font_size;
|
||||
}
|
||||
|
||||
&[type=number] {
|
||||
padding: 2px 0 2px 5px;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
padding: 4px 8px;
|
||||
color: #555;
|
||||
background: #FFF none;
|
||||
border: 1px solid $border_gray;
|
||||
border-radius: $widget_border_radius;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
|
||||
transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
textarea:hover {
|
||||
border-color: rgba(82, 168, 236, 0.8);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px rgba(82, 168, 236, 0.6);
|
||||
}
|
||||
|
||||
input {
|
||||
&[type="text"]:hover, &[type="password"]:hover {
|
||||
border-color: rgba(82, 168, 236, 0.8);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px rgba(82, 168, 236, 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
textarea:focus {
|
||||
border-color: rgba(82, 168, 236, 0.8);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
input {
|
||||
&[type="text"]:focus, &[type="password"]:focus {
|
||||
border-color: rgba(82, 168, 236, 0.8);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Bootstrap-y copy button
|
||||
.btn-clipboard {
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: #767676;
|
||||
cursor: pointer;
|
||||
background-color: #FFF;
|
||||
border: 1px solid #E1E1E8;
|
||||
border-radius: 0 $widget_border_radius;
|
||||
position: absolute;
|
||||
padding: 5px 8px;
|
||||
}
|
||||
|
||||
.copy-clipboard {
|
||||
position: relative;
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
|
||||
// Bootstrap-y tabs
|
||||
.ul_tab_a_active {
|
||||
color: black;
|
||||
cursor: default;
|
||||
background-color: #fff;
|
||||
border: 1px solid $border_gray;
|
||||
border-bottom-color: transparent;
|
||||
border-image: none;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
border-bottom: 1px solid $border_gray;
|
||||
margin: 0 0 8px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
||||
&.tabs-no-flex {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tab {
|
||||
.tab-icon {
|
||||
padding-right: 0.3em;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
a {
|
||||
border-top-width: 3px !important;
|
||||
}
|
||||
|
||||
&.active {
|
||||
a {
|
||||
border-top-color: $highlight_blue !important;
|
||||
}
|
||||
|
||||
.tab-icon {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #393630;
|
||||
}
|
||||
|
||||
> ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: outside none none;
|
||||
display: flex;
|
||||
|
||||
> li {
|
||||
margin-bottom: -1px;
|
||||
position: relative;
|
||||
display: block;
|
||||
|
||||
&.active > a {
|
||||
@extend .ul_tab_a_active;
|
||||
|
||||
&:hover {
|
||||
@extend .ul_tab_a_active;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@extend .ul_tab_a_active;
|
||||
}
|
||||
}
|
||||
|
||||
> a {
|
||||
margin-right: 2px;
|
||||
line-height: 1.42857;
|
||||
border: 1px solid transparent;
|
||||
border-radius: $widget_border_radius $widget_border_radius 0 0;
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 10px 15px;
|
||||
color: #555;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Bootstrap-y pagination
|
||||
ul.pagination a:hover {
|
||||
color: #FFF;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
|
||||
ul.pagination {
|
||||
display: inline-block;
|
||||
padding-left: 0;
|
||||
margin: 0;
|
||||
border-radius: $widget_border_radius;
|
||||
|
||||
> {
|
||||
li {
|
||||
display: inline;
|
||||
|
||||
&:first-child > {
|
||||
a, span {
|
||||
margin-left: 0;
|
||||
border-top-left-radius: $widget_border_radius;
|
||||
border-bottom-left-radius: $widget_border_radius;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child > {
|
||||
a, span {
|
||||
margin-left: 0;
|
||||
border-top-right-radius: $widget_border_radius;
|
||||
border-bottom-right-radius: $widget_border_radius;
|
||||
}
|
||||
}
|
||||
|
||||
> {
|
||||
a, span {
|
||||
position: relative;
|
||||
float: left;
|
||||
padding: 4px 12px;
|
||||
line-height: 1.42857;
|
||||
text-decoration: none;
|
||||
color: #FFF;
|
||||
background-color: $widget_black;
|
||||
border: 1px solid #505050;
|
||||
margin-left: -1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.disabled-page > {
|
||||
a {
|
||||
color: #888;
|
||||
background-color: $widget_black;
|
||||
border-color: #282828;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #888;
|
||||
background-color: $widget_black;
|
||||
border-color: #505050;
|
||||
}
|
||||
}
|
||||
|
||||
.active-page > {
|
||||
a {
|
||||
z-index: 2;
|
||||
color: #FFF;
|
||||
background-color: $highlight_blue;
|
||||
border-color: transparent;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
span {
|
||||
z-index: 2;
|
||||
color: #FFF;
|
||||
background-color: $highlight_blue;
|
||||
border-color: transparent;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.alert {
|
||||
padding: 15px;
|
||||
margin-bottom: 20px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: $widget_border_radius;
|
||||
}
|
||||
|
||||
.alert-info {
|
||||
color: #31708f;
|
||||
background-color: #d9edf7;
|
||||
border-color: #bce8f1;
|
||||
}
|
||||
|
||||
.alert-warning {
|
||||
color: #8a6d3b;
|
||||
background-color: #fcf8e3;
|
||||
border-color: #faebcc;
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
color: #a94442;
|
||||
background-color: #f2dede;
|
||||
border-color: #ebccd1;
|
||||
}
|
||||
|
||||
.alert-dismissable, .alert-dismissible {
|
||||
padding-right: 35px;
|
||||
}
|
||||
|
||||
.alert-dismissable .close, .alert-dismissible .close {
|
||||
position: relative;
|
||||
top: -2px;
|
||||
right: -21px;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.close {
|
||||
float: right;
|
||||
font-size: 21px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
color: #000;
|
||||
text-shadow: 0 1px 0 #fff;
|
||||
filter: alpha(opacity = 20);
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
a.close {
|
||||
text-decoration: none !important;
|
||||
font-size: 18px !important;
|
||||
line-height: 1;
|
||||
|
||||
&:hover {
|
||||
color: black !important;
|
||||
}
|
||||
}
|
||||
|
||||
.close {
|
||||
&:focus, &:hover {
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
filter: alpha(opacity = 50);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
min-width: 10px;
|
||||
padding: 0 7px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
background-color: #e84848;
|
||||
border-radius: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.form-submit-group {
|
||||
border-top: 1px solid #EEE;
|
||||
margin-top: 0.8em;
|
||||
padding-top: 0.5em;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
ul.select2-selection__rendered {
|
||||
padding: 0 5px !important;
|
||||
}
|
||||
|
||||
.sidebox h3 {
|
||||
margin: 0 -5px;
|
||||
background: $widget_black;
|
||||
border-radius: $widget_border_radius $widget_border_radius 0 0;
|
||||
color: white;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
padding-left: 7px;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
.sidebox h3 .fa {
|
||||
color: white;
|
||||
float: right;
|
||||
margin: 0.2em 0.4em 0 0;
|
||||
}
|
||||
|
||||
.sidebox-content {
|
||||
border: 1px solid $border_gray;
|
||||
border-top: none;
|
||||
margin: 0 -5px;
|
||||
padding: 1px 0.5em 3px;
|
||||
|
||||
&.sidebox-table {
|
||||
border: none;
|
||||
padding: 0;
|
||||
|
||||
.table {
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebox {
|
||||
border-top-left-radius: $widget_border_radius;
|
||||
border-top-right-radius: $widget_border_radius;
|
||||
padding: 0 5px !important;
|
||||
padding-bottom: 1.5em !important;
|
||||
}
|
||||
|
||||
.ws-closed {
|
||||
position: sticky;
|
||||
top: 42px;
|
||||
background: $announcement_red;
|
||||
border-radius: 5px 5px 0 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ws-closed a {
|
||||
display: block;
|
||||
padding: 7px 0;
|
||||
text-align: center;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.semibold {
|
||||
font-weight: 600;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user