410 lines
6.9 KiB
CSS
410 lines
6.9 KiB
CSS
/**
|
|
* phpBB Studio's Dice extension for the phpBB Forum Software package.
|
|
*
|
|
* @copyright (c) 2019 phpBB Studio <https://www.phpbbstudio.com>
|
|
* @license GNU General Public License, version 2 (GPL-2.0)
|
|
*/
|
|
|
|
.row,
|
|
.row * {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-right: -15px;
|
|
margin-left: -15px;
|
|
}
|
|
|
|
.col {
|
|
position: relative;
|
|
flex: 0 0 25%;
|
|
width: 100%;
|
|
max-width: 25%;
|
|
min-height: 1px;
|
|
padding-right: 15px;
|
|
padding-left: 15px;
|
|
}
|
|
|
|
@media all and (max-width: 1224px) {
|
|
.col {
|
|
flex: 0 0 50%;
|
|
max-width: 50%;
|
|
}
|
|
}
|
|
|
|
.card {
|
|
font-size: 0.875rem;
|
|
word-wrap: break-word;
|
|
background: #ffffff;
|
|
border: 0;
|
|
border-radius: 6px;
|
|
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
|
|
color: #333333;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
min-width: 0;
|
|
margin-top: 30px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.card-header {
|
|
background: transparent;
|
|
border-bottom: none;
|
|
border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
|
|
color: #ffffff;
|
|
position: relative;
|
|
z-index: 3 !important;
|
|
margin: 0 15px;
|
|
padding: 0;
|
|
}
|
|
|
|
.card-header-icon {
|
|
text-align: right;
|
|
}
|
|
|
|
.card-body {
|
|
position: relative;
|
|
padding: 0.9375rem 20px;
|
|
}
|
|
|
|
.card-footer {
|
|
background-color: transparent;
|
|
border: 0;
|
|
border-top: 1px solid #eeeeee;
|
|
border-radius: 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin: 14px 15px 10px;
|
|
padding: 10px 0 0;
|
|
}
|
|
|
|
.card-footer-closer {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.card-footer .card-action {
|
|
text-align: center;
|
|
flex: 0 100%;
|
|
}
|
|
|
|
.card-icon {
|
|
background: #999999;
|
|
border-radius: 3px;
|
|
float: left;
|
|
margin-top: -20px;
|
|
margin-right: 15px;
|
|
padding: 15px;
|
|
}
|
|
|
|
.card-icon i {
|
|
font-size: 36px;
|
|
line-height: 56px;
|
|
text-align: center;
|
|
width: 56px;
|
|
height: 56px;
|
|
}
|
|
|
|
.card-category {
|
|
font-size: 14px;
|
|
color: #999999;
|
|
margin: 0;
|
|
padding-top: 10px;
|
|
}
|
|
|
|
.card-avatar img {
|
|
width: 26px;
|
|
height: auto;
|
|
}
|
|
|
|
h3.card-title {
|
|
font-size: 1.5625rem;
|
|
font-weight: 300;
|
|
line-height: 1.5em;
|
|
text-decoration: none;
|
|
color: #3c4858;
|
|
margin: 0;
|
|
}
|
|
|
|
h4.card-title {
|
|
font-size: 1.125rem;
|
|
font-weight: 300;
|
|
line-height: 1.4em;
|
|
text-decoration: none;
|
|
color: #ffffff;
|
|
margin: 0;
|
|
}
|
|
|
|
.stats {
|
|
font-size: 12px;
|
|
line-height: 22px;
|
|
color: #999999;
|
|
display: inline-flex;
|
|
}
|
|
|
|
@media all and (max-width: 800px) {
|
|
.stats {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
.card .stats i {
|
|
font-size: 16px;
|
|
position: relative;
|
|
margin-right: 3px;
|
|
margin-left: 3px;
|
|
}
|
|
|
|
.card small {
|
|
font-size: 80%;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.card label {
|
|
font-size: inherit;
|
|
}
|
|
|
|
.card a {
|
|
color: inherit;
|
|
}
|
|
|
|
.card a.card-primary {
|
|
display: block;
|
|
}
|
|
|
|
.card a.card-secondary {
|
|
color: #999999;
|
|
}
|
|
|
|
.card a:hover,
|
|
.card a:hover .stats,
|
|
.card label:hover,
|
|
.card label:hover .stats {
|
|
text-decoration: none;
|
|
color: #333333;
|
|
}
|
|
|
|
.card .card-header .card-title + .card-category {
|
|
color: hsla(0, 0%, 100%, 0.62);
|
|
}
|
|
|
|
.card .card-header:not(.card-header-icon) {
|
|
border-radius: 3px;
|
|
margin-top: -20px;
|
|
padding: 15px;
|
|
}
|
|
|
|
.dice-orange {
|
|
background: linear-gradient(60deg, #ffa726, #fb8c00);
|
|
box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(255, 152, 0, 0.4);
|
|
}
|
|
|
|
.dice-green {
|
|
background: linear-gradient(60deg, #66bb6a, #43a047);
|
|
box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(76, 175, 80, 0.4);
|
|
}
|
|
|
|
.dice-blue {
|
|
background: linear-gradient(60deg, #26c6da, #00acc1);
|
|
box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(0, 188, 212, 0.4);
|
|
}
|
|
|
|
.dice-red {
|
|
background: linear-gradient(60deg, #ef5350, #e53935);
|
|
box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(244, 67, 54, 0.4);
|
|
}
|
|
|
|
.dice-purple {
|
|
background: linear-gradient(60deg, #ab47bc, #8e24aa);
|
|
box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(156, 39, 176, 0.4);
|
|
}
|
|
|
|
.dice-button {
|
|
font-size: 0.9rem;
|
|
border: 1px solid transparent;
|
|
border-radius: 3px;
|
|
color: #ffffff;
|
|
padding: 2px 6px 3px;
|
|
}
|
|
|
|
.dice-button i + span {
|
|
margin-left: 5px;
|
|
}
|
|
|
|
a.dice-button-locations {
|
|
color: #ffffff;
|
|
display: inline-block;
|
|
padding: 5px 10px;
|
|
}
|
|
|
|
.dice-button-green {
|
|
background: linear-gradient(60deg, #66bb6a, #43a047);
|
|
border-color: #1b9a1b;
|
|
}
|
|
|
|
.dice-button-red {
|
|
background: linear-gradient(60deg, #ef5350, #e53935);
|
|
border-color: #d31141;
|
|
}
|
|
|
|
.dice-setting {
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.dice-input i {
|
|
background: #efefef;
|
|
border: 1px solid #333333;
|
|
border-right-color: #969696;
|
|
border-radius: 3px 0 0 3px;
|
|
padding: 6px;
|
|
}
|
|
|
|
@media all and (max-width: 707px) {
|
|
.dice-input i {
|
|
vertical-align: -1px;
|
|
}
|
|
}
|
|
|
|
.dice-input i:before {
|
|
vertical-align: -1px;
|
|
}
|
|
|
|
.dice-side-add input,
|
|
.dice-input input {
|
|
background: #f9f9f9;
|
|
border-radius: 0 3px 3px 0;
|
|
padding: 5px;
|
|
}
|
|
|
|
.dice-side-add input {
|
|
border-radius: 3px 0 0 3px;
|
|
}
|
|
|
|
.dice-side-add button {
|
|
border-radius: 0 3px 3px 0;
|
|
padding: 4px 10px 6px;
|
|
}
|
|
|
|
.dice-side-add button i {
|
|
vertical-align: -1px;
|
|
}
|
|
|
|
.dice-check + label,
|
|
.dice-yes + label,
|
|
.dice-no + label {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.dice-check + label {
|
|
font-size: 1rem;
|
|
line-height: initial;
|
|
user-select: none;
|
|
}
|
|
|
|
.dice-check + label span,
|
|
.dice-yes + label span,
|
|
.dice-no + label span {
|
|
border-top: 1px solid #afaeaa;
|
|
border-right: 1px solid #d5d5c8;
|
|
border-bottom: 1px solid #d5d5c8;
|
|
border-left: 1px solid #afaeaa;
|
|
border-radius: 0 3px 3px 0;
|
|
display: inline-block;
|
|
margin: 0;
|
|
padding: 5px 10px;
|
|
}
|
|
|
|
.dice-check,
|
|
.dice-yes,
|
|
.dice-no {
|
|
display: none;
|
|
}
|
|
|
|
.dice-check + label i,
|
|
.dice-yes + label i,
|
|
.dice-no + label i {
|
|
vertical-align: 1px;
|
|
}
|
|
|
|
.dice-yes + label i:before,
|
|
.dice-no + label i:before {
|
|
content: "\f096";
|
|
}
|
|
|
|
.dice-check:checked + label i,
|
|
.dice-check:checked + label span,
|
|
.dice-yes:checked + label i,
|
|
.dice-yes:checked + label span {
|
|
background: linear-gradient(60deg, #66bb6a, #43a047);
|
|
border-color: #1b9a1b;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.dice-check + label i,
|
|
.dice-check + label span,
|
|
.dice-no:checked + label i,
|
|
.dice-no:checked + label span {
|
|
background: linear-gradient(60deg, #ef5350, #e53935);
|
|
border-color: #d31141;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.dice-check:checked + label i:before,
|
|
.dice-yes:checked + label i:before { content: "\f00c"; }
|
|
|
|
.dice-check + label i:before,
|
|
.dice-no:checked + label i:before { content: "\f00d"; }
|
|
|
|
.dice-check + label span.dice-check-yes { display: none; }
|
|
.dice-check + label span.dice-check-no { display: inline-block; }
|
|
.dice-check:checked + label span.dice-check-yes { display: inline-block; }
|
|
.dice-check:checked + label span.dice-check-no { display: none; }
|
|
|
|
span.dice-example {
|
|
border-bottom: 1px solid #ff0000;
|
|
position: relative;
|
|
display: inline-block;
|
|
padding: 0 5px;
|
|
}
|
|
|
|
span.dice-example:before,
|
|
span.dice-example:after {
|
|
background: #ff0000;
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 1px;
|
|
height: 50%;
|
|
content: "";
|
|
}
|
|
|
|
span.dice-example:before { left: 0; }
|
|
span.dice-example:after { right: 0; }
|
|
|
|
@media all and (max-height: 480px) {
|
|
.alert_text {
|
|
overflow: auto;
|
|
max-height: 200px;
|
|
}
|
|
|
|
.phpbb_alert {
|
|
height: 240px;
|
|
}
|
|
}
|
|
|
|
@media all and (min-height: 480px) {
|
|
.alert_text {
|
|
overflow: auto;
|
|
max-height: 340px;
|
|
}
|
|
|
|
.phpbb_alert {
|
|
height: 400px;
|
|
}
|
|
}
|
|
|