Show sourcecode
The following files exists in this folder. Click to view.
webbserverprogrammering/submissions/projekt-matkort-handler/public/css/
_layout.css
_sidebar.css
_variables.css
style.css
style.css
340 lines UTF-8 Windows (CRLF)
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340
@import url("./_variables.css");
@import url("./_layout.css");
@import url("./_sidebar.css");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*
====================================
GAMLA KOMPONENTER (Låt vara för att undvika "break")
====================================
*/
/* Index layout for map and sidebar */
.index-layout {
display: block;
width: 100%;
position: relative;
}
.map-container {
width: 100%;
min-height: calc(100vh - var(--topbar-height) - 40px);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-soft);
}
#google-map {
width: 100%;
height: 100%;
min-height: calc(100vh - var(--topbar-height) - 40px);
margin: 0;
border: none;
}
/* InfoWindow styles */
.bookmark-icon {
cursor: pointer;
color: #aaa;
transition: color 0.2s;
}
.bookmark-icon.booked {
color: var(--primary);
fill: var(--primary);
}
.bookmark-icon.unbooked {
color: #aaa;
fill: none;
}
/* Sidebar Roulette styles (Slide-in drawer) */
.roulette-sidebar {
position: fixed;
top: calc(var(--topbar-height) + 20px);
right: -450px;
width: 400px;
min-width: 400px;
height: calc(100vh - var(--topbar-height) - 40px);
background: var(--white);
border-radius: var(--radius-lg);
border: none;
padding: 30px;
box-shadow: -5px 0 25px rgba(0, 0, 0, 0.15);
display: flex;
flex-direction: column;
overflow-y: auto; /* Let whole sidebar scroll */
z-index: 9999;
transition: right 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.roulette-sidebar.active {
right: 20px;
}
/* Header config for sidebar so close button fits neatly */
.sidebar-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.sidebar-header h2 {
margin: 0;
color: var(--text-dark);
}
.close-roulette-btn {
background: none;
border: none;
color: var(--text-dark);
cursor: pointer;
padding: 5px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition:
background 0.2s,
color 0.2s;
}
.close-roulette-btn:hover {
background: var(--gray-light);
color: var(--secondary);
}
/* Floating toggle button */
.roulette-toggle-btn {
position: fixed;
top: calc(var(--topbar-height) + 20px);
right: 0;
width: 55px;
height: 50px;
border-radius: 25px 0 0 25px;
background: var(--primary);
color: var(--white);
border: none;
box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
justify-content: center;
padding-left: 5px;
cursor: pointer;
z-index: 9990;
transition:
background 0.2s,
transform 0.2s;
}
.roulette-toggle-btn:hover {
background: var(--secondary);
transform: scale(1.05);
}
.roulette-toggle-btn i,
.roulette-toggle-btn svg {
width: 24px;
height: 24px;
}
@media (max-width: 1024px) {
.roulette-sidebar {
width: calc(100% - 40px);
min-width: unset;
right: -100%;
}
.roulette-sidebar.active {
right: 20px;
}
}
/* Roulette Controls / Inner classes */
.roulette-controls {
margin-bottom: 10px;
display: flex;
flex-direction: column;
gap: 8px;
}
.roulette-controls .btn {
width: 100%;
border-radius: var(--radius-sm);
}
.btn-secondary {
background: var(--gray-light);
color: var(--text-dark);
border: none;
padding: 8px;
cursor: pointer;
transition: background 0.2s;
font-weight: bold;
}
.btn-secondary:hover {
background: #e0e0e0;
}
.btn-danger {
background: var(--secondary);
color: var(--white);
border: none;
padding: 8px;
cursor: pointer;
}
.btn-danger:hover {
background: #b01a47;
}
.btn-primary {
background: var(--primary);
color: var(--white);
border: none;
padding: 12px;
cursor: pointer;
font-size: 1.1rem;
font-weight: bold;
box-shadow: var(--shadow-soft);
}
/* Wheel styles */
.roulette-wheel-container {
position: relative;
width: 240px;
height: 240px;
min-height: 240px !important; /* Force min-height to prevent compression */
margin: 15px auto;
flex: 0 0 240px !important; /* Force no grow, no shrink, fixed basis */
}
.roulette-wheel {
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
box-shadow: var(--shadow-soft);
border: 4px solid var(--primary); /* Changed to primary from white */
transition: transform 3s cubic-bezier(0.25, 0.1, 0.25, 1);
background: var(--bg-color); /* Match roulette js */
display: flex !important; /* Ensure vertical center */
align-items: center;
justify-content: center;
}
.wheel-placeholder {
text-align: center;
color: #888;
font-weight: bold;
width: 100%;
}
.pointer {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
width: 6px;
height: 35px;
background-color: var(--secondary);
border-radius: 3px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.pointer svg {
display: none;
}
.winner-display {
margin-top: 15px;
text-align: center;
padding: 15px;
background: var(--accent);
border: none;
border-radius: var(--radius-sm);
box-shadow: var(--shadow-soft);
}
.winner-display h3,
.winner-display p {
color: var(--text-dark);
margin: 0;
font-weight: 800;
}
.selected-list {
padding-right: 0;
margin-top: 15px;
}
.selected-list h3 {
background: var(--white);
padding: 10px 0;
margin: 0;
}
.selected-list ul {
list-style: none;
padding: 0;
margin: 0;
}
.selected-list li {
display: flex;
justify-content: space-between;
padding: 12px 8px;
border-bottom: 1px solid var(--gray-light);
font-weight: 500;
}
.selected-list li .remove-item {
color: var(--secondary);
cursor: pointer;
font-weight: bold;
border: none;
background: none;
}
.inactive-link {
pointer-events: none;
cursor: not-allowed;
opacity: 0.55;
text-decoration: none;
}
/* Formatting search box */
.search-box {
width: 100%;
position: relative;
display: inline-block;
font-size: 14px;
z-index: 10;
}
.search-box input[type="text"] {
height: 42px;
padding: 5px 15px;
border: 1px solid #e0e0e0;
border-radius: var(--radius-sm);
font-size: 14px;
width: 100%;
}
.search-box input[type="text"]:focus {
outline: 2px solid var(--primary);
border-color: transparent;
}
.result {
position: absolute;
z-index: 999;
top: 100%;
left: 0;
width: 100%;
box-shadow: var(--shadow-soft);
border-radius: var(--radius-sm);
overflow: hidden;
}
.result p {
margin: 0;
padding: 10px 15px;
border-bottom: 1px solid #f4f4f4;
cursor: pointer;
background: var(--white);
font-weight: 500;
}
.result p:hover {
background: var(--bg-color);
color: var(--primary);
}