Extensions
This commit is contained in:
Gauvain Boiché
409
ext/phpbbstudio/dice/adm/style/css/dice_acp.css
Normal file
409
ext/phpbbstudio/dice/adm/style/css/dice_acp.css
Normal file
@@ -0,0 +1,409 @@
|
||||
/**
|
||||
* 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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user